snipplrCallback({"id":51140,"title":"jquery-mobile-on-the-playbook-webworks-sdk","source":"
  1. <!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN"<\/span><\/div><\/li>
  2.  "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"><\/span><\/div><\/li>
  3. <html<\/span><\/a> xmlns=<\/span>"http:\/\/www.w3.org\/1999\/xhtml"<\/span>><\/span><\/div><\/li>
  4. <head<\/span><\/a>><\/span><\/div><\/li>
  5. <meta<\/span><\/a> http-equiv<\/span>=<\/span>"Content-Type"<\/span> content<\/span>=<\/span>"text\/html; charset=UTF-8"<\/span> \/<\/span>><\/span><\/div><\/li>
  6. <title<\/span><\/a>><\/span>Landmark Finder<\/<\/span>title<\/span><\/a>><\/span><\/div><\/li>
  7. <link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"jquery.mobile-1.0a3.min.css"<\/span> \/<\/span>><\/span><\/div><\/li>
  8. <script<\/span><\/a> src<\/span>=<\/span>"jquery-1.5.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/div><\/li>
  9. <script<\/span><\/a> src<\/span>=<\/span>"jquery.mobile-1.0a3.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/div><\/li>
  10. <script<\/span><\/a> type<\/span>=<\/span>"application\/javascript"<\/span>><\/span><\/div><\/li>
  11. $(document).ready(function(){<\/div><\/li>
  12. \t\/\/ Add a click listener on the button to get the location data<\/div><\/li>
  13. \t$('#getLocation').click(function(){<\/div><\/li>
  14. \t\tif (navigator.geolocation) {<\/div><\/li>
  15. \t\t\tnavigator.geolocation.getCurrentPosition(onSuccess, onError);<\/div><\/li>
  16. \t\t} else {<\/div><\/li>
  17. \t\t\t\/\/ If location is not supported on this platform, disable it<\/div><\/li>
  18. \t\t\t$('#getLocation').value = "Geolocation not supported";<\/div><\/li>
  19. \t\t\t$('#getLocation').unbind('click');<\/div><\/li>
  20. \t\t}\t\t<\/div><\/li>
  21. \t});<\/div><\/li>
  22. });<\/div><\/li>
  23.  <\/div><\/li>
  24. \/\/ create the geonames namespace for calling the API<\/div><\/li>
  25. var geonames = {};<\/div><\/li>
  26. \tgeonames.baseURL = "http:\/\/ws.geonames.org\/";<\/div><\/li>
  27. \tgeonames.method = "findNearbyWikipediaJSON";<\/div><\/li>
  28. \tgeonames.search = function(lat,lng){<\/div><\/li>
  29.  <\/div><\/li>
  30. \t\/\/ get the data in JSON format from Geonames<\/div><\/li>
  31. \t$.getJSON(geonames.baseURL + geonames.method + '?formatted=true&lat=' + lat + <\/span><\/div><\/li>
  32. '&lng=' + lng + '&style=full&radius=10&maxRows=25&username=ryanstewart',function(data){<\/span><\/div><\/li>
  33.  <\/div><\/li>
  34. \t\t\/\/ Loop through each item in the result and add it to the DOM<\/span><\/div><\/li>
  35. \t\t$.each(data.geonames, function() {<\/span><\/div><\/li>
  36. \t\t\t$('<li><\/li>')<\/span><\/div><\/li>
  37. \t\t\t.hide()<\/span><\/div><\/li>
  38. \t\t\t.append('<a href="http:\/\/'+this.wikipediaUrl+'"><\/span><\/div><\/li>
  39. <h2>'+this.title+'<\/h2><\/a><br \/><p>'+ this.summary + '<\/p><span class="ui-li-aside"><\/span><\/div><\/li>
  40. <h5>'+this.distance+' (km)<\/h5><\/span>')<\/span><\/div><\/li>
  41. \t\t\t.appendTo('#wikiList')<\/span><\/div><\/li>
  42. \t\t\t.show();<\/span><\/div><\/li>
  43. \t\t});<\/div><\/li>
  44. \t\t\/\/ Once the data is added to the DOM, make the transition<\/div><\/li>
  45. \t\t$.mobile.changePage('#dashboard',"slide",false,true);<\/div><\/li>
  46.  <\/div><\/li>
  47. \t\t\/\/ refresh the list to make sure the theme applies properly<\/div><\/li>
  48. \t\t$('#wikiList').listview('refresh');<\/div><\/li>
  49.  <\/div><\/li>
  50.  <\/div><\/li>
  51. \t});<\/div><\/li>
  52. };<\/div><\/li>
  53.  <\/div><\/li>
  54. \/\/ Success function for Geolocation call<\/div><\/li>
  55. function onSuccess(position)<\/div><\/li>
  56. {<\/div><\/li>
  57. \talert('getting position');<\/div><\/li>
  58. \tgeonames.search(position.coords.latitude,position.coords.longitude);<\/div><\/li>
  59. }<\/div><\/li>
  60.  <\/div><\/li>
  61. \/\/ Error function for Geolocation call<\/div><\/li>
  62. function onError(msg)<\/div><\/li>
  63. {<\/div><\/li>
  64. \tgeonames.search(47.667622,-122.384946);<\/div><\/li>
  65. }<\/div><\/li>
  66.  <\/div><\/li>
  67. <\/<\/span>script<\/span><\/a>><\/span><\/div><\/li>
  68. <\/<\/span>head<\/span><\/a>><\/span><\/div><\/li>
  69.  <\/div><\/li>
  70. <body<\/span><\/a>><\/span><\/div><\/li>
  71. <div<\/span><\/a> data-role=<\/span>"page"<\/span>><\/span><\/div><\/li>
  72. \t<div<\/span><\/a> data-role=<\/span>"header"<\/span>><\/span><\/div><\/li>
  73.     \t<h1<\/span><\/a>><\/span>Find Location<\/<\/span>h1<\/span><\/a>><\/span><\/div><\/li>
  74. \t<\/<\/span>div<\/span><\/a>><\/span><\/div><\/li>
  75.     <div<\/span><\/a> data-role=<\/span>"content"<\/span>><\/span><\/div><\/li>
  76.         <p<\/span><\/a>><\/span>This application will use the <a<\/span><\/a> href<\/span>=<\/span>"http:\/\/geonames.org"<\/span>><\/span>Geonames<\/<\/span>a<\/span><\/a>><\/span> API and <\/div><\/li>
  77. your location to bring back a list of Wikipedia articles about features that are near you. <\/div><\/li>
  78. To get started, click the button below and allow the application to read your geolocation <\/div><\/li>
  79. information.<\/<\/span>p<\/span><\/a>><\/span><\/div><\/li>
  80.         <input<\/span><\/a> type<\/span>=<\/span>"button"<\/span> value<\/span>=<\/span>"Get My Location"<\/span> id<\/span>=<\/span>"getLocation"<\/span> \/<\/span>><\/span><\/div><\/li>
  81.     <\/<\/span>div<\/span><\/a>><\/span><\/div><\/li>
  82.     <div<\/span><\/a> data-role=<\/span>"footer"<\/span>><\/span><\/div><\/li>
  83.     \t<h4<\/span><\/a>><\/span>By <a<\/span><\/a> href<\/span>=<\/span>"http:\/\/blog.digitalbackcountry.com"<\/span>><\/span>Ryan Stewart<\/<\/span>a<\/span><\/a>><\/<\/span>h4<\/span><\/a>><\/span><\/div><\/li>
  84.     <\/<\/span>div<\/span><\/a>><\/span><\/div><\/li>
  85. <\/<\/span>div<\/span><\/a>><\/span><\/div><\/li>
  86. <div<\/span><\/a> data-role=<\/span>"page"<\/span> id<\/span>=<\/span>"dashboard"<\/span>><\/span><\/div><\/li>
  87. \t<div<\/span><\/a> data-role=<\/span>"header"<\/span>><\/span><\/div><\/li>
  88.     \t<h1<\/span><\/a>><\/span>Data List<\/<\/span>h1<\/span><\/a>><\/span><\/div><\/li>
  89.     <\/<\/span>div<\/span><\/a>><\/span><\/div><\/li>
  90.     <div<\/span><\/a> data-role=<\/span>"content"<\/span>><\/span><\/div><\/li>
  91.     \t<ul<\/span><\/a> id<\/span>=<\/span>"wikiList"<\/span> data-role=<\/span>"listview"<\/span> data-theme=<\/span>"c"<\/span>><\/span><\/div><\/li>
  92.         <\/<\/span>ul<\/span><\/a>><\/span><\/div><\/li>
  93.     <\/<\/span>div<\/span><\/a>><\/span><\/div><\/li>
  94.     <div<\/span><\/a> data-role=<\/span>"footer"<\/span>><\/span><\/div><\/li>
  95.     \t<h4<\/span><\/a>><\/span>By <a<\/span><\/a> href<\/span>=<\/span>"http:\/\/blog.digitalbackcountry.com"<\/span>><\/span>Ryan Stewart<\/<\/span>a<\/span><\/a>><\/<\/span>h4<\/span><\/a>><\/span><\/div><\/li>
  96.     <\/<\/span>div<\/span><\/a>><\/span><\/div><\/li>
  97. <\/<\/span>div<\/span><\/a>><\/span><\/div><\/li>
  98. <\/<\/span>body<\/span><\/a>><\/span><\/div><\/li>
  99. <\/<\/span>html<\/span><\/a>><\/span><\/div><\/li><\/ol><\/pre>","link":"https:\/\/snipplr.com\/view\/51140\/jquery-mobile-on-the-playbook-webworks-sdk"});