{"id":45078,"date":"2019-05-27T03:01:02","date_gmt":"2019-05-26T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45078"},"modified":"2019-05-27T22:11:13","modified_gmt":"2019-05-27T12:11:13","slug":"australian-postcode-place-modal-backdrop-popup-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-modal-backdrop-popup-tutorial\/","title":{"rendered":"Australian Postcode Place Modal Backdrop Popup Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Modal Backdrop Popup Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/austpost_nearby.jpg\" title=\"Australian Postcode Place Modal Backdrop Popup Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Modal Backdrop Popup Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Australian Postcode Place Nearby Tutorial' href='#appnt'>Australian Postcode Place Nearby Tutorial<\/a> had us attending to an &#8220;Australian Postcode Nearby&#8221; subset of functionality in terms of the event &#8230;<\/p>\n<ul>\n<li>onmouseover &#8230; or &#8220;on hover&#8221; which programmers out there will know, in &#8220;mobile land&#8221; is about as useful as a screen door on a submarine &#8230; so, today, we attend to some event logic everybody relates to, that being &#8230;<\/li>\n<li>onclick<\/li>\n<\/ul>\n<p> &#8230; and today, for an aesthetic change, we&#8217;re going to show our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>Map Chart<\/a> interfacing functionality in a <a target=_blank title='Modal Backdrop Popup' href='https:\/\/github.com\/twbs\/bootstrap\/issues\/8723'>Modal Backdrop Popup<\/a> &#8220;window&#8221; (ie. not a window as such, but more an HTML nested div that acts like a &#8220;modal&#8221; (has to be attended to) popup).<\/p>\n<p>Consequently, that Javascript <i>nearestto<\/i> function <b>changed as per<\/b> &#8230;<\/p>\n<p><code><br \/>\n    function nearestto(<b>ogset, <\/b>gset) {<br \/>\n       var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;<br \/>\n       var sofar=';', pa='';<br \/>\n       var things=[];<br \/>\n       <b>ourarguments='?title=' + encodeURIComponent('Australian Postcode Places Nearby ' + ogset.innerHTML) + '&onclick=y&label=%5b%27Lat%27,&value=%27Lon%27,%20%27Name%27%5d&data=';<\/b><br \/>\n       if (postcodea.length &gt; 1) {<br \/>\n         this_long=eval(gset.split(' ')[0].split(',')[1]);<br \/>\n         this_lat=eval(gset.split(' ')[0].split(',')[0]);<br \/>\n         for (iou=0; iou&lt;postcodea.length; iou++) {<br \/>\n           this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));<br \/>\n           if (this_diff &lt; 20 && this_diff &gt; 0.00001) {<br \/>\n             sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';<br \/>\n             things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' ~' + lata[iou] + '~' + longa[iou] + '~ near to ' + placea[iou] + ',' + postcodea[iou]);<br \/>\n             if (smallest_diff &lt; 0.0 || eval('' + this_diff) &lt; eval('' + smallest_diff)) {<br \/>\n               smallest_diff=this_diff;<br \/>\n               smallest_num=iou;<br \/>\n             }<br \/>\n             if (largest_diff &lt; 0.0 || eval('' + this_diff) &gt; eval('' + largest_diff)) {<br \/>\n               largest_diff=this_diff;<br \/>\n             }<br \/>\n           <b>} else if (this_diff &lt; 20 && this_diff &lt;= 0.00001) {<br \/>\n             ourarguments+=',%20[' + lata[iou] + ',' + longa[iou] + ',~' + encodeURIComponent(placea[iou] + ',' + postcodea[iou]) + '~]';<\/b><br \/>\n           }<br \/>\n         }<br \/>\n         things.sort();<br \/>\n         outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];<br \/>\n         <b>ourarguments+=',%20[' + lata[smallest_num] + ',' + longa[smallest_num] + ',~' + encodeURIComponent(placea[smallest_num] + ',' + postcodea[smallest_num]) + '~]';<br \/>\n         pa=\"\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" + ourarguments;<\/b><br \/>\n         for (iou=0; iou&lt;=15; iou++) {<br \/>\n           if (things.length &gt; iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {<br \/>\n             outset+=' and near to ' + things[iou].split(' near to ')[1];<br \/>\n             <b>pa+=',%20[' + things[iou].split('~')[1] + ',' + things[iou].split('~')[2] + ',~' + encodeURIComponent(things[iou].split(' near to ')[1]) + '~]';<br \/>\n             if (pa.length &lt; 751) { ourarguments='?' + pa.split('?')[1]; }<\/b><br \/>\n           }<br \/>\n         }<br \/>\n         <b>\/\/ Modal backdrop below ...<br \/>\n         if (ogset.innerHTML != '') {<br \/>\n         ogset.onclick=function() {<br \/>\n           document.getElementById('mypopup').style.display='block';<br \/>\n           document.getElementById('mypopup-inner').style.display='block';<br \/>\n           if (1 == 1) {<br \/>\n           document.getElementById('myiframe').src=\"\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" + ourarguments;<br \/>\n           } else {<br \/>\n           document.getElementById('mypopup-inner').innerHTML='&lt;a title=\"Close\" id=\"alertclose\" class=\"popup-close\" data-popup-close=\"popup-alert\" onclick=\" event.stopPropagation(); document.getElementById(' + \"'\" + 'mypopup' + \"'\" + ').style.display=' + \"'\" + 'none' + \"'\" + ';\" href=\"#\"&gt;&amp;#10060;&lt;\/a&gt;&lt;br&gt;&lt;iframe onclick=\" event.stopPropagation(); \" src=\"\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php' + ourarguments + '\" id=myiframe style=\"width:500px;height:500px;\"&gt;&lt;\/iframe&gt;';<br \/>\n           }<br \/>\n         };<br \/>\n         }<\/b><br \/>\n       }<br \/>\n       return outset;<br \/>\n    }<br \/>\n<\/code> <\/p>\n<p>This type of &#8220;popup&#8221; should not startle the &#8220;popup blocker&#8221; horses on your modern web browsers!<\/p>\n<p>Once again feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php---GETME\" title=\"australia_place_crowfly_distances.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php---GETME\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='appnt'>Previous relevant <a target=_blank title='Australian Postcode Place Nearby Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-nearby-tutorial\/'>Australian Postcode Place Nearby Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Nearby Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/nearto_postcode.jpg\" title=\"Australian Postcode Place Nearby Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Nearby Tutorial<\/p><\/div>\n<p>Back in &#8220;the where of life&#8221; web application wooooooorrrrrllllldd it&#8217;s all fine and good to know &#8220;crowfly distances&#8221; as we did in <a title='Australian Postcode Place Distances Map Chart Tutorial' href='#appdmct'>Australian Postcode Place Distances Map Chart Tutorial<\/a> but that level of mathematics is not everybody&#8217;s cup of tea.  Often we just want to know a &#8230;<\/p>\n<ul>\n<li>nearby<\/li>\n<li>place<\/li>\n<\/ul>\n<p> &#8230; and that is all fine and good using that incredible <a target=_blank title='https:\/\/www.matthewproctor.com\/australian_postcodes' href='\/\/www.matthewproctor.com\/australian_postcodes'>Australian Postcode resource<\/a> we talked about below.<\/p>\n<p>What broad brush steps were done to arrange this information be displayed hovering over an Australian Postcode Place, in addition to ideas of that previous blog post, and its predecessors?<\/p>\n<ul>\n<li>a top priority in all software integration is to first protect whatever already works, and that involved the establishment of a blank &#8221; &#8221; delimitation rule to the &#8220;hovering over text&#8221; &#8230; it used to be <i>latitude,longitude<\/i> and this is separated by &#8220;nearby&#8221; information by a space &#8221; &#8221; character delimitation &#8230; and in any existing Javascript code it is a simple matter of appending &#8230;<br \/>\n<code><br \/>\n.split(\" \")[0]<br \/>\n<\/code><br \/>\n &#8230; onto any Javascript DOM &#8220;.title&#8221; usages (as the <i>title<\/i> attribute is what is displayed when hovering)<\/li>\n<li>add global arrays &#8230;<br \/>\n <code><br \/>\n    var postcodea=[];<br \/>\n    var placea=[];<br \/>\n    var lata=[];<br \/>\n    var longa=[];<br \/>\n <\/code><\/p>\n<li>at document.body <i>onload event<\/i> arrange to have &#8230;<br \/>\n <code><br \/>\n     function fillcomparray(dataarr) {<br \/>\n      var fldsa, ij, jk, cdelim='', thisplace='', lm=-1, xpc='';<br \/>\n      for (ij=1; ij&lt;dataarr.length; ij++) {<br \/>\n       if ((dataarr[ij] + ' ').substring(0,1) &gt;= '0' && (dataarr[ij] + ' ').substring(0,1) &lt;= '9') {<br \/>\n        fldsa=dataarr[ij].split(',');<br \/>\n        \/\/postcodea.push(fldsa[0]);<br \/>\n        xpc=fldsa[0];<br \/>\n        cdelim='';<br \/>\n        thisplace='';<br \/>\n        lm=-1;<br \/>\n        for (jk=1; jk&lt;fldsa.length; jk++) {<br \/>\n          if ((fldsa[jk] + ' ').substring(0,1) == '-' || ((fldsa[jk] + ' ').substring(0,1) &gt;= '0' && (fldsa[jk] + ' ').substring(0,1) &lt;= '9')) { if (lm &lt; 0) { lm=jk; } }<br \/>\n          if (lm == -1) {<br \/>\n            thisplace+=cdelim + fldsa[jk];<br \/>\n            cdelim=',';<br \/>\n          }<br \/>\n        }<br \/>\n        if (fldsa[lm].match(\/^[0-9-.]*$\/) && fldsa[eval(1 + eval('' + lm))].match(\/^[0-9-.]*$\/)) {<br \/>\n        postcodea.push(xpc);<br \/>\n        placea.push(thisplace);<br \/>\n        longa.push(fldsa[lm]);<br \/>\n        lm++;<br \/>\n        lata.push(fldsa[lm]);<br \/>\n        }<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><br \/>\n &#8230; populate those global arrays &#8230; ready for user places of interest to trigger &#8230;\n <\/li>\n<li><i>onblur<\/i> logic that when determining a &#8220;.title&#8221; attribute, <b>now does<\/b> &#8230;<br \/>\n <code><br \/>\n        document.getElementById('setofthree_' + eval(-1 + setofthree) + '_01').title=<b>nearestto(<\/b>findit[jj].split(',')[eval(4 - indivo.innerHTML.split(',').length)] + ',' + findit[jj].split(',')[eval(3 - indivo.innerHTML.split(',').length)]<b>)<\/b>;<br \/>\n <\/code><br \/>\n  &#8230; and within that new Javascript function &#8230;<\/li>\n<li>Javascript array <a target=_blank title='Javascript sort method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_sort.asp'>sort<\/a>() method becomes a useful intervention <b>as per<\/b> &#8230;<br \/>\n<code><br \/>\n    function nearestto(gset) {<br \/>\n       var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;<br \/>\n       var sofar=';';<br \/>\n       var things=[];<br \/>\n       if (postcodea.length &gt; 1) {<br \/>\n         this_long=eval(gset.split(' ')[0].split(',')[1]);<br \/>\n         this_lat=eval(gset.split(' ')[0].split(',')[0]);<br \/>\n         for (iou=0; iou&lt;postcodea.length; iou++) {<br \/>\n           this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));<br \/>\n           if (this_diff &lt; 20 && this_diff &gt; 0.00001) {<br \/>\n             sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';<br \/>\n             things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' near to ' + placea[iou] + ',' + postcodea[iou]);<br \/>\n             if (smallest_diff &lt; 0.0 || eval('' + this_diff) &lt; eval('' + smallest_diff)) {<br \/>\n               smallest_diff=this_diff;<br \/>\n               smallest_num=iou;<br \/>\n             }<br \/>\n             if (largest_diff &lt; 0.0 || eval('' + this_diff) &gt; eval('' + largest_diff)) {<br \/>\n               largest_diff=this_diff;<br \/>\n             }<br \/>\n           }<br \/>\n         }<br \/>\n         <b>things.sort();<\/b><br \/>\n         outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];<br \/>\n         for (iou=0; iou&lt;=15; iou++) {<br \/>\n           if (things.length &gt; iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {<br \/>\n             outset+=' and near to ' + things[iou].split(' near to ')[1];<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n       return outset;<br \/>\n    }<br \/>\n<\/code><br \/>\n &#8230; which does the job of appending 15 or so nearby Australian Postcode Places to the user entered one and displayed as the user hovers over information\n<\/li>\n<\/ul>\n<p>Feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php--GETME\" title=\"australia_place_crowfly_distances.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php--GETME\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='appdmct'>Previous relevant <a target=_blank title='Australian Postcode Place Distances Map Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-distances-map-chart-tutorial\/'>Australian Postcode Place Distances Map Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Distances Map Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australiaplacecrowflydistances.jpg\" title=\"Australian Postcode Place Distances Map Chart Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Distances Map Chart Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s &#8220;where of life&#8221; themed <a title='Australian Postcode Place Distances Primer Tutorial' href='#appdpt'>Australian Postcode Place Distances Primer Tutorial<\/a> lacked something  &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>? &#8230; yes, <a target=_blank title='Anaximander information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Anaximander'>Anaximander<\/a> &#8230; a map <font size=1>&#8230; and you&#8217;d like to swap my horse for one<\/font> <font size=2>&#8230; well okay, there&#8217;s one called Ed out the back<\/font> &#8230; but we digress.<\/p>\n<p>Queue the great <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>Map Chart<\/a> (which can transition very easily to <a target=_blank title='Google Chart Map Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a>, where &#8220;from&#8221; to &#8220;to&#8221; lines are drawn) and which can be called in an HTML iframe element to add that visual interest to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-GETME\" title=\"australia_place_crowfly_distances.php\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-GETME\">australia_place_crowfly_distances.php<\/a>&#8216;s  <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>There isn&#8217;t anything much better than a map to trip plan, or study geography, in our books <font size=1>&#8230; but alas we ran out of pamphlettes today &#8230; sorrrrrrryyyyyy<\/font>.<\/p>\n<hr>\n<p id='appdpt'>Previous relevant <a target=_blank title='Australian Postcode Place Distances Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-distances-primer-tutorial\/'>Australian Postcode Place Distances Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Distances Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.jpg\" title=\"Australian Postcode Place Distances Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Distances Primer Tutorial<\/p><\/div>\n<p>It&#8217;s time to return to a &#8220;where of life&#8221; web application tutorial.  Why?  No, &#8220;where&#8221;.  Who&#8217;s <a target=_blank title=\"?\" href='https:\/\/www.youtube.com\/watch?v=RatKhtboq2E'>on second<\/a>.  But, seriously, the reason is that we found a great <a target=_blank title='https:\/\/www.matthewproctor.com\/australian_postcodes' href='\/\/www.matthewproctor.com\/australian_postcodes'>Australian Postcode resource<\/a> for geodata lookups of these Australian placenames or postcodes &#8230; thanks.<\/p>\n<p>Combine this &#8230;<\/p>\n<ul>\n<li>Australian postcode (or placename) latitude and longitude &#8230; with &#8230;<\/li>\n<li>another Australian postcode (or placename) latitude and longitude &#8230; and we can &#8230;<\/li>\n<li>show the user a great circle distance between the two places &#8230; as well as a link to &#8230;<\/li>\n<li><a target=_blank title='Google Maps Directions' href='http:\/\/www.google.com\/maps\/dir\/'>Google Maps Directions<\/a> map between the two places &#8230; and there you can imagine we have a bit of a &#8230;<\/li>\n<li>trip planner<\/li>\n<\/ul>\n<p> &#8230; on our hands.<\/p>\n<p>We can add our own client <b>geographical position<\/b> into the mix via &#8230;<\/p>\n<p><code><br \/>\n    function getLocation() {<br \/>\n      if (navigator.geolocation) {<br \/>\n       try {<br \/>\n        <b><a target=_blank title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation\/getCurrentPosition' href='http:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation\/getCurrentPosition'>navigator.geolocation.getCurrentPosition<\/a>(showPosition);<\/b><br \/>\n        setTimeout(later, 2000);<br \/>\n        } catch(err) {<br \/>\n        setTimeout(later, 2000);<br \/>\n        }<br \/>\n      } else {<br \/>\n        document.getElementById('you').innerHTML='(0,0)';<br \/>\n        if (document.getElementById('inlat') && document.getElementById('inlong')) {<br \/>\n          document.getElementById('inlat').value=userlatitude;<br \/>\n          document.getElementById('inlong').value=userlongitude;<br \/>\n        }<br \/>\n        if (document.getElementById('ipostcode')) {<br \/>\n          document.getElementById('ipostcode').click();<br \/>\n          newthree();<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n <br \/> <br \/>\n    function showPosition(position) {<br \/>\n      if (userlatitude == 0.0 && userlongitude == 0.0) {<br \/>\n        userlatitude=eval('' + position.coords.latitude);<br \/>\n        userlongitude=eval('' + position.coords.longitude);<br \/>\n        if (document.getElementById('inlat') && document.getElementById('inlong')) {<br \/>\n          document.getElementById('inlat').value=userlatitude;<br \/>\n          document.getElementById('inlong').value=userlongitude;<br \/>\n        }<br \/>\n        if (document.getElementById('ipostcode')) {<br \/>\n          document.getElementById('ipostcode').click();<br \/>\n          newthree();<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; that you can see involved in the PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php_GETME\" title=\"australia_place_crowfly_distances.php\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\">live run<\/a> link, for your perusal.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d44578' onclick='var dv=document.getElementById(\"d44578\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geographicals\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44578' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d44593' onclick='var dv=document.getElementById(\"d44593\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44593' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45059' onclick='var dv=document.getElementById(\"d45059\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sort\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45059' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45078' onclick='var dv=document.getElementById(\"d45078\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/popup\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45078' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Australian Postcode Place Nearby Tutorial had us attending to an &#8220;Australian Postcode Nearby&#8221; subset of functionality in terms of the event &#8230; onmouseover &#8230; or &#8220;on hover&#8221; which programmers out there will know, in &#8220;mobile land&#8221; is about as &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-modal-backdrop-popup-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[103,114,1727,471,481,518,652,2126,1553,2080,2967,2966,860,870,967,2919,997,1173,1319,2580,1583],"class_list":["post-45078","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-array","tag-australia","tag-distance","tag-function","tag-geographicals","tag-google-chart","tag-javascript","tag-map-chart","tag-mathematice","tag-modal","tag-modal-backdrop","tag-nearby","tag-onblur","tag-onload","tag-popup","tag-postcode","tag-programming","tag-sort","tag-tutorial","tag-where","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45078"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=45078"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45078\/revisions"}],"predecessor-version":[{"id":45086,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45078\/revisions\/45086"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}