Merge pull request #450 from fbuchinger/patch-2

simplified jquery mobile example

examples/mobile-jq.js

@@ -3,101 +3,108 @@ window.location.replace(window.location.href.split("#")[0] + "#mappage");
 
 var selectedFeature = null;
 
-$(document).ready(function() {
+// fix height of content
+function fixContentHeight() {
+    var footer = $("div[data-role='footer']:visible"),
+        content = $("div[data-role='content']:visible:visible"),
+        viewHeight = $(window).height(),
+        contentHeight = viewHeight - footer.outerHeight();
 
-    // fix height of content
+    if ((content.outerHeight() + footer.outerHeight()) !== viewHeight) {
-    function fixContentHeight() {
+        contentHeight -= (content.outerHeight() - content.height() + 1);
-        var footer = $("div[data-role='footer']:visible"),
+        content.height(contentHeight);
-            content = $("div[data-role='content']:visible:visible"),
-            viewHeight = $(window).height(),
-            contentHeight = viewHeight - footer.outerHeight();
-
-        if ((content.outerHeight() + footer.outerHeight()) !== viewHeight) {
-            contentHeight -= (content.outerHeight() - content.height() + 1);
-            content.height(contentHeight);
-        }
-
-        if (window.map && window.map instanceof OpenLayers.Map) {
-            map.updateSize();
-        } else {
-            // initialize map
-            init(function(feature) { 
-                selectedFeature = feature; 
-                $.mobile.changePage("#popup", "pop"); 
-            });
-            initLayerList();
-        }
     }
-    $(window).bind("orientationchange resize pageshow", fixContentHeight);
-    document.body.onload = fixContentHeight;
 
-    // Map zoom  
+    if (window.map && window.map instanceof OpenLayers.Map) {
-    $("#plus").click(function(){
+        map.updateSize();
-        map.zoomIn();
+    } else {
-    });
+        // initialize map
-    $("#minus").click(function(){
+        init(function(feature) { 
-        map.zoomOut();
+            selectedFeature = feature; 
-    });
+            $.mobile.changePage("#popup", "pop"); 
-    $("#locate").click(function(){
-        var control = map.getControlsBy("id", "locate-control")[0];
-        if (control.active) {
-            control.getCurrentLocation();
-        } else {
-            control.activate();
-        }
-    });
-    
-    $('#popup').live('pageshow',function(event, ui){
-        var li = "";
-        for(var attr in selectedFeature.attributes){
-            li += "<li><div style='width:25%;float:left'>" + attr + "</div><div style='width:75%;float:right'>" 
-            + selectedFeature.attributes[attr] + "</div></li>";
-        }
-        $("ul#details-list").empty().append(li).listview("refresh");
-    });
-
-    $('#searchpage').live('pageshow',function(event, ui){
-        $('#query').bind('change', function(e){
-            $('#search_results').empty();
-            if ($('#query')[0].value === '') {
-                return;
-            }
-            $.mobile.showPageLoadingMsg();
-
-            // Prevent form send
-            e.preventDefault();
-
-            var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10';
-            searchUrl += '&name_startsWith=' + $('#query')[0].value;
-            $.getJSON(searchUrl, function(data) {
-                $.each(data.geonames, function() {
-                    var place = this;
-                    $('<li>')
-                        .hide()
-                        .append($('<h2 />', {
-                            text: place.name
-                        }))
-                        .append($('<p />', {
-                            html: '<b>' + place.countryName + '</b> ' + place.fcodeName
-                        }))
-                        .appendTo('#search_results')
-                        .click(function() {
-                            $.mobile.changePage('#mappage');
-                            var lonlat = new OpenLayers.LonLat(place.lng, place.lat);
-                            map.setCenter(lonlat.transform(gg, sm), 10);
-                        })
-                        .show();
-                });
-                $('#search_results').listview('refresh');
-                $.mobile.hidePageLoadingMsg();
-            });
         });
-        // only listen to the first event triggered
+        initLayerList();
-        $('#searchpage').die('pageshow', arguments.callee);
+    }
-    });
+}
 
+// one-time initialisation of button handlers 
+
+$("#plus").live('click', function(){
+    map.zoomIn();
 });
 
+$("#minus").live('click', function(){
+    map.zoomOut();
+});
+
+$("#locate").live('click',function(){
+    var control = map.getControlsBy("id", "locate-control")[0];
+    if (control.active) {
+        control.getCurrentLocation();
+    } else {
+        control.activate();
+    }
+});
+
+//fix the content height AFTER jQuery Mobile has rendered the map page
+$('#mappage').live('pageshow',function (){
+    fixContentHeight();
+});
+    
+$(window).bind("orientationchange resize pageshow", fixContentHeight);
+
+
+
+$('#popup').live('pageshow',function(event, ui){
+    var li = "";
+    for(var attr in selectedFeature.attributes){
+        li += "<li><div style='width:25%;float:left'>" + attr + "</div><div style='width:75%;float:right'>" 
+        + selectedFeature.attributes[attr] + "</div></li>";
+    }
+    $("ul#details-list").empty().append(li).listview("refresh");
+});
+
+$('#searchpage').live('pageshow',function(event, ui){
+    $('#query').bind('change', function(e){
+        $('#search_results').empty();
+        if ($('#query')[0].value === '') {
+            return;
+        }
+        $.mobile.showPageLoadingMsg();
+
+        // Prevent form send
+        e.preventDefault();
+
+        var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10';
+        searchUrl += '&name_startsWith=' + $('#query')[0].value;
+        $.getJSON(searchUrl, function(data) {
+            $.each(data.geonames, function() {
+                var place = this;
+                $('<li>')
+                    .hide()
+                    .append($('<h2 />', {
+                        text: place.name
+                    }))
+                    .append($('<p />', {
+                        html: '<b>' + place.countryName + '</b> ' + place.fcodeName
+                    }))
+                    .appendTo('#search_results')
+                    .click(function() {
+                        $.mobile.changePage('#mappage');
+                        var lonlat = new OpenLayers.LonLat(place.lng, place.lat);
+                        map.setCenter(lonlat.transform(gg, sm), 10);
+                    })
+                    .show();
+            });
+            $('#search_results').listview('refresh');
+            $.mobile.hidePageLoadingMsg();
+        });
+    });
+    // only listen to the first event triggered
+    $('#searchpage').die('pageshow', arguments.callee);
+});
+
+
 function initLayerList() {
     $('#layerspage').page();
     $('<li>', {