{"id":47921,"date":"2020-02-07T03:01:11","date_gmt":"2020-02-06T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47921"},"modified":"2021-09-28T17:29:52","modified_gmt":"2021-09-28T07:29:52","slug":"google-chart-geo-chart-quiz-on-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-quiz-on-mobile-tutorial\/","title":{"rendered":"Google Chart Geo Chart Quiz on Mobile Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Geo Chart Quiz on Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/continent_quiz_mobile.jpg\" title=\"Google Chart Geo Chart Quiz on Mobile Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Geo Chart Quiz on Mobile Tutorial<\/p><\/div>\n<p>We wanted to improve on the recent <a title='Google Chart Geo Chart More Quizzes Tutorial' href='#gcgcmqt'>Google Chart Geo Chart More Quizzes Tutorial<\/a>&#8216;s &#8220;World Quiz&#8221; functionality approach of displaying window.open popups for mobile platforms.  The reason for the concern on mobile platforms, and not such a concern on non-mobile platforms (though there is a concern about popup window web browser disabling settings), because the chance to &#8220;overlay&#8221; a popup window (via the use of a third argument to window.open calls) is ignored on mobile platforms, instead opening a new browser tab (at best).  This can be disconcerting, akin to telling a room of students doing an important examination, to look out the window at an interesting magpie <font size=1>(warbling about Collingwood&#8217;s last triumph, no doubt)<\/font>.<\/p>\n<p>Well, after extensive research, and first trying to position &#8220;anything new&#8221; down the bottom of the webpage we &#8230;<\/p>\n<ul>\n<li>rejected idea of whole display of a relevant <a target=_blank title='Wikipedia' href='https:\/\/wikipedia.org'>Wikipedia<\/a> page content at the bottom (of a mobile user&#8217;s Geo Chart &#8220;quiz&#8221; webpage) &#8230; associated with a &#8230;<\/li>\n<li>rejected &#8220;a&#8221; hashtag link down the bottom (but above proposed content above) to navigate back up to the quiz &#8230; to, instead &#8230;<\/li>\n<li>start thinking that it is up to the mobile user to act themselves to ever navigate away from the quiz webpage, so, instead, initially condense the Wikipedia content down to an image that is &#8230;\n<ol>\n<li>if HTTPS:\/\/ protocol being used, use the <a target=_blank title='Google Page Insights' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google Page Insights<\/a> screenshotting &#8220;smarts&#8221; you can see being used at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/pdf-slideshow-and-form-creation-data-uri-contents-tutorial\/' title='PDF Slideshow and Form Creation Data URI Contents Tutorial'>PDF Slideshow and Form Creation Data URI Contents Tutorial<\/a><\/li>\n<li>if HTTP:\/\/ protocol being used, use the (thumbnail version of) the first image of the relevant Wikipedia webpage<\/li>\n<\/ol>\n<p> &#8230; encased by an &#8220;a&#8221; tag that the click of navigates the user to the relevant Wikipedia content in a new tab (at best), all positioned at the left hand side of the Geo Chart webpage&#8217;s H1 or H2 tag heading as a <strike>70px width<\/strike>42px height thumbnail<\/li>\n<\/ul>\n<p>The conduit here are <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a> Javascript techniques as per &#8230;<\/p>\n<p><code><br \/>\n  var myxhr = false;<br \/>\n  var oursrc = '';<br \/>\n  var woourl='';<br \/>\n<br \/> <br \/>\n  function ajit(wourl) {<br \/>\n  woourl=wourl;<br \/>\n  var xurl = '';<br \/>\n  if (document.URL.toLowerCase().indexOf('https') == 0) {<br \/>\n  xurl='https:\/\/www.googleapis.com\/pagespeedonline\/v1\/runPagespeed?url=' + encodeURIComponent(wourl) + '&screenshot=true';<br \/>\n  } else {<br \/>\n  xurl=document.URL.split('\/GeoChart')[0] + '\/fgc\/?tdinto=&inurl=' + encodeURIComponent(wourl);<br \/>\n  }<br \/>\n      if (window.XMLHttpRequest) {<br \/>\n        myxhr = new window.XMLHttpRequest;<br \/>\n    }<br \/>\n    else {<br \/>\n  try {<br \/>\n    myxhr = new ActiveXObject('Msxml2.XMLHTTP');<br \/>\n  } catch (othermicrosoft) {<br \/>\n    try {<br \/>\n      myxhr = new ActiveXObject('Microsoft.XMLHTTP');<br \/>\n    } catch (failed) {<br \/>\n      myxhr = false;<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n  if (myxhr) {<br \/>\n    myxhr.onreadystatechange = backin;<br \/>\n    myxhr.open('GET', xurl, true);<br \/>\n    myxhr.send(null);<br \/>\n  }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function backin() {<br \/>\n  if (myxhr.readyState == 4) {<br \/>\n    if (myxhr.status == 200) {<br \/>\n      if (myxhr.responseText) {<br \/>\n        var dbits = myxhr.responseText.split('\\\"data\\\":');<br \/>\n        if (dbits.length &gt; 1) {<br \/>\n         oursrc='data:image\/jpeg;base64,' + dbits[1].split('\\\"')[1].split('\\\"')[0].replace(\/\\_\/g,'\/').replace(\/\\-\/g,'+');<br \/>\n         ism='nm';<br \/>\n         if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n           ism='';<br \/>\n           document.getElementById(ism + 'dwoalttwo').style.position='absolute';<br \/>\n           document.getElementById(ism + 'dwoalttwo').style.left='20px';<br \/>\n           document.getElementById(ism + 'dwoalttwo').style.top='0px';<br \/>\n           document.getElementById(ism + 'dwoalttwo').style.opacity='0.95';<br \/>\n           document.getElementById(ism + 'dwoalttwo').style.zIndex='51';<br \/>\n         } else {<br \/>\n           document.getElementById(ism + 'dwoalt').innerHTML='&lt;br&gt;&lt;a id=btta href=#myh title=Top&gt;Back to top&lt;\/a&gt;';<br \/>\n         }<br \/>\n         document.getElementById(ism + 'dwoalttwo').innerHTML='&lt;a target=_blank id=adw title=Wikipedia style=z-index:52; href=' + woourl + '&gt;&lt;img title=Wikipedia style=width:80px;z-index:52; src=' + oursrc + '&gt;&lt;\/img&gt;&lt;\/a&gt;';<br \/>\n         document.getElementById('myh').onclick=function() { document.getElementById('adw').click(); }<br \/>\n         if (ism != '') { location.href='#btta';  }<br \/>\n        } else if (myxhr.responseText.indexOf('&lt;img') != -1) {<br \/>\n         dbits = myxhr.responseText.split('&lt;img');<br \/>\n         dbits=dbits[1].split(' src=');<br \/>\n         ism='nm';<br \/>\n         if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n           ism='';<br \/>\n           document.getElementById(ism + 'dwoalttwo').style.position='absolute';<br \/>\n           document.getElementById(ism + 'dwoalttwo').style.left='20px';<br \/>\n           document.getElementById(ism + 'dwoalttwo').style.top='0px';<br \/>\n           document.getElementById(ism + 'dwoalttwo').style.opacity='0.95';<br \/>\n           document.getElementById(ism + 'dwoalttwo').style.zIndex='51';<br \/>\n         } else {<br \/>\n           document.getElementById(ism + 'dwoalt').innerHTML='&lt;br&gt;&lt;a id=btta href=#myh title=Top&gt;Back to top&lt;\/a&gt;';<br \/>\n         }<br \/>\n         document.getElementById(ism + 'dwoalttwo').innerHTML='&lt;a target=_blank id=adw title=Wikipedia style=z-index:52; href=' + woourl + '&gt;&lt;img title=Wikipedia style=width:80px;z-index:52; src=' + dbits[1].split(' ')[0].split('&gt;')[0] + '&gt;&lt;\/img&gt;&lt;\/a&gt;';<br \/>\n         document.getElementById('myh').onclick=function() { document.getElementById('adw').click(); }<br \/>\n         if (ism != '') { location.href='#btta';  }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; with the effect, for a mobile user, of not being interrupted from their quiz, unless this thumbnail (Wikipedia content) appears at the top left, that they can &#8220;long click&#8221; to open in a &#8220;New Tab&#8221; (or, perhaps, a &#8220;Split View&#8221;) as required, at least on the iPad we tried this with.<\/p>\n<p>And so, you can try <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> Geo Chart interfacer at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a> link, we hope representing an improvement for the Quizzing User Experience for our mobile user readers.<\/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\/google-chart-geo-chart-quiz-on-mobile-tutorial\/'>Google Chart Geo Chart Quiz on Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcgcmqt'>Previous relevant <a target=_blank title='Google Chart Geo Chart More Quizzes Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-more-quizzes-tutorial\/'>Google Chart Geo Chart More Quizzes Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Geo Chart More Quizzes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/continent_quiz_longer.jpg\" title=\"Google Chart Geo Chart More Quizzes Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Geo Chart More Quizzes Tutorial<\/p><\/div>\n<p>In allowing the World Quiz web applications of yesterday&#8217;s <a title='Google Chart Geo Chart World Quizzes Tutorial' href='#gcgcwqt'>Google Chart Geo Chart World Quizzes Tutorial<\/a> work accept more than about &#8230;<\/p>\n<ul>\n<li>the 10 places (per continent Geo Chart) fitting into a $_GET arguments URL (of about 850 characters, for rjmprogramming.com.au domain) &#8230; the first cab off the rank allowing for &#8230;<\/li>\n<li>a lot more than 10 can be accepted via $_POST in an HTML form method=POST action=.\/geo_chart.php<\/li>\n<\/ul>\n<p>You may wonder why &#8220;first cab off the rank&#8221; here.  Well, we&#8217;re not sure we won&#8217;t involve window.sessionStorage or window.localStorage in future plans.  It being PHP we&#8217;re writing though, we will need a compelling reason to try this.<\/p>\n<p>We allow you to ask the web application to try more places by (optionally) appending space characters onto the height values they enter.<\/p>\n<p>You can try <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 (and note &#8220;function iftoobig()&#8221; in particular, here)<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php----------------------------GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> Geo Chart interfacer at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a> link, and try it with a few right space appended &#8220;heights&#8221; to try out this new functionality.<\/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\/google-chart-geo-chart-more-quizzes-tutorial\/'>Google Chart Geo Chart More Quizzes Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcgcwqt'>Previous relevant <a target=_blank title='Google Chart Geo Chart World Quizzes Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-world-quizzes-tutorial\/'>Google Chart Geo Chart World Quizzes Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Geo Chart World Quizzes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/continent_quiz_others.jpg\" title=\"Google Chart Geo Chart World Quizzes Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Geo Chart World Quizzes Tutorial<\/p><\/div>\n<p>We&#8217;re heading towards &#8220;prove it for n&#8221; on top of the recent <a title='Google Chart Geo Chart Oceania Quiz Tutorial' href='#gcgcoqt'>Google Chart Geo Chart Oceania Quiz Tutorial<\/a> (&#8220;prove it for 2&#8221;) progress, making quizzes for &#8230;<\/p>\n<ul>\n<li>Europe<\/li>\n<li>South East Asia and Oceania<\/li>\n<li>Africa<\/li>\n<li>South America<\/li>\n<li>North and Central America<\/li>\n<li>Asia<\/li>\n<\/ul>\n<p> &#8230; but feel we need more testing to bed it down, as far as reliability issues go, and we&#8217;ll keep you posted on that.<\/p>\n<p>We found clutter issue with ISO 2 character Country Codes &#8230;<\/p>\n<table>\n<tr>\n<th>ISO Code 1<\/th>\n<th>Country TZ Place 1 (Lat,Long)<\/th>\n<th>Too Close To<\/th>\n<th>Country TZ Place 2 (Lat,Long)<\/th>\n<th>ISO Code 2<\/th>\n<\/tr>\n<tr>\n<td>VA<\/td>\n<td>Vatican City <br \/>(41.90222, <br \/>12.45305)<\/td>\n<td>(-0.02, <br \/>+0.03)<\/td>\n<td>Rome, Italy <br \/>(41.9, <br \/>12.48333)<\/td>\n<td>IT<\/td>\n<\/tr>\n<tr>\n<td>BJ<\/td>\n<td>Porto-Novo, Benin <br \/>(6.48333, <br \/>2.61666)<\/td>\n<td>(-0.03, <br \/>+0.78)<\/td>\n<td>Lagos, Nigeria <br \/>(6.45, <br \/>3.4)<\/td>\n<td>NG<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; and so &#8220;fashioned&#8221; this into a numerical basis for a <font color=blue>&#8220;declutter&#8221; algorithm<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction setsixteenquiz() {<br \/>\n  var sixteen=16;<br \/>\n  var allcontinents=['Europe','South East Asia and Oceania', 'Africa', 'South America', 'North and Central America', 'Asia'];<br \/>\n  var thiscontinent=isquiz;<br \/>\n  var cisq=-1;<br \/>\n  var exclusions=',';<br \/>\n  var sofarq=',-1,';<br \/>\n  var ourselceqih=selceqih.replace(\/\\ data\\-alt\\-\/g, ' data-');<br \/>\n  if (thiscontinent == 'South East Asia and Oceania') {<br \/>\n   sixteen=10;<br \/>\n  } else if (thiscontinent == 'Africa') {<br \/>\n   sixteen=17;<br \/>\n  } else if (thiscontinent == 'South America') {<br \/>\n   sixteen=10;<br \/>\n  } else if (thiscontinent == 'North and Central America') {<br \/>\n   sixteen=10;<br \/>\n  }<br \/>\n  for (var isqis=0; isqis&lt;allcontinents.length; isqis++) {<br \/>\n   if (allcontinents[isqis] != thiscontinent) {<br \/>\n    while (ourselceqih.indexOf(' data-continent=\\\"' + allcontinents[isqis] + '\\\"') != -1) {<br \/>\n    ourselceqih=ourselceqih.replace(' data-continent=\\\"' + allcontinents[isqis] + '\\\"','');<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  var sqws=ourselceqih.split(' data-continent=\\\"' + thiscontinent + '\\\" value=\\\"');<br \/>\n  document.body.title='Awaiting quiz clickable circle symbols to score ...';<br \/>\n  document.body.style.cursor=pcur;<br \/>\n  if (document.getElementById('chart')) {<br \/>\n  document.getElementById('chart').title='Awaiting quiz clickable circle symbols to score ... ';<br \/>\n  document.getElementById('chart').style.cursor=pcur;<br \/>\n  }<br \/>\n  <font color=blue>var latsofar=[], longsofar=[], thislats=0.0, thislongs=0.0;<br \/>\n  var valid=true, ivalid=0, difflatlong=0.0;<\/font><br \/>\n  while (quizisos.length &lt; sixteen) {<br \/>\n    cisq=-1;<br \/>\n    while (sofarq.indexOf(',' + cisq + ',') != -1 || exclusions.indexOf(',' + cisq + ',') != -1) {<br \/>\n      cisq=Math.floor(Math.random() * eval(-1 + sqws.length));<br \/>\n      cisq++;<br \/>\n       <font color=blue>if (ourtzlist.indexOf(',' + sqws[cisq].split('\\\"')[0] + ',') != -1) {<br \/>\n      thislats=(eval(ourtzlist.split(',' + sqws[cisq].split('\\\"')[0] + ',')[0].split(' data-geo=\\\"')[eval(-1 + ourtzlist.split(',' + sqws[cisq].split('\\\"')[0] + ',')[0].split(' data-geo=\\\"').length)].split(',')[0]));<br \/>\n      thislongs=(eval(ourtzlist.split(',' + sqws[cisq].split('\\\"')[0] + ',')[0].split(' data-geo=\\\"')[eval(-1 + ourtzlist.split(',' + sqws[cisq].split('\\\"')[0] + ',')[0].split(' data-geo=\\\"').length)].split(',')[1]));<br \/>\n      }<\/font><br \/>\n      if (thiscontinent == 'South East Asia and Oceania') {<br \/>\n       if (ourtzlist.indexOf(',' + sqws[cisq].split('\\\"')[0] + ',') != -1) {<br \/>\n        if (eval(ourtzlist.split(',' + sqws[cisq].split('\\\"')[0] + ',')[0].split(' data-geo=\\\"')[eval(-1 + ourtzlist.split(',' + sqws[cisq].split('\\\"')[0] + ',')[0].split(' data-geo=\\\"').length)].split(',')[1]) &lt; 73.0) { \/\/ || eval(ourtzlist.split(',' + ourselceqih[cisq].split('\\\"')[0] + ',')[0].split(' data-geo=\\\"')[eval(-1 + ourtzlist.split(',' + ourselceqih[cisq].split('\\\"')[0] + ',')[0].split(' data-geo=\\\"').length)].split(',')[1]) &gt;= 169.0) {<br \/>\n          cisq=-1;<br \/>\n        }<br \/>\n       } else {<br \/>\n        cisq=-1;<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    sofarq+='' + cisq + ',';<br \/>\n    if (cisq != -1) {<br \/>\n    if (sqws[cisq].split('\\\"')[0] == 'IT') { exclusions+='VA,'; } else if (sqws[cisq].split('\\\"')[0] == 'VA') { exclusions+='IT,'; }<br \/>\n    if (sqws[cisq].split('\\\"')[0] == 'BJ') { exclusions+='NG,'; } else if (sqws[cisq].split('\\\"')[0] == 'NG') { exclusions+='BJ,'; }<br \/>\n    <font color=blue>difflatlong=0.0;<br \/>\n    if (quizisos.length &gt; 0) {<br \/>\n      for (ivalid=0; ivalid&lt;quizisos.length; ivalid++) {<br \/>\n        difflatlong=Math.abs(eval('' + latsofar[ivalid]) - eval('' + thislats)) + Math.abs(eval('' + longsofar[ivalid]) - eval('' + thislongs));<br \/>\n      }<br \/>\n    }<br \/>\n    if (difflatlong &gt;= 2.0 || quizisos.length == 0) {<br \/>\n      latsofar.push(thislats);<br \/>\n      longsofar.push(thislongs);<br \/>\n      quizisos.push(sqws[cisq].split('\\\"')[0]);<br \/>\n    }<\/font><br \/>\n    }<br \/>\n  }<br \/>\n  quizisos.push(\\\"\\\");<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Here&#8217;s your chance to try <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> Geo Chart interfacer at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a> link, and enter Africa, South America, North and Central America and Asia Quiz territory by following pointers at the &#8220;width&#8221; interactive entry (Javascript) prompt window.<\/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\/google-chart-geo-chart-world-quizzes-tutorial\/'>Google Chart Geo Chart World Quizzes Tutorial<\/a> ...<\/p-->\n<hr>\n<p id='gcgcoqt'>Previous relevant <a target=_blank title='Google Chart Geo Chart Oceania Quiz Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-oceania-quiz-tutorial\/'>Google Chart Geo Chart Oceania Quiz Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Geo Chart Oceania Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_seasia_oceania_quiz.jpg\" title=\"Google Chart Geo Chart Oceania Quiz Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Geo Chart Oceania Quiz Tutorial<\/p><\/div>\n<p>Regular readers will know about our penchant for &#8220;<a target=_blank title='Mathematical induction information from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Mathematical_induction'>mathematical induction<\/a>&#8221; theory, in the way you &#8230;<\/p>\n<ul>\n<li>prove it for 1<\/li>\n<li>prove it for 2<\/li>\n<li>prove it for n<\/li>\n<\/ul>\n<p> &#8230; and earlier this morning &#8220;too proud&#8221; moi thought we&#8217;d be at &#8220;n&#8221;, skipping &#8220;2&#8221; by now getting our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> interfacing new &#8220;Quiz&#8221; functionality to have covered user interactions for all the major continents of greater than 10 (of category) places, looking towards the &#8220;10 is a bit lame&#8221; thinking, to follow.  Oh, well!  But maybe that&#8217;s the point of the &#8220;2&#8221; in the &#8220;mathematical induction&#8221; proof &#8220;game&#8221;.  A lot might be discovered, and so it was for us, trying to open the door to &#8230; come in &#8230;<\/p>\n<p><code><br \/>\nSouth East Asia and Oceania ...<br \/>\n<\/code><\/p>\n<p> &#8230; spinner!  In broad brush concepts, we discovered &#8230;<\/p>\n<ul>\n<li>we needed to start to worry about places with an ISO 2 code but no TimeZone &#8230;<\/li>\n<li>we needed to start to worry about places off to the left, right, and top limits of the Geo Chart limits we establish via those weird width and height values you enter &#8230; and on this am sure many will have tweaked that the value integer parts are like a &#8220;scalar&#8221; measure and the mantissae are a &#8220;left zero padded percentage offset into the entire Geo Chart on which to lob&#8221; measure<\/li>\n<li>we needed to rearrange the scoring system&#8217;s denominator as a &#8220;seconds timer&#8221; rather than a &#8220;number of goes&#8221;<\/li>\n<li>we needed to, at least at the start, mention name of Quiz<\/li>\n<li>we needed to start closing previous <a target=_blank title='Wikipedia' href='http:\/\/wikipedia.org'>Wikipedia<\/a> windows on opening a new one, as applicable<\/li>\n<li>we needed to start to worry about clutter (eg. Vatican City and Rome geographicals for two different countries)<\/li>\n<li>we needed to start to worry about &#8220;skewed representations&#8221; (going back to Europe Quiz) whereby the first mention of a country ISO 2 Code within the TimeZone list is a position of a colony or dominion<\/li>\n<\/ul>\n<p> &#8230; whereas we optimistically imagined all we might need to worry about was just &#8230;<\/li>\n<ul>\n<li>converting (boolean binary decision) var<font size=1>iable<\/font> isquiz=false\/true (Javascript code logic) into (string ternary and more decision)  var<font size=1>iable<\/font> isquiz=&#8221;\/&#8217;Europe&#8217;\/&#8217;South East Asia and Oceania&#8217; (with more to come &#8230; until &#8220;n&#8221; (for) nirvana) &#8230; and associated &#8230;<\/li>\n<li>adding <i> data-continent=&#8221;South East Asia and Oceania&#8221;<\/i> global data attributes into dropdown id=&#8217;selceq&#8217; linking ISO 2 codes with Country names<\/li>\n<li>trying to add a bit of cursor=&#8217;progress&#8217; flagging of web application &#8220;thinking time&#8221;<\/li>\n<\/ul>\n<p>Never mind!  And so, onto yesterday&#8217;s <a title='Google Chart Geo Chart Europe Quiz Tutorial' href='#gcgceqt'>Google Chart Geo Chart Europe Quiz Tutorial<\/a> progress there is not that much difference user interaction wise, just the offer of another weird &#8220;width&#8221; value choice <font size=1>(on which to blow your mind)<\/font> but behind the scenes a &#8220;hard working mathematical induction middle<strike>man<\/strike>person&#8221; can now offer you the chance to try <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> Geo Chart interfacer at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a> link, and enter South East Asia and Oceania Quiz territory by following pointers at the &#8220;width&#8221; interactive entry (Javascript) prompt window.<\/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\/google-chart-geo-chart-oceania-quiz-tutorial\/'>Google Chart Geo Chart Oceania Quiz Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcgceqt'>Previous relevant <a target=_blank title='Google Chart Geo Chart Europe Quiz Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-europe-quiz-tutorial\/'>Google Chart Geo Chart Europe Quiz Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Geo Chart Europe Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_europe_quiz.jpg\" title=\"Google Chart Geo Chart Europe Quiz Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Geo Chart Europe Quiz Tutorial<\/p><\/div>\n<p>Up to yesterday&#8217;s <a title='Google Chart Geo Chart Sorted Small Countries Tutorial' href='#gcgcssct'>Google Chart Geo Chart Sorted Small Countries Tutorial<\/a>, as with interfacings to other <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a>, we had a two phase aspect to the web application structures &#8230;<\/p>\n<ol>\n<li>ask for user interaction via the keyboard<\/li>\n<li>display the resultant Google Chart taking notice of that user interaction<\/li>\n<\/ol>\n<p> &#8230; but today&#8217;s extension of <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> interfacing functionality opens the door to <b>the new<\/b> &#8230;<\/p>\n<ul>\n<li>display the resultant Google Chart taking notice of that user interaction <b>and allowing click\/touch continuing interaction<\/b> in the form of a quiz &#8230; first cab off the rank &#8230; Europe Quiz<\/li>\n<\/ul>\n<p>The work recently <font color=blue>has helped<\/font> because &#8230;<\/p>\n<p><code><br \/>\nfunction gck(igck) {<br \/>\n  var ansis='';<br \/>\n  if (document.getElementById('attachedImage' + ('' + igck).replace('-1',''))) {<br \/>\n    var xxx=document.getElementById('attachedImage' + ('' + igck).replace('-1','')).getAttribute('title');<br \/>\n    if (xxx.indexOf('#') != -1) {<br \/>\n    <font color=blue>if (isquiz) {<br \/>\n    maybe_bad=false;<br \/>\n    if (xxx.split('#')[1].indexOf('\/') != -1) {<br \/>\n    ansis=xxx.split('#')[1].split('\/')[eval(-1 + xxx.split('#')[1].split('\/').length)].toLowerCase();<br \/>\n    } else {<br \/>\n    ansis=xxx.split('#')[1];<br \/>\n    }<br \/>\n    if (document.getElementById('sans').getAttribute('data-title').toLowerCase().replace(\/\\ \/g,'_') == ansis.toLowerCase().replace(\/\\ \/g,'_')) {<br \/>\n     score++;<br \/>\n     goes++;<br \/>\n    } else {<br \/>\n     goes++;<br \/>\n    }<br \/>\n    document.getElementById('sans').innerHTML='? ' + score + '\/' + goes;<br \/>\n    }<\/font><br \/>\n    window.open(xxx.split('#')[1],'_blank', 'top=50,left=50,width=500,height=500');<br \/>\n    } else if (xxx == '') {<br \/>\n    <font color=blue>if (isquiz) {<br \/>\n    maybe_bad=false;<br \/>\n    if (document.getElementById('attachedImage' + ('' + igck).replace('-1','')).title.indexOf('\/') != -1) {<br \/>\n    ansis=document.getElementById('attachedImage' + ('' + igck).replace('-1','')).title.split('\/')[eval(-1 + xxx.split('#')[1].split('\/').length)].toLowerCase();<br \/>\n    } else {<br \/>\n    ansis=document.getElementById('attachedImage' + ('' + igck).replace('-1','')).title;<br \/>\n    }<br \/>\n    if (document.getElementById('sans').getAttribute('data-title').toLowerCase().replace(\/\\ \/g,'_') == ansis.toLowerCase().replace(\/\\ \/g,'_')) {<br \/>\n     score++;<br \/>\n     goes++;<br \/>\n    } else {<br \/>\n     goes++;<br \/>\n    }<br \/>\n    document.getElementById('sans').innerHTML='? ' + score + '\/' + goes;<br \/>\n    }<\/font><br \/>\n    window.open(document.getElementById('attachedImage' + ('' + igck).replace('-1','')).title,'_blank', 'top=50,left=50,width=500,height=500');<br \/>\n    } else {<br \/>\n    <font color=blue>if (isquiz) {<br \/>\n    maybe_bad=false;<br \/>\n    if (xxx.indexOf('\/') != -1) {<br \/>\n    ansis=xxx.split('\/')[eval(-1 + xxx.split('\/').length)].toLowerCase();<br \/>\n    } else {<br \/>\n    ansis=xxx;<br \/>\n    }<br \/>\n    if (document.getElementById('sans').getAttribute('data-title').toLowerCase().replace(\/\\ \/g,'_') == ansis.toLowerCase().replace(\/\\ \/g,'_')) {<br \/>\n     score++;<br \/>\n     goes++;<br \/>\n    } else {<br \/>\n     goes++;<br \/>\n    }<br \/>\n    document.getElementById('sans').innerHTML='? ' + score + '\/' + goes;<br \/>\n    }<\/font><br \/>\n    window.open(xxx,'_blank', 'top=50,left=50,width=500,height=500');<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; is an onclick place we&#8217;ve set aside for our SVG intervention work.  Keep it to no keyboard for this Europe Quiz, and we are happy (with this new idea, reminiscent of recent tweaking at <a target=_blank title='Google Chart Annotated Timeline Whitespace Delimitation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-annotated-timeline-whitespace-delimitation-tutorial\/'>Google Chart Annotated Timeline Whitespace Delimitation Tutorial<\/a>).<\/p>\n<p>So, again, you can try <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> Geo Chart interfacer at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a> link, and enter Europe Quiz territory by following pointers at the &#8220;width&#8221; interactive entry (Javascript) prompt window.<\/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\/google-chart-geo-chart-eurtope-quiz-tutorial\/'>Google Chart Geo Chart Europe Quiz Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcgcssct'>Previous relevant <a target=_blank title='Google Chart Geo Chart Sorted Small Countries Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-sorted-small-countries-tutorial\/'>Google Chart Geo Chart Sorted Small Countries Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Geo Chart Sorted Small Countries Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geochartsmall_sort.jpg\" title=\"Google Chart Geo Chart Sorted Small Countries Overlay Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Geo Chart Sorted Small Countries Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Google Chart Geo Chart Small Countries Overlay Tutorial' href='#gcgcscot'>Google Chart Geo Chart Small Countries Overlay Tutorial<\/a>&#8216;s workings potentially using the geographicals (or marker) mode of use actually involve intervention logic within what Google provide SVG-wise for the Geo Chart content.<\/p>\n<p>And so, for some time, the order in which we entered &#8230;<\/p>\n<table style='width:80%;'>\n<tr>\n<th>Country<\/th>\n<th>Surface Area (sq km)<\/th>\n<\/tr>\n<tr>\n<td>Australia<\/td>\n<td>7692024<\/td>\n<\/tr>\n<tr>\n<td>New Zealand<\/td>\n<td>269190<\/td>\n<\/tr>\n<tr>\n<td>Andorra<\/td>\n<td>468<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; we entered, interactively by us, like, personally, like, in that order above, like.  But for a day or two we were covering up a gap in the &#8220;wall of logic&#8221; plaster we had created for Google Chart select event logic (actually non-existant for the Geo Chart, but we code for onclick logic to navigate a user to a relevant <a target=_blank title='Wikipedia' href='https:\/\/wikipedia.org'>Wikipedia<\/a> page).  The good news is we have fixed it now, not tying the user down to entering data in any particular order.<\/p>\n<p>Fixed what, now?  <font size=1>(I thought I heard you ask?!)<\/font>  Well, the alignment of &#038;aregeographical= data to the symbology presented at the geographical positions on the Geo Map asks that the order we present corresponds to the relevant order of relevant Google SVG elements, and Google orders these from the largest numerical value down to the smallest, as you notice as far as Surface Area (sq km) suits an order of Australia, New Zealand, Andorra &#8230;<\/p>\n<table style='width:600px;'>\n<tr>\n<th>First non-overlay URL version goes <font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Surface%20Areas%20(sq%20km)&#038;width=1112&#038;height=694&#038;country=Country&#038;popularity=Surface%20Area%20(sq%20km)&#038;data=%20[-34.91667|138.58333|~Australia~,7692024]%20,%20[-36.86667|174.76666|~New%20Zealand~,269190]%20,%20[42.5|1.51666|~Andorra~,468]%20&#038;aregeographicals=http.Australia%2Chttp.New%20Zealand%2Chttp.Andorra<\/font><\/th>\n<\/tr>\n<tr>\n<td><iframe style='width:600px; height:600px;' src='https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Surface%20Areas%20(sq%20km)&#038;width=1112&#038;height=694&#038;country=Country&#038;popularity=Surface%20Area%20(sq%20km)&#038;data=%20[-34.91667|138.58333|~Australia~,7692024]%20,%20[-36.86667|174.76666|~New%20Zealand~,269190]%20,%20[42.5|1.51666|~Andorra~,468]%20&#038;aregeographicals=http.Australia%2Chttp.New%20Zealand%2Chttp.Andorra'><\/iframe><\/td>\n<\/tr>\n<tr>\n<th>Second overlay URL version goes <font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Surface%20Areas%20(sq%20km)&#038;width=1112&#038;height=694&#038;country=Country&#038;popularity=Surface%20Area%20(sq%20km)&#038;data=%20[-34.91667|138.58333|~Australia~,7692024]%20,%20[-36.86667|174.76666|~New%20Zealand~,269190]%20,%20[42.5|1.51666|~Andorra~,468]%20&#038;overlay=y&#038;aregeographicals=http.Australia%2Chttp.New%20Zealand%2Chttp.Andorra<\/font>\n<\/th>\n<\/tr>\n<tr>\n<td><iframe style='width:600px; height:600px;' src='https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Surface%20Areas%20(sq%20km)&#038;width=1112&#038;height=694&#038;country=Country&#038;popularity=Surface%20Area%20(sq%20km)&#038;data=%20[-34.91667|138.58333|~Australia~,7692024]%20,%20[-36.86667|174.76666|~New%20Zealand~,269190]%20,%20[42.5|1.51666|~Andorra~,468]%20&#038;overlay=y&#038;aregeographicals=http.Australia%2Chttp.New%20Zealand%2Chttp.Andorra'><\/iframe><\/td>\n<\/tr>\n<tr>\n<th>But the recent work means overlay URL version created interactively with order New Zealand, Andorra, Australia <font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Surface%20Areas%20(sq%20km)&#038;width=1112&#038;height=694&#038;country=Country&#038;popularity=Surface%20Area%20(sq%20km)&#038;data=%20[-36.86667|174.76666|~New%20Zealand~,269190]%20,%20[42.5|1.51666|~Andorra~,468]%20,%20[-34.91667|138.58333|~Australia~,7692024]%20&#038;overlay=y&#038;aregeographicals=http.Australia%2Chttp.New%20Zealand%2Chttp.Andorra<\/font><br \/>\n also works<\/th>\n<\/tr>\n<tr>\n<td><iframe style='width:600px; height:600px;' src='https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Surface%20Areas%20(sq%20km)&#038;width=1112&#038;height=694&#038;country=Country&#038;popularity=Surface%20Area%20(sq%20km)&#038;data=%20[-36.86667|174.76666|~New%20Zealand~,269190]%20,%20[42.5|1.51666|~Andorra~,468]%20,%20[-34.91667|138.58333|~Australia~,7692024]%20&#038;overlay=y&#038;aregeographicals=http.Australia%2Chttp.New%20Zealand%2Chttp.Andorra'><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p> &#8230; and the changes necessary to ensure this <font color=blue>go<\/font> &#8230;<\/p>\n<p><code><br \/>\n \/\/ var pushfrom=[], pushto=[], pushag=[], selceqih='', saih='', oneistoosmall=false, oneisnotapplicable=false;<br \/>\n function assess_small(indatar) {<br \/>\n      <font color=blue>var ipl=0, jpl=0, kpl=0, pushxx=[];<\/font><br \/>\n      var outsuffix='';<br \/>\n      var outdatar=indatar;<br \/>\n      if (pushfrom.length &gt; 0 && !oneisnotapplicable && oneistoosmall) {<br \/>\n       <font color=blue>for (jpl=0; jpl&lt;pushfrom.length; jpl++) { <\/font>  \/\/ for (var ipl=0; ipl&lt;pushfrom.length; ipl++) {<br \/>\n         <font color=blue>if (jpl == 0) {<br \/>\n           var huhdatas=indatar.split('~');<br \/>\n           for (var ihuhdatas=2; ihuhdatas&lt;huhdatas.length; ihuhdatas+=2) {<br \/>\n             if (huhdatas[eval(-1 + eval('' + ihuhdatas))].split('~')[0].replace('%20',' ').indexOf(' ') != -1) {<br \/>\n             pushxx.push(('00000000000000000000000' + huhdatas[ihuhdatas].split(',')[1].split(']')[0]).slice(-22) + ' ... ' + huhdatas[eval(-1 + eval('' + ihuhdatas))].split('~')[0]);<br \/>\n             }<br \/>\n             pushxx.push(('00000000000000000000000' + huhdatas[ihuhdatas].split(',')[1].split(']')[0]).slice(-22) + ' ... ' + encodeURIComponent(huhdatas[eval(-1 + eval('' + ihuhdatas))].split('~')[0]));<br \/>\n           }<br \/>\n           pushxx.sort();<br \/>\n           pushxx.reverse();<br \/>\n         }<br \/>\n         ipl=jpl;<br \/>\n         for (kpl=0; kpl&lt;pushfrom.length; kpl++) {<br \/>\n           if (ipl == jpl && pushxx[jpl].split(' ... ')[1] == pushfrom[kpl].split('~')[1].split('~')[0]) {<br \/>\n             ipl=kpl;<br \/>\n             pushxx[jpl]=pushxx[jpl].split(' ... ')[0] + ' ...  ';<br \/>\n           }<br \/>\n         }<\/font><br \/>\n         if (outdatar.indexOf(pushfrom[ipl]) != -1) {<br \/>\n         if (outsuffix == '') {<br \/>\n           outsuffix='&aregeographicals=' + pushag[ipl];<br \/>\n         } else {<br \/>\n           outsuffix+='%2C' + pushag[ipl];<br \/>\n         }<br \/>\n         while (outdatar.indexOf(pushfrom[ipl]) != -1) {<br \/>\n           outdatar=outdatar.replace(pushfrom[ipl], pushto[ipl]);<br \/>\n         }<br \/>\n         }<br \/>\n       }<br \/>\n      }<br \/>\n <br \/> <br \/>\n      return outdatar + outsuffix;<br \/>\n }<br \/>\n<\/code><\/p>\n<p>Yet again, you can try <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> Geo Chart interfacer at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a> link.<\/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\/google-chart-geo-chart-sorted-small-countries-tutorial\/'>Google Chart Geo Chart Sorted Small Countries Overlay Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcgcscot'>Previous relevant <a target=_blank title='Google Chart Geo Chart Small Countries Overlay Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-small-countries-overlay-tutorial\/'>Google Chart Geo Chart Small Countries 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\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Geo Chart Small Countries Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geochartsmall_overlay.jpg\" title=\"Google Chart Geo Chart Small Countries Overlay Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Geo Chart Small Countries Overlay Tutorial<\/p><\/div>\n<p>With &#8220;overlay&#8221; techniques available in life it might be tempting to say &#8220;never say never&#8221; because you don&#8217;t have to compromise a weak solution for a less weak solution.  Yesterday&#8217;s <a title='Google Chart Geo Chart Small Countries Tutorial' href='#gcgcsct'>Google Chart Geo Chart Small Countries Tutorial<\/a>&#8216;s <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> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a>&#8216;s homegrown interfacer tactics for Small Countries is a case in point.<\/p>\n<p>You may recall from yesterday how we dynamically reverted to &#8220;geographicals mode&#8221; display (Google call it &#8220;Markers&#8221; mode) when the shading for a Small Country would lead to &#8220;data loss&#8221;.  But what if we &#8230;<\/p>\n<ul>\n<li>continue what we were doing yesterday <font color=blue>&#8220;overlayed&#8221;<\/font> &#8230;\n<p> &#8230; onto &#8230;<\/li>\n<li>what we changed from URL-wise with &#8220;function assess_small()&#8221; (with <b>the one codeline change<\/b> &#8230;<br \/>\n<code><br \/>\n       outsuffix='<b>&overlay=y<\/b>&aregeographicals=' + pushag[ipl];<br \/>\n<\/code><br \/>\n) &#8230; <b>in the form of two new HTML iframe code<\/b> below &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['overlay']) || isset($_POST['overlay'])) {<br \/>\n  echo \"&lt;script&gt; function overlayit() {<br \/>\n     var ourls=documentURL.split('&overlay=')[0].split('[');<br \/>\n     var ourl=ourls[0];<br \/>\n     for (var iouris=1; iouris&lt;ourls.length; iouris++) {<br \/>\n      if (ourls[iouris].substring(0,1) == '~') {<br \/>\n        ourl+='[' + ourls[iouris];<br \/>\n      } else {<br \/>\n        ourl+='[' + ourls[iouris].replace(ourls[iouris].split('~')[0],'');<br \/>\n      }<br \/>\n     }<br \/>\n     document.body.style.<font color=blue>zIndex<\/font>='-12';<br \/>\n     document.getElementById('doverlay').innerHTML='&lt;iframe style=\\\"<font color=blue>position:absolute;top:0px;left:0px;<\/font>width:100%;height:100vh;<font color=blue>z-index:2;opacity:0.95;<\/font>\\\" src=\\\"' + ourl + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n     document.getElementById('doverlaytwo').innerHTML='&lt;iframe style=\\\"<font color=blue>position:absolute;top:0px;left:0px;<\/font>width:100%;height:100vh;<font color=blue>z-index:22;opacity:0.9;<\/font>\\\" src=\\\"' + documentURL.replace('&overlay=','&qw=') + '&guess=' + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n }<br \/>\n setTimeout(overlayit, 2000);<br \/>\n &lt;\/script&gt;<br \/>\n\";<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<\/ul>\n<p>Again, you can try <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> Geo Chart interfacer at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a> link.<\/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\/google-chart-geo-chart-small-countries-overlay-tutorial\/'>Google Chart Geo Chart Small Countries Overlay Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcgcsct'>Previous relevant <a target=_blank title='Google Chart Geo Chart Small Countries Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-small-countries-tutorial\/'>Google Chart Geo Chart Small Countries Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Geo Chart Small Countries Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geochartsmall.jpg\" title=\"Google Chart Geo Chart Small Countries Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Geo Chart Small Countries Tutorial<\/p><\/div>\n<p>We last used the excellent <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> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> tool with the work of <a title='Window LocalStorage Client Versus Server Map Tutorial' href='#wlscvsmt'>Window LocalStorage Client Versus Server Map Tutorial<\/a>, and it was this project that alerted us to both a weakness and a strength of that chart &#8230;<\/p>\n<ul>\n<li>a weakness being its inability to get the resolution to shade a small country (eg. today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geochartsmall.jpg\" title=\"Tutorial picture\">tutorial picture<\/a>&#8216;s Andorra) &#8230; but, the good news, as used with this integration work above &#8230;<\/li>\n<li>a strength is the alternative display mechanism via geographical entries<\/li>\n<\/ul>\n<p> &#8230; and so, what if &#8230;<\/p>\n<ul>\n<li>as the user enters in their Country (or Geographical) data &#8230;<\/li>\n<li>if we can determine it as being a Country being entered &#8230; and&#8230;<\/li>\n<li>you have only ever been entering Countries &#8230; and &#8230;<\/li>\n<li>any one Country so defined has a surface area less than 10000 square kilometers &#8230; then &#8230;<\/li>\n<li>we navigate to a Geographical data version of this &#8220;only Countries entered&#8221; data set &#8230; so that &#8230;<\/li>\n<li>even small such Countries will be displayed &#8230; <\/li>\n<li>as they would not if still in the default &#8220;only Countries entered&#8221; mode of display<\/li>\n<\/ul>\n<p>We introduce three new sources of data in order to piece together the (Javascript via PHP coding) logic for this &#8230;<\/p>\n<ol>\n<li>TimeZone and Geographicals and ISO 2 Letter Code information &#8230;<br \/>\n<code><br \/>\nvar ourtzlist='&lt;option value=\"Africa\/Abidjan\" data-geo=\"5.31666,-4.03334,GMT,CI,+0\"&gt;Africa\/Abidjan&lt;\/option&gt;&lt;option value=\"Africa\/Accra\" data-geo=\"5.55,-0.21667,GMT,GH,+0\">Africa\/Accra&lt;\/option&gt;';   \/\/ etcetera etcetera etcetera<br \/>\n<\/code>\n<\/li>\n<li>Country Name and ISO 2 Letter Code information (etcetera etcetera etcetera) &#8230;<br \/>\n<code><br \/>\n&lt;div id=dlookups&gt;<br \/>\n&lt;select id='selceq' style='display:none;'&gt;<br \/>\n&lt;option value='AF'&gt;Afghanistan&lt;\/option&gt;<br \/>\n&lt;option value='AX'&gt;Aland Islands&lt;\/option&gt;<br \/>\n&lt;option value='AL'&gt;Albania&lt;\/option&gt;<br \/>\n&lt;\/select&gt;&lt;\/div&gt;<br \/>\n<\/code>\n<\/li>\n<li>Surface Areas of Countries thanks to <a target=_blank title='Surface Areas of Countries via Wikipedia, thanks'  href='https:\/\/simple.wikipedia.org\/wiki\/List_of_countries_by_area'>Wikipedia<\/a> (etcetera etcetera etcetera) &#8230;<br \/>\n<code><br \/>\n&lt;table style='display:none;' id='surface_area' border='1' cellpadding='2' cellspacing='0'&gt;<br \/>\n&lt;tbody&gt;&lt;tr bgcolor='#efefef'&gt;<br \/>\n&lt;th&gt;Pos<br \/>\n&lt;\/th&gt;&lt;th&gt;Country<br \/>\n&lt;\/th&gt;<br \/>\n&lt;th&gt;Area (km\u00b2)<br \/>\n&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;1&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;a data-href='\/wiki\/Russia' title='Russia'&gt;Russia&lt;\/a&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;17098246<br \/>\n&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;2&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;a data-href='\/wiki\/Canada' title='Canada'&gt;Canada&lt;\/a&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;9984670<br \/>\n&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;3&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;a data-href='\/wiki\/People%27s_Republic_of_China' title='People's Republic of China'&gt;China&lt;\/a&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;9572900<br \/>\n&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/tbody&gt;&lt;\/table&gt;<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; used where we process a user Country (or Geographical) interaction Javascript code snippet where var<font size=1>iable<\/font> thisris is that user interaction result &#8230;<\/p>\n<p><code><br \/>\n var pushfrom=[], pushto=[], pushag=[], selceqih='', saih='', oneistoosmall=false, oneisnotapplicable=false;<br \/>\n<br \/>\n       if (ourtzlist.indexOf(',' + thisris.toUpperCase() + ',') != -1 && thisris.length == 2) {<br \/>\n             if (selceqih == '') {  selceqih=document.getElementById('selceq').innerHTML;   }<br \/>\n             if (saih == '') {  saih=document.getElementById('surface_area').innerHTML;   }<br \/>\n             pushfrom.push('[~' + thisris + '~');<br \/>\n             pushto.push('[' + ourtzlist.split(',' + thisris.toUpperCase() + ',')[0].split(' data-geo=\\\"')[eval(-1 + ourtzlist.split(',' + thisris.toUpperCase() + ',')[0].split(' data-geo=\\\"').length)].split(',')[0] + '|' + ourtzlist.split(',' + thisris.toUpperCase() + ',')[0].split(' data-geo=\\\"')[eval(-1 + ourtzlist.split(',' + thisris.toUpperCase() + ',')[0].split(' data-geo=\\\"').length)].split(',')[1] + '|~' + thisris.toUpperCase() + '~');<br \/>\n             if (selceqih.indexOf(' value=\\\"' + thisris.toUpperCase() + '\\\"&gt;') != -1) {<br \/>\n               pushag.push('http.' + encodeURIComponent(selceqih.split(' value=\\\"' + thisris.toUpperCase() + '\\\"&gt;')[1].split('&lt;')[0]));<br \/>\n             } else {<br \/>\n               pushag.push('');<br \/>\n             }<br \/>\n             if (saih.indexOf('&gt;' + selceqih.split(' value=\\\"' + thisris.toUpperCase() + '\\\"&gt;')[1].split('&lt;')[0]) != -1) {<br \/>\n               thissa=saih.split('&gt;' + selceqih.split(' value=\\\"' + thisris.toUpperCase() + '\\\"&gt;')[1].split('&lt;')[0])[1].split('&lt;td&gt;')[1].split('&lt;')[0].split(String.fromCharCode(10))[0];<br \/>\n               if (eval('' + thissa) &lt; 10000) {<br \/>\n                oneistoosmall=true;<br \/>\n               }<br \/>\n             }<br \/>\n        } else if (('' + thisris).trim() != '' && selceqih.toUpperCase().indexOf('&gt;' + thisris.toUpperCase()) != -1) {<br \/>\n             thisisocc=selceqih.toUpperCase().split('&gt;' + thisris.toUpperCase())[0].split(' VALUE=\\\"')[eval(-1 + selceqih.toUpperCase().split('&gt;' + thisris.toUpperCase())[0].split(' VALUE=\\\"').length)].split('\\\"')[0];<br \/>\n             pushfrom.push('[~' + encodeURIComponent(thisris) + '~');<br \/>\n             pushto.push('[' + ourtzlist.split(',' + thisisocc + ',')[0].split(' data-geo=\\\"')[eval(-1 + ourtzlist.split(',' + thisisocc + ',')[0].split(' data-geo=\\\"').length)].split(',')[0] + '|' + ourtzlist.split(',' + thisisocc + ',')[0].split(' data-geo=\\\"')[eval(-1 + ourtzlist.split(',' + thisisocc + ',')[0].split(' data-geo=\\\"').length)].split(',')[1] + '|~' + encodeURIComponent(thisris) + '~');<br \/>\n             pushag.push('http.' + encodeURIComponent(thisris));<br \/>\n             if (thisris.indexOf(' ') != -1) {<br \/>\n             pushfrom.push('[~' + thisris + '~');<br \/>\n             pushto.push('[' + ourtzlist.split(',' + thisisocc + ',')[0].split(' data-geo=\\\"')[eval(-1 + ourtzlist.split(',' + thisisocc + ',')[0].split(' data-geo=\\\"').length)].split(',')[0] + '|' + ourtzlist.split(',' + thisisocc + ',')[0].split(' data-geo=\\\"')[eval(-1 + ourtzlist.split(',' + thisisocc + ',')[0].split(' data-geo=\\\"').length)].split(',')[1] + '|~' + encodeURIComponent(thisris) + '~');<br \/>\n             pushag.push('http.' + encodeURIComponent(thisris));<br \/>\n             }<br \/>\n             if (saih.toUpperCase().indexOf('&gt;' + thisris.toUpperCase()) != -1) {<br \/>\n               thissa=saih.toUpperCase().split('&gt;' + thisris.toUpperCase())[1];<br \/>\n               thissa=thissa.split('&lt;TD&gt;')[1].split('&lt;')[0].split(String.fromCharCode(10))[0];<br \/>\n               if (eval('' + thissa) &lt; 10000) {<br \/>\n                oneistoosmall=true;<br \/>\n               }<br \/>\n             }<br \/>\n        }<br \/>\n<\/code><\/p>\n<p> &#8230; and if remaining relevant just before the next navigation happens, where var<font size=1>iable<\/font> indatar represents the <i>default &#8220;only Countries entered&#8221; mode of display<\/i> value &#8230;<\/p>\n<p><code><br \/>\n \/\/ var pushfrom=[], pushto=[], pushag=[], selceqih='', saih='', oneistoosmall=false, oneisnotapplicable=false;<br \/>\n function assess_small(indatar) {<br \/>\n      var outsuffix='';<br \/>\n      var outdatar=indatar;<br \/>\n      if (pushfrom.length &gt; 0 && !oneisnotapplicable && oneistoosmall) {<br \/>\n       for (var ipl=0; ipl&lt;pushfrom.length; ipl++) {<br \/>\n         if (outdatar.indexOf(pushfrom[ipl]) != -1) {<br \/>\n         if (outsuffix == '') {<br \/>\n           outsuffix='&aregeographicals=' + pushag[ipl];<br \/>\n         } else {<br \/>\n           outsuffix+='%2C' + pushag[ipl];<br \/>\n         }<br \/>\n         while (outdatar.indexOf(pushfrom[ipl]) != -1) {<br \/>\n           outdatar=outdatar.replace(pushfrom[ipl], pushto[ipl]);<br \/>\n         }<br \/>\n         }<br \/>\n       }<br \/>\n      }<br \/>\n <br \/> <br \/>\n      return outdatar + outsuffix;<br \/>\n }<br \/>\n<\/code> <\/p>\n<p>You can try <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> Geo Chart interfacer at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a> link.<\/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\/google-chart-geo-chart-small-countries-tutorial\/'>Google Chart Geo Chart Small Countries Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wlscvsmt'>Previous relevant <a target=_blank title='Window LocalStorage Client Versus Server Map Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-localstorage-client-versus-server-map-tutorial\/'>Window LocalStorage Client Versus Server Map 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window LocalStorage Client Versus Server Map Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_map.jpg\" title=\"Window LocalStorage Client Versus Server Map Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window LocalStorage Client Versus Server Map Tutorial<\/p><\/div>\n<p>Get a good map, and a goodly number of times you&#8217;ll want a map of smaller or larger scale than the one you have.  Murphy&#8217;s Law?  This is probably why in the wonderful woooooooorrrrrrrrlllllld of <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> they have included &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> topographic map of the world or of regions<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' title='Google Map Charts'>Map Chart<\/a> terrestrial\/satellite map of your group of markers at a zoom level of your choosing<\/li>\n<\/ul>\n<p> &#8230; and hope you can see that the latter can save the day for a Short Distance Trip <font size=1>(corner shop, anyone?!)<\/font>.<\/p>\n<p>So we&#8217;ve added onto yesterday&#8217;s <a title='Window LocalStorage Client Versus Server Timeline Tutorial' href='#wlscvstt'>Window LocalStorage Client Versus Server Timeline Tutorial<\/a> progress a new toggling button to view a scenario in either <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> scenario above.<\/p>\n<p>You can see this integration work with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html----------GETME\" title=\"wls_vs_php.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html----------GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a> link supervising <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\">a tweaked<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php---------------------GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> Geo Chart interfacer.<\/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\/window-localstorage-client-versus-server-map-tutorial\/'>Window LocalStorage Client Versus Server Map Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wlscvstt'>Previous relevant <a target=_blank title='Window LocalStorage Client Versus Server Timeline Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-localstorage-client-versus-server-timeline-tutorial\/'>Window LocalStorage Client Versus Server Timeline 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window LocalStorage Client Versus Server Timeline Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_timeline.jpg\" title=\"Window LocalStorage Client Versus Server Timeline Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window LocalStorage Client Versus Server Timeline Tutorial<\/p><\/div>\n<p>Up to yesterday&#8217;s <a title='Window LocalStorage Client Versus Server User Tutorial' href='#wlscvsut'>Window LocalStorage Client Versus Server User Tutorial<\/a>&#8216;s progress, our Capital City Find Matching Country Report web application project was all about &#8230;<\/p>\n<ul>\n<li>where <font size=1>(and capital of &#8220;what&#8221;)<\/font> &#8230; but we often seek out a way to add into the mix that 4th dimension &#8230;<\/li>\n<li>when (ie. time)<\/li>\n<\/ul>\n<p> &#8230; and regarding the current project, a &#8230;<\/li>\n<ul>\n<li>where &#8220;map&#8221; &#8230; can interface with a &#8230;<\/li>\n<li>when &#8220;Trip Plan Itinerary&#8221;<\/li>\n<\/ul>\n<p> &#8230; and for this purpose, we&#8217;re going to interface to the excellent <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/annotatedtimeline' title='Annotated Timeline Chart'>Annotated Timeline Chart<\/a>, thanks, because it combines links of &#8220;time&#8221; to &#8220;user annotations&#8221; in a timeline way, that similar way you might describe the qualities of a Trip, even before you&#8217;ve gone on that trip.  We&#8217;ve also added it so that an unordered places list can be turned into a Trip Plan Itinerary at the click\/touch of a new map &#128506; &amp;#128506; emoji button.<\/p>\n<p>Again, see how these timeline amendments were achieved with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html---------GETME\" title=\"wls_vs_php.htm\">our changed<\/a<> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html---------GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a> link and  <a target=_blank title='annotatedtimeline_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/AnnotatedTimelineChart\/annotatedtimeline_chart.php------GETME'>annotatedtimeline_chart.php<\/a> which <a target=_blank title='annotatedtimeline_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/AnnotatedTimelineChart\/annotatedtimeline_chart.php------GETME'>changed quite a lot<\/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-window-localstorage-client-versus-server-timeline-tutorial\/'>Window LocalStorage Client Versus Server Timeline Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wlscvsut'>Previous relevant <a target=_blank title='Window LocalStorage Client Versus Server User Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-localstorage-client-versus-server-user-tutorial\/'>Window LocalStorage Client Versus Server User 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window LocalStorage Client Versus Server User Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_user.jpg\" title=\"Window LocalStorage Client Versus Server User Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window LocalStorage Client Versus Server User Tutorial<\/p><\/div>\n<p>The inherent weakness with our current Capital City Find Matching Country Report web application project, to our minds, was that places of interest are not restricted to the Capital Cities of Countries, especially when &#8220;Trip Planning&#8221;.   On the other hand, it would be impossible to cater for every &#8220;place&#8221; in the world.  That is far too subjective for good web application applicability.  What would be good though, is to allow in user defined &#8230;<\/p>\n<p><code><br \/>\nPlace name, Country name<br \/>\n<\/code><\/p>\n<p> &#8230; terms, the definitions of interest to a user.  We can ask this &#8230;<\/p>\n<ul>\n<li>flagged by the click\/touch of an emoji button &#8230; and &#8230;<\/li>\n<li>the interactive entry presented via a Javascript <a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a> window<\/li>\n<\/ul>\n<p>.  When thinking of data applicable to an individual, then that can be catered for by recording it in <a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> where it will be recalled on the next execution of that web application in the same web browser.<\/p>\n<p>This, along with a Colour Wheel of the &#8220;nearest TimeZone place&#8221; onto the existing logic of yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Order Tutorial' href='#wsscvsot'>Window SessionStorage Client Versus Server Order Tutorial<\/a> progress could make for a more useful and practical tool for those Trip Planners out there!<\/p>\n<p>See how this was achieved with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html---------GETME\" title=\"wls_vs_php.htm\">our changed<\/a<> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html---------GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a> link.<\/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\/window-sessionstorage-client-versus-server-user-tutorial\/'>Window LocalStorage Client Versus Server User Tutorial<\/a>.<\/p-->\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>To click\/touch one of those Google Chart Geo Chart lines between Emoji Flag Markers will show a new Google Maps directions web page with transport times and detail, as well as an inhouse crow fly distance of that trip leg, as shown up the top right of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_user.jpg\" title=\"tutorial picture\">tutorial picture<\/a>.<\/p>\n<hr>\n<p id='wsscvsot'>Previous relevant <a target=_blank title='Window SessionStorage Client Versus Server Order Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-order-tutorial\/'>Window SessionStorage Client Versus Server Order 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Order Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_order.jpg\" title=\"Window SessionStorage Client Versus Server Order Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Order Tutorial<\/p><\/div>\n<p>If we are to honour our thoughts of being able to use our current Capital City Find Matching Country Report web application as a Trip Planner &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-integration-tutorial\/'>\n<p>Our primary integration today is to (software) integrate the great <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> and its great API service for autocomplete name searches for weather (and hurricane) information.  Why bother?  Well, can you not envisage a user using that Ajax functionality of yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Ajax Tutorial' href='#wsscvsat'>Window SessionStorage Client Versus Server Ajax Tutorial<\/a> as a trip planner, perhaps, or as a &#8220;checking up on relatives overseas&#8221; tool, perhaps?   And not all the capital cities are timezone places, and so for some of those we can use Weather integration to still show apt online information when click\/touching a Countries Report row.  Speaking of this &#8220;row&#8221;, we make an improvement whereby on a first click of a right hand (Country) row cell, that cell is not initially a <i>contenteditable=&#8221;true&#8221;<\/i> one (that may frustrate showing the keyboard on mobile, when most likely it was the row touch intended), but then becomes a <i>contenteditable=&#8221;true&#8221;<\/i> cell henceforth.<\/p>\n<\/blockquote>\n<p> &#8230; then yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Flags Tutorial' href='#wsscvsft'>Window SessionStorage Client Versus Server Flags Tutorial<\/a> &#8220;progress to now&#8221; needs to take notice of a user&#8217;s order of multiple select (dropdown) element click\/touching of Capital City option (sub)elements, just as we did with the recent <a target=_blank title='User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/user-controlled-dynamic-javascript-youtube-embedded-api-ordered-tutorial\/'>User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial<\/a>&#8216;s web application project to allow for a user ordered <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> video playlist.<\/p>\n<p>Because what is a Trip Planner without an ordered trip?  Well, that is debatable, but what isn&#8217;t (debatable), is that there will be people in the world who appreciate the &#8220;mapping out&#8221; of a proposed Trip Planning Itinerary.  What could we call on here?  We can think of the <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> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> work around about the time of <a target=_blank title='Google Geo Chart Co-ordinate Emojis Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-geo-chart-co-ordinate-emojis-tutorial\/'>Google Geo Chart Co-ordinate Emojis Tutorial<\/a>, when we started using &#8230;<\/p>\n<ul>\n<li>a world map &#8230; with &#8230;<\/li>\n<li>emoji markers &#8230; and optionally &#8230;<\/li>\n<li>joined up by straight lines<\/li>\n<\/ul>\n<p> &#8230; an idea for a Trip Plan itinerary synopsis, perhaps?!<\/p>\n<p>If you examined closely yesterday&#8217;s code changes you will have noticed our collecting of TimeZone Place geographical latitude and longitude information.  Today, we start making use of that preparatory work with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html--------GETME\" title=\"wls_vs_php.htm\">our changed<\/a<> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html--------GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a> link.<\/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\/window-sessionstorage-client-versus-server-order-tutorial\/'>Window SessionStorage Client Versus Server Order Tutorial<\/a>.<\/p-->\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>The &#8220;emoji markers&#8221; above (as of 2 January 2020) will be &#8220;country flags&#8221; (as per <a title='Window SessionStorage Client Versus Server Flags Tutorial' href='#wsscvsft'>Window SessionStorage Client Versus Server Flags Tutorial<\/a> ideas), as defined.<\/p>\n<hr>\n<p id='wsscvsft'>Previous relevant <a target=_blank title='Window SessionStorage Client Versus Server Flags Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-flags-tutorial\/'>Window SessionStorage Client Versus Server Flags 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Flags Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_flag.jpg\" title=\"Window SessionStorage Client Versus Server Flags Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Flags Tutorial<\/p><\/div>\n<p>Yes, there&#8217;s more to do onto yesterday&#8217;s <a title='Window SessionStorage Client Versus Server CSS Tutorial' href='#wsscvscsst'>Window SessionStorage Client Versus Server CSS Tutorial<\/a>&#8216;s Capital City Find Matching Country Report web application project, in our eyes.  We have not even mentioned &#8220;Internationalization&#8221; as a concept up to now. In this line of thinking &#8230;<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Emoji flags via ISO 2 character country codes are dead easy via <a target=_blank title='Regional Indicator Symbol' href='https:\/\/emojiterra.com\/regional-indicator-symbol-letter-a\/'>Regional Indicator Symbol<\/a> characters &#8230;<\/p>\n<p><code><br \/>\n      var lri=\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";<br \/>\n      var dri=[\"127462\",\"127463\",\"127464\",\"127465\",\"127466\",\"127467\",\"127468\",\"127469\",\"127470\",\"127471\",\"127472\",\"127473\",\"127474\",\"127475\",\"127476\",\"127477\",\"127478\",\"127479\",\"127480\",\"127481\",\"127482\",\"127483\",\"127484\",\"127485\",\"127486\",\"127487\"];<br \/>\n<br \/>\n      var thiscc='AU'; \/\/ ISO 2 character countrycode for Australia<br \/>\n      var ccsuff='', ccchar=' ';<br \/>\n      for (var iccsuff=0; iccsuff&lt;thiscc.length; iccsuff++) {<br \/>\n        ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();<br \/>\n        ccsuff+='&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';<br \/>\n      }<br \/>\n      document.getElementById('lastflag').innerHTML=ccsuff;<br \/>\n<\/code><\/p>\n<p> &#8230; to result in (<b>via<\/b> &lt;span <b>style=font-size:64px;<\/b>&gt;&amp;#127462;&amp;#127482;&lt;\/span&gt;) &#8230;<\/p>\n<p><code><br \/>\n<span style=font-size:64px;>&#127462;&#127482;<\/span><br \/>\n<\/code><\/p>\n<p> &#8230; providing interest and general translatability to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html-------GETME\" title=\"wls_vs_php.htm\">the changed<\/a<> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html-------GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a> link.<\/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\/window-sessionstorage-client-versus-server-flags-tutorial\/'>Window SessionStorage Client Versus Server Flags Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvscsst'>Previous relevant <a target=_blank title='Window SessionStorage Client Versus Server CSS Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-css-tutorial\/'>Window SessionStorage Client Versus Server CSS 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server CSS Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_links_css.jpg\" title=\"Window SessionStorage Client Versus Server CSS Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server CSS Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Integration Tutorial' href='#wsscvsit'>Window SessionStorage Client Versus Server Integration Tutorial<\/a> we have a two pronged improvements set for you today with our current Capital City Find Matching Country Report web application project &#8230;<\/p>\n<ul>\n<li>CSS styling changes &#8230; and &#8230;<\/li>\n<li>additional functionality for Email and SMS links back to our current Capital City Find Matching Country Report web application project (to complete the cycle)<\/li>\n<\/ul>\n<p>We use several modes of CSS application (the first and last of particular relevance to today&#8217;s &#8220;highlighting of workflow&#8221; improvements) &#8230;<\/p>\n<ul>\n<li>&#8220;static&#8221; internal CSS coding within <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html------GETME\" title=\"wls_vs_php.htm\">the changed<\/a<> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html------GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a> link&#8217;s new CSS and linking improvements, which caused <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html--------GETME\" title=\"colour_wheel.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html--------GETME\" title=\"colour_wheel.html\">colour_wheel.html<\/a>&#8216;s colour wheel (at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html\" title='Click picture'>live run<\/a> link) to be affected (by integrations &#8220;up&#8221;, opening up the <a target=_blank href='\/\/map.google.com' title='Google'>Google Maps<\/a> and <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> interfacing emoji buttons there)<\/li>\n<li>&#8220;static&#8221; internal HTML &#8220;style&#8221; attribute styling<\/li>\n<li>&#8220;dynamic&#8221; Javascript DOM HTML &#8220;style&#8221; attribute changes<\/li>\n<li>&#8220;dynamic&#8221; Javascript DOM &#8220;class&#8221; modifications to dovetail with the <i>&#8220;static&#8221; internal CSS coding<\/i> as above<\/li>\n<\/ul>\n<p> &#8230; the &#8220;static&#8221; measures often helping to highlight the web application&#8217;s main workflow of user interaction and the &#8220;dynamic&#8221; measures helping to alert the user as to where to proceed with their &#8220;workflow&#8221;.<\/p>\n<p>In terms of CSS styling work &#8230;<\/p>\n<ol>\n<li>for non-mobile platforms we allow for more columns to be applied to our Capitals select (dropdown) element (in order to reduce some user scrolling, as does our new additional A-Z letter basis sorting functionality) as per &#8230; the <i>&#8220;dynamic&#8221; Javascript DOM &#8220;class&#8221; modifications<\/i> &#8230;<br \/>\n<code><br \/>\n<i>if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<\/i><br \/>\n<i>    document.getElementById('lefttd').className='lefttd';<\/i><br \/>\n<i>}<\/i><br \/>\n<\/code><br \/>\n &#8230; dovetailing with the <i>&#8220;static&#8221; internal CSS coding<\/i> &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n<i>.lefttd { <\/i><br \/>\n<i>  column-count: 4; <\/i><br \/>\n<i>  max-height: 35%; <\/i><br \/>\n<i>  vertical-align: top; <\/i><br \/>\n<i>  max-width: 70%; <\/i><br \/>\n<i>  font-size: 8px; <\/i><br \/>\n<font color=blue>  background-color: rgba(205,205,205,0.5);<br \/>\n  background-image: -webkit-gradient(<br \/>\n  linear,<br \/>\n  right bottom,<br \/>\n  left top,<br \/>\n  color-stop(0, rgba(205, 205, 205, 0.8)),<br \/>\n  color-stop(0.50, rgba(255, 255, 0, 0.2))<br \/>\n  );<br \/>\n  background-image: -o-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);<br \/>\n  background-image: -moz-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);<br \/>\n  background-image: -webkit-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);<br \/>\n  background-image: -ms-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);<br \/>\n  background-image: linear-gradient(to left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);<\/font><br \/>\n<i>}<\/i><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n &#8230; and please note that around here at RJM Programming we have a &#8220;far from hard and fast rule&#8221; (but a rule regardless) regarding HTML element <i>ID<\/i> and <i>class<\/i> attributes that they concern (and (usually) be compartmentalised into) <i>Javascript (DOM) manipulations<\/i> and <i>CSS styling<\/i> issues respectively &#8230; and <font color=blue>add a linear-gradient background to the table cell when expecting the initial user interaction on non-mobile platforms<\/font>\n<\/li>\n<li>a <i>&#8220;dynamic&#8221; Javascript DOM &#8220;class&#8221; modification<\/i> &#8230; document.getElementById(&#8216;myrepsb&#8217;).className=&#8217;dglow&#8217;; &#8230; is made to the &#8220;Report&#8230;&#8221; button at the Capitals select (dropdown) <i>onfocusout<\/i> event so as to highlight (with <a target=_blank title='W3schools glowing text information, thanks' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>&#8220;glow&#8221; inspired<\/a> styling) where user interaction may flow to<\/li>\n<\/ol>\n<p>As far as links go, you may expect to need serverside means to construct these in online Email and SMS message interfacing, but email (client program) products like <a target=_blank href='https:\/\/gmail.com'>Gmail<\/a> parse your ascii text and convert http: or https: protocol URLs in your Email body to hyperlinks, as does the Messages SMS application here on this MacBook Pro using macOS Mojave.   Cute, huh?!  So to close the circle back from remote thar&#8217; parts back to our web application is a simple matter of, in broad brush terms &#8230;<\/p>\n<ul>\n<li>adding two new buttons called &#8220;Email Columns and Links &#8230;&#8221; and &#8220;SMS Columns and Links &#8230;&#8221; that &#8230;<\/li>\n<li>set a global var<font size=1>iable<\/font> andlinkto = true;  &#8230; setting in play, within the report writing code (that likes monospaced fonts) &#8230;<\/li>\n<li>add a new links column to the right with URLs like &#8230;<br \/>\n<code><a target=_blank title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm?andgo=y&#038;countries=Belize&#038;capitals=Belmopan' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm?andgo=y&#038;countries=Belize&#038;capitals=Belmopan'>https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm?andgo=y&amp;countries=Belize&amp;capitals=Belmopan<\/a><\/code><br \/>\n &#8230; to tell your client programs to form the hyperlinks for us (if they are &#8220;of the mood&#8221;, that is!)\n<\/li>\n<\/ul>\n<p>To improve user experience we use <i>&#8220;dynamic&#8221; Javascript DOM HTML &#8220;style&#8221; attribute change<\/i> means to easier close the &#8220;Colour Wheel&#8221; helper web application &#8220;above the fold&#8221; by changing the CSS z-index (Javascript DOM [element].style.zIndex) of elements accordingly, when the user clicks other elements.  You can see all this with the first &#8220;<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html------GETME' title='wls_vs_php.htm'>the changed<\/a>&#8221; link above, where all &#8220;glow&#8221; CSS styling will also feature prominently.<\/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\/window-sessionstorage-client-versus-server-css-tutorial\/'>Window SessionStorage Client Versus Server CSS Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvsit'>Previous relevant <a target=_blank title='Window SessionStorage Client Versus Server Integration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-integration-tutorial\/'>Window SessionStorage Client Versus Server 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_integration.jpg\" title=\"Window SessionStorage Client Versus Server Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Integration Tutorial<\/p><\/div>\n<p>We hope, when performing a &#8220;software integration&#8221; task, that the two or more components of that integration work <i>with<\/i> each other&#8217;s talents, rather than a big tussle like reinventing the wheel.  This ideal makes the work &#8230;<\/p>\n<ul>\n<li>sometimes difficult but rewarding because &#8230;<\/li>\n<li>the differences between two independent software components can be quite large and daunting &#8230; and the programmer has to see that &#8230;<\/li>\n<li>care is applied so as not to wreck previous functionality and integrations in making the current integration work<\/li>\n<\/ul>\n<p> &#8230; and that is why we&#8217;ve made corollaries to &#8220;building from scratch&#8221; (when planning and design is a huge component) can be a lot simpler than a software integration &#8220;renovation&#8221;, in the past, here at this blog.<\/p>\n<p>Our primary integration today is to (software) integrate the great <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> and its great API service for autocomplete name searches for weather (and hurricane) information.  Why bother?  Well, can you not envisage a user using that Ajax functionality of yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Ajax Tutorial' href='#wsscvsat'>Window SessionStorage Client Versus Server Ajax Tutorial<\/a> as a trip planner, perhaps, or as a &#8220;checking up on relatives overseas&#8221; tool, perhaps?   And not all the capital cities are timezone places, and so for some of those we can use Weather integration to still show apt online information when click\/touching a Countries Report row.  Speaking of this &#8220;row&#8221;, we make an improvement whereby on a first click of a right hand (Country) row cell, that cell is not initially a <i>contenteditable=&#8221;true&#8221;<\/i> one (that may frustrate showing the keyboard on mobile, when most likely it was the row touch intended), but then becomes a <i>contenteditable=&#8221;true&#8221;<\/i> cell henceforth.<\/p>\n<p>As a user experience improvement for &#8220;trip planners&#8221; perhaps, we allow the user to alphabetically sort the presented select (dropdown) element entries &#8230;<\/p>\n<p><code><br \/>\nvar firstopt='';<br \/>\nvar wasopts='';<br \/>\nvar restopts='';<br \/>\n<br \/>\nfunction readyitforsort(iselid) {<br \/>\n  var optsare=[];<br \/>\n  var huhisel=document.getElementById(iselid).innerHTML;<br \/>\n  var huhsopts=huhisel.split('&lt;\/option&gt;');<br \/>\n  for (var ihuh=0; ihuh&lt;huhsopts.length; ihuh++) {<br \/>\n    if (huhsopts[ihuh].trim() != '') {<br \/>\n      if (firstopt == '') {<br \/>\n        firstopt=huhsopts[ihuh] + '&lt;\/option&gt;';<br \/>\n      } else {<br \/>\n        wasopts+=huhsopts[ihuh].replace('option ','option data-ih=\"' + (huhsopts[ihuh].split('&gt;')[eval(-1 + huhsopts[ihuh].split('&gt;').length)] + '\" ')) + '&lt;\/option&gt;';<br \/>\n        optsare.push(huhsopts[ihuh].replace('option ','option data-ih=\"' + (huhsopts[ihuh].split('&gt;')[eval(-1 + huhsopts[ihuh].split('&gt;').length)] + '\" ')) + '&lt;\/option&gt;');<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  optsare.sort();<br \/>\n  for (var jhuh=0; jhuh&lt;optsare.length; jhuh++) {<br \/>\n    restopts+=optsare[jhuh];<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; controlled by a new dropdown in the left hand column header cell.<\/p>\n<p>We also allow the user to move the iframe element with some positioning emoji buttons near the &#8220;Close&#8221; button one (of yesterday&#8217;s work).<\/p>\n<p>Into the future, too, we&#8217;ll have more to say regarding the germination of an idea &#8220;to allow a mobile onmouseover simulator (of sorts)&#8221; be to allow the user to perform a swipe across an individual HTML element of interest on mobile platforms (ie. harness ontouchmove event) as per (so far) &#8230; <b>kicked off<\/b> by &#8220;&lt;body <b>onload=&#8221; setTimeout(athn, 5000); &#8220;<\/b>&gt;&#8221; &#8230;<\/p>\n<p><code><br \/>\nvar last24='';<br \/>\nvar rectdc;<br \/>\n<br \/>\nfunction nodivalert() {<br \/>\n  document.getElementById('divalert').style.display='none';<br \/>\n  document.getElementById('divalert').style.zIndex='-456';<br \/>\n  document.getElementById('divalert').style.left=('-' + rectdc.left).replace('px','') + 'px';<br \/>\n  document.getElementById('divalert').style.top=('-' + rectdc.top).replace('px','') + 'px';<br \/>\n}<br \/>\n<br \/>\nfunction ourdivalert(inmsg) {<br \/>\n  document.getElementById('divalert').style.position='absolute';<br \/>\n  document.getElementById('divalert').style.left=('' + rectdc.left).replace('px','') + 'px';<br \/>\n  document.getElementById('divalert').style.top='' + eval(-80 + eval(('' + rectdc.top).replace('px',''))) + 'px';<br \/>\n  document.getElementById('divalert').style.backgroundColor='#e0e0e0';<br \/>\n  document.getElementById('divalert').style.display='block';<br \/>\n  document.getElementById('divalert').style.zIndex='456';<br \/>\n  document.getElementById('divalert').style.opacity='0.8';<br \/>\n  document.getElementById('divalert').style.padding='5px 5px 5px 5px';<br \/>\n  document.getElementById('divalert').innerHTML=inmsg + '&lt;br&gt;&lt;br&gt;&lt;input type=button value=Close onclick=nodivalert();&gt;&lt;\/input&gt;';<br \/>\n  setTimeout(nodivalert,9000);<br \/>\n}<br \/>\n<br \/>\nfunction athn() {<br \/>\n  rectdc=document.getElementById('dc').getBoundingClientRect();<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  document.getElementById('dc').ontouchmove=function(event) { if (last24.substring(0,eval(-1 + last24.length)) == event.target.title.substring(0,eval(-1 + event.target.title.length))) { last24=last24; } else { last24=event.target.title; ourdivalert(event.target.title); } }<br \/>\n  } else {<br \/>\n  document.getElementById('dc').onmousemove=function(event) { if (last24.substring(0,eval(-1 + last24.length)) == event.target.title.substring(0,eval(-1 + event.target.title.length))) { last24=last24; } else { last24=event.target.title; ourdivalert(event.target.title); } }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; working <i>with<\/i> <b>the new<\/b> HTML &#8230;<\/p>\n<p><code><br \/>\n<b>&lt;div id=divalert&gt;&lt;\/div&gt;<\/b><br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; to try to allow the &#8220;explainer of an element&#8221; advantages non-mobile platforms have for hovering over an HTML element with a <i>title<\/i> attribute filled in.<\/p>\n<p>And so, yet again, see <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html-----GETME\" title=\"wls_vs_php.htm\">the changed<\/a<> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html-----GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a> link&#8217;s new Weather integration functionality.  It caused <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html--------GETME\" title=\"colour_wheel.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html--------GETME\" title=\"colour_wheel.html\">colour_wheel.html<\/a>&#8216;s colour wheel (at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html\" title='Click picture'>live run<\/a> link) to be affected (by integrations &#8220;up&#8221;).<\/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\/window-sessionstorage-client-versus-server-integration-tutorial\/'>Window SessionStorage Client Versus Server Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvsat'>Previous relevant <a target=_blank title='Window SessionStorage Client Versus Server Ajax Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-ajax-tutorial\/'>Window SessionStorage Client Versus Server Ajax 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Ajax Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_ajax.jpg\" title=\"Window SessionStorage Client Versus Server Ajax Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Ajax Tutorial<\/p><\/div>\n<p>We have a few &#8220;clientside chestnuts&#8221; to use with our current Capital City Find Matching Country Report web application project today, those being &#8230;<\/p>\n<ul>\n<li> <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a> functionality, kicked off by an &#8220;onclick&#8221; event set of logic, allowing mobile platforms to also have a look in (the look in that they miss when the event logic is off the &#8220;onmouseover&#8221; event)<\/li>\n<li>iframe and its &#8230;\n<ol>\n<li><i><a target=_blank title='Iframe srcdoc information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_iframe_srcdoc.asp'>srcdoc<\/a><\/i> attribute (&#8220;content&#8221; alternative to <i>src<\/i> &#8220;url&#8221; attribute) &#8230; along with, and crucially needing (because <i>srcdoc<\/i> ignores its own document.body <i>onload<\/i> goings on, that we need the <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>&#8220;Iframe Client Pre-Emptive&#8221;<\/a> methods below to circumvent) the &#8230;<\/li>\n<li><i>onload<\/i> event opportunity of an iframe element (we group into &#8220;Iframe Client Pre-Emptive&#8221; methods, here)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; adding onto yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Canvas Tutorial' href='#wsscvsct'>Window SessionStorage Client Versus Server Canvas Tutorial<\/a>.<\/p>\n<p>It&#8217;s not that involved with the Ajax work today, given that there are no cross-domain issues, though there are cross-protocol (SSL https: versus non-SSL http:) issues to be careful about.  Those can be addressed because the web application is recalled to present its &#8220;Country Report&#8221; and that is the opportunity to check on protocol navigation requirements.<\/p>\n<p>Along the way, we also make this happen for the user on &#8230;<\/p>\n<ul>\n<li>click\/touching a table row &#8230; it sets off new &#8220;tr&#8221; (table row) element logic calling our (inhouse) Timezone and Wikipedia Place Information helper (HTML) via Ajax (so not leaving the webpage) &#8230; and because of place name oddities we allow for &#8230;<\/li>\n<li>&#8220;td&#8221; (table cell) element user amendments by setting their <i><a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a><\/i> attributes to &#8220;true&#8221; (since fixed, but we found the Timezone Europe\/Tirane pointing at Tirane in Albania used to be spelt &#8220;Tirana&#8221;)<\/li>\n<\/ul>\n<p> &#8230; that latter methodology normally a technique we apply to &#8220;div&#8221; elements <font size=1>(so, there you are!)<\/font><\/p>\n<p>Also used are &#8220;overlay&#8221; techniques, two of the &#8220;usual suspects&#8221; here coming into play, to present to the &#8220;Ajax content to srcdoc iframe arrangements&#8221; &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property (with associated top and left (px defined) properties)<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<\/ul>\n<p>Yet again, see <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html----GETME\" title=\"wls_vs_php.htm\">the changed<\/a<> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html----GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a> link&#8217;s new &#8220;Ajax&#8221; functionality.<\/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\/window-sessionstorage-client-versus-server-ajax-tutorial\/'>Window SessionStorage Client Versus Server Ajax Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvsct'>Previous relevant <a target=_blank title='Window SessionStorage Client Versus Server Canvas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-canvas-tutorial\/'>Window SessionStorage Client Versus Server Canvas 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_canvas.jpg\" title=\"Window SessionStorage Client Versus Server Canvas Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Canvas Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Share Tutorial' href='#wsscvsst'>Window SessionStorage Client Versus Server Share Tutorial<\/a> dealt with ascii text clipboard copy assisted sharing options with our current Capital City Find Matching Country Report web application project.  This suited both Email and SMS share options we coded for, but today&#8217;s extension of functionality from &#8220;ascii text&#8221; data to &#8220;graphical data&#8221; only suits Email sharing.  The other caveat with our work is that no serverside (for us, PHP) help is allowed, so no PHP mail here.<\/p>\n<p>What comes into play with a &#8220;graphical data&#8221; clientside (only) sharing approach?  It will not surprise many readers that, for us, it involves &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element &#8230; converting HTML table outerHTML &#8220;ascii text&#8221; data &#8230; via &#8230;<\/li>\n<li>canvas drawing methods &#8220;[canvasContext].<a target=_blank href='http:\/\/www.w3schools.com\/tags\/canvas_stroketext.asp' title='HTML5 Canvas strokeRect() method information from w3schools ... thanks'>strokeRect<\/a>()&#8221; and &#8220;[canvasContext].<a target=_blank href='http:\/\/www.w3schools.com\/tags\/canvas_stroketext.asp' title='HTML5 Canvas strokeText() method information from w3schools ... thanks'>strokeText<\/a>()&#8221; via &#8220;[cellElement].<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>()&#8221; &#8230; to convert that canvas element content via &#8230;<\/li>\n<li>[canvasElement].<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a>() &#8230; to an &#8230;<\/li>\n<li>img element nested in a div <a target=_blank title=Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true element &#8230; so as to hook in with today&#8217;s <a target=_blank title='Very useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/27863617\/is-it-possible-to-copy-a-canvas-image-to-the-clipboard'>very useful helper link<\/a>, thanks &#8230; use &#8230;<\/li>\n<li>\n<code><br \/>\nfunction tabletoclipboard(canvas) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/27863617\/is-it-possible-to-copy-a-canvas-image-to-the-clipboard<br \/>\n var img = document.createElement('img');<br \/>\n img.src = canvas.toDataURL();<br \/>\n<br \/>\n var div = document.createElement('div');<br \/>\n div.contentEditable = true;<br \/>\n div.appendChild(img);<br \/>\n document.body.appendChild(div);<br \/>\n<br \/>\n \/\/ do copy<br \/>\n SelectText(div);<br \/>\n document.execCommand('Copy');<br \/>\n document.body.removeChild(div);<br \/>\n}<br \/>\n<br \/>\nfunction SelectText(element) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/27863617\/is-it-possible-to-copy-a-canvas-image-to-the-clipboard<br \/>\n    var doc = document;<br \/>\n    if (doc.body.createTextRange) {<br \/>\n        var range = document.body.createTextRange();<br \/>\n        range.moveToElementText(element);<br \/>\n        range.select();<br \/>\n    } else if (window.getSelection) {<br \/>\n        var selection = window.getSelection();<br \/>\n        var range = document.createRange();<br \/>\n        range.selectNodeContents(element);<br \/>\n        selection.removeAllRanges();<br \/>\n        selection.addRange(range);<br \/>\n    }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>to leave the user&#8217;s device&#8217;s clipboard containing a useful table (with linework) &#8230; ready to &#8230;<\/li>\n<li>paste into an email body section<\/li>\n<\/ul>\n<p> &#8230; sharing off to an emailee collaborator.<\/p>\n<p>Again, see <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html---GETME\" title=\"wls_vs_php.htm\">the changed<\/a<> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html---GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a> link&#8217;s new &#8220;Email Table&#8221; button functionality.<\/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-window-sessionstorage-client-versus-server-share-tutorial\/'>New Window SessionStorage Client Versus Server Share Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvsst'>Previous relevant <a target=_blank title='Window SessionStorage Client Versus Server Share Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-share-tutorial\/'>Window SessionStorage Client Versus Server Share 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Share Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_email.jpg\" title=\"Window SessionStorage Client Versus Server Share Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Share Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Tutorial' href='#wsscvst'>Window SessionStorage Client Versus Server Tutorial<\/a> has been amended today for two new sharing and collaboration options, those being &#8230;<\/p>\n<ul>\n<li>email<\/li>\n<li>SMS<\/li>\n<\/ul>\n<p> &#8230; but you may well be familiar with the restrictions on email and SMS client (program) approaches to this, coming from HTML &#8220;a&#8221; link &#8220;mailto:&#8221; and &#8220;sms:&#8221; href property prefixes respectively.  We&#8217;re going to need help with the 800 odd character (length) restrictions with the (resultant) web address (bar) URL, but what?  How about working off the great advice of this <a target=_blank title='Great link' href='https:\/\/hackernoon.com\/copying-text-to-clipboard-with-javascript-df4d4988697f'>wonderful link<\/a>, thanks, to copy what we&#8217;d have assembled into an ascii text Report into the characters contained by the user&#8217;s device&#8217;s clipboard?<\/p>\n<p><code><br \/>\nfunction copytoclipboard(str) { \/\/ thanks to https:\/\/hackernoon.com\/copying-text-to-clipboard-with-javascript-df4d4988697f<br \/>\n  var el = document.createElement('textarea');<br \/>\n  el.value = str;<br \/>\n  el.setAttribute('readonly', '');<br \/>\n  el.style.position = 'absolute';<br \/>\n  el.style.left = '-9999px';<br \/>\n  document.body.appendChild(el);<br \/>\n  el.select();<br \/>\n  document.execCommand('copy');<br \/>\n  document.body.removeChild(el);<br \/>\n}<br \/>\n<\/code><\/p>\n<p>An issue that springs up here using such clipboard ascii text content, whenever you get the Font choice given to you, pick a monospaced Font like Courier New or &#8220;Fixed Width&#8221;.<\/p>\n<p>See <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html--GETME\" title=\"wls_vs_php.htm\">the changed<\/a<> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html--GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a> link&#8217;s new sharing functionality.<\/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\/window-sessionstorage-client-versus-server-share-tutorial\/'>Window SessionStorage Client Versus Server Share Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvst'>Previous relevant <a target=_blank title='Window SessionStorage Client Versus Server Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-tutorial\/'>Window SessionStorage Client Versus Server 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\/wls_vs_php.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_session.jpg\" title=\"Window SessionStorage Client Versus Server Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Tutorial<\/p><\/div>\n<p>Sometimes it&#8217;s the case at this blog that we&#8217;d like to introduce a new topic, but do not do so, because we cannot show any real world (or real application) use of that concept.  So it has been, up until now, with the concept of (web browser) window (object) <a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp'>sessionStorage<\/a> property.  But yesterday&#8217;s <a title='Window LocalStorage Client Versus Server Primer Tutorial' href='#wlscvspt'>Window LocalStorage Client Versus Server Primer Tutorial<\/a> represented an opportunity akin to when Haley&#8217;s Comet gets at its closest to the Earth &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=0j6g_uUhH2c'>while you see a chance, take it<\/a> &#8230; chance because of that nuance whereby we were not trying to store data for any other purpose than passing data onto &#8230;<\/p>\n<ol>\n<li>a known entity &#8230; ie. same web application &#8230; at &#8230;<\/li>\n<li>a known time &#8230; ie. immediately<\/li>\n<\/ol>\n<p> &#8230; two conditions that make the code design &#8220;marginally&#8221; more ideal for the window object property concept of <a target=_blank title='Window object localStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp'>sessionStorage<\/a> rather than <a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a>, in that any &#8230;<\/p>\n<p><code><br \/>\nlocalStorage.removeItem([knownLocalStorageName]);<br \/>\n<\/code><\/p>\n<p> &#8230; becomes superfluous as with <a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp'>sessionStorage<\/a> data will disappear between web browser sessions, anyway.<\/p>\n<p>We offer this new concept as a non-default option of a select (dropdown) element replacement to the h1 element hardcoding &#8220;localStorage&#8221; with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html-GETME\" title=\"wls_vs_php.htm\">the changed<\/a<> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html-GETME\" title=\"wls_vs_php.htm\">wls_vs_php.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a>.  The other nuance of difference with <a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp'>sessionStorage<\/a> usage is that in the document.body <i>onload<\/i> event logic, we may as well <font color=green>(as part of other changes)<\/font> pre-emptively look for, and if there, respond to, any found <a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp'>sessionStorage<\/a> data points, <font color=blue>even without the user having flagged it specifically<\/font> &#8230;<\/p>\n<p><code><br \/>\nvar datamode='localStorage';<br \/>\n<br \/>\nfunction checkforreport() {<br \/>\n  var divcont='';<br \/>\n  var dcaps, dctys, idis;<br \/>\n  if (getcapitals == 'localStorage') {<br \/>\n   if (window.localStorage) {<br \/>\n    getcapitals=decodeURIComponent(localStorage.getItem('wls_vs_php_capitals')).replace(\/\\+\/g,' ');<br \/>\n    localStorage.removeItem('wls_vs_php_capitals');<br \/>\n   } else {<br \/>\n    getcapitals='';<br \/>\n   }<br \/>\n  } <font color=green>else if (getcapitals == 'sessionStorage') {<br \/>\n   document.getElementById('smode').value=getcapitals;<br \/>\n   datamode=getcapitals;<br \/>\n   if (window.sessionStorage) {<br \/>\n    getcapitals=decodeURIComponent(sessionStorage.getItem('wls_vs_php_capitals')).replace(\/\\+\/g,' ');<br \/>\n   } else {<br \/>\n    getcapitals='';<br \/>\n   }<br \/>\n  }<\/font> <font color=blue>else if (getcapitals == '' && window.sessionStorage) {<br \/>\n   getcapitals=decodeURIComponent(('' + sessionStorage.getItem('wls_vs_php_capitals')).replace(\/^null$\/g,'')).replace(\/\\+\/g,' ');<br \/>\n   if (getcapitals != '') {<br \/>\n    document.getElementById('smode').value='sessionStorage';<br \/>\n    datamode='sessionStorage';<br \/>\n   }<br \/>\n  }<\/font><br \/>\n  if (getcountries == 'localStorage') {<br \/>\n   if (window.localStorage) {<br \/>\n    getcountries=decodeURIComponent(localStorage.getItem('wls_vs_php_countries')).replace(\/\\+\/g,' ');<br \/>\n    if (getcapitals.replace('localStorage','') != '' && getcountries.replace('localStorage','') != '') { document.getElementById('myh1').innerHTML+=' &lt;font size=1&gt;... yes, it was needed&lt;\/font&gt;'; }<br \/>\n    localStorage.removeItem('wls_vs_php_countries');<br \/>\n   } else {<br \/>\n    getcountries='';<br \/>\n   }<br \/>\n  } <font color=green>else if (getcountries == 'sessionStorage') {<br \/>\n   if (window.sessionStorage) {<br \/>\n    getcountries=decodeURIComponent(sessionStorage.getItem('wls_vs_php_countries')).replace(\/\\+\/g,' ');<br \/>\n    if (getcapitals.replace('sessionStorage','') != '' && getcountries.replace('sessionStorage','') != '') { document.getElementById('myh1').innerHTML+=' &lt;font size=1&gt;... yes, it was needed&lt;\/font&gt;'; }<br \/>\n   } else {<br \/>\n    getcountries='';<br \/>\n   }<br \/>\n  }<\/font> <font color=blue>else if (getcountries == '' && document.getElementById('smode').value == 'sessionStorage' && window.sessionStorage) {<br \/>\n   getcountries=decodeURIComponent(('' + sessionStorage.getItem('wls_vs_php_countries')).replace(\/^null$\/g,'')).replace(\/\\+\/g,' ');<br \/>\n   if (getcountries != '') {<br \/>\n    document.getElementById('smode').value='sessionStorage';<br \/>\n    datamode='sessionStorage';<br \/>\n   }<br \/>\n  }<\/font><br \/>\n  if (getcapitals != '' && getcountries != '') {<br \/>\n    divcont='&lt;table border=5 style=\"width:95%;vertical-align:top;background-color:white;\"&gt;&lt;tr style=background-color:#f0f0f0;\"&gt;&lt;th&gt;Capital&lt;\/th&gt;&lt;th&gt;Country&lt;\/th&gt;&lt;\/tr&gt;&lt;\/table&gt;';<br \/>\n    dcaps=getcapitals.split('|');<br \/>\n    dctys=getcountries.split('|');<br \/>\n    for (idis=0; idis&lt;dcaps.length; idis++) {<br \/>\n      divcont=divcont.replace('&lt;\/table&gt;', '&lt;tr&gt;&lt;td&gt;' + dcaps[idis] + '&lt;\/td&gt;&lt;td&gt;' + dctys[idis] + '&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;');<br \/>\n    }<br \/>\n    document.getElementById('dreport').innerHTML=divcont;<br \/>\n  }<br \/>\n  <font color=green>document.getElementById('smode').value=datamode;<\/font><br \/>\n }<br \/>\n<\/code><\/p>\n<p>Which beggars the question <a target=_blank title='Difference between sessionStorage and localStorage' href='https:\/\/www.google.com\/search?rlz=1C5CHFA_enAU832AU832&#038;sxsrf=ACYBGNQEjiBrN6mf-JpqOZbxckzjOREa5A%3A1577252199998&#038;ei=Z_UCXoHVPJLorQHI0peoAg&#038;q=differences+between+sessionStorage+and+localStorage&#038;oq=differences+between+sessionStorage+and+localStorage&#038;gs_l=psy-ab.3..0i7i30j0i333l3.36328.36328..36699...0.2..0.215.215.2-1......0....1..gws-wiz.......0i71.WuAPyJrUflA&#038;ved=0ahUKEwjBpOioitDmAhUSdCsKHUjpBSUQ4dUDCAs&#038;uact=5'>&#8220;What are the differences between sessionStorage and localStorage?&#8221;<\/a>   A quick reading might surmise that &#8220;the latter has an expiration date&#8221;.  We leave you with an open ended <a target=_blank title='Google' href='https:\/\/google.com'>Google<\/a> search so that you may extend your readings on this.<\/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\/window-sessionstorage-client-versus-server-tutorial\/'>Window SessionStorage Client Versus Server Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wlscvspt'>Previous relevant <a target=_blank title='Window LocalStorage Client Versus Server Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-localstorage-client-versus-server-primer-tutorial\/'>Window LocalStorage Client Versus Server 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\/wls_vs_php.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window LocalStorage Client Versus Server Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.jpg\" title=\"Window LocalStorage Client Versus Server Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window LocalStorage Client Versus Server Primer Tutorial<\/p><\/div>\n<p>Even though we rave on a lot about serverside PHP and its $_POST method=POST (versus HTML\/Javascript recipient via ? and &amp; argument $_GET method=GET scenario) data length advantages as the recipient of an HTML form method=POST set of data that could be sizeable, we&#8217;ve just realized that there is a client Javascript and window.localStorage methodology that may help alleviate the need to involve PHP (and any other serverside intervention) on occasions.<\/p>\n<p>Hint: Yes, we&#8217;ve raved on about this too?!  Does the blog posting title give it away?   Okay, yes, it should read <a target=_blank title='localStorage information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>&#8220;localStorage&#8221;<\/a>, but thought we&#8217;d gone past such juvenile finickiness since the <a target=_blank title='Whac-A-Mole' href='https:\/\/en.wikipedia.org\/wiki\/Whac-A-Mole'>Whac-A-Mole<\/a> controversy of <a target=_blank title='?' \n href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-troubleshooting-tutorial\/'>1st December 2019<\/a> (or even <a target=_blank title=\"The Great Tea Trolley Disaster of \u201967\" href='https:\/\/www.google.com\/search?q=The+Great+Tea+Trolley+Disaster+of+%E2%80%9967&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=The+Great+Tea+Trolley+Disaster+of+%E2%80%9967&#038;aqs=chrome..69i57j69i64.232j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>The Great Tea Trolley Disaster of \u201967<\/a>, we daresay).<\/p>\n<p>It can even use a <a target=_blank title='?' href='http:\/\/www.youtube.com\/watch?v=MA2KmJMKFrQ'>&#8220;self-destruct&#8221;<\/a> approach to the use of this &#8220;localStorage&#8221; on having used it because &#8230;<\/p>\n<ul>\n<li>the web application knows who is using it (localStorage) &#8230; and on having accessed and read it &#8230;<\/li>\n<li>the web application knows it (localStorage) is of no use to any other user (in this web application&#8217;s case, at least)<\/li>\n<\/ul>\n<p> &#8230; which is very pleasing for a Land Surveyor who likes to leave cow paddocks as they&#8217;ve seen them <font size=1>so to speak<\/font>.  Except it&#8217;s like having a ten tonne truck worth of data access in amongst the cow pats when having access to &#8220;localStorage&#8221; (or PHP), rather than a little piddle of calf wee <font size=1>(we<strike>e<\/strike> Metcalfes know a thing or two about these things!)<\/font> data access of ? and &amp; HTML\/Javascript URL arguments (or even if we were to use HTTP Cookies).<\/p>\n<p>It&#8217;s not as if we all have access to serverside language usage, though <i>we<\/i> do, because we really like PHP and <a target=_blank title='MAMP for Apache\/PHP\/MySql on Mac OS X local web server' href='http:\/\/www.mamp.info'><i>MAMP<\/i><\/a> and Apache\/PHP\/MySql web servers (and have arranged our development environment accordingly), but what if you are starting out in web development, and still want to allow for sizeable chunks of data with your web applications?  Huh?  Huh?!  See the possibilities?  Try our proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html\" title=\"wls_vs_php.html_GETME>wls_vs_php.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a>, and highlight a whole swathe of (multiple mode) dropdown option Capital Cities holding down the shift key before pressing the yellow &#8220;Report&#8221; button.  If the URL ends up as &#8230;<\/p>\n<p><code>https:\/\/rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html?capitals=localStorage&countries=localStorage<\/code> <\/p>\n<p> &#8230; <font color=blue>that&#8217;s because<\/font> the web application&#8217;s &#8230;<\/p>\n<p><code><br \/>\nfunction analyze() {<br \/>\n  var purl=document.URL.split('#')[0].split('?')[0] + '?capitals=' + encodeURIComponent(document.getElementById('capitals').value) + '&countries=' + encodeURIComponent(document.getElementById('countries').value);<br \/>\n  if (<font color=green>purl.length &gt; 800<\/font>) {<br \/>\n    if (<font color=red>phpexists<\/font>) {<br \/>\n      document.getElementById('myform').method='POST';<br \/>\n      document.getElementById('myform').action='.\/wls_vs_php.php';<br \/>\n    } else <font color=purple>if (window.localStorage) {<\/font><br \/>\n      <font color=blue>localStorage.setItem('wls_vs_php_countries', encodeURIComponent(document.getElementById('countries').value));<br \/>\n      localStorage.setItem('wls_vs_php_capitals', encodeURIComponent(document.getElementById('capitals').value));<br \/>\n      document.getElementById('capitals').value='localStorage';<br \/>\n      document.getElementById('countries').value='localStorage';<br \/>\n      location.href=document.URL.split('#')[0].split('?')[0] + '?capitals=' + encodeURIComponent(document.getElementById('capitals').value) + '&countries=' + encodeURIComponent(document.getElementById('countries').value);<\/font><br \/>\n      <font color=brown>return false;<\/font><br \/>\n    <font color=purple>}<\/font><br \/>\n  }<br \/>\n  return true;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; HTML form <i>onsubmit<\/i> event logic &#8230;<\/p>\n<ol>\n<li><font color=red>discovered no PHP web application existant<\/font> (via <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> techniques) &#8230; and &#8230;<\/li>\n<li>discovered (in a sanity check feeling way) that to go down the proposed HTML form method=GET approach was risking a &#8230;<br \/>\n<code><br \/>\n<font color=green>HTTP 414 \"Request URI too long\"<\/font><br \/>\n<\/code><br \/>\n &#8230; web browser error &#8230; and that &#8230;\n<\/li>\n<li><a target=_blank title='localStorage information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> was a <font color=purple>known web browser piece of functionality<\/font><\/li>\n<p> &#8230; and so as per <font color=blue>our localStorage logic<\/font> we &#8230;<\/li>\n<li><font color=brown>back out of the default HTML form method=GET navigation setup<\/font> of the web application in favour of &#8230;\n<ul>\n<li>storing that data into localStorage<\/li>\n<li>substituting into the URL ? and &amp; arguments the hardcoding &#8220;localStorage&#8221; (and in so doing, getting back under the <font color=green>HTTP 414 &#8220;Request URI too long&#8221;<\/font> limitation, piecing together (what amounts to) &#8230;<br \/>\n      location.href=document.URL.split(&#8216;#&#8217;)[0].split(&#8216;?&#8217;)[0] + &#8216;?capitals=localStorage&#038;countries=localStorage&#8217;;)<br \/>\n &#8230; that on a recall to this same web application a &#8230;\n<\/li>\n<li>document.body <i>onload<\/i> event piece of Javascript logic <font color=olive>checks the localStorage<\/font> for its incoming Capital City Country Report data, as per &#8230;<br \/>\n<code><br \/>\nvar phpexists=false;<br \/>\nvar getcapitals=location.search.split('capitals=')[1] ? decodeURIComponent(location.search.split('capitals=')[1].split('&')[0]).replace(\/\\+\/g,' ') : '';<br \/>\nvar getcountries=location.search.split('countries=')[1] ? decodeURIComponent(location.search.split('countries=')[1].split('&')[0]).replace(\/\\+\/g,' ') : '';<br \/>\n<br \/>\nfunction checkforreport() {<br \/>\n  var divcont='';<br \/>\n  var dcaps, dctys, idis;<br \/>\n  <font color=olive>if (getcapitals == 'localStorage') {<br \/>\n   if (window.localStorage) {<br \/>\n    getcapitals=decodeURIComponent(localStorage.getItem('wls_vs_php_capitals')).replace(\/\\+\/g,' ');<br \/>\n    <b>localStorage.removeItem('wls_vs_php_capitals');<\/b><br \/>\n   } else {<br \/>\n    getcapitals='';<br \/>\n   }<br \/>\n  }<br \/>\n  if (getcountries == 'localStorage') {<br \/>\n   if (window.localStorage) {<br \/>\n    getcountries=decodeURIComponent(localStorage.getItem('wls_vs_php_countries')).replace(\/\\+\/g,' ');<br \/>\n    if (getcapitals.replace('localStorage','') != '' && getcountries.replace('localStorage','') != '') { document.getElementById('myh1').innerHTML+=' &lt;font size=1&gt;... yes, it was needed&lt;\/font&gt;'; }<br \/>\n    <b>localStorage.removeItem('wls_vs_php_countries');<\/b><br \/>\n   } else {<br \/>\n    getcountries='';<br \/>\n   }<br \/>\n  }<\/font><br \/>\n  if (getcapitals != '' && getcountries != '') {<br \/>\n    divcont='&lt;table border=5 style=\"width:95%;vertical-align:top;background-color:white;\"&gt;&lt;tr style=background-color:#f0f0f0;\"&gt;&lt;th&gt;Capital&lt;\/th&gt;&lt;th&gt;Country&lt;\/th&gt;&lt;\/tr&gt;&lt;\/table&gt;';<br \/>\n    dcaps=getcapitals.split('|');<br \/>\n    dctys=getcountries.split('|');<br \/>\n    for (idis=0; idis&lt;dcaps.length; idis++) {<br \/>\n      divcont=divcont.replace('&lt;\/table&gt;', '&lt;tr&gt;&lt;td&gt;' + dcaps[idis] + '&lt;\/td&gt;&lt;td&gt;' + dctys[idis] + '&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;');<br \/>\n    }<br \/>\n    document.getElementById('dreport').innerHTML=divcont;<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; the <b>localStorage.removeItem()<\/b> representing that &#8220;self-destruct&#8221; nuance we were talking about before\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>We may well use this methodology in future projects, and hope it has been of some <font size=1>little<\/font> interest to you as well?!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank title='Window LocalStorage Client Versus Server Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/window-localstorage-client-versus-server-primer-tutorial\/'>Window LocalStorage Client Versus Server Primer Tutorial<\/a>.<\/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='#d47485' onclick='var dv=document.getElementById(\"d47485\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/localstorage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47485' 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='#d47508' onclick='var dv=document.getElementById(\"d47508\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/session\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47508' 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='#d47516' onclick='var dv=document.getElementById(\"d47516\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/share\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47516' 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='#d47523' onclick='var dv=document.getElementById(\"d47523\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47523' 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='#d47527' onclick='var dv=document.getElementById(\"d47527\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47527' 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='#d47535' onclick='var dv=document.getElementById(\"d47535\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/weather\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47535' 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='#d47550' onclick='var dv=document.getElementById(\"d47550\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/glow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47550' 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='#d47562' onclick='var dv=document.getElementById(\"d47562\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/flag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47562' 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='#d47572' onclick='var dv=document.getElementById(\"d47572\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/order\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47572' 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='#d47578' onclick='var dv=document.getElementById(\"d47578\"); 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='d47578' 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='#d47583' onclick='var dv=document.getElementById(\"d47583\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/timeline\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47583' 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='#d47592' onclick='var dv=document.getElementById(\"d47592\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47592' 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='#d47802' onclick='var dv=document.getElementById(\"d47802\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geographicals\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47802' 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='#d47819' onclick='var dv=document.getElementById(\"d47819\"); 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='d47819' 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='#d47822' onclick='var dv=document.getElementById(\"d47822\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sort\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47822' 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='#d47836' onclick='var dv=document.getElementById(\"d47836\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quiz\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47836' 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='#d47841' onclick='var dv=document.getElementById(\"d47841\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/induction\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47841' 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='#d47907' onclick='var dv=document.getElementById(\"d47907\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/declutter\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47907' 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='#d47916' onclick='var dv=document.getElementById(\"d47916\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/post\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47916' 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='#d47921' onclick='var dv=document.getElementById(\"d47921\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47921' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We wanted to improve on the recent Google Chart Geo Chart More Quizzes Tutorial&#8216;s &#8220;World Quiz&#8221; functionality approach of displaying window.open popups for mobile platforms. The reason for the concern on mobile platforms, and not such a concern on non-mobile &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-quiz-on-mobile-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":[2,12,14,37],"tags":[2915,2990,69,99,199,3179,257,2081,2492,452,3208,481,518,576,2459,3163,630,2395,652,3327,745,795,861,894,932,970,997,1022,1094,1776,1126,1173,2449,3209,1273,1693,1319,1350,1431],"class_list":["post-47921","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-_post","tag-abscissa","tag-ajax","tag-area","tag-chart","tag-clutter","tag-content","tag-country","tag-declutter","tag-form","tag-geochart","tag-geographicals","tag-google-chart","tag-html","tag-induction","tag-interaction","tag-ipad","tag-iso","tag-javascript","tag-mantissae","tag-map","tag-mobile","tag-onclick","tag-overlay","tag-php","tag-post","tag-programming","tag-quiz","tag-scale","tag-screenshot","tag-settimeout","tag-sort","tag-sorting","tag-surface-area","tag-thumbnail","tag-timezone","tag-tutorial","tag-user-experience","tag-wikipedia"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47921"}],"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=47921"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47921\/revisions"}],"predecessor-version":[{"id":53461,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47921\/revisions\/53461"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}