{"id":52576,"date":"2021-06-25T03:01:23","date_gmt":"2021-06-24T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52576"},"modified":"2021-06-24T18:41:22","modified_gmt":"2021-06-24T08:41:22","slug":"other-side-of-the-world-reworked-dropdowns-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-reworked-dropdowns-tutorial\/","title":{"rendered":"Other Side of the World Reworked Dropdowns Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Other Side of the World Reworked Dropdowns Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/other_side_of_the_world_dropdowns.jpg\" title=\"Other Side of the World Reworked Dropdowns Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Other Side of the World Reworked Dropdowns Tutorial<\/p><\/div>\n<p>Continuing on from <a title='Other Side of the World Reworked Logic Tutorial' href='#oswrlt'>Other Side of the World Reworked Logic Tutorial<\/a>&#8216;s first rearrangements at the lack of access to a weather (and its associated placename) API database we turn to that top dropdown (ie. HTML select element), with its &#8230;<\/p>\n<ul>\n<li>hour of day (ie. pointing at a timezone)<\/li>\n<li>country<\/li>\n<\/ul>\n<p> &#8230; options, and try to make it easier for the user to populate those latitude and longitude fields, then on to other map and video information, data flows.<\/p>\n<p>These changes, amongst other things, calls on HTML iframe <font color=blue>onload usage<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe <font color=blue>onload=\"gountil(this);\"<\/font> id=\"irandoms\" src=\"\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title=\"Randoms\" style=\"display:none;\"&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and associated Javascript &#8230;<\/p>\n<p><code><br \/>\n function srandoms() {<br \/>\n   if (lokf == lastlokf.trim() && lokf != '') {<br \/>\n     document.getElementById('irandoms').src=document.getElementById('irandoms').src.split('?')[0] + '?rand=' + Math.floor(Math.random() * 198765432);<br \/>\n   }<br \/>\n }<br \/>\n <br \/>\n function gountil(iois) {<br \/>\n   if (iois != null) {<br \/>\n     aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n     if (aconto != null) {<br \/>\n      if (aconto.document) { aconto = aconto.document; }<br \/>\n      if (aconto.body != null) {<br \/>\n       if (lokf != '') {<br \/>\n         if (aconto.body.innerHTML.indexOf(lokf) == -1) {<br \/>\n           setTimeout(srandoms, 5000); \/\/iois.src=iois.src.split('?')[0] + '?rand=' + Math.floor(Math.random() * 198765432);<br \/>\n         } else if (aconto.body.innerHTML.indexOf(': ') != -1) {<br \/>\n           document.getElementById('place').value=decodeURIComponent(aconto.body.innerHTML.split(lokf)[1].split(': ')[0].split('&')[0]).trim().split(',')[0]; \/\/      .split('max-width')[1].split('&lt;\/td&gt;')[0].replace(\/\\&nbsp\\;\/g,' ').replace(\/\\:\/g,' ').trim().split(' ')[eval(-1 + aconto.body.innerHTML.split('max-width')[1].split('&lt;\/td&gt;')[0].replace(\/\\&nbsp\\;\/g,' ').replace(\/\\:\/g,' ').trim().split(' ').length)].split(',')[0];<br \/>\n           totalmore();<br \/>\n           ourprewbit();<br \/>\n           setTimeout(sfromit, 4000);<br \/>\n         }<br \/>\n       }<br \/>\n      }<br \/>\n     }<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; and associated emoji country flag (via ISO 2 character country code, off the dropdown) Javascript logic &#8230;<\/p>\n<p><code><br \/>\nvar lokf='', lastlokf='';<br \/>\n<br \/>\nif (!String.fromCodePoint) {   \/\/ thanks to <a target=_blank title=Thanks href='http:\/\/xahlee.info\/js\/js_unicode_code_point.html'>http:\/\/xahlee.info\/js\/js_unicode_code_point.html<\/a><br \/>\n\/\/ ES6 Unicode Shims 0.1 , \u00a9 2012 Steven Levithan , MIT License<br \/>\n    String.fromCodePoint = function fromCodePoint () {<br \/>\n        var chars = [], point, offset, units, i;<br \/>\n        for (i = 0; i &lt; arguments.length; ++i) {<br \/>\n            point = arguments[i];<br \/>\n            offset = point - 0x10000;<br \/>\n            units = point &gt; 0xFFFF ? [0xD800 + (offset &gt;&gt; 10), 0xDC00 + (offset & 0x3FF)] : [point];<br \/>\n            chars.push(String.fromCharCode.apply(null, units));<br \/>\n        }<br \/>\n        return chars.join(\"\");<br \/>\n    }<br \/>\n}<br \/>\n<br \/>\nfunction worflag(thiscc) {<br \/>\n      var ccchar=\"\", ccsuff=\"\";<br \/>\n      var lri=\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";<br \/>\n      var dri=[\"127462\",\"127463\",\"127464\",\"127465\",\"127466\",\"127467\",\"127468\",\"127469\",\"127470\",\"127471\",\"127472\",\"127473\",\"127474\",\"127475\",\"127476\",\"127477\",\"127478\",\"127479\",\"127480\",\"127481\",\"127482\",\"127483\",\"127484\",\"127485\",\"127486\",\"127487\"];<br \/>\n      for (var iccsuff=0; iccsuff&lt;thiscc.length; iccsuff++) {<br \/>\n        ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();<br \/>\n        ccsuff+=String.fromCodePoint(eval('' + dri[eval('' + lri.indexOf(ccchar))])); \/\/'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';<br \/>\n      }<br \/>\n      return ccsuff;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>And so, again, <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html-GETME' title='other_side_of_the_world.html-----------GETME'>a changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html-----------GETME' title='other_side_of_the_world.html-----------GETME'>other_side_of_the_world.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm\" title=\"Click picture\">live run<\/a> calls on <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html-----GETME'>autocomplete.htm<\/a> (which supervises Wunderground API data calling) changed in <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html-----GETME'>this way<\/a> to offer that alternative means to an end, with dropdown logic improvements.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-reworked-dropdowns-tutorial\/'>Other Side of the World Reworked Dropdowns Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oswrlt'>Previous relevant <a target=_blank title='Other Side of the World Reworked Logic Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-reworked-logic-tutorial\/'>Other Side of the World Reworked Logic Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Other Side of the World Reworked Logic Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/other_side_of_the_world_no_wunderground.jpg\" title=\"Other Side of the World Reworked Logic Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Other Side of the World Reworked Logic Tutorial<\/p><\/div>\n<p>You may recall in the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/audio-and-video-creator-via-media-browsing-image-background-email-tutorial\/' title='Audio and Video Creator via Media Browsing Image Background Email Tutorial'>Audio and Video Creator via Media Browsing Image Background Email Tutorial<\/a> how we had a link &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/audio-and-video-creator-via-media-browsing-image-background-email-tutorial\/'><p>\n<a target=_blank title='?' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm'>on the other side of the wooooooorrrrrlllllddd<\/a>\n<\/p><\/blockquote>\n<p> &#8230; which got us to our &#8220;Other Side of the World&#8221; web application.  Well, some of the workings of that web application function best when the <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> weather API&#8217;s autocomplete functionality is working.  Alas, it is not <font size=1>(with us any more)<\/font> &#8230; prescient, indeed, after the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-map-element-svg-context-google-search-tutorial\/' title='HTML Map Element SVG Context Google Search Tutorial'>HTML Map Element SVG Context Google Search Tutorial<\/a>&#8216;s &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-map-element-svg-context-google-search-tutorial\/'><p>\nWhen including URLs away from the domain (ie. \u201cthird party\u201d) on which your webpage resides then you are at risk, over time, when it comes to using URLs optionally involving arguments delimited by ? (first) and (subsequent) &#038; (what we call the \u201cGET\u201d arguments) optionally delimited by # before a hashtag that used to work, but may stop working into the future.\n<\/p><\/blockquote>\n<p>We cannot replace the data lost regarding Weather and Placename lists from this, but we can thank <a target=_blank title='Wikipedia, thanks' href='https:\/\/wikipedia.org'>Wikipedia<\/a>, yet again, to help us link a single Placename with a single Geographical (Latitude, Longitude) geodata set that can match to those two HTML input elements for latitude and longitude, to improve the situation.<\/p>\n<p>And so <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html-GETME' title='other_side_of_the_world.html----------GETME'>a changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html----------GETME' title='other_side_of_the_world.html----------GETME'>other_side_of_the_world.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm\" title=\"Click picture\">live run<\/a> calls on <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html----GETME'>autocomplete.htm<\/a> (which supervises Wunderground API data calling) changed in <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html----GETME'>this way<\/a> to offer that alternative means to an end.<\/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='#d52567' onclick='var dv=document.getElementById(\"d52567\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geodata\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52567' 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='#d52576' onclick='var dv=document.getElementById(\"d52576\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52576' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Continuing on from Other Side of the World Reworked Logic Tutorial&#8216;s first rearrangements at the lack of access to a weather (and its associated placename) API database we turn to that top dropdown (ie. HTML select element), with its &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-reworked-dropdowns-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":[88,1695,2081,2247,367,3663,385,3192,2242,480,481,576,587,3266,652,684,719,2134,2918,997,1866,1693,1319,1431,2811,3662],"class_list":["post-52576","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-api","tag-autocompletion","tag-country","tag-country-code","tag-dropdown","tag-dropdowns","tag-emoji","tag-emoji-flag","tag-flag","tag-geodata","tag-geographicals","tag-html","tag-iframe","tag-iso-code","tag-javascript","tag-latitude","tag-longitude","tag-place","tag-placename","tag-programming","tag-select","tag-timezone","tag-tutorial","tag-wikipedia","tag-world","tag-wunderground"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52576"}],"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=52576"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52576\/revisions"}],"predecessor-version":[{"id":52581,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52576\/revisions\/52581"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=52576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=52576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=52576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}