Merge pull request #450 from fbuchinger/patch-2

simplified jquery mobile example

examples/mobile-jq.js

@@ -3,10 +3,8 @@ window.location.replace(window.location.href.split("#")[0] + "#mappage");
 
 var selectedFeature = null;
 
-$(document).ready(function() {
-
-    // fix height of content
-    function fixContentHeight() {
+// fix height of content
+function fixContentHeight() {
     var footer = $("div[data-role='footer']:visible"),
         content = $("div[data-role='content']:visible:visible"),
         viewHeight = $(window).height(),
@@ -27,36 +25,46 @@ $(document).ready(function() {
         });
         initLayerList();
     }
-    }
-    $(window).bind("orientationchange resize pageshow", fixContentHeight);
-    document.body.onload = fixContentHeight;
+}
 
-    // Map zoom  
-    $("#plus").click(function(){
+// one-time initialisation of button handlers 
+
+$("#plus").live('click', function(){
     map.zoomIn();
-    });
-    $("#minus").click(function(){
+});
+
+$("#minus").live('click', function(){
     map.zoomOut();
-    });
-    $("#locate").click(function(){
+});
+
+$("#locate").live('click',function(){
     var control = map.getControlsBy("id", "locate-control")[0];
     if (control.active) {
         control.getCurrentLocation();
     } else {
         control.activate();
     }
-    });
+});
 
-    $('#popup').live('pageshow',function(event, ui){
+//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){
+$('#searchpage').live('pageshow',function(event, ui){
     $('#query').bind('change', function(e){
         $('#search_results').empty();
         if ($('#query')[0].value === '') {
@@ -94,10 +102,9 @@ $(document).ready(function() {
     });
     // only listen to the first event triggered
     $('#searchpage').die('pageshow', arguments.callee);
-    });
-
 });
 
+
 function initLayerList() {
     $('#layerspage').page();
     $('<li>', {