{"id":62269,"date":"2024-01-15T03:01:23","date_gmt":"2024-01-14T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62269"},"modified":"2024-01-14T18:34:50","modified_gmt":"2024-01-14T08:34:50","slug":"region-picker-double-click-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-double-click-tutorial\/","title":{"rendered":"Region Picker Double Click Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Double Click Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_rhs.jpg\" title=\"Region Picker Double Click Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Double Click Tutorial<\/p><\/div>\n<p>You might have gleaned from recent blog posts in the thread leading up to yesterday&#8217;s <a title='Region Picker Hashtag Navigation Tutorial' href='#rphnt'>Region Picker Hashtag Navigation Tutorial<\/a> that, regarding web applications\/webpages, even though a few years back we&#8217;d have been horrified to say it &#8230;<\/p>\n<ul>\n<li>we like to use the <a target=_blank href='https:\/\/www.w3schools.com\/jsref\/event_ondblclick.asp' title='HTML ondblclick event'><i>ondblclick<\/i><\/a> event (especially in a multi-purpose button press way) &#8230; and in this context &#8230;<\/li>\n<li>we don&#8217;t mind having to use <i>event.<a target=_blank title='Javascript event.stopPropagation() method information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_stoppropagation.asp'>stopPropagation<\/a>()<\/i> anymore <font size=1>(ie. we used to not get sleep for days worrying about it)<\/font> (when you want to stop the event bubbling down to a parent element) &#8230;<\/li>\n<li>we like to use colour coding &#8230; and &#8230;<\/li>\n<li>we don&#8217;t mind <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>window.open<\/a> (with a third argument and so, on non-mobile is a) popup window usage<\/li>\n<\/ul>\n<p>But that&#8217;s just us.  We&#8217;ll leave it to you to look into all these more, as far as favour, or not, goes with the search engines.<\/p>\n<p>We see the <i>ondblclick<\/i> event as being in the same line of thinking as the <i>onclick<\/i> event is (doh!) in the sense that mobile and non-mobile platforms understand it, as distinct from the divide between the touch &#8220;gesture&#8221; events and the mouse events.  And it may be just me, but web browsers seem better with it these days.  Maybe just wishful thinking on that last point, for me, though?!<\/p>\n<p>Today, we&#8217;ve got another <font color=blue>&#8220;multipurpose scenario&#8221;<\/font> for an <i>ondblclick<\/i> event logic coding &#8230;<\/p>\n<p><code><br \/>\nif (sofar != '') {<br \/>\n if (window.self == window.parent && eval('' + screen.width) &gt; 1000) {<br \/>\n document.getElementById('rmore').innerHTML=prebut + '&lt;button id=mychart <font color=blue>ondblclick=\"event.stopPropagation(); dcdomc();\" <\/font>onclick=domc(); style=background-color:' + iccol + ';&gt;Image Chart Map Chart &lt;br&gt;&lt;font size=1&gt;(double click uses new window)&lt;\/font&gt;&lt;br&gt; ... showing ...&lt;\/button&gt;&lt;br&gt;&lt;br&gt;&lt;p id=myp title=\"' + sofardetail + '\"&gt;' + sofar.replace(\/\\|\/g, '&lt;br&gt;');<br \/>\n } else {<br \/>\n document.getElementById('subrmore').innerHTML=prebut + '&lt;button id=mychart <font color=blue>ondblclick=\"event.stopPropagation(); dcdomc();\" <\/font>onclick=domc(); style=background-color:' + iccol + ';&gt;Image Chart Map Chart &lt;br&gt;&lt;font size=1&gt;(double click uses new window)&lt;\/font&gt;&lt;br&gt; ... showing ...&lt;\/button&gt;&lt;br&gt;&lt;br&gt;&lt;p id=myp title=\"' + sofardetail + '\"&gt;' + sofar.replace(\/\\|\/g, '&lt;br&gt;');<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; calling <font color=purple>new<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction dcdomc() {<br \/>\n  \/\/ &lt;img data-onload=\"canvit(this);\" onclick=\"if (atstart) { normalcall=false; ask(null);  normalcall=true; atstart=false; } else { ask(event); }\" title=\"Google Chart Image Chart \" +=\"\" cname=\"\" '=\"\" image=\"\" ...=\"\" to=\"\" modify,=\"\" please=\"\" click'=\"\" id=\"myvenn\" width=\"455\" height=\"350\" data-style=\"display:block;width:455px;height:743px;background:url(\/\/www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&amp;chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&amp;ufr=_4179574);background-size:cover;\" src=\"\/\/www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&amp;chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&amp;chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&amp;ufr=_4179574\" usemap=\"#mymap\"><br \/>\n  \/\/var x=prompt('www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274', 'www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274');<br \/>\nif (document.getElementById('mychart')) {<br \/>\n  document.getElementById('mychart').style.backgroundColor='orange';<br \/>\n  iccol='orange';<br \/>\n}<br \/>\nif (document.getElementById('mychchart')) {<br \/>\n  document.getElementById('mychchart').style.backgroundColor='orange';<br \/>\n  jccol='orange';<br \/>\n}<br \/>\n  <font color=purple>var theurlis='\/\/www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=' + enough('B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274',sofar);<br \/>\n  dbwo=window.open(theurlis,'_blank','top=50,left=50,width=600,height=600');<\/font><br \/>\n  document.getElementById('tdleft').style.backgroundImage='URL(<font color=purple>\"' + theurlis + '\"<\/font>)';<br \/>\n  document.getElementById('tdleft').style.backgroundRepeat='no-repeat';<br \/>\n  if (window.self == window.parent && eval('' + screen.width) > 1000 || document.URL.indexOf('?right=') != -1) {<br \/>\n  document.getElementById('tdleft').style.backgroundPosition='right top';<br \/>\n  } else {<br \/>\n  document.getElementById('tdleft').style.backgroundPosition='center top';<br \/>\n  }<br \/>\n  document.getElementById('tdleft').title='Double click for new window version of ...' + String.fromCharCode(10) + String.fromCharCode(10) + sofardetail.replace(\/\\|\/g, String.fromCharCode(10));<br \/>\n  document.getElementById('tdleft').style.backgroundRepeat='no-repeat';<br \/>\n  opacitytoggling(1.0, 0.1);<br \/>\n  setTimeout(function(){ opacitytoggling(1.0, -0.1); }, 2100);<br \/>\n  if (!dbdone) {<br \/>\n  dbdone=true;<br \/>\n  \/\/document.getElementById('tdleft').ondblclick=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL(\"')[1].split('\"')[0],'_blank','top=50,left=50,width=700,height=600'); };<br \/>\n  \/\/document.getElementById('tdleft').oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL(\"')[1].split('\"')[0],'_blank','top=50,left=50,width=700,height=600'); };<br \/>\n  \/\/document.body.oncontextmenu=function(){  window.open(document.getElementById('tdleft').style.background.split('URL(\"')[1].split('\"')[0],'_blank','top=50,left=50,width=700,height=600'); };<br \/>\n  }<br \/>\n  window.scrollTo(0,0);<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html---GETME\">&#8220;fourth draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a>, where we are building up a menu system tailored to region\/country lookups.<\/p>\n<p>Am sure some of you are onto tomorrow&#8217;s plan, given today&#8217;s work?!  We&#8217;ll see what tomorrow brings!<\/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\/new-region-picker-hashtag-navigation-tutorial\/'>New Region Picker Hashtag Navigation Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='rphnt'>Previous relevant <a target=_blank title='Region Picker Hashtag Navigation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-hashtag-navigation-tutorial\/'>Region Picker Hashtag Navigation Tutorial<\/a> is shown below.<\/p>\n\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Region Picker Hashtag Navigation Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Hashtag Navigation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_opacity.jpg\" title=\"Region Picker Hashtag Navigation Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>Isn't yesterday's <a title='Region Picker Geo Chart Integration Tutorial' href='#rpgcit'>Region Picker Geo Chart Integration Tutorial<\/a> already full of hashtag navigation?  Yes, very much so.  There are lots of areas where we try to control scrolling positions and background image positions, with varying degrees of success, the narrower the screen width, the harder it is to achieve a happy scenario for every user.  Hence, today's ....<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>new dynamic opacity changes ...\n<code>\nfunction opacitytoggling(morestartingat, less) {\n   var doct='here at opacitytoggling ... ';\n   if (Math.abs(eval('' + morestartingat) - 1.0) &lt; 0.015) {\n      if (less &lt; 0) { \n      if (document.getElementById('more')) {\n        document.getElementById('more').style.opacity='0.98';\n        doct+='0.98';\n      }\n      if (document.getElementById('subrmore')) {\n        document.getElementById('subrmore').style.opacity='0.98';\n        doct+='0.98';\n      }\n        nextless=less; \n        \/\/document.title=doct;\n        setTimeout(function(){ opacitytoggling(0.98, nextless); }, 400);\n      } else {\n      nextless=-0.101;\n      if (document.getElementById('more')) {\n        document.getElementById('more').style.opacity='1.0';\n        doct+='1.0';\n      }\n      if (document.getElementById('subrmore')) {\n        document.getElementById('subrmore').style.opacity='1.0';\n        doct+='1.0';\n      }\n      }\n       \/\/ document.title=doct;\n   } else if (eval(Math.abs(eval('' + nextless)) - 0.1) &lt; 0.0004) {\n      nextless=less;\n      nextval=eval(less + eval('' + morestartingat));\n      if (nextval &lt; 0.0) {\n      nextless=0.1;\n      nextval=eval(eval('' + morestartingat) + 0.1);\n      if (document.getElementById('more')) {\n        document.getElementById('more').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);\n        doct+=nextval;\n      }\n      if (document.getElementById('subrmore')) {\n        document.getElementById('subrmore').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);\n        doct+=nextval;\n      }\n        \/\/document.title=doct;\n      if (nextval == 0.18) {\n      setTimeout(function(){ opacitytoggling(nextval, nextless); }, 12000);\n      } else {\n      setTimeout(function(){ opacitytoggling(nextval, nextless); }, 2000);\n      }\n      } else if (nextval &gt; 1.0) {\n      nextless=-0.1;\n      nextval=eval(-0.1 + eval('' + morestarting));\n      if (document.getElementById('more')) {\n        document.getElementById('more').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);\n      }\n      if (document.getElementById('subrmore')) {\n        document.getElementById('subrmore').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);\n        doct+=nextval;\n      }\n        \/\/document.title=doct;\n      if (nextval == 0.18) {\n      setTimeout(function(){ opacitytoggling(nextval, nextless); }, 12000);\n      } else {\n      setTimeout(function(){ opacitytoggling(nextval, nextless); }, 2000);\n      }\n      } else {\n      if (document.getElementById('more')) {\n        document.getElementById('more').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);\n        doct+=nextval;\n      }\n      if (document.getElementById('subrmore')) {\n        document.getElementById('subrmore').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);\n        doct+=nextval;\n      }\n        \/\/document.title=doct;\n      if (nextval == 0.18) {\n      setTimeout(function(){ opacitytoggling(nextval, nextless); }, 12000);\n      } else {\n      setTimeout(function(){ opacitytoggling(nextval, nextless); }, 2000);\n      }\n      }\n   } \/\/else {\n        \/\/document.title=doct;\n   \/\/}\n<br \/>\n}\n<\/code>\n ... to help see through to any background<sub>ed<\/sub> image charts ... and adding to hashtag based functionality ...<\/li>\n\n\n\n\n<li>a new letter based set of \"a\" hashtag navigation links to be able <font color=blue>to navigate down to the first country with a letter start<\/font> ... \n<code>\nfor(var xi=0; xi&lt;xelms.length; xi++){\n <font color=blue>if (eval(('' + xelms[xi].id).length) == 3) {\n    if (('' + xelms[xi].innerHTML).substring(0).substring(0,1) &gt;= nexttodo) {\n      ournext=('' + xelms[xi].innerHTML).substring(0).substring(0,1)\n      \/\/alert('nexttodo=' + nexttodo + ' andpleasedonotbeequalveryoften ournext=' + ournext + ' and ' + xelms[xi].id);\n      while (nexttodo &lt; ournext) {\n         nextih+='&nbsp;&lt;a style=color:blue;z-index:786; href=\"#' + xelms[xi].id + '\"&gt;' + nexttodo + '&lt;\/a&gt;';\n         nexttodo=String.fromCharCode(1 + nexttodo.charCodeAt(0));\n      \/\/alert('Nexttodo=' + nexttodo + ' and ournext=' + ournext + ' and ' + xelms[xi].id);\n      }\n      if (nexttodo &lt;= 'Z') {\n         nextih+='&nbsp;&lt;a style=color:blue;z-index:786; href=\"#' + xelms[xi].id + '\"&gt;' + nexttodo + '&lt;\/a&gt;';\n         nexttodo=String.fromCharCode(1 + nexttodo.charCodeAt(0));\n      }\n    } \/\/else {\n      \/\/alert('no for nexttodo=' + nexttodo + ' and ournext=' + ournext + ' and ' + xelms[xi].id);\n    \/\/}\n }<\/font>\n \/\/ rest of usual code in the for loop follows\n}\n<\/code>\n ... and, a nuance, sure, but ...<\/li>\n\n\n\n\n<li>now \"and that same tab window content becomes the final\" is still the case but if the URL is small enough <font color=blue>we now go<\/font> ...\n<code>\n  <font color=blue>top.<\/font>location.href=lhref;\n<\/code>\n ... so that a user might have a chance for their own <sub>re<\/sub>tweaks back at the web browser's address bar \n<\/ul>\n\n\n\n\n\n<p>Small changes, but fixes to some of the annoyances in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html--GETME\">\"third draft\"<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a>.<\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-hashtag-navigation-tutorial\/'>Region Picker Hashtag Navigation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpgcit'>Previous relevant <a target=_blank title='Region Picker Geo Chart Integration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geo-chart-integration-tutorial\/'>Region Picker Geo Chart Integration 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\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Geo Chart Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart_region_picker.gif\" title=\"Region Picker Geo Chart Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Geo Chart Integration Tutorial<\/p><\/div>\n<p>We&#8217;re tickled pink with our integration of yesterday&#8217;s <a title='Region Picker Primer Tutorial' href='#rppt'>Region Picker Primer Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>Region Picker web application &#8230; into &#8230;<\/li>\n<li><a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> interfacer<\/li>\n<\/ul>\n<p> &#8230; in that we&#8217;ve done better than the natural Geo Chart navigation without the Region Picker, which navigates to a new URL slapped onto the same web browser tab.  With our integration we have &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> interfacer parent &#8220;base layer&#8221; (with as little as one prompt window required) &#8230; and if called upon &#8220;above this&#8221; &#8230;<\/li>\n<li>Region Picker web application nested in an &#8220;overlay iframe&#8221; <font size=1>(with large CSS z-index value covering the whole screen)<\/font> &#8230; asks (for as little as) one more verifying prompt window question &#8230; and that same tab window content becomes the final &#8230;<\/li>\n<li><a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> interfacer result web page<\/li>\n<\/ul>\n<p>And seeing the country regional codes in play, the possibilities mount up here!  The user just includes &#8230;<\/p>\n<blockquote><p>\n&#038;regionpicker\n<\/p><\/blockquote>\n<p> &#8230; in a prompt window answer to start using Region Pickers in their user inputs.<\/p>\n<p>Codewise we needed &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-GETME\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-GETME\">&#8220;second draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a> &#8230; might ask that one verifying prompt window in &#8230;<br \/>\n<code><br \/>\nfunction gcdomc() {<br \/>\n  var clauses='', popularity='Popularity', extras='';<br \/>\n  \/\/ &lt;img data-onload=\"canvit(this);\" onclick=\"if (atstart) { normalcall=false; ask(null);  normalcall=true; atstart=false; } else { ask(event); }\" title=\"Google Chart Image Chart \" +=\"\" cname=\"\" '=\"\" image=\"\" ...=\"\" to=\"\" modify,=\"\" please=\"\" click'=\"\" id=\"myvenn\" width=\"455\" height=\"350\" data-style=\"display:block;width:455px;height:743px;background:url(\/\/www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&amp;chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&amp;ufr=_4179574);background-size:cover;\" src=\"\/\/www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&amp;chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&amp;chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&amp;ufr=_4179574\" usemap=\"#mymap\"&gt;<br \/>\n  \/\/var x=prompt('www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274', 'www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274');<br \/>\nif (document.getElementById('mychchart')) {<br \/>\n  document.getElementById('mychchart').style.backgroundColor='orange';<br \/>\n  jccol='orange';<br \/>\n}<br \/>\n        if (gwl == '' && document.URL.indexOf('?') != -1) {<br \/>\n           gwl='\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?' + document.URL.split('?')[1].split('#')[0].replace(\/\\&data\\=$\/g, '');<br \/>\n           if (document.URL.indexOf('popularity=') != -1) {<br \/>\n              popularity=decodeURIComponent(document.URL.split('popularity=')[1].split('&')[0].split('#')[0]);<br \/>\n           }<br \/>\n        }<br \/>\n        var agwl=gwl.split('&');<br \/>\n        for (var iig=1; iig&lt;agwl.length; iig++) {<br \/>\n           if (iig == 1) { clauses=String.fromCharCode(10);   }<br \/>\n           if (agwl[iig] != 'data=' && agwl[iig].indexOf('regionpicker') == -1) {<br \/>\n           clauses+='&' + agwl[iig] + String.fromCharCode(10);<br \/>\n           }<br \/>\n        }<br \/>\n        \/\/if (clauses != '') { clauses+=String.fromCharCode(10); }<br \/>\n        gwocont=sofar;<br \/>\n        if (gwocont != '') {<br \/>\n           var xgwocont=null;<br \/>\n           if (1 == 1) {<br \/>\n             var setstuff='';<br \/>\n             if (gwl.indexOf('&data=') == -1) { setstuff='&data='; } else { extras=' (if &data= change prefix that in below appropriately)'; }<br \/>\n             var plis=('' + gwocont).split('|');<br \/>\n             for (var iplis=0; iplis&lt;plis.length; iplis++) {<br \/>\n               if (setstuff == '') {<br \/>\n                 setstuff='%20[~' + plis[iplis] + '~,2]';<br \/>\n               } else {<br \/>\n                 setstuff+='%20,%20[~' + plis[iplis] + '~,2]';<br \/>\n               }<br \/>\n             }<br \/>\n           try {<br \/>\n           xgwocont=prompt('Please amend as necessary where each of those 2 values are what we have so far assigned for the ' + popularity + ' value for each region\/country.  As necessary add in any amended ' + clauses + ' ideas too' + extras + '.', setstuff);<br \/>\n           } catch(hjgdf) { xgwocont=null;   }<br \/>\n           }<br \/>\n           if (xgwocont == null) { lastgwcont=gwocont; xgwocont=''; }<br \/>\n           gwocont=xgwocont;<br \/>\n           if (xgwocont != '') {<br \/>\n           \/\/alert('gwl=' + gwl);<br \/>\n        var lateragwl=xgwocont.replace(\/\\ \/g, '%20').split('&');<br \/>\n        for (var jig=1; jig&lt;lateragwl.length; jig++) {<br \/>\n          if (gwl.indexOf('&' + lateragwl[jig].split('=')[0] + '=') != -1) {<br \/>\n            gwl=gwl.replace('&' + lateragwl[jig].split('=')[0] + '=' + gwl.split('&' + lateragwl[jig].split('=')[0] + '=')[1].split('&')[0].split('#')[0], '');<br \/>\n          }<br \/>\n        }<br \/>\n              lhref=ourtoolong(gwl + xgwocont.replace(\/\\ \/g, '%20'));<br \/>\n              if (lhref != '') {<br \/>\n                location.href=lhref;<br \/>\n              }<br \/>\n           }<br \/>\n        }<br \/>\n  document.getElementById('tdleft').style.backgroundImage='URL(\"\/\/www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=' + enough('B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274',sofar) + '\")';<br \/>\n  document.getElementById('tdleft').style.backgroundRepeat='no-repeat';<br \/>\n  if (window.self == window.parent && eval('' + screen.width) &gt; 1000 || document.URL.indexOf('?right=') != -1) {<br \/>\n  document.getElementById('tdleft').style.backgroundPosition='right top';<br \/>\n  } else {<br \/>\n  document.getElementById('tdleft').style.backgroundPosition='center top';<br \/>\n  }<br \/>\n  document.getElementById('tdleft').title='Double click for new window version of ...' + String.fromCharCode(10) + String.fromCharCode(10) + sofardetail.replace(\/\\|\/g, String.fromCharCode(10));<br \/>\n  document.getElementById('tdleft').style.backgroundRepeat='no-repeat';<br \/>\n  if (!dbdone) {<br \/>\n  dbdone=true;<br \/>\n  \/\/document.getElementById('tdleft').ondblclick=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL(\"')[1].split('\"')[0],'_blank','top=50,left=50,width=700,height=600'); };<br \/>\n  \/\/document.getElementById('tdleft').oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL(\"')[1].split('\"')[0],'_blank','top=50,left=50,width=700,height=600'); };<br \/>\n  \/\/document.body.oncontextmenu=function(){  window.open(document.getElementById('tdleft').style.background.split('URL(\"')[1].split('\"')[0],'_blank','top=50,left=50,width=700,height=600'); };<br \/>\n  }<br \/>\n  window.scrollTo(0,0);<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; and &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------GETME\" title=\"geo_chart.php\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">Geo Chart interfacer<\/a> &#8230; calls on the Region Picker in this new Javascript function &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n function winopen(oneurl, twotarget, threerest) {<br \/>\n   var hmore='';<br \/>\n   if (gwl != '' && gwl.indexOf('?') != -1 && oneurl.indexOf(gwl) == -1 && oneurl.indexOf('?') != -1) {<br \/>\n   \/\/alert(oneurl + '&' + gwl.split('?')[1]);<br \/>\n   if (decodeURIComponent(('' + location.hash)).indexOf('title=') != -1) {<br \/>\n      hmore='&' + decodeURIComponent(('' + location.hash).replace(\/^\\#\/g, '')).replace(\/\\ \/g,'%20');<br \/>\n      if (hmore.indexOf('&width=') == -1) { hmore+='&width=556'; }<br \/>\n      if (hmore.indexOf('&height=') == -1) { hmore+='&height=347'; }<br \/>\n      if (hmore.indexOf('&country=') == -1) { hmore+='&country=Country'; }<br \/>\n      if (hmore.indexOf('&popularity=') == -1) { hmore+='&popularity=Popularity'; }<br \/>\n      if (hmore.indexOf('&data=') == -1) { hmore+='&data='; }<br \/>\n   }<br \/>\n   document.getElementById(twotarget).src=oneurl + '&' + gwl.split('?')[1] + hmore;<br \/>\n   } else if (decodeURIComponent(('' + location.hash)).indexOf('title=') != -1) {<br \/>\n      hmore='&' + decodeURIComponent(('' + location.hash).replace(\/^\\#\/g, '')).replace(\/\\ \/g,'%20');<br \/>\n      if (hmore.indexOf('&width=') == -1) { hmore+='&width=556'; }<br \/>\n      if (hmore.indexOf('&height=') == -1) { hmore+='&height=347'; }<br \/>\n      if (hmore.indexOf('&country=') == -1) { hmore+='&country=Country'; }<br \/>\n      if (hmore.indexOf('&popularity=') == -1) { hmore+='&popularity=Popularity'; }<br \/>\n      if (hmore.indexOf('&data=') == -1) { hmore+='&data='; }<br \/>\n      document.getElementById(twotarget).src=oneurl + hmore;<br \/>\n   } else {<br \/>\n   document.getElementById(twotarget).src=oneurl;<br \/>\n   }<br \/>\n   return document.getElementById(twotarget);<br \/>\n }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<\/ul>\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\/region-picker-geo-chart-integration-tutorial\/'Region Picker Geo Chart Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rppt'>Previous relevant <a target=_blank title='Region Picker Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-primer-tutorial\/'>Region Picker Primer 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\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.gif\" title=\"Region Picker Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Primer Tutorial<\/p><\/div>\n<p>All the <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> and <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> Map Chart <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-image-chart-mixed-mode-tutorial\/' title='Google Chart Geo Chart Image Chart Mixed Mode Tutorial'>work recently<\/a>, along with <a target=_blank title='ISO_3166-2 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/ISO_3166-2'>Wikipedia<\/a> ISO-3166 regional and country coding help (thanks), has set us on the road towards a &#8230;<\/p>\n<p><code><br \/>\nRegion Picker<br \/>\n<\/code><\/p>\n<p> &#8230; online tool, which we envisage will &#8230;<\/p>\n<ul>\n<li>initially be a standalone HTML webpage &#8230; and later be &#8230;<\/li>\n<li>integrated into the user input phase of the Geo Chart interfacer<\/li>\n<\/ul>\n<p>So here we are today with the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html_GETME\">&#8220;first draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">standalone version<\/a>, where we&#8217;ve used Pulldown Menus, you can read more about at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmlcssjavascript-pulldown-menus-javascript-tutorial\/' title='HTML\/CSS\/Javascript Pulldown Menus Javascript Tutorial'>HTML\/CSS\/Javascript Pulldown Menus Javascript Tutorial<\/a>, to construct a Region\/Country ISO code vertical bar delimited list of regions\/continents that you can display in an Image Chart Map Chart &#8230;<\/p>\n<p><iframe style=\"overflow:scroll;width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><\/iframe><\/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='#d62245' onclick='var dv=document.getElementById(\"d62245\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/menu\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62245' 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='#d62254' onclick='var dv=document.getElementById(\"d62254\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62254' 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='#d62262' onclick='var dv=document.getElementById(\"d62262\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/opacity\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62262' 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='#d62269' onclick='var dv=document.getElementById(\"d62269\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/menu\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62269' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You might have gleaned from recent blog posts in the thread leading up to yesterday&#8217;s Region Picker Hashtag Navigation Tutorial that, regarding web applications\/webpages, even though a few years back we&#8217;d have been horrified to say it &#8230; we like &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-double-click-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":[1669,359,367,4295,1619,518,2229,557,576,587,4562,614,652,3862,770,830,1666,876,894,4616,967,968,997,1761,4649,4648,1620,4643,1866,1319,1345,1404,1433,1496],"class_list":["post-62269","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-address-bar","tag-double-click","tag-dropdown","tag-event-stoppropagation","tag-geo-chart","tag-google-chart","tag-hash","tag-hashtag","tag-html","tag-iframe","tag-image-chart","tag-integration","tag-javascript","tag-lookup","tag-menu","tag-navigation","tag-ondblclick","tag-opacity","tag-overlay","tag-picker","tag-popup","tag-popup-window","tag-programming","tag-prompt","tag-pulldown","tag-pulldown-menu","tag-region","tag-regional","tag-select","tag-tutorial","tag-url","tag-web-browser","tag-window-open","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62269"}],"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=62269"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62269\/revisions"}],"predecessor-version":[{"id":62275,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62269\/revisions\/62275"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=62269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=62269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=62269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}