Jquery Mobile 1.2 Base

by mrfunnel

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div id="mapPage" data-role="page" >
    <div data-role="header">
        <a href="#menuPage" data-theme="b" data-icon="home" data-rel="back" >Home</a> 
        <h1>Map</h1> 
        <a href="#mapMenuPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-theme="a" data-icon="compass" class="ui-btn-right">Options</a> 
    </div>
    <div data-role="content">
        <div id="mapDiv">
            <img src="https://maps.googleapis.com/maps/api/staticmap?center=Durban, South Africa&amp;zoom=4&amp;size=600x600&amp;markers=Madison, WI&amp;sensor=false" height="600" width="600" />
        </div>
    </div>

    <div data-role="popup" id="mapMenuPanel" data-corners="false" data-theme="c" data-shadow="false" data-tolerance="0,0">
        
            <h4>Options</h4>
            <label for="flip-min">Geolocation:</label>
            <select name="flip-min" id="flip-min" data-role="slider">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>

    </div>
    
</div>

CSS

#mapPage .ui-content {
    padding: 0;
}

#mapDiv {
    width: 100%;
    height: 100%;
    background-color: #FF00BFFF;
}

#mapMenuPanel-popup {
    right: 0 !important;
    left: auto !important;
}

#mapMenuPanel {
    width: 200px;
    border: 1px solid #000;
    border-right: none;
    background: rgba(255,255,255,.85);
    margin: -1px 0;
    padding: 0 5px 20px 15px;
}

JavaScript

$(document).on("pageinit", '#mapPage', function(event, ui) {
    // Sort out the menu popup height
    $("#mapMenuPanel").on({
        popupbeforeposition: function () {
            var h = $(window).height();
            // Todo: Make this generic to include margin and padding
            $("#mapMenuPanel").css("height", h-21);
        }
    });
});

$(document).on('pageshow', '#mapPage', function () {
    // Bind the resize event on this page to window to fix content height
    $(window).bind('resize.fixsize', fixSize).trigger('resize.fixsize');
});

$(document).on('pagehide', '#mapPage', function() {
    // Unbind the window.resize event so as not to fuck with other pages
    $(window).unbind('.fixsize');
});

/* ======================================================================
    functions
   ====================================================================== */
// Automatically resize the content div
// These pages mush have a header and fixed footer
var fixSize = function() {
    var contentHeight = $.mobile.activePage.children('[data-role="content"]').height(),
        headerHeight = $.mobile.activePage.children('[data-role="header"]').outerHeight(),
        footerHeight = $.mobile.activePage.children('[data-role="footer"]').outerHeight(),
        targetHeight = $(window).height() - headerHeight - footerHeight;

    if (contentHeight != (targetHeight)) {
        $.mobile.activePage.children('[data-role="content"]').height(targetHeight);
    }

    if (window.map && window.map instanceof OpenLayers.Map) {
        map.updateSize();
    }
};