{"id":62397,"date":"2024-01-25T03:01:48","date_gmt":"2024-01-24T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62397"},"modified":"2024-01-25T06:04:09","modified_gmt":"2024-01-24T20:04:09","slug":"geo-chart-mobile-zoom-offset-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/geo-chart-mobile-zoom-offset-tutorial\/","title":{"rendered":"Geo Chart Mobile Zoom Offset 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=\"Geo Chart Mobile Zoom Offset Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart_mobile_resize.jpg\" title=\"Geo Chart Mobile Zoom Offset Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Geo Chart Mobile Zoom Offset Tutorial<\/p><\/div>\n<p>The end of yesterday&#8217;s <a title='Geo Chart Zoom Offset Tutorial' href='#gczot'>Geo Chart Zoom Offset Tutorial<\/a>&#8216;s work, for us, was a bit frustrating because we have this ridiculous optimistic view that the mobile platforms will ditch their opposition to &#8230;<\/p>\n<ul>\n<li>Javascript prompt window usage &#8230; and &#8230;<\/li>\n<li>onward navigation allowable for textbox <i>onblur<\/i> event, in addition to the way they want you to click\/touch, often, to allow for onward navigation<\/li>\n<\/ul>\n<p>But, no, and it will, in all likelihood, remain so, because there are security issues, otherwise.  Even so, our mindset works to thinking the Javascript popup window is your friend, rather than your enemy, and we blame FORTRAN.  Sorry, FORTRAN &#8230; <a target=_blank title='?' href='https:\/\/getyarn.io\/yarn-clip\/1737ecbf-d33d-4830-baf2-7db3f1f51d5b'>good times<\/a>!<\/p>\n<p>And so, to allow mobile platforms those resizing (comma separated) &#8230;<\/p>\n<ul>\n<li>width<\/li>\n<li>height<\/li>\n<li>margin-left<\/li>\n<li>margin-right<\/li>\n<\/ul>\n<p> &#8230; possibilities we replaced Javascript prompt code for HTML input type=text <font size=1>(and don&#8217;t forget associated HTML input type=button)<\/font> replacement strategies in our inhouse <a target=_blank title='Google Chart Geo Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> interfacer, as per &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$wid=('' . $_GET['width'] . $_POST['width']);<br \/>\nif ($wid == '') { $wid='556'; }<br \/>\n$hid=('' . $_GET['height'] . $_POST['height']);<br \/>\nif ($hid == '') { $hid='347'; }<br \/>\n<br \/>\n$nowtb=\"&lt;input id=tbtb type=text placeholder='\" . $wid . \",\" . $hid . \",-0%,-0%\" . \"' value='' title='Optional width,height,margin-left,margin-top' data-onblur=preaskhw(this); onclick=event.stopPropagation();&gt;&lt;\/input&gt;&lt;input onclick='event.stopPropagation(); preaskhw(this);' type=button value=Resize&gt;&lt;\/input&gt;\";<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; being used in (near to <i>onload<\/i> event Javascript (written by PHP) code) &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n     if (navigator.userAgent.match(\/iPhone|iPad\/i)) {<br \/>\n     setTimeout(function(){<br \/>\n     var ass=document.getElementsByTagName('a');<br \/>\n     for (var iass=0; iass&lt;ass.length; iass++) {<br \/>\n       if (ass[iass].innerHTML.replace('W?','H?') == 'H?') {  if (!document.getElementById('tbtb')) { ass[iass].innerHTML=\\\"\" . $nowtb . \"\\\"; } else { ass[iass].innerHTML='';  } }<br \/>\n     } }, 6000);<br \/>\n     }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; calling <font color=blue>a tweaked<\/font> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   <font color=blue>var gwh='';<\/font><br \/>\n<br \/>\n   <font color=blue>function preaskhw(intb) {<br \/>\n     gwh=document.getElementById('tbtb').value;<br \/>\n     if (gwh.trim() != '') {  askhw(''); }<br \/>\n   }<\/font><br \/>\n<br \/>\n   function askhw(infactor) {<br \/>\n   var mlarg='', mtarg='';<br \/>\n   var defhw='';<br \/>\n   var rfrom='youllneverfindthis';<br \/>\n   var rto='youllneverfindthis';<br \/>\n   var spa='';<br \/>\n   dtbit='';<br \/>\n   if (documentURL.indexOf('&data=') != -1 && 1 == 8) {<br \/>\n     \/\/dtbit='&data=' + decodeURIComponent(documentURL.split('&data=')[1]).replace(\/\\ \/g,'%20');<br \/>\n     datac=dtbit;<br \/>\n          document.getElementById('ifblankpause').value=' ';<br \/>\n          plotblurb=':';<br \/>\n          plotblurbs=plotblurb.split(':');<br \/>\n         if (document.getElementById('ifblankpause').value == ' ') {<br \/>\n           ginpr='' + xpnum + ':' + pnum + ' Please Supply any alternative to current width,height bearing in mind we like 7860.045,6875. for just Europe or 3930.068,3437.054 for South East Asia and Oceania or 3230.035,2737.052 for Africa or 3001.011,2801.059 for South America or 2201.001,2001.029 for North and Central America or 2202.056,2002.029 for Asia or append these by Country ISO 2 Character Code and semicolon (;) for single country map.  Perhaps percentage additional comma separated entries (usually negative) can be margin-left (relative to width) and margin-top (relative to height) settings.';<br \/>\n           gindf='\" . $_GET['width'] . $_POST['width'] . \",\" . $_GET['height'] . $_POST['height'] . \"';<br \/>\n        \/\/alert(11);<br \/>\n           setTimeout(pregeoprompt, 5000);<br \/>\n           \/\/return gindf;<br \/>\n         }<br \/>\n   }<br \/>\n   <font color=blue>var reallyask=false;<br \/>\n   if (document.getElementById('tbtb') && ('' + infactor).trim() == '') {<br \/>\n      if (document.getElementById('tbtb').value.trim() != '') { reallyask=true;  }<br \/>\n   }<\/font><br \/>\n   if (('' + infactor).trim() == '' && documentURL.indexOf('width=') != -1 && documentURL.indexOf('height=') != -1) {<br \/>\n     if (navigator.userAgent.match(\/iPhone|iPad\/i)<font color=blue> && !reallyask<\/font>) {<br \/>\n     var ass=document.getElementsByTagName('a');<br \/>\n     for (var iass=0; iass&lt;ass.length; iass++) {<br \/>\n       if (ass[iass].innerHTML.replace('W?','H?') == 'H?') {  ass[iass].innerHTML=''; }<br \/>\n     }<br \/>\n  } else {<br \/>\n<br \/>\n         \/\/document.getElementById('ifblankpause').value=' ';<br \/>\n     defhw='\" . $_GET['width'] . $_POST['width'] . \",\" . $_GET['height'] . $_POST['height'] . \"';<br \/>\n     var huhhw=<font color=blue>gwh;<br \/>\n       if (huhhw.trim() == '') {<br \/>\n       huhhw=<\/font>prompt('Please Supply any alternative to current width,height bearing in mind we like 7860.045,6875. for just Europe or 3930.068,3437.054 for South East Asia and Oceania or 3230.035,2737.052 for Africa or 3001.011,2801.059 for South America or 2201.001,2001.029 for North and Central America or 2202.056,2002.029 for Asia or append these by Country ISO 2 Character Code and semicolon (;) for single country map.  Perhaps percentage additional comma separated entries (usually negative) can be margin-left (relative to width) and margin-top (relative to height) settings.', defhw);<br \/>\n       <font color=blue>} <\/font><br \/>\n         \/\/spa=prompt('000','000');<br \/>\n\/\/     document.title='000';<br \/>\n         \/\/if (document.getElementById('ifblankpause').value == ' ') {<br \/>\n         \/\/  return null;<br \/>\n         \/\/}<br \/>\n     if (huhhw) {<br \/>\n         \/\/spa=prompt('00','00');<br \/>\n  \/\/   document.title='00';<br \/>\n      if (huhhw != '') {<br \/>\n         \/\/spa=prompt('0','0');<br \/>\n  \/\/   document.title='0';<br \/>\n       var prehws=huhhw.split(';');<br \/>\n       if (prehws.length &gt; 1) {<br \/>\n         huhhw=huhhw.replace(prehws[0] + ';', '');<br \/>\n         rfrom='title=';<br \/>\n         rto='title=' + prehws[0] + ';';<br \/>\n       }<br \/>\n       var mlr=huhhw.split('%');<br \/>\n       var mlrc=huhhw.split(',');<br \/>\n       var rby='';<br \/>\n       if (('   ' + huhhw).slice(-3).indexOf(';') != -1) {<br \/>\n         mlrc[eval(-1 + mlrc.length)]=mlrc[eval(-1 + mlrc.length)].substring(0,eval(-3 + eval('' + mlrc[eval(-1 + mlrc.length)].length)));<br \/>\n       }<br \/>\n       if (eval('' + mlrc.length) &gt; 2) {<br \/>\n         if (eval('' + mlrc.length) &gt; 3) {<br \/>\n         if (mlrc[3].trim() != '') {<br \/>\n         mtarg='&mt=' + encodeURIComponent(mlrc[3]);<br \/>\n         rby=',' + mlrc[3];<br \/>\n         } else {<br \/>\n         rby=',';<br \/>\n         }<br \/>\n         }<br \/>\n         if (mlrc[2].trim() != '') {<br \/>\n         mlarg='&ml=' + encodeURIComponent(mlrc[2]);<br \/>\n         huhhw=huhhw.replace(',' + mlrc[2] + rby, '');<br \/>\n         } else if (rby != '') {<br \/>\n         huhhw=huhhw.replace(',' + rby, '');<br \/>\n         }<br \/>\n       }<br \/>\n       \/\/alert(huhhw);<br \/>\n       var hws=huhhw.split(',');<br \/>\n       if (hws.length == 1) {<br \/>\n         \/\/spa=prompt('1','1');<br \/>\n   \/\/  document.title+='1';<br \/>\n         if (mlarg.indexOf('%') != -1) {<br \/>\n           mlarg='&ml=' + Math.round(eval(eval('' + hws[0]) * eval('' + mlrc[2].replace('%','')) \/ 100.0));<br \/>\n         }<br \/>\n         if (mtarg.indexOf('%') != -1) {<br \/>\n           mtarg='&mt=' + Math.round(eval(eval('\" . $_GET['height'] . $_POST['height'] . \"') * eval('' + mlrc[3].replace('%','')) \/ 100.0));<br \/>\n         }<br \/>\n         if (mlarg != '') {<br \/>\n           documentURL=documentURL.replace('&ml=','&mXl=');<br \/>\n           pardata=pardata.replace('&ml=','&mXl=');<br \/>\n         }<br \/>\n         if (mtarg != '') {<br \/>\n           documentURL=documentURL.replace('&mt=','&mXt=');<br \/>\n           pardata=pardata.replace('&mt=','&mXt=');<br \/>\n         }<br \/>\n         locationhref=toolong(documentURL.replace(rfrom,rto).replace('width=\" . $_GET['width'] . $_POST['width'] . \"', 'width=' + hws[0] + mlarg + mtarg));<br \/>\n         if (locationhref != '#') {  document.getElementById('ifblankpause').value=' ';  location.href=locationhref;   }<br \/>\n       } else if (hws[0] == '') {<br \/>\n         \/\/spa=prompt('2','2');<br \/>\n  \/\/   document.title+='2';<br \/>\n         if (mlarg.indexOf('%') != -1) {<br \/>\n           mlarg='&ml=' + Math.round(eval(eval('\" . $_GET['width'] . $_POST['width'] . \"') * eval('' + mlrc[2].replace('%','')) \/ 100.0));<br \/>\n         }<br \/>\n         if (mtarg.indexOf('%') != -1) {<br \/>\n           mtarg='&mt=' + Math.round(eval(eval('' + hws[1]) * eval('' + mlrc[3].replace('%','')) \/ 100.0));<br \/>\n         }<br \/>\n         if (mlarg != '') {<br \/>\n           documentURL=documentURL.replace('&ml=','&mXl=');<br \/>\n           pardata=pardata.replace('&ml=','&mXl=');<br \/>\n         }<br \/>\n         if (mtarg != '') {<br \/>\n           documentURL=documentURL.replace('&mt=','&mXt=');<br \/>\n           pardata=pardata.replace('&mt=','&mXt=');<br \/>\n         }<br \/>\n         locationhref=toolong(documentURL.replace(rfrom,rto).replace('height=\" . $_GET['height'] . $_POST['height'] . \"', 'height=' + hws[1] + mlarg + mtarg));<br \/>\n         if (locationhref != '#') {  document.getElementById('ifblankpause').value=' ';  location.href=locationhref;   }<br \/>\n       } else if (hws[1] == '') {<br \/>\n         \/\/spa=prompt('3','3');<br \/>\n  \/\/   document.title+='3';<br \/>\n         if (mlarg.indexOf('%') != -1) {<br \/>\n           mlarg='&ml=' + Math.round(eval(eval('' + hws[0]) * eval('' + mlrc[2].replace('%','')) \/ 100.0));<br \/>\n         }<br \/>\n         if (mtarg.indexOf('%') != -1) {<br \/>\n           mtarg='&mt=' + Math.round(eval(eval('\" . $_GET['height'] . $_POST['height'] . \"') * eval('' + mlrc[3].replace('%','')) \/ 100.0));<br \/>\n         }<br \/>\n         if (mlarg != '') {<br \/>\n           documentURL=documentURL.replace('&ml=','&mXl=');<br \/>\n           pardata=pardata.replace('&ml=','&mXl=');<br \/>\n         }<br \/>\n         if (mtarg != '') {<br \/>\n           documentURL=documentURL.replace('&mt=','&mXt=');<br \/>\n           pardata=pardata.replace('&mt=','&mXt=');<br \/>\n         }<br \/>\n         locationhref=toolong(documentURL.replace(rfrom,rto).replace('width=\" . $_GET['width'] . $_POST['width'] . \"', 'width=' + hws[0] + mlarg + mtarg));<br \/>\n         if (locationhref != '#') { document.getElementById('ifblankpause').value=' ';  location.href=locationhref;   }<br \/>\n       } else if (huhhw != defhw) {<br \/>\n         \/\/spa=prompt('4','4');<br \/>\n   \/\/  document.title+='4';<br \/>\n         if (mlarg.indexOf('%') != -1) {<br \/>\n           mlarg='&ml=' + Math.round(eval(eval('' + hws[0]) * eval('' + mlrc[2].replace('%','')) \/ 100.0));<br \/>\n         }<br \/>\n         if (mtarg.indexOf('%') != -1) {<br \/>\n           mtarg='&mt=' + Math.round(eval(eval('' + hws[1]) * eval('' + mlrc[3].replace('%','')) \/ 100.0));<br \/>\n         }<br \/>\n         if (mlarg != '') {<br \/>\n           documentURL=documentURL.replace('&ml=','&mXl=');<br \/>\n           pardata=pardata.replace('&ml=','&mXl=');<br \/>\n         }<br \/>\n         if (mtarg != '') {<br \/>\n           documentURL=documentURL.replace('&mt=','&mXt=');<br \/>\n           pardata=pardata.replace('&mt=','&mXt=');<br \/>\n         }<br \/>\n         \/\/var wrt=prompt(documentURL,documentURL);<br \/>\n         \/\/ https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?width=556&height=347&country=Places&popularity=&aregeographicals=y&title=AF;Afghanistan%20and%20Ports&onclick=y&justmenu=y&label=[%27Lat%27,&value=%27Lon%27|%27Name%27]&data=[34.517|69.183|~Afghanistan~,1],[24.835|66.9737|~Nearest%20Port%20on%20geojson.xyz%20ports%201097km%20to%20Karachi~,1],[25.1122|62.3386|~Nearest%20Port-%20on%20geojson.xyz%20ports%201236km%20to%20Gwadar~,1],[23.0136|70.2223|~Nearest%20Port--%20on%20geojson.xyz%20ports%201283km%20to%20Kandla~,1],[21.6394|69.5874|~Nearest%20Port---%20on%20geojson.xyz%20ports%201432km%20to%20Porbandar~,1]%20|%20[-90.0|0.0|~%20~,999999999]<br \/>\n         \/\/ https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?width=556&height=947&country=Places&popularity=&aregeographicals=y&title=AF;Afghanistan%20and%20Ports&onclick=y&justmenu=y&label=[%27Lat%27,&value=%27Lon%27|%27Name%27]&data=[34.517|69.183|~Afghanistan~,1],[24.835|66.9737|~Nearest%20Port%20on%20geojson.xyz%20ports%201097km%20to%20Karachi~,1],[25.1122|62.3386|~Nearest%20Port-%20on%20geojson.xyz%20ports%201236km%20to%20Gwadar~,1],[23.0136|70.2223|~Nearest%20Port--%20on%20geojson.xyz%20ports%201283km%20to%20Kandla~,1],[21.6394|69.5874|~Nearest%20Port---%20on%20geojson.xyz%20ports%201432km%20to%20Porbandar~,1]%20|%20[-90.0|0.0|~%20~,999999999]<br \/>\n         locationhref=toolong(documentURL.replace(rfrom,rto).replace('width=\" . $_GET['width'] . $_POST['width'] . \"', 'width=' + hws[0]).replace('height=\" . $_GET['height'] . $_POST['height'] . \"', 'height=' + hws[1] + mlarg + mtarg));<br \/>\n         \/\/var lwrt=prompt(locationhref,locationhref);<br \/>\n         if (locationhref != '#') {  document.getElementById('ifblankpause').value=' ';   location.href=locationhref;    }<br \/>\n       } else if (document.getElementById('tbtb')) {<br \/>\n         document.getElementById('tbtb').value='';<br \/>\n       }<br \/>\n      }<br \/>\n     }<br \/>\n     }<br \/>\n   } else if (('' + infactor).trim() != '' && documentURL.indexOf('width=') != -1 && documentURL.indexOf('height=') != -1) {<br \/>\n     locationhref=toolong(documentURL.replace('width=\" . $_GET['width'] . $_POST['width'] . \"', 'width=' + encodeURIComponent('' + Math.round(eval(eval('' + '\" . str_replace('+',' ',urldecode($_GET['width'] . $_POST['width'])) . \"') * eval('' + infactor)))) + '').replace('height=\" . $_GET['height'] . $_POST['height'] . \"', 'height=' + encodeURIComponent('' + Math.round(eval(eval('' + '\" . str_replace('+',' ',urldecode($_GET['height'] . $_POST['height'])) . \"') * eval('' + infactor)))) + ''));<br \/>\n     if (locationhref != '#') {   document.getElementById('ifblankpause').value=' ';  location.href=locationhref;   }<br \/>\n   }<br \/>\n }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <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\">the changed<\/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;<\/p>\n<p> &#8230; to make this happen.<\/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-geo-chart-zoom-offset-tutorial\/'>New Geo Chart Zoom Offset Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gczot'>Previous relevant <a target=_blank title='Geo Chart Zoom Offset Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geo-chart-zoom-offset-tutorial\/'>Geo Chart Zoom Offset 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=\"Geo Chart Zoom Offset Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/world_view.gif\" title=\"Geo Chart Zoom Offset Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Geo Chart Zoom Offset Tutorial<\/p><\/div>\n<p>Even though we use the word &#8220;zoom&#8221; in today&#8217;s tutorial title, what we are really doing in today&#8217;s work with the <a target=_blank title='Google Chart Geo Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> is to offer &#8230;<\/p>\n<ul>\n<li>way to scale the Geo Chart by specifying a width and height with either of those &#8220;W?&#8221; or &#8220;H?&#8221; links &#8230; and at the same time now, at least for non-mobile platforms, the user can add in &#8230;<\/li>\n<li>offsets in width and height the user would normally want to make negative (to create <i>margin-left<\/i> and <i>margin-top<\/i> property settings for the HTML div element hosting the Geo Chart div SVG element) so as to &#8220;hone in&#8221; on detail in just the one area of the Geo Chart (and thereby scale it up)<\/li>\n<\/ul>\n<p> &#8230; the inspiration for wanting to offer this being the <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html' title='Dams in the USA'>Dams in the USA<\/a> web application, where dams can be plotted for individual USA states in the Geo Charts presented.<\/p>\n<p>We now also offer a choice of views if a Geo Chart, in &#8220;markers&#8221; mode, starts off relevant to a particular Country code we offer a toggling option between &#8230;<\/p>\n<ul>\n<li>country view of Geo Chart &#8230; with &#8230;<\/li>\n<li>world view of Geo Chart <font size=1>&#8230; eg. useful for &#8220;Ports of a Landlocked Country&#8221;<\/font><\/li>\n<\/ul>\n<p> &#8230; with a new &#8220;CC<sup>W<\/sup>&#8221; style of link where CC represents our ISO-3166 2 character country code for the Country in question.<\/p>\n<p>And so, onto the work of yesterday&#8217;s <a title='Map Chart Geo Chart Post Tutorial' href='#mcgcpt'>Map Chart Geo Chart Post Tutorial<\/a> today we&#8217;re changing all of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Interim code' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php--------------------------------------------GETME'>the changed<\/a> <a target=_blank title='Interim code' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php--------------------------------------------GETME'>map.php<\/a> PHP code for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\">our inhouse Google Chart Map Chart interfacer<\/a><\/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\">the changed<\/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><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/gchartgen.js--------------------GETME\" title=\"geo_chart.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/gchartgen.js--------------------GETME\" title=\"geo_chart.php\">gchartgen.js<\/a> external Javascript helper<\/li>\n<\/ul>\n<p> &#8230; to make this happen.<\/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-map-chart-geo-chart-post-tutorial\/'>New Map Chart Geo Chart Post Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mcgcpt'>Previous relevant <a target=_blank title='Map Chart Geo Chart Post Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/map-chart-geo-chart-post-tutorial\/'>Map Chart Geo Chart Post 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=\"Map Chart Geo Chart Post Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map_geo_russia_tz.gif\" title=\"Map Chart Geo Chart Post Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Map Chart Geo Chart Post Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Geo Chart Resizable Text Overlay Tutorial' href='#gcrtot'>Geo Chart Resizable Text Overlay Tutorial<\/a> another integration aspect uncovered using &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a> &#8230; through &#8230;<\/li>\n<li><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 Chart<\/a> interfacing of <a target=_blank title='Google Chart Map Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>Map Chart<\/a> &#8230; to &#8230;<\/li>\n<li><a target=_blank title='Google Chart Geo Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; for the &#8220;T&#8221; (for TimeZone) inhouse menu option, where the amount of data precluded the use of $_GET[] ( ie. ? and &#038; ) arguments, with regard to URL length restrictions, we found, trying out Russia&#8217;s TimeZone places, in getting from the Map Chart through to the Geo Chart above, there were issues.  And today, we <font color=blue>track down those issues<\/font> in amongst the codelines of our Javascript <i>toolong<\/i> function checking for this issue &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction toolong(inup) {<br \/>\n  var donealready=',';<br \/>\n  if (inup.split('&emailto=').length &gt; 2) {<br \/>\n    while (inup.split('&emailto=').length &gt; 2) {<br \/>\n     inup=inup.replace('&emailto=' + inup.split('&emailto=')[1].split('&')[0],'');<br \/>\n    }<br \/>\n  }<br \/>\n  if (inup.split('&emailsubject=').length &gt; 2) {<br \/>\n    while (inup.split('&emailsubject=').length &gt; 2) {<br \/>\n     inup=inup.replace('&emailsubject=' + inup.split('&emailsubject=')[1].split('&')[0],'');<br \/>\n    }<br \/>\n  }<br \/>\n  if (inup.split('&emailcc=').length &gt; 2) {<br \/>\n    while (inup.split('&emailcc=').length &gt; 2) {<br \/>\n     inup=inup.replace('&emailcc=' + inup.split('&emailcc=')[1].split('&')[0],'');<br \/>\n    }<br \/>\n  }<br \/>\n  if (inup.split('&emailbcc=').length &gt; 2) {<br \/>\n    while (inup.split('&emailbcc=').length &gt; 2) {<br \/>\n     inup=inup.replace('&emailbcc=' + inup.split('&emailbcc=')[1].split('&')[0],'');<br \/>\n    }<br \/>\n  }<br \/>\n  if (inup.indexOf('&email') &gt; inup.indexOf('&data')) {<br \/>\n    var putb=inup.substring(inup.indexOf('&email'));<br \/>\n    inup=inup.replace(putb,'');<br \/>\n    inup=inup.replace('&data', putb + '&data');<br \/>\n  }<br \/>\n  if (inup.replace(\/\\%20\\%7C\/g, '%2C').length &lt; 800) return inup.replace(\/\\%20\\%7C\/g, '%2C');<br \/>\n  \/\/if (inup.replace(\/\\~\\%5D\/g, '~%2C2%5D').replace(\/\\%20\\%7C\/g, '%2C').length &lt; 800) return inup.replace(\/\\~\\%5D\/g, '~%2C2%5D').replace(\/\\%20\\%7C\/g, '%2C');<br \/>\n  console.log('POST from map to geo');<br \/>\n  var pdone=false,pform='&lt;form id=pit method=POST style=display:none; action=' + inup.split('?')[0] + '&gt;&lt;input type=hidden name=onclick value=y&gt;&lt;\/input&gt;&lt;input type=hidden name=wouldlikeyoutoseekpermission value=y&gt;&lt;\/input&gt;&lt;input type=submit id=psubm&gt;&lt;\/input&gt;&lt;\/form&gt;';<br \/>\n  var pars=inup.replace('?','&').split('#')[0].split('&');<br \/>\n  for (var ipars=1; ipars&lt;pars.length; ipars++) {<br \/>\n    if (!pdone) {<br \/>\n    if (pars[ipars].split('=')[0] == \"data\") {<br \/>\n    pdone=true;<br \/>\n  \/\/if (documentURL.indexOf('rmetcalfe15') != -1) alert('here404 ' + inup.replace('?','&').split('#')[0].split('&data=')[1]);<br \/>\n    if (pform.indexOf(' name=\"' + pars[ipars].split('=')[0] + '\" ') == -1) {<br \/>\n      \/\/pform=pform.replace('&lt;\/form&gt;', '&lt;textarea cols=120 rows=2 style=display:none; name=\"' + pars[ipars].split('=')[0] + '\" value=\"\"&gt;' + inup.replace('?','&').split('#')[0].split('&data=')[1].split('&')[0] + '&lt;\/textarea&gt;&lt;\/form&gt;');<br \/>\n      <font color=blue>if (pars[ipars].split('=')[0] == 'data' && inup.replace('?','&').split('#')[0].split('&data=')[1].split('&')[0] != decodeURIComponent(inup.replace('?','&').split('#')[0].split('&data=')[1].split('&')[0])) {<br \/>\n      pform=pform.replace('&lt;\/form&gt;', '&lt;input type=\"hidden\" name=\"' + pars[ipars].split('=')[0] + '\" value=\"' + decodeURIComponent(inup.replace('?','&').split('#')[0].split('&data=')[1].split('&')[0]).replace(\/\\=\\,\/g,'=').replace(\/\\,\\~\/g,'|~').replace(\/0\\,\/g,'0|').replace(\/1\\,\/g,'1|').replace(\/2\\,\/g,'2|').replace(\/3\\,\/g,'3|').replace(\/4\\,\/g,'4|').replace(\/5\\,\/g,'5|').replace(\/6\\,\/g,'6|').replace(\/7\\,\/g,'7|').replace(\/8\\,\/g,'8|').replace(\/9\\,\/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(\/\\~\\]\/g,'~,1]') + '\"&gt;&lt;\/input&gt;&lt;\/form&gt;');<br \/>\n      } else {<\/font><br \/>\n      pform=pform.replace('&lt;\/form&gt;', '&lt;input type=\"hidden\" name=\"' + pars[ipars].split('=')[0] + '\" value=\"' + inup.replace('?','&').split('#')[0].split('&data=')[1].split('&')[0] + '\"&gt;&lt;\/input&gt;&lt;\/form&gt;');<br \/>\n      <font color=blue>}<\/font><br \/>\n      \/\/if (pars[ipars].split('=')[0] == 'data') { alert('5:' + pform);  }<br \/>\n    }<br \/>\n    } else if (decodeURIComponent(pars[ipars].split('=')[1]).indexOf(\"data:\") != -1) {<br \/>\n    \/\/if (pform.indexOf(' name=\"' + pars[ipars].split('=')[0] + '\" ') == -1) { pform=pform.replace('&lt;\/form&gt;', '&lt;input type=hidden name=\"' + pars[ipars].split('=')[0] + '\" value=\"' + (pars[ipars].replace(pars[ipars].split('=')[0] + '=','')).replace(\/\\+\/g,'%2b').split('&')[0] + '\"&gt;&lt;\/input&gt;&lt;\/form&gt;');<br \/>\n    if (pform.indexOf(' name=\"' + pars[ipars].split('=')[0] + '\" ') == -1 && donealready.indexOf(',' + + ',') == -1) { donealready+=pars[ipars].split('=')[0] + ','; pform=pform.replace('&lt;\/form&gt;', '&lt;input type=hidden name=\"' + pars[ipars].split('=')[0] + '\" value=\"' + decodeURIComponent(decodeURIComponent((pars[ipars].replace(pars[ipars].split('=')[0] + '=','')).replace(\/\\+\/g,'%2b').split('&')[0])) + '\"&gt;&lt;\/input&gt;&lt;\/form&gt;');<br \/>\n      \/\/if (pars[ipars].split('=')[0] == 'data') { alert('55:' + pform);  }<br \/>\n    }<br \/>\n    } else if (decodeURIComponent(pars[ipars].replace(pars[ipars].split('=')[0] + '=','')).length &gt; 500) {<br \/>\n    if (pform.indexOf(' name=\"' + pars[ipars].split('=')[0] + '\" ') == -1) {<br \/>\n      \/\/pform=pform.replace('&lt;\/form&gt;', '&lt;textarea cols=120 rows=2 style=display:none; name=\"' + pars[ipars].split('=')[0] + '\" value=\"' + (pars[ipars].replace(pars[ipars].split('=')[0] + '=','')).split('&')[0] + '\"&gt;&lt;\/textarea&gt;&lt;\/form&gt;');<br \/>\n      pform=pform.replace('&lt;\/form&gt;', '&lt;input type=\"hidden\" name=\"' + pars[ipars].split('=')[0] + '\" value=\"' + (pars[ipars].replace(pars[ipars].split('=')[0] + '=','')).split('&')[0] + '\"&gt;&lt;\/input&gt;&lt;\/form&gt;');<br \/>\n      \/\/if (pars[ipars].split('=')[0] == 'data') { alert('555:' + pform);  }<br \/>\n    }<br \/>\n    } else {<br \/>\n    \/\/if (pform.indexOf(' name=\"' + pars[ipars].split('=')[0] + '\" ') == -1) { pform=pform.replace('&lt;\/form&gt;', '&lt;input type=hidden name=\"' + pars[ipars].split('=')[0] + '\" value=\"' + (pars[ipars].replace(pars[ipars].split('=')[0] + '=','')).split('&')[0] + '\"&gt;&lt;\/input&gt;&lt;\/form&gt;');<br \/>\n    if (pform.indexOf(' name=\"' + pars[ipars].split('=')[0] + '\" ') == -1 && donealready.indexOf(',' + + ',') == -1) { donealready+=pars[ipars].split('=')[0] + ',';  pform=pform.replace('&lt;\/form&gt;', '&lt;input type=hidden name=\"' + pars[ipars].split('=')[0] + '\" value=\"' + decodeURIComponent(decodeURIComponent((pars[ipars].replace(pars[ipars].split('=')[0] + '=','')).split('&')[0])) + '\"&gt;&lt;\/input&gt;&lt;\/form&gt;');<br \/>\n      \/\/if (pars[ipars].split('=')[0] == 'data') { alert('5555:' + pform);  }<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  console.log(pform.replace(\/\\%2520\/g,\" \").replace(\/\\%252C\/g,',').replace(\/\\%5B\/g,'[').replace(\/\\%5D\/g,']').replace(\/\\%25252C\/g,',').replace(\/\\%25252F\/g,'\/').replace(\/\\%252F\/g,'\/').replace(\/\\%252F\/g,'\/').replace(\/\\%2C\/g,',').replace(\/\\%252520\/g,'_').replace(\/\\%2527\/g,\"'\").replace(\/\\%27\/g,\"'\").replace(\/\\%7E\/g,'~').replace(\/\\%2F\/g,'\/').replace(\/\\%20\/g,' ').replace(\/\\~\\]\/g, '~,2]').replace(\/\\,\\ \\[\/g,'['));<br \/>\n  \/\/alert(pform.replace(\/\\%2520\/g,\" \").replace(\/\\%252C\/g,',').replace(\/\\%5B\/g,'[').replace(\/\\%5D\/g,']').replace(\/\\%25252C\/g,',').replace(\/\\%25252F\/g,'\/').replace(\/\\%252F\/g,'\/').replace(\/\\%252F\/g,'\/').replace(\/\\%2C\/g,',').replace(\/\\%252520\/g,'_').replace(\/\\%2527\/g,\"'\").replace(\/\\%27\/g,\"'\").replace(\/\\%7E\/g,'~').replace(\/\\%2F\/g,'\/').replace(\/\\%20\/g,' ').replace(\/\\~\\]\/g, '~,2]').replace(\/\\,\\ \\[\/g,'['));<br \/>\n  if (agy != 'Y' || ('' + document.referrer).indexOf('\/tz_places.php') != -1) {<br \/>\n  console.log('pform=' + pform);<br \/>\n  document.body.innerHTML+=pform;<br \/>\n  } else {<br \/>\n  document.body.innerHTML+=pform.replace(\/\\%252C\/g,',').replace(\/\\%5B\/g,'[').replace(\/\\%5D\/g,']').replace(\/\\%25252C\/g,',').replace(\/\\%25252F\/g,'\/').replace(\/\\%252F\/g,'\/').replace(\/\\%252F\/g,'\/').replace(\/\\%2C\/g,',').replace(\/\\%252520\/g,'_').replace(\/\\%2527\/g,\"'\").replace(\/\\%27\/g,\"'\").replace(\/\\%7E\/g,'~').replace(\/\\%2F\/g,'\/').replace(\/\\%20\/g,' ').replace(\/\\~\\]\/g, '~,2]').replace(\/\\,\\ \\[\/g,'[');<br \/>\n  }<br \/>\n  \/\/alert(pform.split(' name=\"task\"')[1]);<br \/>\n  setTimeout(alatr, 2000); \/\/document.getElementById('psubm').click();<br \/>\n  return '#';<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; as another &#8220;phase 1&#8221; item in our latest project aims, as per &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-map-chart-plotting-tutorial\/'>\n<ol>\n<li>Help itself \u2026 map.php \u2026 phase 1<\/li>\n<li>Redirect to Image Chart Map Chart \u2026 map.php and\/or geo_chart.php \u2026 <font color=\"blue\">just after first prompt \u2026 phase 2<\/font><\/li>\n<li>Caller form method=POST map.php action interventions at onsubmit event \u2026 non map.php \u2026 phase 3<\/li>\n<li>Transfer the onclick prompt window functionality over to geo_chart.php \u2026 phase 4<\/li>\n<\/ol>\n<\/blockquote>\n<p>Also changed, we do <font color=purple>more automations<\/font> of the clicking of the Map Chart&#8217;s &#8220;Geo&#8221; link (to the Geo Chart) &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n      var isusdams='\" . (isset($_POST[$xiso]) ? trim(str_replace('+',' ',urldecode($_POST[$xiso]))) : (isset($_GET[$xiso]) ? trim(str_replace('+',' ',urldecode($_GET[$xiso]))) : '')) . \"';<br \/>\n  if (xiso != 'iso' && isusdams == '') { isusdams=decodeURIComponent(documentURL.split('&' + xiso + '=')[1].split('&')[0]);  }<br \/>\n      if (window.top || isusdams.trim() != '') {<br \/>\n        if (isusdams.trim() != '') {<br \/>\n          if (isusdams.indexOf(';') == -1) { isusdams+=';'; }<br \/>\n          if (eval('' + isusdams.length) &gt; 3) {  isfrom=isusdams.substring(0,3); isto=isusdams.substring(0,2) + ';';  }<br \/>\n        } else if (top.document.URL.indexOf('\/dams_usa.htm') != -1) {<br \/>\n          isusdams='US;';<br \/>\n        } else if (top.document.URL.indexOf('\/australian_') != -1) {<br \/>\n          isusdams='AU;';<br \/>\n        } else if (top.document.URL.indexOf('\/ireland_') != -1) {<br \/>\n          isusdams='IE;';<br \/>\n        } else if (top.document.URL.indexOf('\/new_zealand_') != -1) {<br \/>\n          isusdams='NZ;';<br \/>\n        } else if (documentURL.indexOf('iso=') != -1) {<br \/>\n          isusdams=documentURL.split('iso=')[1].split('&')[0].split('#')[0] + ';';<br \/>\n        } else if (parent.document.URL.indexOf('\/tz_places.php?iso=') != -1) {<br \/>\n          isusdams=parent.document.URL.split('\/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';<br \/>\n        } else if (top.document.URL.indexOf('\/tz_places.php?iso=') != -1) {<br \/>\n          isusdams=top.document.URL.split('\/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';<br \/>\n  <font color=purple>} else if (top.document.URL.indexOf('rjmprogramming.com.au\/HTMLCSS\/regions.') != -1) {<br \/>\n          isusdams=' ';<br \/>\n  } else if (top.document.URL.indexOf('rjmprogramming.com.au\/HTMLCSS\/countr') != -1) {<br \/>\n          isusdams=' ';<br \/>\n        } else if (documentURL.indexOf('title=Nearby%20TimeZone%20Places') != -1) {<br \/>\n          isusdams=' ';<\/font><br \/>\n        }<br \/>\n      } else if (documentURL.indexOf('iso=') != -1) {<br \/>\n          isusdams=documentURL.split('iso=')[1].split('&')[0].split('#')[0] + ';';<br \/>\n      } else if (documentURL.indexOf('&iso') != -1) {<br \/>\n          isusdams=documentURL.split('&iso')[1].split('=')[1].split('&')[0].split('#')[0] + ';';<br \/>\n          isdfrom='&iso' + documentURL.split('&iso')[1].split('=')[0] + '=';<br \/>\n          isdto='&iso=';<br \/>\n      }<br \/>\n      var widea='width=556&height=347&';<br \/>\n      if (documentURL.indexOf('width=') != -1 && documentURL.indexOf('height=') != -1) {<br \/>\n        widea='width=' + documentURL.split('width=')[1].split('&')[0].split('#')[0] + '&height=' + documentURL.split('height=')[1].split('&')[0].split('#')[0] + '&';<br \/>\n      }<br \/>\n      if (isusdams != '') {<br \/>\n      \/\/alert('1:' + documentURL);<br \/>\n      locationhref=toolong((documentURL.replace(isdfrom,isdto).replace(isdocfrom,isdocto) + '%20,%20[-90.0|0.0|~%20~,999999999]').replace('\/Map', '\/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?' + widea + 'country=Places&popularity=&aregeographicals=y&').replace('title=','title=' + (isusdams + '   ').substring(0,3).trim().replace(isfrom,isto)).replace(\/\\=\\,\/g,'=').replace(\/\\,\\~\/g,'|~').replace(\/0\\,\/g,'0|').replace(\/1\\,\/g,'1|').replace(\/2\\,\/g,'2|').replace(\/3\\,\/g,'3|').replace(\/4\\,\/g,'4|').replace(\/5\\,\/g,'5|').replace(\/6\\,\/g,'6|').replace(\/7\\,\/g,'7|').replace(\/8\\,\/g,'8|').replace(\/9\\,\/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(\/\\~\\]\/g,'~,1]'));<br \/>\n      } else {<br \/>\n      \/\/alert('2:' + documentURL);<br \/>\n      locationhref=toolong((documentURL.replace(isdfrom,isdto).replace(isdocfrom,isdocto) + '%20,%20[-90.0|0.0|~%20~,999999999]').replace('\/Map', '\/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?' + widea + 'country=Places&popularity=&aregeographicals=y&').replace(\/\\=\\,\/g,'=').replace(\/\\,\\~\/g,'|~').replace(\/0\\,\/g,'0|').replace(\/1\\,\/g,'1|').replace(\/2\\,\/g,'2|').replace(\/3\\,\/g,'3|').replace(\/4\\,\/g,'4|').replace(\/5\\,\/g,'5|').replace(\/6\\,\/g,'6|').replace(\/7\\,\/g,'7|').replace(\/8\\,\/g,'8|').replace(\/9\\,\/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(\/\\~\\]\/g,'~,1]'));<br \/>\n      }<br \/>\n      \/\/locationhref=toolong((documentURL + ',[-90.0,0.0,~%20~,999999999]').replace('\/Map', '\/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=' + agy + '&').replace(\/\\=\\,\/g,'=').replace(\/\\,\\~\/g,'|~').replace(\/0\\,\/g,'0|').replace(\/1\\,\/g,'1|').replace(\/2\\,\/g,'2|').replace(\/3\\,\/g,'3|').replace(\/4\\,\/g,'4|').replace(\/5\\,\/g,'5|').replace(\/6\\,\/g,'6|').replace(\/7\\,\/g,'7|').replace(\/8\\,\/g,'8|').replace(\/9\\,\/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(\/\\~\\]\/g,'~,1]'));<br \/>\n      \/\/locationhref=toolong((documentURL + '').replace('\/Map', '\/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=' + agy + '&').replace(\/\\=\\,\/g,'=').replace(\/\\,\\~\/g,'|~').replace(\/0\\,\/g,'0|').replace(\/1\\,\/g,'1|').replace(\/2\\,\/g,'2|').replace(\/3\\,\/g,'3|').replace(\/4\\,\/g,'4|').replace(\/5\\,\/g,'5|').replace(\/6\\,\/g,'6|').replace(\/7\\,\/g,'7|').replace(\/8\\,\/g,'8|').replace(\/9\\,\/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(\/\\~\\]\/g,'~,1]'));<br \/>\n     } else {<br \/>\n      locationhref=usug;<br \/>\n     }<br \/>\n     if (locationhref != '#') { location.href=locationhref; } locationhref='';<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <a target=_blank title='Interim code' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php--------------------------------------------GETME'>the changed<\/a> <a target=_blank title='Interim code' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php--------------------------------------------GETME'>map.php.php<\/a> PHP code for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\">our inhouse Google Chart Map Chart interfacer<\/a>.<\/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\/map-chart-geo-chart-post-tutorial\/'>Map Chart Geo Chart Post Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcrtot'>Previous relevant <a target=_blank title='Geo Chart Resizable Text Overlay Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geo-chart-resizable-text-overlay-tutorial\/'>Geo Chart Resizable Text Overlay 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=\"Geo Chart Resizable Text Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart_text_overlay.jpg\" title=\"Geo Chart Resizable Text Overlay Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Geo Chart Resizable Text Overlay Tutorial<\/p><\/div>\n<p>There is little doubt that when you spend a concentrated block of time interfacing among software parts (or modules) playing their &#8220;bit parts&#8221; in an overall solution to <strike>42<\/strike> an <i>aim<\/i>, you learn about the strengths and weaknesses of these components to the solution.  <i>Aim?!<\/i>  Yes, remember <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-map-chart-plotting-tutorial\/' title='Google Chart Image Chart Map Chart Plotting Tutorial'>Google Chart Image Chart Map Chart Plotting Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-map-chart-plotting-tutorial\/'>\n<ol>\n<li>Help itself \u2026 map.php \u2026 phase 1<\/li>\n<li>Redirect to Image Chart Map Chart \u2026 map.php and\/or geo_chart.php \u2026 <font color=\"blue\">just after first prompt \u2026 phase 2<\/font><\/li>\n<li>Caller form method=POST map.php action interventions at onsubmit event \u2026 non map.php \u2026 phase 3<\/li>\n<li>Transfer the onclick prompt window functionality over to geo_chart.php \u2026 phase 4<\/li>\n<\/ol>\n<\/blockquote>\n<p> &#8230; being our recent <i>aim<\/i>, and the inspiration for the Region Picker of yesterday&#8217;s <a title='Region Picker Sticky Scrolling Tutorial' href='#rpsst'>Region Picker Sticky Scrolling Tutorial<\/a>, which became both &#8230;<\/p>\n<ul>\n<li>a <i>component part<\/i> of the project above &#8230; as well as &#8230;<\/li>\n<li>a standalone component<\/li>\n<\/ul>\n<p> &#8230; the reason recently that the <i>component part<\/i> role above has not been centre stage being that its interfacing to the Geo Chart was successfully seamless, hence we can concentrate on how it performs in its standalone form knowing that improvements will flow through to our &#8220;large picture&#8221; project above.<\/p>\n<p>But the Region Picker showed us with its calling of the Geo Chart that that Geo Chart component could improve with two nuances &#8230;<\/p>\n<ul>\n<li>be able to rescale the Geo Chart proportionally via its <i>width<\/i> and <i>height<\/i> arguments &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   <font size=1>(blah, blah, blah)<\/font>  &lt;a href=# onclick=askhw(1.1); style=display:none; id=abigger title=Bigger&gt;++&lt;\/a&gt;&nbsp;&nbsp;&lt;a href=# onclick=askhw(0.9); style=display:none; id=asmaller title=Smaller&gt;--&lt;\/a&gt;<font color=purple>\" . $toverlay . \"<\/font>  <font size=1>(blah, blah, blah)<\/font><br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<p> &#8230; <font color=blue>used in<\/font> &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n function askhw(<font color=blue>infactor<\/font>) {<br \/>\n   var defhw='';<br \/>\n   var rfrom='youllneverfindthis';<br \/>\n   var rto='youllneverfindthis';<br \/>\n   if (<font color=blue>('' + infactor).trim() == '' && <\/font>document.URL.indexOf('width=') != -1 && document.URL.indexOf('height=') != -1) {<br \/>\n     defhw='\" . $_GET['width'] . \",\" . $_GET['height'] . \"';<br \/>\n     var huhhw=prompt('Please supply any alternative to current width,height bearing in mind we like 7860.045,6875. for just Europe or 3930.068,3437.054 for South East Asia and Oceania or 3230.035,2737.052 for Africa or 3001.011,2801.059 for South America or 2201.001,2001.029 for North and Central America or 2202.056,2002.029 for Asia or append these by Country ISO 2 Character Code and semicolon (;) for single country map', defhw);<br \/>\n     if (huhhw) {<br \/>\n      if (huhhw != '') {<br \/>\n       var prehws=huhhw.split(';');<br \/>\n       if (prehws.length > 1) {<br \/>\n         huhhw=huhhw.replace(prehws[0] + ';', '');<br \/>\n         rfrom='title=';<br \/>\n         rto='title=' + prehws[0] + ';';<br \/>\n       }<br \/>\n       var hws=huhhw.split(',');<br \/>\n       if (hws.length == 1) {<br \/>\n         location.href=document.URL.replace(rfrom,rto).replace('width=\" . $_GET['width'] . \"', 'width=' + hws[0]);<br \/>\n       } else if (hws[0] == '') {<br \/>\n         location.href=document.URL.replace(rfrom,rto).replace('height=\" . $_GET['height'] . \"', 'height=' + hws[1]);<br \/>\n       } else if (hws[1] == '') {<br \/>\n         location.href=document.URL.replace(rfrom,rto).replace('width=\" . $_GET['width'] . \"', 'width=' + hws[0]);<br \/>\n       } else if (huhhw != defhw) {<br \/>\n         location.href=document.URL.replace(rfrom,rto).replace('width=\" . $_GET['width'] . \"', 'width=' + hws[0]).replace('height=\" . $_GET['height'] . \"', 'height=' + hws[1]);<br \/>\n       }<br \/>\n      }<br \/>\n     }<br \/>\n   }<font color=blue> else if (('' + infactor).trim() != '' && document.URL.indexOf('width=') != -1 && document.URL.indexOf('height=') != -1) {<br \/>\n     location.href=document.URL.replace('width=\" . $_GET['width'] . \"', 'width=' + encodeURIComponent('' + Math.round(eval(eval('' + '\" . str_replace('+',' ',urldecode($_GET['width'])) . \"') * eval('' + infactor)))) + '').replace('height=\" . $_GET['height'] . \"', 'height=' + encodeURIComponent('' + Math.round(eval(eval('' + '\" . str_replace('+',' ',urldecode($_GET['height'])) . \"') * eval('' + infactor)))) + '');<br \/>\n   }<\/font><br \/>\n }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<li>even though tooltips and hover titles can help, also assisting with &#8220;marker&#8221; mode Geo Charts <font color=purple>could be to offer<\/font> an overlay &#8220;text&#8221; representation of the chart data (in a position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 0.75; iframe element &#8230; and with parent opacity 0.75 also &#8230; mode of use) &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n<font color=purple>$toverlay='';<br \/>\nif (strpos($_SERVER['QUERY_STRING'], '&are') !== false) {<br \/>\n  $toverlay=\"&amp;nbsp;&amp;nbsp;&lt;a href=# onclick=textoverlay(); style=display:inline-block; id=atxtov title=Overlay&gt;T&lt;sup&gt;T&lt;\/sup&gt;&lt;\/a&gt;\";<br \/>\n}<br \/>\n$greenis='green';<br \/>\nif (isset($_GET['gcol'])) {<br \/>\n  $greenis=str_replace('+',' ',urldecode($_GET['gcol']));<br \/>\n} else if (isset($_POST['gcol'])) {<br \/>\n  $greenis=str_replace('+',' ',urldecode($_POST['gcol']));<br \/>\n}<br \/>\nif (trim($greenis) == '') { $greenis='green'; }<\/font><br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; calling Javascript &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function textoverlay() {<br \/>\n    if (document.URL.indexOf('&') != -1) {<br \/>\n      var ids='doverlay';<br \/>\n      if (document.getElementById('idivis') && !document.getElementById('doverlay')) { ids='idivis';  }<br \/>\n      document.getElementById('chart_div').style.opecaity='0.75';<br \/>\n      document.getElementById(ids).style.margin='0 0 0 0';<br \/>\n      document.getElementById(ids).style.padding='0 0 0 0';<br \/>\n      if (document.URL.indexOf('&text=') == -1) {<br \/>\n        document.getElementById(ids).innerHTML+='&lt;iframe frameborder=0 style=\\\"padding:0 0 0 0;margin:0 0 0 0;position:absolute;top:0px;left:0px;width:100%;height:100vh;z-index:2;opacity:0.75;\\\" src=\\\"' + document.URL.replace('&', '&gcol=black&text=y&') + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n      } else if (document.URL.indexOf('&txte=') != -1) {<br \/>\n        document.getElementById(ids).innerHTML+='&lt;iframe frameborder=0 style=\\\"padding:0 0 0 0;margin:0 0 0 0;position:absolute;top:0px;left:0px;width:100%;height:100vh;z-index:2;opacity:0.75;\\\" src=\\\"' + document.URL.replace('&txte=', '&text=') + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n      } else {<br \/>\n        document.getElementById(ids).innerHTML+='&lt;iframe frameborder=0 style=\\\"padding:0 0 0 0;margin:0 0 0 0;position:absolute;top:0px;left:0px;width:100%;height:100vh;z-index:2;opacity:0.75;\\\" src=\\\"' + document.URL.replace('&text=', '&txte=') + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<\/ul>\n<p> &#8230; in <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\">the changed<\/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>.<\/p>\n<p>Also back at the Region Picker there was an annoyance where if you clicked on a right hand cell link for an inhouse geographicals menu to appear, but hovered over another link getting away, that resultant Javascript prompt window could be tainted by the last hovered over link&#8217;s data.  Well, with some <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/setTimeout'>setTimeout<\/a> scenarios we hope for a <font color=blue>better user experience<\/font> with &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>var noslpt=false, gcis='', gwhat='';<\/font><br \/>\n<br \/>\n<font color=blue>function yesslpt() {<br \/>\n   noslpt=false;<br \/>\n}<br \/>\n<br \/>\nfunction gslptc() {<br \/>\n  slptc(gwhat, gcis);<br \/>\n}<\/font><br \/>\n<br \/>\nfunction slptc(what, cis) {<br \/>\n  <font color=blue>if (noslpt) {<br \/>\n    gwhat=what;<br \/>\n    gcis=cis;<br \/>\n    setTimeout(gslptc, 26000);<br \/>\n    return false;<br \/>\n  }<\/font><br \/>\n  lastplace=what;<br \/>\n  lastcode=cis.trim();<br \/>\n  if (('' + cis + '   ').substring(2).substring(0,1) == '-') {<br \/>\n    lastcountrycode=cis.substring(0,2).toUpperCase();<br \/>\n  } else if (eval('' + cis.length) == 2) {<br \/>\n    lastcountrycode=cis.toUpperCase();<br \/>\n  }<br \/>\n  if (what.indexOf(' (') != -1 && what.replace(\/\\ \/g,'').indexOf('()') == -1) {<br \/>\n    lastcountry=what.split(' (')[1].split(')')[0];<br \/>\n  }<br \/>\n  return what;<br \/>\n}<br \/>\n<br \/>\n<font color=blue>function gslpt() {<br \/>\n  slpt(gwhat);<br \/>\n}<\/font><br \/>\n<br \/>\nfunction slpt(what) {<br \/>\n  <font color=blue>if (noslpt) {<br \/>\n    gwhat=what;<br \/>\n    setTimeout(gslpt, 26000);<br \/>\n    return false;<br \/>\n  }<\/font><br \/>\n  lastplace=what;<br \/>\n  if (what.indexOf(' (') != -1 && what.replace(\/\\ \/g,'').indexOf('()') == -1) {<br \/>\n    lastcountry=what.split(' (')[1].split(')')[0];<br \/>\n  }<br \/>\n  return what;<br \/>\n}<br \/>\n<br \/>\n  function gmenu(rcodeis, erdescis) {<br \/>\n   var rdescis=decodeURIComponent(erdescis);<br \/>\n      var latdeg=-999, longdeg=-999;<br \/>\n   if (rdescis != lastplace && lastplace.trim() != '') { rdescis=lastplace;  }<br \/>\n   <font color=blue>noslpt=true;<br \/>\n   setTimeout(yesslpt, 25000);<\/font><br \/>\n\/\/  rest of this Javascript click event function as usual follows ...<br \/>\n  }<br \/>\n<\/code><\/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\/PHP\/GeoChart\/image_chart.php------------------GETME\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php------------------GETME\">image_chart.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php\">Google Chart Image Chart Map Chart interfacer<\/a> &#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\/HTMLCSS\/regions_via_countries.html----------GETME\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html----------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a><\/li>\n<\/ul>\n<p> &#8230; to make this happen.<\/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\/geo-chart-resizable-text-overlay-tutorial\/'>Geo Chart Resizable Text Overlay Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpsst'>Previous relevant <a target=_blank title='Region Picker Sticky Scrolling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-sticky-scrolling-tutorial\/'>Region Picker Sticky Scrolling 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 Sticky Scrolling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_sticky.jpg\" title=\"Region Picker Sticky Scrolling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Sticky Scrolling Tutorial<\/p><\/div>\n<p>With our current Region Picker web application of recent blog postings, like yesterday&#8217;s <a title='Region Picker Geographicals Tutorial' href='#rpgt'>Region Picker Geographicals Tutorial<\/a>, you may have noticed &#8230;<\/p>\n<ul>\n<li>quite a bit of CSS <i>position: fixed;<\/i> positioning &#8230; fairly easily understood as an element occupying screen space where its <i>left<\/i> and <i>top<\/i> (in our case) properties are set &#8230; but in order to improve scrolling in the right hand table cell area <font size=1>(where, if filled with country Slovenia&#8217;s region list, as one example of many, it would overflow down below the webpage and these elements would not be able to be scrolled to)<\/font> we resorted to &#8230;<\/li>\n<li>CSS <i>position: sticky;<\/i> positioning &#8230; for one of the first times we can remember, the &#8220;heads up&#8221; to try it coming from <a target=_blank title='Excellent link, thanks' href='https:\/\/stackoverflow.com\/questions\/16094785\/have-a-fixed-position-div-that-needs-to-scroll-if-content-overflows'>this excellent link<\/a>, thanks, and an explanation of &#8220;sticky&#8221; from <a target=_blank title='W3schools explanation of CSS position:sticky ... thanks' href='https:\/\/www.w3schools.com\/howto\/howto_css_sticky_element.asp'>W3schools<\/a>, thanks, feels required here &#8230;<br \/>\n<blockquote cite='https:\/\/www.w3schools.com\/howto\/howto_css_sticky_element.asp'><p>\nAn element with position: sticky; is positioned based on the user&#8217;s scroll position.<br \/>\n<br \/>\nA sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport &#8211; then it &#8220;sticks&#8221; in place (like position:fixed).<br \/>\n<br \/>\nNote: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.\n<\/p><\/blockquote>\n<p> &#8230; as we just can&#8217;t explain it well enough ourselves, but know in our heart of hearts, that an arrangement living between <i>relative and fixed<\/i> as far as that CSS <i>position<\/i> property goes, is a thing we are constantly reaching for <font size=1>(but please don&#8217;t think this means it will work for you everywhere &#8230; it depends)<\/font>\n<\/li>\n<\/ul>\n<p>The other part of the webpage we couldn&#8217;t scroll to was the mid-webpage select (ie. dropdown) element when populated by the regions of a country like Slovenia.  We took the advice of <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/16094785\/have-a-fixed-position-div-that-needs-to-scroll-if-content-overflows'>this other excellent link<\/a>, thanks, where it offers an example piece of CSS &#8230;<\/p>\n<blockquote cite='https:\/\/stackoverflow.com\/questions\/16094785\/have-a-fixed-position-div-that-needs-to-scroll-if-content-overflows'><p>\n.fixed-content {<br \/>\n    position: fixed;<br \/>\n    top: 0;<br \/>\n    bottom:0;<br \/>\n<br \/>\n    width: 100vw; \/* viewport width *\/<br \/>\n    height: 100vh; \/* viewport height *\/<br \/>\n    overflow-y: scroll;<br \/>\n    overflow-x: hidden;<br \/>\n}\n<\/p><\/blockquote>\n<p> &#8230; the <font color=blue>modelling of which<\/font>, for us <font size=1>(where Javascript var<sub>iable<\/sub> <i>sp1<\/i> points at our hosting element)<\/font> &#8230;<\/p>\n<p><code><br \/>\n   sp1.style.position='fixed';<br \/>\n   sp1.style.left='' + eval(40 + eval('' + document.getElementsByTagName('span')[0].getBoundingClientRect().right)) + 'px'; \/\/ myr.left<br \/>\n   sp1.style.top='10px'; \/\/ myr.top<br \/>\n   sp1.style.border='5px dotted yellow';<br \/>\n   <br \/>\n   <font color=blue>sp1.style.width='160px';<br \/>\n   sp1.style.height='80%';<br \/>\n   sp1.style.bottom='0px';<br \/>\n   \/\/sp1.style.minHeight='100%';<br \/>\n   sp1.style.overflowY='scroll';<br \/>\n   sp1.style.overflowX='hidden'; <\/font><br \/>\n<\/code><\/p>\n<p> &#8230; paid dividends.  Thanks everybody!<\/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\/PHP\/GeoChart\/image_chart.php-----------------GETME\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php-----------------GETME\">image_chart.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php\">Google Chart Image Chart Map Chart interfacer<\/a> &#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\/HTMLCSS\/regions_via_countries.html---------GETME\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html---------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a><\/li>\n<\/ul>\n<p> &#8230; to make this a happening th<strike>a<\/strike>ing.<\/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\/region-picker-sticky-scrolling-tutorial\/'>Region Picker Sticky Scrolling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpgt'>Previous relevant <a target=_blank title='Region Picker Geographicals Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geographicals-tutorial\/'>Region Picker Geographicals 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 Geographicals Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_markers_menuparts.jpg\" title=\"Region Picker Geographicals Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Geographicals Tutorial<\/p><\/div>\n<p>All the recent Region Picker focus on &#8230;<\/p>\n<ul>\n<li>regions <font size=1>&#8230; doh!<\/font> &#8230; turns to &#8230;<\/li>\n<li>geographicals &#8230; as possible &#8230; as a &#8220;marker&#8221; representative position<\/li>\n<\/ul>\n<p> &#8230; because, as possible, this opens up possibilities for our inhouse Javascript prompt window menus, where we add options for &#8230;<\/p>\n<ul>\n<li>Airports<\/li>\n<li>Sun Angle<\/li>\n<li>Moon Angle<\/li>\n<li>Coriolis Effect<\/li>\n<li><a target=_blank title='Google Earth' href='\/\/earth.google.com'>Google Earth<\/a><\/li>\n<li>Geo Chart<\/li>\n<\/ul>\n<p> &#8230; for the interest of users of the Region Picker.<\/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\/PHP\/GeoChart\/image_chart.php----------------GETME\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php----------------GETME\">image_chart.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php\">Google Chart Image Chart Map Chart interfacer<\/a> &#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\/HTMLCSS\/regions_via_countries.html--------GETME\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html--------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a><\/li>\n<\/ul>\n<p> &#8230; to make this happen, further to yesterday&#8217;s <a title='Region Picker Keyboard Tutorial' href='#rpkt'>Region Picker Keyboard Tutorial<\/a>.<\/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\/region-picker-geographicals-tutorial\/'>Region Picker Geographicals Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpkt'>Previous relevant <a target=_blank title='Region Picker Keyboard Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-keyboard-tutorial\/'>Region Picker Keyboard 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 Keyboard Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_chart_slovenia.jpg\" title=\"Region Picker Keyboard Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Keyboard Tutorial<\/p><\/div>\n<p>The menus we&#8217;ve been seeing in our latest Region Picker web application blog posting thread, like for yesterday&#8217;s <a title='Region Picker Post Tutorial' href='#rppt'>Region Picker Post Tutorial<\/a>, ask for a one letter answer.  As such, that can mean <a target=_blank title='Hotkey information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Keyboard_shortcut'>&#8220;hotkey&#8221;<\/a> non-mobile logic can be the go.  And so, in a similar way to how it tweaked with us &#8220;to think keyboard&#8221; with our SOS Game presented in the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/sos-game-keyboard-tutorial\/' title='SOS Game Keyboard Tutorial'>SOS Game Keyboard Tutorial<\/a>, we realized a good initiative with our Region Picker web application, to save ourselves from the need for Javascript prompt windows, perhaps, in a non-mobile environment, we could code for a document.body &#8230;<\/p>\n<p><code><br \/>\n&lt;body onload=\"onl();\" title=\"Regions of Each Country on Earth\" ondblclick=\"tryit();\" <font color=magenta>onkeydown=\"return okd(event);\"<\/font>&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; coding for the keyboard <font color=magenta>&#8220;onkeydown&#8221; event<\/font> with some new Javascript logic &#8230;<\/p>\n<p><code><br \/>\n<font color=magenta>function okd(e){<br \/>\n   var charx = e.which || e.keyCode;<br \/>\n   if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     charx=charx;<br \/>\n   } else if (('' + e.keyCode) == '87') { \/\/ Wikipedia<br \/>\n     menuize('W');<br \/>\n   } else if (('' + e.keyCode) == '89') { \/\/ YouTube<br \/>\n     menuize('Y');<br \/>\n   } else if (('' + e.keyCode) == '84') { \/\/ TimeZone tz_places.php<br \/>\n     menuize('T');<br \/>\n   } else if (('' + e.keyCode) == '71') { \/\/ Google<br \/>\n     menuize('G');<br \/>\n   }<br \/>\n   return true;<br \/>\n}<\/font><br \/>\n<br \/>\nfunction menuize(rans) {<br \/>\n      var rdescis=lastplace;<br \/>\n      if ((rans + ' ').toUpperCase().substring(0,1) == 'W') {<br \/>\n         if (rdescis == '') {<br \/>\n         window.open('\/\/wikipedia.org','_blank','top=180,left=400,width=600,height=600');<br \/>\n         } else {<br \/>\n         window.open('\/\/wikipedia.org\/wiki\/' + encodeURIComponent(rdescis.replace(\/\\ \\(\/g,', ').replace(\/\\)$\/g,'')).replace(\/\\%20\/g,'_'),'_blank',<font color=blue>'top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))<\/font>);<br \/>\n         }<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'Y') {<br \/>\n         if (rdescis == '') {<br \/>\n         window.open('\/\/www.youtube.com','_blank','top=180,left=400,width=600,height=600');<br \/>\n         } else {<br \/>\n         window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=' + encodeURIComponent('     ' + rdescis.replace(\/\\ \\(\/g,', ').replace(\/\\)$\/g,'')),'_blank',<font color=blue>'top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))<\/font>);<br \/>\n         }<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'G') {<br \/>\n         if (rdescis == '') {<br \/>\n         window.open('\/\/www.google.com','_blank','top=180,left=400,width=600,height=600');<br \/>\n         } else {<br \/>\n         window.open('\/\/www.google.com\/search?q=' + encodeURIComponent(rdescis.replace(\/\\ \\(\/g,', ').replace(\/\\)$\/g,'')) + '&tbm=isch','_blank',<font color=blue>'top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))<\/font>);<br \/>\n         }<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'T') { \/\/ && eval(('' + document.getElementById('myp').getAttribute('data-fc')).length) == 2) {<br \/>\n         if (rdescis == '') {<br \/>\n         window.open('\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php','_blank','top=180,left=400,width=600,height=600');<br \/>\n         } else {<br \/>\n         window.open('\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php?iso=' + ('' + lastcode + '  ').toUpperCase().substring(0,2).trim(),'_blank',<font color=blue>'top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))<\/font>);<br \/>\n         }<br \/>\n      }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; represents, to us, a layer of functionality on top of any existing functionality, helping the user experienece for non-mobile platform users.<\/p>\n<p>And that third parameter of window.open popup window (and iframe method=POST scenarios) gets a makeover to position popups more in keeping with where the user has been with their mouse movement, for improved context scenarios, and involving new global Javascript var<font size=1>iables<\/font> &#8230;<\/p>\n<ul>\n<li><i>xs<\/i> &#8230; screen X &#8230;<\/li>\n<li><i>ys<\/i> &#8230; screen Y &#8230; <font color=blue>we detect<\/font> <font color=purple>and follow (back at any caller)<\/font>, both at the called and caller, in the image_chart.php helper Javascript code &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n       e = e || window.event;<br \/>\n       e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       x = e.touches[0].pageX;<br \/>\n       y = e.touches[0].pageY;<br \/>\n       <font color=blue>xs = pax(e.touches[0].screenX);<br \/>\n       ys = paa(e.touches[0].screenY);<\/font><br \/>\n       } else {<br \/>\n       x = e.touches[0].clientX;<br \/>\n       y = e.touches[0].clientY;<br \/>\n       <font color=blue>xs = pax(e.touches[0].screenX);<br \/>\n       ys = paa(e.touches[0].screenY);<\/font><br \/>\n       }<br \/>\n       console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        x = e.clientX;<br \/>\n        y = e.clientY;<br \/>\n       <font color=blue>xs = pax(e.screenX);<br \/>\n       ys = paa(e.screenY);<\/font><br \/>\n       } else {<br \/>\n        x = e.pageX;<br \/>\n        x = e.pageY;<br \/>\n       <font color=blue>xs = pax(e.screenX);<br \/>\n       ys = paa(e.screenY);<\/font><br \/>\n       }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   <font color=purple>function pax(sxis) {<br \/>\n     if (window.opener) {<br \/>\n       window.opener.sxiss(sxis);<br \/>\n     } else if (window.parent) {<br \/>\n       parent.sxiss(sxis);<br \/>\n     }<br \/>\n     return sxis;<br \/>\n   }<br \/>\n   <br \/>\n   function paa(syis) {<br \/>\n     if (window.opener) {<br \/>\n       window.opener.syiss(syis);<br \/>\n     } else if (window.parent) {<br \/>\n       parent.syiss(syis);<br \/>\n     }<br \/>\n     return syis;<br \/>\n   }<\/font><br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; calling, back at the caller &#8230;<br \/>\n<code><br \/>\nfunction sxiss(invis) {<br \/>\n  xs=invis;<br \/>\n  return invis;<br \/>\n}<br \/>\n<br \/>\nfunction syiss(invis) {<br \/>\n  ys=invis;<br \/>\n  return invis;<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; along with a Javascript var<font size=1>iable<\/font> &#8230;\n<\/li>\n<li><i>screenheight<\/i> &#8230; screen height &#8230; used in determining a suitable popup window height &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  $screenheight='0';<br \/>\n  if (isset($_GET['screenheight'])) { \/\/ passed from overseeing regions_via_countries.html<br \/>\n    $screenheight=str_replace('+',' ',urldecode($_GET['screenheight']));<br \/>\n  }<br \/>\n  if (isset($_POST['screenheight'])) { \/\/ passed from overseeing regions_via_countries.html<br \/>\n    $screenheight=str_replace('+',' ',urldecode($_POST['screenheight']));<br \/>\n  }<br \/>\n  <br \/>\n  \/\/<br \/>\n  \/\/ Used later in the PHP writes Javascript ...<br \/>\n  \/\/<br \/>\n  echo \"   var screenheight=('\" . $screenheight . \"' == '0' ? eval('' + screen.height) : eval('' + '\" . $screenheight . \"'));<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<\/ul>\n<p> &#8230; showing the interplay possible when staying with web application tools within the one domain, using either calling idea of &#8230;<\/p>\n<ul>\n<li>popup window via $_GET[] arguments &#8230; or &#8230;<\/li>\n<li>iframe via $_POST[] arguments<\/li>\n<\/ul>\n<p> &#8230; hosting of our Image Chart helper.<\/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\/PHP\/GeoChart\/image_chart.php---------------GETME\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php---------------GETME\">image_chart.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php\">Google Chart Image Chart Map Chart interfacer<\/a> &#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\/HTMLCSS\/regions_via_countries.html-------GETME\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a><\/li>\n<\/ul>\n<p> &#8230; to make this happen, informing your non-mobile users this is all a possibility, we&#8217;re hoping, by displaying &#8230;<\/p>\n<p><img src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyboard_choices.jpg'><\/img><\/p>\n<p>And in amongst changes today, you&#8217;ll see lots of colour related CSS tweaks.<\/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-hover-tutorial\/'>New Region Picker Hover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rppt'>Previous relevant <a target=_blank title='Region Picker Post Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-post-tutorial\/'>Region Picker Post 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 Post Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_chart_romania.jpg\" title=\"Region Picker POST Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Post Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Region Picker Hover Tutorial' href='#rpht'>Region Picker Hover Tutorial<\/a>&#8216;s navigations worked off (what we like to call) a GET argument methodology regarding URLs (involving ? and &#038; controlled arguments on the address bar URL) it calls on Image Chart data creators.  But even with the ISO-3166 codes (effectively nicknames) used, some countries have lots of regional codes associated with them, and the GET limitations to URL length (for our website less than 1000) means we have to open the door to other approaches for these long URL calls.<\/p>\n<p>Luckily what we are calling is PHP and it can accept POST arguments (ie. $_POST[] array members as distinct from $_GET[] &#8220;?&#8221; and &#8220;&#038;&#8221; GET argument members).<\/p>\n<p>Here&#8217;s what the scenario looks like for Romania before our fix today &#8230;<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_chart_romania_without_post.jpg'><\/img><\/p>\n<p> &#8230; and below, the improved scenario after &#8230;<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_chart_romania.jpg'><\/img><\/p>\n<p>To make this happen, we funnel the relevant window.open call through our inhouse &#8220;wrapper&#8221; Javascript function &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction windowopen(a1, a2, a3) {<br \/>\n  if (eval('' + a1.length) > 800 && a1.indexOf('?returnxytoparent=') != -1) {<br \/>\n    document.getElementById('callreturnxytoparent').value=decodeURIComponent(a1.split('?returnxytoparent=')[1]);<br \/>\n    document.getElementById('postcc').submit();<br \/>\n    document.getElementById('fif').style.display='block';<br \/>\n    document.getElementById('fif').style.width='470px';<br \/>\n    document.getElementById('fif').style.height='800px';<br \/>\n    location.href='#prefif';<br \/>\n    return null;<br \/>\n  }<br \/>\n  return window.open(a1, a2, a3);<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; using an HTML form element &#8230;<\/p>\n<p><code><br \/>\n&lt;form target=fif id=postcc action='\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php' method=POST style=display:none;&gt;<br \/>\n&lt;input type=hidden name=returnxytoparent id=callreturnxytoparent value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input style=display:none; type=submit id=bfif value=Submit&gt;&lt;\/input><br \/>\n&lt;\/form&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; target<sub>ting<\/sub>, after a form <i>submit<\/i> action, a name<sub>d<\/sub> HTML iframe element &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe name=fif id=fif style=display:none; src='\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; sitting within the table of the webpage, and hashtag navigated to should the need arise 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\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html------GETME\">&#8220;seventh draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a>.<\/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\/region-picker-post-tutorial\/'>Region Picker Post Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpht'>Previous relevant <a target=_blank title='Region Picker Hover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-hover-tutorial\/'>Region Picker Hover 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 Hover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart_denmark.jpg\" title=\"Region Picker Hover Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Hover Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Region Picker Popup Menu Tutorial' href='#rppmt'>Region Picker Popup Menu Tutorial<\/a> introduced, what to us, is &#8230;<\/p>\n<ul>\n<li>interesting <i>onclick<\/i> logic associated with the popup window, suiting both mobile and non-mobile platforms &#8230; but we can not resist introducing &#8220;hover&#8221; non-mobile ideas in the category of &#8230;<\/li>\n<li>interesting <strike title=' ... as we discovered during implementation ...'><i>onmouseover<\/i><\/strike> <i>onmousemove<\/i> logic &#8230; today &#8230;<\/li>\n<\/ul>\n<p> &#8230; which, on paper, sounds trivial.  But not so, in this scenario.  You may recall we started using PHP <a target=_blank title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php'>GD<\/a>&#8216;s <a target=_blank title='PHP GD imagecolorat' href='https:\/\/www.php.net\/manual\/en\/function.imagecolorat.php'>imagecolorat<\/a> function as a first &#8220;port of call&#8221; idea with our <a target=_blank title='Claytons ... the drink you are having when you are not having a drink ... and this CSS technique contributes to what we know of as an option element innerText area but is not there in the Javascript DOM (and we are happy about this, being kind of lazy).' href='https:\/\/www.youtube.com\/watch?v=3qf4yUMxnjw'>Clayton&#8217;s<\/a> image map simulation ideas, where this idea may be just okay for discrete onclick scenarios, but not for any non-mobile &#8220;hover&#8221; scenario.  We need another approach.  And then it tweaked to us, start <font size=1>(with <i>thisonl<\/i> document.body onload event logic below)<\/font> using an HTML canvas element &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function thisonl() {<br \/>\n   elem = document.getElementById('mycanvas');<br \/>\n   context = elem.getContext('2d');<br \/>\n   setTimeout(canvasize, 5000);<br \/>\n  }<br \/>\n  <br \/>\n  function canvasize() { \/\/(ioel) {<br \/>\n   var ioel=document.getElementById('ici');<br \/>\n   context.drawImage(document.getElementById('ici'), 0, 0);<br \/>\n   document.getElementById('moreturnxytoparent').value=elem.toDataURL('image\/jpeg', 0.4);<br \/>\n   return true;<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; and follow the excellent advice at <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/6735470\/get-pixel-color-from-canvas-on-mousemove'>this excellent link<\/a> regarding the use of [canvasElement].<a target=_blank title='Canvas getImageData method information from w3schools' href='https:\/\/www.w3schools.com\/tags\/canvas_getimagedata.asp'>getImageData<\/a>() function to <font color=blue>now go<\/font> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   <font color=blue>function rgbToHex(r, g, b) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/6735470\/get-pixel-color-from-canvas-on-mousemove<br \/>\n    if (r &gt; 255 || g &gt; 255 || b &gt; 255)<br \/>\n        throw 'Invalid color component';<br \/>\n    return ((r &lt;&lt; 16) | (g &lt;&lt; 8) | b).toString(16);<br \/>\n   }<\/font><br \/>\n<br \/> <br \/>\n   function filloutform(e<font color=blue>,isclick<\/font>) {<br \/>\n       var p='', hex='', myid='';<br \/>\n <br \/> <br \/>\n       e = e || window.event;<br \/>\n       e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       x = e.touches[0].pageX;<br \/>\n       y = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       x = e.touches[0].clientX;<br \/>\n       y = e.touches[0].clientY;<br \/>\n       }<br \/>\n       console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        x = e.clientX;<br \/>\n        y = e.clientY;<br \/>\n       } else {<br \/>\n        x = e.pageX;<br \/>\n        x = e.pageY;<br \/>\n       }<br \/>\n<br \/> <br \/>\n      if (eval('' + x) &gt; 2 && eval('' + y) &gt; 2) {<br \/>\n      document.getElementById('ix').value='' + x;<br \/>\n      document.getElementById('iy').value='' + y;<br \/>\n      <font color=blue>if (document.getElementById('imode').value == 'click' && isclick != 0) {<br \/>\n        document.getElementById('imode').value='click';<br \/>\n      p = context.getImageData(x, y, 1, 1).data;<br \/>\n      hex = ('#' + ('000000' + rgbToHex(p[0], p[1], p[2])).slice(-6)).toUpperCase();<br \/>\n        document.getElementById('moimode').value='mouseover';<br \/>\n      myid='';<br \/>\n      if (document.getElementById('myp').innerHTML.indexOf(hex) != -1) {<br \/>\n      myid=document.getElementById('myp').innerHTML.split(hex)[0].split(' id=\\\"')[eval(-1 + document.getElementById('myp').innerHTML.split(hex)[0].split(' id=\\\"').length)].split('\\\"')[0];<br \/>\n      document.getElementById('ici').title=document.getElementById(myid).title;<br \/>\n      document.getElementById(myid).click();<br \/>\n      } else if (document.getElementById('myp').innerHTML.indexOf(hex.toLowerCase()) != -1) {<br \/>\n      myid=document.getElementById('myp').innerHTML.split(hex.toLowerCase())[0].split(' id=\\\"')[eval(-1 + document.getElementById('myp').innerHTML.split(hex.toLowerCase())[0].split(' id=\\\"').length)].split('\\\"')[0];<br \/>\n      \/\/document.title='x=' + x + ' and y=' + y + ' ' + hex;<br \/>\n      document.getElementById('ici').title=document.getElementById(myid).title;<br \/>\n      document.getElementById(myid).click();<br \/>\n      } else if (hex.toUpperCase() != 'D0D0D0' && hex.toUpperCase() != 'FFFFFF' && hex.toUpperCase() != 'B3BCC0' && hex.toUpperCase() != 'BCBCBC') {<br \/>\n        if (document.getElementById('ici').title != origtitle) {<br \/>\n        gmenu('', document.getElementById('ici').title);<br \/>\n        } else {<\/font><br \/>\n        \/\/document.getElementById('blastcol').click();<br \/>\n        document.getElementById('myform').submit();<br \/>\n        <font color=blue>}<br \/>\n      }<\/font><br \/>\n      <font color=blue>} else {<br \/>\n      document.getElementById('moix').value='' + x;<br \/>\n      document.getElementById('moiy').value='' + y;<br \/>\n      p = context.getImageData(x, y, 1, 1).data;<br \/>\n      hex = ('#' + ('000000' + rgbToHex(p[0], p[1], p[2])).slice(-6)).toUpperCase();<br \/>\n        document.getElementById('moimode').value='mouseover';<br \/>\n      myid='';<br \/>\n      if (document.getElementById('myp').innerHTML.indexOf(hex) != -1) {<br \/>\n      myid=document.getElementById('myp').innerHTML.split(hex)[0].split(' id=\\\"')[eval(-1 + document.getElementById('myp').innerHTML.split(hex)[0].split(' id=\\\"').length)].split('\\\"')[0];<br \/>\n      document.getElementById('ici').title=document.getElementById(myid).title;<br \/>\n      } else if (document.getElementById('myp').innerHTML.indexOf(hex.toLowerCase()) != -1) {<br \/>\n      myid=document.getElementById('myp').innerHTML.split(hex.toLowerCase())[0].split(' id=\\\"')[eval(-1 + document.getElementById('myp').innerHTML.split(hex.toLowerCase())[0].split(' id=\\\"').length)].split('\\\"')[0];<br \/>\n      \/\/document.title='x=' + x + ' and y=' + y + ' ' + hex;<br \/>\n      document.getElementById('ici').title=document.getElementById(myid).title;<br \/>\n      } else if (document.getElementById('ici').title == origtitle) {<br \/>\n        \/\/document.getElementById('moblastcol').click();<br \/>\n        document.getElementById('myformmo').submit();<br \/>\n      }<br \/>\n      }<\/font><br \/>\n      }<br \/>\n   }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; to keep up with the clientside <font size=1>(only, now)<\/font> &#8220;hover&#8221; solution we&#8217;re preferring right now <font size=1>(and maybe even this time tomorrow?!)<\/font><\/p>\n<p>And this suits non-mobile users used to seeing useful information as they hover over an element, and in a map element&#8217;s case, the equivalent of the &#8220;smarts&#8221; an image map might offer, except that in today&#8217;s case, thanks to colour coding &#8230; not an image map in sight!<\/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\/PHP\/GeoChart\/image_chart.php--------------GETME\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php--------------GETME\">image_chart.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php\">Google Chart Image Chart Map Chart interfacer<\/a> &#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\/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;sixth draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a><\/li>\n<\/ul>\n<p> &#8230; to make this happen.<\/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\/region-picker-hover-tutorial\/'>Region Picker Hover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rppmt'>Previous relevant <a target=_blank title='Region Picker Popup Menu Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-popup-menu-tutorial\/'>Region Picker Popup Menu 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 Popup Menu Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart_argentina_again.jpg\" title=\"Region Picker Popup Menu Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Popup Menu Tutorial<\/p><\/div>\n<p>Yesterday we left off with &#8230;<\/p>\n<blockquote><p>\nAm sure some of you are onto tomorrow&#8217;s plan, given today&#8217;s work?!  We&#8217;ll see what tomorrow brings!\n<\/p><\/blockquote>\n<p> &#8230; and we feel we might have &#8220;put the mockers&#8221; on ourselves, because, as you may have read, <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> is due for deprecation soon.  In fact, the regime at the moment is fewer and fewer hours up, and we&#8217;ll have to turn our attention to alternatives.  But what out there can do those regional views where the map effectively hugs the bounds of the data &#8230; brilliant, and we think hard to do with your normal Google Charts suite of software?  As well as the image element result, even though we need to try out the &#8220;ready event&#8221; normal Google Charts &#8220;print&#8221; way to achieve this.  So much more useful than involving Javascript.  And more fun to work with too, it being a conduit to HTML <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> usage.<\/p>\n<p>Anyway, here we are late in our day with a window of opportunity, and <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=0j6g_uUhH2c'><i>While You See a Chance, Take It<\/i><\/a> we reckon.<\/p>\n<p>And what yesterday&#8217;s <a title='Region Picker Double Click Tutorial' href='#rpdct'>Region Picker Double Click Tutorial<\/a> gave us a good framework for is PHP method=GET and PHP method=POST uses of argument <i>returnxytoparent<\/i> along with our new <a target=_blank title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php'>GD<\/a> <a target=_blank title='PHP GD imagecolorat' href='https:\/\/www.php.net\/manual\/en\/function.imagecolorat.php'>imagecolorat<\/a> function friend in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php-------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php-------------GETME\">image_chart.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php\">Google Chart Image Chart Map Chart interfacer<\/a> &#8230;<\/p>\n<ul>\n<li>double click button to create popup window with same look as background image version &#8230;<\/li>\n<li>but now that call, wraps the URL that it used to call in an encoded <i>returnxytoparent<\/i> argument guise, using &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['returnxytoparent'])) {<br \/>\n  $imgurl=str_replace('+',' ',urldecode($_GET['returnxytoparent']));<br \/>\n  echo \"&lt;html&gt;<br \/>\n  &lt;head&gt;<br \/>\n  &lt;style&gt; * { margin:0 0 0 0; padding:0 0 0 0; } &lt;\/style&gt;<br \/>\n  &lt;scr\" . \"ipt type=text\/javascript&gt;<br \/>\n   var x=0, y=0, isclear=true;<br \/>\n   <br \/>\n   function filloutform(e) {<br \/>\n   <br \/>\n       e = e || window.event;<br \/>\n       e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       x = e.touches[0].pageX;<br \/>\n       y = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       x = e.touches[0].clientX;<br \/>\n       y = e.touches[0].clientY;<br \/>\n       }<br \/>\n       console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        x = e.clientX;<br \/>\n        y = e.clientY;<br \/>\n       } else {<br \/>\n        x = e.pageX;<br \/>\n        x = e.pageY;<br \/>\n       }<br \/>\n   <br \/>\n      if (x &gt; 0) {<br \/>\n      document.getElementById('ix').value='' + x;<br \/>\n      document.getElementById('iy').value='' + y;<br \/>\n      if (document.getElementById('imode').value == 'click') {<br \/>\n        \/\/document.getElementById('blastcol').click();<br \/>\n        document.getElementById('myform').submit();<br \/>\n      }<br \/>\n      }<br \/>\n   }<br \/>\n <br \/>\n  function gmenu(rcodeis, erdescis) {<br \/>\n   var rdescis=decodeURIComponent(erdescis);<br \/>\n   if (rcodeis.trim() != '' && rdescis.trim() != '') {<br \/>\n      var rans=prompt('What do you want to do with region ' + rdescis + '? ' + String.fromCharCode(10) + String.fromCharCode(10) + 'W - Wikipedia look up ' + String.fromCharCode(10) + 'Y - YouTube look up ' + String.fromCharCode(10) + 'G - Google look up ' + String.fromCharCode(10) + String.fromCharCode(10), '');<br \/>\n      if (rans == null) { rans=''; }<br \/>\n      if ((rans + ' ').toUpperCase().substring(0,1) == 'W') {<br \/>\n         window.open('\/\/wikipedia.org\/wiki\/' + encodeURIComponent(rdescis.replace(\/\\ \\(\/g,', ').replace(\/\\)$\/g,'')).replace(\/\\%20\/g,'_'),'_blank','top=10,left=10,width=600,height=600');<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'Y') {<br \/>\n         window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=' + encodeURIComponent('     ' + rdescis.replace(\/\\ \\(\/g,', ').replace(\/\\)$\/g,'')),'_blank','top=10,left=10,width=600,height=600');<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'G') {<br \/>\n         window.open('\/\/www.google.com\/search?q=' + encodeURIComponent(rdescis.replace(\/\\ \\(\/g,', ').replace(\/\\)$\/g,'')) + '&tbm=isch','_blank','top=10,left=10,width=600,height=600');<br \/>\n      }<br \/>\n   }<br \/>\n  }<br \/>\n  <br \/>\n  &lt;\/scr\" . \"ipt&gt;<br \/>\n  &lt;\/head&gt;<br \/>\n  &lt;body onclick=\\\" document.getElementById('lastcol').value='';  isclear=false; document.getElementById('imode').value='click'; filloutform(event);\\\" onload=\\\" if (window.opener) {  document.getElementById('myp').innerHTML=window.opener.document.getElementById('myp').innerHTML; document.getElementById('patparent').value=window.opener.document.getElementById('myp').innerHTML;  } \\\"&gt;<br \/>\n  &lt;img id=ici onmouseover=\\\" if (isclear) { document.getElementById('imode').value='mouseover'; filloutform(event); }\\\"  src='\" . $imgurl . \"' title='Optionally click in relevant region for menu'&gt;&lt;\/img&gt;<br \/>\n  &lt;input title='' id=lastcol value='' type=hidden&gt;&lt;\/input&gt;<br \/>\n  &lt;form id=myform onsubmit=\\\"  return true;\\\" style=display:none; target=iflastcol method=POST action=.\/image_chart.php&gt;<br \/>\n  &lt;input name=returnxytoparent id=returnxytoparent value='\" . $imgurl . \"' type=hidden&gt;&lt;\/input&gt;<br \/>\n  &lt;input name=ix id=ix value='0' type=hidden&gt;&lt;\/input&gt;<br \/>\n  &lt;input name=iy id=iy value='0' type=hidden&gt;&lt;\/input&gt;<br \/>\n  &lt;input name=imode id=imode value='mouseover' type=hidden&gt;&lt;\/input&gt;<br \/>\n  &lt;input name=patparent id=patparent value='' type=hidden&gt;&lt;\/input&gt;<br \/>\n  &lt;input type=submit style=display:none; id=blastcol&gt;&lt;\/input&gt;<br \/>\n  &lt;\/form&gt;<br \/>\n  &lt;iframe name=iflastcol id=iflastcol style=display:none; src=.\/image_chart.php&gt;&lt;\/iframe&gt;<br \/>\n  &lt;p id=myp style=display:none;&gt;&lt;\/p&gt;<br \/>\n  &lt;\/body&gt;<br \/>\n  &lt;\/html&gt;\";<br \/>\n  exit;<br \/>\n} else if (isset($_POST['returnxytoparent']) && isset($_POST['ix']) && isset($_POST['iy'])) {<br \/>\n  $alp=\"0123456789ABCDEF\"; \/\/=map&chs=600x450&<br \/>\n   \/\/echo \"&lt;html&gt;&lt;body onload=\\\" alert('\" . str_replace('+',' ',urldecode($_POST['returnxytoparent'])) . \"'); \\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n   \/\/exit;<br \/>\n  $imgurl='http:\/\/chart.googleapis.com\/chart?' . str_replace('=map&chld=', '=map&chs=455x350&chld=', explode('?', str_replace('+',' ',urldecode($_POST['returnxytoparent'])))[1]);<br \/>\n   \/\/echo \"&lt;html&gt;&lt;body onload=\\\" alert('\" . $imgurl . \"'); \\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n   \/\/exit;<br \/>\n  $im = imagecreatefromstring(file_get_contents($imgurl));<br \/>\n  $tlrgb = imagecolorat($im, $_POST['ix'], $_POST['iy']);<br \/>\n  $topclick='';<br \/>\n  if ($tlrgb) {<br \/>\n   \/\/echo '&lt;html&gt;&lt;body onload=\" alert(4); \"&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n   \/\/exit;<br \/>\n   $tlr = ($tlrgb &gt;&gt; 16) & 0xFF;<br \/>\n   $tlg = ($tlrgb &gt;&gt; 8) & 0xFF;<br \/>\n   $tlb = $tlrgb & 0xFF;<br \/>\n   $blchex=substr(substr($alp,($tlr \/ 16)),0,1) . substr(substr($alp,($tlr % 16)),0,1) . substr(substr($alp,($tlg \/ 16)),0,1) . substr(substr($alp,($tlg % 16)),0,1) . substr(substr($alp,($tlb \/ 16)),0,1) . substr(substr($alp,($tlb % 16)),0,1);<br \/>\n   $isclick=false;<br \/>\n   if (isset($_POST['patparent']) && isset($_POST['imode'])) {<br \/>\n     $pat=str_replace('+',' ',urldecode($_POST['patparent']));<br \/>\n     if ($_POST['imode'] == 'click') {<br \/>\n        if (strpos(str_replace('+',' ',urldecode($_POST['patparent'])), '#' . strtoupper($blchex)) !== false) {<br \/>\n          $topclick=\" parent.document.getElementById('\" . explode('\"', explode(' id=\"', explode('#' . strtoupper($blchex), $pat)[0])[-1 + sizeof(explode(' id=\"', explode('#' . strtoupper($blchex), $pat)[0]))] )[0]   . \"').click(); \";<br \/>\n        } else if (strpos(str_replace('+',' ',urldecode($_POST['patparent'])), '#' . strtolower($blchex)) !== false) {<br \/>\n          $topclick=\" parent.document.getElementById('\" . explode('\"', explode(' id=\"', explode('#' . strtolower($blchex), $pat)[0])[-1 + sizeof(explode(' id=\"', explode('#' . strtolower($blchex), $pat)[0]))] )[0]   . \"').click(); \";<br \/>\n        }<br \/>\n     }<br \/>\n   }<br \/>\n   echo '&lt;html&gt;&lt;body onload=\" parent.document.getElementById(' . \"'lastcol'\" . ').title=' . \"'\" . $_POST['imode'] . \"'\" . ';  parent.document.getElementById(' . \"'lastcol'\" . ').value=' . \"'\" . $blchex . \"'\" . '; ' . $topclick . ' \"&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n  } \/\/else {<br \/>\n   \/\/echo '&lt;html&gt;&lt;body onload=\" alert(234); \"&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n   \/\/exit;<br \/>\n  \/\/}<br \/>\n  imagedestroy($im);<br \/>\n  exit;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<li>to be able to offer, &#8220;onclick&#8221;, <i>a colour coded region (on the map)<\/i> piece of functionality<\/li>\n<\/ul>\n<p> &#8230; achieving a <a target=_blank title='Claytons ... the drink you are having when you are not having a drink ... and this CSS technique contributes to what we know of as an option element innerText area but is not there in the Javascript DOM (and we are happy about this, being kind of lazy).' href='https:\/\/www.youtube.com\/watch?v=3qf4yUMxnjw'>Clayton&#8217;s<\/a> image map scenario 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;fifth draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a>.<\/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-double-click-tutorial\/'>Region Picker Double Click Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpdct'>Previous relevant <a target=_blank title='Region Picker Double Click Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-double-click-tutorial\/'>Region Picker Double Click 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 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<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='#d62276' onclick='var dv=document.getElementById(\"d62276\"); 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='d62276' 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='#d62297' onclick='var dv=document.getElementById(\"d62297\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/url\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62297' 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='#d62306' onclick='var dv=document.getElementById(\"d62306\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/keyboard\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62306' 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='#d62328' onclick='var dv=document.getElementById(\"d62328\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/prompt\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62328' 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='#d62331' onclick='var dv=document.getElementById(\"d62331\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sticky\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62331' 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='#d62344' onclick='var dv=document.getElementById(\"d62344\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62344' 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='#d62359' onclick='var dv=document.getElementById(\"d62359\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62359' 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='#d62364' onclick='var dv=document.getElementById(\"d62364\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/margin\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62364' 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='#d62397' onclick='var dv=document.getElementById(\"d62397\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scale\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62397' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The end of yesterday&#8217;s Geo Chart Zoom Offset Tutorial&#8216;s work, for us, was a bit frustrating because we have this ridiculous optimistic view that the mobile platforms will ditch their opposition to &#8230; Javascript prompt window usage &#8230; and &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/geo-chart-mobile-zoom-offset-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":[2914,2915,2824,1669,88,1885,1835,174,184,211,212,4286,224,4506,3374,227,2081,281,4650,2985,359,367,1929,400,4295,452,456,1550,1619,485,518,524,2229,557,573,576,587,590,4562,599,614,631,652,673,3272,3656,3862,1943,2371,770,795,830,2921,860,861,1666,870,2219,876,894,4616,967,968,970,997,1761,4651,4649,4648,1620,4643,1997,1059,1094,1866,1126,1198,1254,1675,1292,1294,1319,1345,2450,1404,1433,2811,1496,1498],"class_list":["post-62397","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-_get","tag-_post","tag-absolute","tag-address-bar","tag-api","tag-argument","tag-arguments","tag-button","tag-canvas","tag-click","tag-client","tag-clientside","tag-colour","tag-colour-code","tag-colour-coding","tag-colour-matching-2","tag-country","tag-css","tag-deprecate","tag-deprecation","tag-double-click","tag-dropdown","tag-error","tag-event","tag-event-stoppropagation","tag-form","tag-fortran","tag-gd","tag-geo-chart","tag-gesture","tag-google-chart","tag-google-earth","tag-hash","tag-hashtag","tag-hotkey","tag-html","tag-iframe","tag-image","tag-image-chart","tag-img","tag-integration","tag-iphone","tag-javascript","tag-keyboard","tag-left","tag-length","tag-lookup","tag-margin-left","tag-margin-top","tag-menu","tag-mobile","tag-navigation","tag-offset","tag-onblur","tag-onclick","tag-ondblclick","tag-onload","tag-onmousemove","tag-opacity","tag-overlay","tag-picker","tag-popup","tag-popup-window","tag-post","tag-programming","tag-prompt","tag-propoerty","tag-pulldown","tag-pulldown-menu","tag-region","tag-regional","tag-request","tag-resize","tag-scale","tag-select","tag-settimeout","tag-sticky","tag-text","tag-textbox","tag-top","tag-touch","tag-tutorial","tag-url","tag-view","tag-web-browser","tag-window-open","tag-world","tag-z-index","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62397"}],"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=62397"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62397\/revisions"}],"predecessor-version":[{"id":62414,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62397\/revisions\/62414"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=62397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=62397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=62397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}