diff --git a/examples/mobile-jq.js b/examples/mobile-jq.js index 1f61582573..7e487cdfb6 100644 --- a/examples/mobile-jq.js +++ b/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(); - - if ((content.outerHeight() + footer.outerHeight()) !== viewHeight) { - contentHeight -= (content.outerHeight() - content.height() + 1); - content.height(contentHeight); - } +// 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(); - if (window.map && window.map instanceof OpenLayers.Map) { - map.updateSize(); - } else { - // initialize map - init(function(feature) { - selectedFeature = feature; - $.mobile.changePage("#popup", "pop"); - }); - initLayerList(); - } + if ((content.outerHeight() + footer.outerHeight()) !== viewHeight) { + contentHeight -= (content.outerHeight() - content.height() + 1); + content.height(contentHeight); } - $(window).bind("orientationchange resize pageshow", fixContentHeight); - document.body.onload = fixContentHeight; - // Map zoom - $("#plus").click(function(){ - map.zoomIn(); - }); - $("#minus").click(function(){ - map.zoomOut(); - }); - $("#locate").click(function(){ - var control = map.getControlsBy("id", "locate-control")[0]; - if (control.active) { - control.getCurrentLocation(); - } else { - control.activate(); - } - }); + if (window.map && window.map instanceof OpenLayers.Map) { + map.updateSize(); + } else { + // initialize map + init(function(feature) { + selectedFeature = feature; + $.mobile.changePage("#popup", "pop"); + }); + initLayerList(); + } +} + +// 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(); +}); - $('#popup').live('pageshow',function(event, ui){ - var li = ""; - for(var attr in selectedFeature.attributes){ - li += "
  • " + attr + "
    " - + selectedFeature.attributes[attr] + "
  • "; +$(window).bind("orientationchange resize pageshow", fixContentHeight); + + + +$('#popup').live('pageshow',function(event, ui){ + var li = ""; + for(var attr in selectedFeature.attributes){ + li += "
  • " + attr + "
    " + + selectedFeature.attributes[attr] + "
  • "; + } + $("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; } - $("ul#details-list").empty().append(li).listview("refresh"); - }); + $.mobile.showPageLoadingMsg(); - $('#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; - $('
  • ') - .hide() - .append($('

    ', { - text: place.name - })) - .append($('

    ', { - html: '' + place.countryName + ' ' + 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(); + // 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; + $('

  • ') + .hide() + .append($('

    ', { + text: place.name + })) + .append($('

    ', { + html: '' + place.countryName + ' ' + 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); }); - + // only listen to the first event triggered + $('#searchpage').die('pageshow', arguments.callee); }); + function initLayerList() { $('#layerspage').page(); $('

  • ', {