Robert James Metcalfe Blog

Region Picker GeoChart Region Local Popups Tutorial

Posted on June 28, 2024 by admin

Region Picker GeoChart Region Local Popups Tutorial

There is little doubt that popup windows can distract users in terms of the “user experience” as of yesterday’s Region Picker GeoChart Region Wikipedia Representations Tutorial. And that is …

if we are talking URLs all on the same domain … check …
and you have a place on the webpage good to relocate … shaky check …
then it is better, in the scenario of using window.open (popup window creation) …

window.open(URL, name, specs, replace)

… syntax based navigation logic in Javascript, to …

… make use of that second parameter’s …

name Optional.

The target attribute or the name of the window.

The following values are supported:
Value Description
_blank URL is loaded into a new window, or tab. This is the default
_parent URL is loaded into the parent frame
_self URL replaces the current page
_top URL replaces any framesets that may be loaded
name The name of the window (does not specify the title of the window)

… relation to the name attribute of an inhouse HTML iframe element to “relocate”, and improve some user’s “user experience”.

So, please, respect window.open method, not so much some of the ways it is used. It is incredibly useful!

Here is our inhouse “wrapped” Javascript function approach to its usage incarnation …

… for this latest scenario.

Try this, yourself, with the changed latest draft Region Picker web application.

Previous relevant Region Picker GeoChart Region Wikipedia Representations Tutorial is shown below.

Region Picker GeoChart Region Wikipedia Representations Tutorial

We’re starting down the long and windy road, further to the recent Region Picker GeoJson Area of Interest Tutorial, of providing “workaround Google Chart Geo Chart solutions to semi-cover the loss (because nothing will be quite as good, as far as we are concerned, alas) of Google Chart Image Chart Map Chart” in our lives (please pass the tissues … fisst). In our case, the Region Picker intervention point (believe it or not) is our …

WordPress Blog 404.php (missing webpage page) logic we’ve tailored for all manner of image production purposes helping out …
a changed latest draft Region Picker web application …

… calling that 404.php helper. And it’s within that changed 404.php …

<?php
function yourfile_get_contents($wone) { //, $ucc, $ctname) { global $geomapurl, $getmapdata, $iso_country_codes; // <a href="/wiki/Autonomous_Republic_of_Crimea" title="Autonomous Republic of Crimea">Avtonomna Respublika Krym</a> // %20[51.4769|-0.0005|~From~,2]%20,%20[51.4769|-0.0005|~To~,2]%20, // <img style="z-index:25;" onload=" return true; " id="ici" data-onmouseout="this.title=origtitle;" onmousemove=" if (isclear || 1 == 1) { document.getElementById('moimode').value='mouseover'; filloutform(event,0); }" src="//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=AF|AF-BDG|AF-BGL|AF-BAL|AF-BAM|AF-DAY|AF-FRA|AF-FYB|AF-GHA|AF-GHO|AF-HEL|AF-HER|AF-JOW|AF-KAB|AF-KAN|AF-KAP|AF-KHO|AF-KNR|AF-KDZ|AF-LAG|AF-LOG|AF-NAN|AF-NIM|AF-NUR|AF-PKA|AF-PIA|AF-PAN|AF-PAR|AF-SAM|AF-SAR|AF-TAK|AF-URU|AF-WAR|AF-ZAB|&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274|7ccdef|e65814|477b73|87f592|ed75f2|09526e|27a51c|58c662|4b4840|7d01b5|f6a557|b69f63|cac10b|f3e9ab|26192c|ad7629|3b21b4|7238ab|aa1e07|23f0d7|d8dfb3|8c07c2|7a5bbf|b0ee12&screenheight=900" title="Optionally click in relevant region for menu"> if (file_exists('../HTMLCSS/rvc_' . my_s_s_server_remote_addr() . '.html')) { sleep(5); unlink('../HTMLCSS/rvc_' . my_s_s_server_remote_addr() . '.html'); } $iso_underscore=false; $ucc=''; $ctname=''; $okwone=''; $ones=[]; if (strpos($wone, 'chld=') === false) { return @file_get_contents($wone); } else if (1 == 1 || strpos($wone, 'screenheight=') !== false) { $ucc=strtoupper(trim(explode('_', explode('|', explode('chld=', $wone)[1])[0])[0])); for ($ire=0; $ire<sizeof($iso_country_codes); $ire+=2) { if ($ucc == strtoupper($iso_country_codes[$ire])) { $ctname=$iso_country_codes[1 + $ire]; } } $okwone=file_get_contents($wone); $wone='http://en.wikipedia.org/wiki/ISO_3166-2:' . $ucc; } if (strlen($ucc) != 2) { return @file_get_contents($wone); } $tbit=$ucc . ';' . $ctname; $geomapurl=''; $wpg=''; $ones=[]; $preurl=''; $saveducc=@file_get_contents('saveducc.txt'); $linfnd=explode($ucc . '=', $saveducc); if (sizeof($linfnd) > 1) { $geomapurl=explode("\n", $linfnd[1])[0]; } file_put_contents('xcc.xcc', $tbit . ' ' . $wone); if (strpos($wone, '/wiki/') !== false && strpos($wone, 'http') !== false) { $preurl='http' . explode('/wiki/', explode('http', $wone)[-1 + sizeof(explode('http', $wone))])[0]; } $one=file_get_contents($wone); if ($geomapurl != '') { sleep(9); } else { file_put_contents('xccone.xcc', $preurl . ' ... ' . $one); if (strpos($one, ' sortable"') !== false && $preurl != '') { $ones=explode('<a href="/wiki/', explode(' sortable"', explode("See also ", $one)[0])[1]); } else if ($preurl != '') { $ones=explode('<a href="/wiki/', explode("See also ", $one)[0]); } for ($ii=1; $ii<sizeof($ones); $ii++) { if (!$iso_underscore) { $rname=explode('<', explode('>', $ones[$ii])[1])[0]; if (substr(($rname . ' '),0,3) == 'ISO') { $iso_underscore=true; } if ($ii == 1) { file_put_contents('xccuccit.xcc', $ucc . ' - ' . $rname . "\n"); } if (trim($rname) != '') { file_put_contents('xccu.xcc', $preurl . '/wiki/' . explode('"', $ones[$ii])[0]); $wpg=file_get_contents($preurl . '/wiki/' . explode('"', $ones[$ii])[0]); file_put_contents('xccuc.xcc', $wpg); $wpgs=explode(' class="geo">', $wpg); if (sizeof($wpgs) > 1) { file_put_contents('xccuu.xcc', $preurl . '/wiki/' . explode('"', $ones[$ii])[0]); $ltlg=str_replace(' ','',str_replace(';',',',explode('<', $wpgs[1])[0])); file_put_contents('xccuuu.xcc', $ltlg); if ($geomapurl != '') { $geomapurl.=','; } $geomapurl.=str_replace("%27","+","%20[" . str_replace(',','|',$ltlg) . '|~' . str_replace("%27","+",str_replace('%27~','~',urlencode($rname) . '~')) . ',2]%20'); file_put_contents('xcz.xc', $geomapurl); file_put_contents('xccuccit.xcc', file_get_contents('xccuccit.xcc') . $ii . ' : ' . str_replace("%27","+","%20[" . str_replace(',','|',$ltlg) . '|~' . str_replace("%27","+",str_replace('%27~','~',urlencode($rname) . '~')) . ',2]%20') . "\n"); } else { file_put_contents('xccuccit.xcc', file_get_contents('xccuccit.xcc') . $ii . ' ; ' . explode('"', $ones[$ii])[0] . "\n"); } } } } } if ($geomapurl != '') { if (sizeof($linfnd) <= 1) { file_put_contents('saveducc.txt', $saveducc . $ucc . '=' . $geomapurl . "\n"); } file_put_contents('xc.xc', $geomapurl); file_put_contents('../HTMLCSS/rvc_' . my_s_s_server_remote_addr() . '.html', '<html><body><iframe style=width:98%;height:98%; src="/PHP/GeoChart/geo_chart.php#onclick=y&text=text&wouldlikeyoutoseekpermission=y&width=834&height=520&country=Places&popularity=&aregeographicals=y&title=' . urlencode($tbit) . '&data=' . $geomapurl . '"></iframe></body></html>'); //if (file_exists('../rvc_' . my_s_s_server_remote_addr() . '.html')) { // sleep(35); // unlink('../rvc_' . my_s_s_server_remote_addr() . '.html'); //} } return $okwone; }
?>

… logic we get the great help from Wikipedia to make up for …

lack of boundary regional definition on a Google Chart Geo Chart marker map … with …
Wikipedia’s representative region positioning, thanks, we can present as the …
1. region name … toggleable backwards and forwards to …
2. region marker
… on the Google Chart Geo Chart marker map now displayed to the user instead of what used to be a Google Chart Image Chart Map Chart regional boundary map … (please pass the tissues … fisst).

There is no doubt we’ll be tweaking away at all this, trying to improve the integrations for both user experience (including speed) and aesthetic means. Please pack a sandwich (or 3) and a toothbrush … and toothpaste … and vegemite … and fisst, the tissues.

Previous relevant Region Picker GeoJson Area of Interest Tutorial is shown below.

Region Picker GeoJson Area of Interest Tutorial

Meanwhile, back in “Region Picker Land” where, if we’re not mistaken, the grapes are peculiarly sweet this season, and we needed their “fortification” to tackle today’s progress, that being …

user has picked a country of interest and has gone “The Whole Shebang” resulting in those …
tutti-frutti region links below the Image Chart (rightmost) button …
one of which the user clicks/touches … resulting in …
presentation of inhouse menu prompt window … where …
option “J” (for GeoJson World Map option) is presented (because a relevant latitude and longitude were found) … and “lo and behold” …
user types in J …
user does not click Cancel at the next prompt window … ready for it …

as of today two new buttons appear …

Mobile	Non-mobile

… to the right of the subheading … and while we’re there see how the innards …

Mobile	Non-mobile
<button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:yellow; id=twoc onclick=’event.stopPropagation(); parent.dotwoc();’>Circle of Interest via Next 2 Double Clicks</button> <button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:magenta; id=twoc onclick=’event.stopPropagation(); parent.dotwor();’>Rectangle via 2 Double Clicks</button>	<button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:yellow; id=twoc onclick=’event.stopPropagation(); parent.dotwoc();’>Circle of Interest via Next 2 Right Clicks</button> <button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:magenta; id=twoc onclick=’event.stopPropagation(); parent.dotwor();’>Rectangle via 2 Right Clicks</button>

Mobile

Non-mobile

<button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:yellow; id=twoc onclick=’event.stopPropagation(); parent.dotwoc();’>Circle of Interest via Next 2 Double Clicks</button> <button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:magenta; id=twoc onclick=’event.stopPropagation(); parent.dotwor();’>Rectangle via 2 Double Clicks</button>

<button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:yellow; id=twoc onclick=’event.stopPropagation(); parent.dotwoc();’>Circle of Interest via Next 2 Right Clicks</button> <button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:magenta; id=twoc onclick=’event.stopPropagation(); parent.dotwor();’>Rectangle via 2 Right Clicks</button>

… are very OOP by nature (as is all DOM work in Javascript, when you think about it), allowing us to remain with the iframe initial content supervisor unchanged in code, and just referring back to the parent’s Javascript for anything new either via …

means of the iframe onload event
means of referring back to parent operations via references like …
parent.setdefzoom(1); // which is setting the variable "defzoom", back in the parent, to 1
… in this new Javascript …
var oneoftwo=0, xinxy=[], yinxy=[], opis='1.0', ovnum=1, defzoom=2, nextv='hidden'; var zaconto=null; // this is populated at the iframe element's onload event function function getxynow(e) { e = e || window.event; e.preventDefault(); if (e.touches) { if (e.touches[0].pageX) { xinxy.push(eval(e.touches[0].pageX + document.body.scrollLeft * 0) * browserZoomLevel * 0); yinxy.push(eval(e.touches[0].pageY + document.body.scrollTop * 0) * browserZoomLevel * 0); } else { xinxy.push(eval(e.touches[0].clientX + document.body.scrollLeft * 0) * browserZoomLevel * 0); yinxy.push(eval(e.touches[0].clientY + document.body.scrollTop * 0) * browserZoomLevel * 0); } } else if (e.clientX || e.clientY) { xinxy.push(e.clientX + document.body.scrollLeft * 0); yinxy.push(e.clientY + document.body.scrollTop * 0); } else { xinxy.push(e.pageX + document.body.scrollLeft * 0); yinxy.push(e.pageY + document.body.scrollTop * 0); } if (1 == 3 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { alert('' + xinxy.length); } //filloutform(e,0); //yinxy[eval(-1 + yinxy.length)]=eval(-385 + eval('' + yinxy[eval(-1 + yinxy.length)])); if (eval('' + xinxy.length) == 2) { overlayit(0); } } function dotwor() { if (oneoftwo == 1) { defzoom++; } else { defzoom=2; } oneoftwo=1; } function dotwoc() { //alert(45); if (oneoftwo == -1) { defzoom++; } else { defzoom=2; } oneoftwo=-1; } function alternatevisibility() { var igh=1; while (zaconto.getElementById('iciov' + igh)) { if (igh == 1 && zaconto.getElementById('iciov' + igh).outerHTML.indexOf('visibility:') == -1) { nextv='hidden'; } else if (igh == 1 && zaconto.getElementById('iciov' + igh).outerHTML.split('visibility:')[1].split(';')[0].split('>')[0].toLowerCase().indexOf('visible') != -1) { nextv='hidden'; } else if (igh == 1) { nextv='visible'; } zaconto.getElementById('iciov' + igh).style.visibility='' + nextv; igh++; } } function overlayit(ootis) { var prerest='', zb=''; if (ootis == 0) { //alert('here0'); if (eval('' + xinxy.length) == 2) { //alert('here1'); if (ovnum == 1) { // thanks to https://stackoverflow.com/questions/69491728/how-to-zoom-an-image-on-mouse-hover-using-css prerest=' .zoom-img { width: ' + zaconto.getElementById('myimg').width + 'px; height: ' + zaconto.getElementById('myimg').height + 'px; overflow: hidden; } .zoom-img:hover { transform: scale(2.0); } '; } if (defzoom != 2) { zb=' #iciov' + ovnum + ':hover { z-index:1789; transform: scale(' + defzoom + '.0); } '; } //alert('here2'); if (oneoftwo < 0) { // circle if (1 == 3 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { alert(1); } zaconto.getElementById('myimg').style.opacity='1.0'; //alert(11); zaconto.getElementById('imgmore').innerHTML+=zaconto.getElementById('myimg').outerHTML.replace(/myimg/g,'iciov' + ovnum).replace('56;','2365;background-color:transparent;width:360px;height:180px;').replace(/\\\"\\ on/g, '\" data-on').replace('<img ','<img class=zoom-img ').replace(' src=',' src=/HTMLCSS/HYP_50M_SR_W.jpg width=360 height=180 data-src=').replace(' usemap=', ' data-usemap='); //alert(zaconto.getElementById('myimg').outerHTML.replace(/myimg/g,'iciov' + ovnum).replace('56;','365;background-color:transparent;width:360px;height:180px;').replace(/\\\"\\ on/g, '\" data-on').replace('<img ','<img class=zoom-img ').replace(' src=',' src=/HTMLCSS/HYP_50M_SR_W.jpg width=360 height=180 data-src=')); opis='' + eval(-0.1 + eval('' + opis)); zaconto.getElementById('myimg').style.opacity='' + opis; //alert(1111); zaconto.getElementById('dvstyle').innerHTML+='<style> ' + prerest + zb + ' #iciov' + ovnum + ' { margin-top: -385px; -webkit-filter: brightness(110%); filter: brightness(110%); transform-origin: ' + xinxy[0] + 'px ' + yinxy[0] + 'px; clip-path: circle(' + Math.sqrt(eval(xinxy[0] - xinxy[1]) * eval(xinxy[0] - xinxy[1]) + eval(yinxy[0] - yinxy[1]) * eval(yinxy[0] - yinxy[1])) + 'px at ' + xinxy[0] + 'px ' + yinxy[0] + 'px); } </style>'; //alert('<style> ' + prerest + zb + ' #iciov' + ovnum + ' { -webkit-filter: brightness(150%); filter: brightness(150%); transform-origin: ' + xinxy[0] + 'px ' + yinxy[0] + 'px; clip-path: circle(' + Math.sqrt(eval(xinxy[0] - xinxy[1]) * eval(xinxy[0] - xinxy[1]) + eval(yinxy[0] - yinxy[1]) * eval(yinxy[0] - yinxy[1])) + 'px at ' + xinxy[0] + 'px ' + yinxy[0] + 'px); } </style>'); //alert(zaconto.getElementById('imgmore').innerHTML + zaconto.getElementById('dvstyle').innerHTML); } else { // rectangle zaconto.getElementById('myimg').style.opacity='1.0'; zaconto.getElementById('imgmore').innerHTML+=zaconto.getElementById('myimg').outerHTML.replace(/myimg/g,'iciov' + ovnum).replace('56;','2365;position:absolute;background-color:transparent;top:0px;left:0px;').replace(/\\\"\\ on/g, '\" data-on').replace('<img ','<img class=zoom-img ').replace(' src=',' src=/HTMLCSS/HYP_50M_SR_W.jpg width=360 height=180 data-src=').replace(' usemap=', ' data-usemap='); opis='' + eval(-0.1 + eval('' + opis)); zaconto.getElementById('myimg').style.opacity='' + opis; zaconto.getElementById('dvstyle').innerHTML+='<style> ' + prerest + zb + ' #iciov' + ovnum + ' { margin-top: -385px; -webkit-filter: brightness(110%); filter: brightness(110%); transform-origin: ' + eval(eval(xinxy[0] + xinxy[1]) / 2) + 'px ' + eval(eval(yinxy[0] + yinxy[1]) / 2) + 'px; clip-path: polygon(' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px' + '); } </style>'; } if (ovnum == 1) { setInterval(alternatevisibility, 15000); } ovnum++; } oneoftwo=ootis; defzoom=2; xinxy=[]; yinxy=[]; } } function setdefzoom(inv) { defzoom=inv; } function setoneoftwo(inv) { defzoomoneoftwo=inv; } function getoneoftwo() { return oneoftwo; }
… realized, back in the iframe …
<iframe onload='if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { ifcheck(this); } else { nonmifcheck(this); }' name=ifcountries id=ifcountries style='border-top:5px solid transparent;border-left:5px solid transparent;display:none;width:100%;height:900px;z-index:987;margin:0 0 0 0;padding:0 0 0 0;' src=''></iframe>
… onload (via …
document.getElementById('ifcountries').src='//www.rjmprogramming.com.au/HTMLCSS/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564);
… type call) event function (non-mobile one semi-shown below) …
function nonmifcheck(ziois) { // non-mobile iframe onload event function var waszoom=1; var sparear=null, gsparear=null; var xif=-999, yif=-999, xxif=-999, yyif=-999; zaconto = (ziois.contentWindow || ziois.contentDocument); if (zaconto.document) { zaconto = zaconto.document; } // ... // used later into the function, as well as in that new Javascript above, everywhere ... // zaconto.getElementsByTagName('table')[0].style.top='385px'; zaconto.getElementsByTagName('table')[0].style.left='0px'; if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { zaconto.getElementsByTagName('h3')[0].style.marginTop='6px'; zaconto.getElementsByTagName('h3')[0].innerHTML+=" <button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); parent.dotwoc();'>Circle of Interest via Next 2 Right Clicks</button> <button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); parent.dotwor();'>Rectangle via 2 Right Clicks</button><div id=imgmore></div><div id=dvstyle>"; zaconto.body.oncontextmenu=function(event){ if (parent.getoneoftwo() == 0) { event=event; } else if (Math.abs(parent.getoneoftwo()) == 1) { event.stopPropagation(); parent.getxynow(event); if (parent.getoneoftwo() < 0) { parent.setoneoftwo(eval(-1 + eval('' + parent.getoneoftwo()))); } else { parent.setoneoftwo(eval(1 + eval('' + parent.getoneoftwo()))); } } else if (Math.abs(parent.getoneoftwo()) == 2) { event.stopPropagation(); parent.getxynow(event); if (1 == 3) { parent.overlayit(0); } } }; } else { zaconto.getElementsByTagName('h3')[0].innerHTML+=" <button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); parent.dotwoc();'>Circle of Interest via Next 2 Double Clicks</button> <button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); parent.dotwor();'>Rectangle via 2 Double Clicks</button><div id=imgmore></div><div id=dvstyle>"; zaconto.body.ondblclick=function(event){ if (parent.getoneoftwo() == 0) { event=event; } else if (Math.abs(parent.getoneoftwo()) == 1) { event.stopPropagation(); parent.getxynow(event); if (parent.getoneoftwo() < 0) { parent.setoneoftwo(eval(-1 + eval('' + parent.getoneoftwo()))); } else { parent.setoneoftwo(eval(1 + eval('' + parent.getoneoftwo()))); } } else if (Math.abs(parent.getoneoftwo()) == 2) { event.stopPropagation(); parent.getxynow(event); if (1 == 3) { parent.overlayit(0); } } }; } // ... }
… and yet, elements are added to the “iframe child” (rather than to the parent document.body element) here … believe me … this, and using the Mercator Projection means of moving between “pixel land” and “latitude and longitude land”, is better!

which have the on hover blurb …

One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom

… which is just to say that the more clicks in a row of the button, the more resultant zoom goes into an onmouseover “hover” over that intermittently shown “circle” or “polygon” rectangle clip-path affected image (ie. img) overlay element placed according to the 2x set of user right click sets (for non-mobile) or double click sets (for mobile) the user subsequently makes on the GeoJson world map above these new buttons

… that, if actioned by the user, ends up with an “augmented reality” (in what we like to think of as a Who Framed Roger Rabbit_esque (or is that a “reverse Who Framed Roger Rabbit_esque“) approach which happens, at least for us, when you overlay some more realistic media over a representation of that “realia” with the same scale) if you’ll pardon any “jargon clash” here?!

As such, onto the recent Region Picker Area of Interest Tutorial we have a changed latest draft Region Picker for you to try all this out.

Previous relevant Region Picker Area of Interest Tutorial is shown below.

Region Picker Area of Interest Tutorial

Recently we stumbled across the intriguing CSS property clip-path and set ourselves a one day thinking time to see whether we could make use of this CSS feature.

And then it occurred to us with our recent Region Picker, as talked about at yesterday’s Region Picker Google Translate Tutorial, with that …

Image Chart Map Chart interfacer … call … off …
ondblclick event (ie. double click) of right hand Image Chart button

… scenario, regular readers may remember beginning as a concept back at the posting of Region Picker Double Click Tutorial, how …

an intermittent (because the highlighting used can meddle with the original colour coding reasoning) highlighting …
<?php echo ”
<body onkeydown=\"return okd(event);\" style=\"width:600px;height:600px;\" onclick=\" if (oneoftwo == 0) { document.getElementById('lastcol').value=''; isclear=false; document.getElementById('imode').value='click'; filloutform(event,1); } else if (Math.abs(oneoftwo) == 1) { getxynow(event); if (oneoftwo < 0) { oneoftwo--; } else { oneoftwo++; } } else if (Math.abs(oneoftwo) == 2) { getxynow(event); overlayit(0); }\" onload=\" setTimeout(thisonl,2000); if (window.opener) { document.getElementById('premyp').innerHTML=lfdfn(window.opener.document.getElementById('myp').outerHTML); document.getElementById('patparent').value=window.opener.document.getElementById('myp').innerHTML; document.getElementById('mopatparent').value=window.opener.document.getElementById('myp').innerHTML; } else if (window.parent) { document.getElementById('premyp').innerHTML=lfdfn(parent.document.getElementById('myp').outerHTML); document.getElementById('patparent').value=parent.document.getElementById('myp').innerHTML; document.getElementById('mopatparent').value=parent.document.getElementById('myp').innerHTML; } \">
“; ?>
… and …
<?php echo ”
<button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); defzoom=1; ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); dotwoc();'>Circle of Interest via Next 2 Clicks</button><br><br> <button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); defzoom=1; ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); dotwor();'>Rectangle via 2 Clicks</button>
“; ?>
… of Image Chart Map Chart image (ie. img) element “area of interest” (for which we’ve coded for “circle” and “polygon” rectangle, so far) …
coupled with “zoom on hover” …
<?php echo ”
var oneoftwo=0, xinxy=[], yinxy=[], opis='1.0', ovnum=1, defzoom=2; function getxynow(e) { e = e || window.event; e.preventDefault(); if (e.touches) { if (e.touches[0].pageX) { xinxy.push(eval(e.touches[0].pageX + document.body.scrollLeft) * browserZoomLevel); yinxy.push(eval(e.touches[0].pageY + document.body.scrollTop) * browserZoomLevel); } else { xinxy.push(eval(e.touches[0].clientX + document.body.scrollLeft) * browserZoomLevel); yinxy.push(eval(e.touches[0].clientY + document.body.scrollTop) * browserZoomLevel); } } else if (e.clientX || e.clientY) { xinxy.push(e.clientX + document.body.scrollLeft); yinxy.push(e.clientY + document.body.scrollTop); } else { xinxy.push(e.pageX + document.body.scrollLeft); yinxy.push(e.pageY + document.body.scrollTop); } //alert('' + xinxy.length); filloutform(e,0); } function dotwor() { if (oneoftwo == 1) { defzoom++; } else { defzoom=2; } oneoftwo=1; } function dotwoc() { if (oneoftwo == -1) { defzoom++; } else { defzoom=2; } oneoftwo=-1; } function alternatevisibility() { var igh=1; while (document.getElementById('iciov' + igh)) { if (igh == 1 && document.getElementById('iciov' + igh).outerHTML.indexOf('visibility:') == -1) { nextv='hidden'; } else if (igh == 1 && document.getElementById('iciov' + igh).outerHTML.split('visibility:')[1].split(';')[0].split('>')[0].toLowerCase().indexOf('visible') != -1) { nextv='hidden'; } else if (igh == 1) { nextv='visible'; } document.getElementById('iciov' + igh).style.visibility='' + nextv; igh++; } } function overlayit(ootis) { var prerest='', zb=''; if (ootis == 0) { if (eval('' + xinxy.length) == 2) { if (ovnum == 1) { // thanks to https://stackoverflow.com/questions/69491728/how-to-zoom-an-image-on-mouse-hover-using-css prerest=' .zoom-img { width: ' + document.getElementById('ici').width + 'px; height: ' + document.getElementById('ici').height + 'px; overflow: hidden; } .zoom-img:hover { transform: scale(2.0); } '; } if (defzoom != 2) { zb=' #iciov' + ovnum + ':hover { transform: scale(' + defzoom + '.0); } '; } if (oneoftwo < 0) { // circle document.getElementById('ici').style.opacity='1.0'; document.getElementById('imgmore').innerHTML+=document.getElementById('ici').outerHTML.replace('ici','iciov' + ovnum).replace('25;','35;position:absolute;background-color:transparent;top:0px;left:0px;').replace(/\\\"\\ on/g, '\" data-on').replace('<img ','<img class=zoom-img '); opis='' + eval(-0.1 + eval('' + opis)); document.getElementById('ici').style.opacity='' + opis; document.getElementById('dvstyle').innerHTML+='<style> ' + prerest + zb + ' #iciov' + ovnum + ' { -webkit-filter: brightness(150%); filter: brightness(150%); transform-origin: ' + xinxy[0] + 'px ' + yinxy[0] + 'px; clip-path: circle(' + Math.sqrt(eval(xinxy[0] - xinxy[1]) * eval(xinxy[0] - xinxy[1]) + eval(yinxy[0] - yinxy[1]) * eval(yinxy[0] - yinxy[1])) + 'px at ' + xinxy[0] + 'px ' + yinxy[0] + 'px); } </style>'; } else { // rectangle document.getElementById('ici').style.opacity='1.0'; document.getElementById('imgmore').innerHTML+=document.getElementById('ici').outerHTML.replace('ici','iciov' + ovnum).replace('25;','35;position:absolute;background-color:transparent;top:0px;left:0px;').replace(/\\\"\\ on/g, '\" data-on').replace('<img ','<img class=zoom-img '); opis='' + eval(-0.1 + eval('' + opis)); document.getElementById('ici').style.opacity='' + opis; document.getElementById('dvstyle').innerHTML+='<style> ' + prerest + zb + ' #iciov' + ovnum + ' { -webkit-filter: brightness(150%); filter: brightness(150%); transform-origin: ' + eval(eval(xinxy[0] + xinxy[1]) / 2) + 'px ' + eval(eval(yinxy[0] + yinxy[1]) / 2) + 'px; clip-path: polygon(' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px' + '); } </style>'; } if (ovnum == 1) { setInterval(alternatevisibility, 15000); } ovnum++; } oneoftwo=ootis; defzoom=2; xinxy=[]; yinxy=[]; } }
“; ?>

… could be a useful value adding part to the changed image_chart.php Google Chart Image Chart Map Chart interfacer used by the changed latest draft Region Picker.

Previous relevant Region Picker Google Translate Tutorial is shown below.

Region Picker Google Translate Tutorial

We wanted to improve the internationalization credentials of our Region Picker web application, of recent times, adding to the progress of yesterday’s Region Picker Revealed Iframes Tutorial. As such, we turn to another great Google product called Google Translate to translate …

heading text and some button text … and …
country names

… this Region Picker being a suitable candidate for a “whole of webpage” Google Translation for a URL such as (this Dutch translation version below) …

https://www-rjmprogramming-com-au.translate.goog/HTMLCSS/regions_via_countries.htm?_x_tr_sl=en&_x_tr_tl=nl&_x_tr_hl=en-GB&_x_tr_pto=nui

… or use the language dropdown to the right below …

Yes, we wrote a regions_via_countries.htm version of our Region Picker especially for the occasion, because there are nuances among innerHTML and innerText of elements, that need to be considered, while the changed latest draft Region Picker gets given a new “languages” dropdown element that hangs around long enough to translate from English, via Google Translate, should the user wish to do so. Once there in another language, alas, some of the Geographics based inhouse menu options cannot be achieved.

Previous relevant Region Picker Revealed Iframes Tutorial is shown below.

Region Picker Revealed Iframes Tutorial

Onto yesterday’s Region Picker Emoji Flags Tutorial‘s progress, today, we combine two of our favourite concepts in our push forward …

iframe usage … as a preferable calling mechanism to popup windows, especially on mobile platforms … and our favourite …
reveal functionality via details/summary usage … initially …
<details style=display:none;margin-left:50px; id=dtla1><summary id=smya1>Airports ...</summary><iframe id=ifra1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtlp1><summary id=smyp1>Ports ...</summary><iframe id=ifrp1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtls1><summary id=smys1>Sun Angle ...</summary><iframe id=ifrs1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtlm1><summary id=smym1>Moon Angle ...</summary><iframe id=ifrm1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtlc1><summary id=smyc1>Coriolis Effect ...</summary><iframe id=ifrc1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtli1><summary id=smyi1>Image Chart Image ...</summary><iframe id=ifri1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtli2><summary id=smyi2>Image Chart Legend ...</summary><iframe id=ifri2 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtli><summary id=smyi>Image Chart Image Map ...</summary><iframe name=ifri id=ifri style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtlt1><summary id=smyt1>Timezone ...</summary><iframe name=ifrt1 id=ifrt1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtly1><summary id=smyy1>YouTube ...</summary><iframe name=ifry1 id=ifry1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtlo1><summary id=smyo1>Geo Chart ...</summary><iframe name=ifro1 id=ifro1 style=display:none; src=''></iframe></details>

… we reduce the dependency we have, in the Region Picker web application, on the use of popup windows. For this we funnelled a lot of the “window.open” calls within the purview of the rjmprogramming.com.au domain through the Javascript “wrapper style of function” …

… in the changed latest draft Region Picker (mobile uses iframes and non-mobile uses popups) or Region Picker (uses iframes where possible).

Previous relevant Region Picker Emoji Flags Tutorial is shown below.

Region Picker Emoji Flags Tutorial

Regular readers will know that we are keen on emojis …

regarding their way to attract attention
internationalization assistance
text (content) that is (like a) graphic (display)

… for we “graphically challenged”, shall we say? We think our Region Picker from yesterday’s Region Picker Geo Chart Image Chart GeoJson Tutorial could do with a little “emoji flag” help. Yes, every country with an ISO-3166 two character code associated with it, can have an associated emoji flag via a Javascript function like …

function orflag(thiscc) { var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 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']; var ccsuff='', ccchar=' ', cde=''; for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) { ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase(); ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';'; cde='.'; } return ccsuff; }

It might have been the recent work with our “rectangle of letter hashtag navigation breadcrumb emojis” in yesterday’s Region Picker Geo Chart Image Chart GeoJson Tutorial that spurred us on, because the keen observer can look at the code above, and if they are “number orientated” they’ll tee up those “1274xx” numbers with ones below. Can you believe that these Regional Indicators have a dual purpose for us now …

singly they are helping with the breadcrumbs
two together in the form of a country ISO-3166 two character code and they (we kind of think, miraculously) turn into the national flag (emoji) for that country

? And mixing these up into the content mix, we do not have to be quite so sheepish about all the English assumptions in the changed latest draft Region Picker.

Also, we think, it is clarifying the “dropdown” element in the Region Picker, contextualizing the right hand side as the “business end” of proceedings, which can have an “independent life” from “the work in progress” status of what goes on in that dropdown element (which, on non-mobile, is far more “jittery” because it responds to the “onmouseover” events going on).

Did you know?

Personally, we know of some products set up before there were emojis, and requiring flags for their functionality. Sadly, they resorted to individual image files required for each country’s flag … these days with the “emoji flags” this amounts to being an awkward arrangement to maintain, and we Linux web server managers go bananas regarding such a waste of “inode numbers” … because, the last time we looked, “inode numbers” do not grow on trees!

Previous relevant Region Picker Geo Chart Image Chart GeoJson Tutorial is shown below.

Region Picker Geo Chart Image Chart GeoJson Tutorial

Prior to yesterday’s Region Picker Mobile Background Position Tutorial, when we presented Region Picker Mobile GeoJson Trip Leg Tutorial, we readied the Region Picker for GeoJson interfacing smarts, and today we find ourselves wanting to add …

Region Picker calls Image Chart add GeoJson interfacing smarts … and …
Region Picker calls Geo Chart add GeoJson interfacing smarts

… given the lead in work from a couple of days back.

Another realization occurred to us regarding the wait a user had when using the Region Picker and trying to (on a non-mobile platform) right click a country name link (to release “The Whole Shebang”). We realized that that “letter block” we used to create dynamically always had the same content, so why not make it some static HTML, as per …

… looking like …

🇦 🇧 🇨 🇩 🇪 🇫
🇬 🇭 🇮 🇯 🇰
🇱 🇲 🇳 🇴 🇵
🇶 🇷 🇸 🇹 🇺
🇻 🇼 🇽 🇾 🇿 ↗

… and contrary to what we often admire, “static content” serves us better than a “dynamic scenario”, with “right clicking” working much faster after the document.body onload event.

Codewise we needed to work on …

Previous relevant Region Picker Mobile Background Position Tutorial is shown below.

Region Picker Mobile Background Position Tutorial

Am sure there are users out there uncomfortable with overlapping or clashing HTML. As a programmer, we recommend “some chill” when re-orienting the device can be possible, but if there is a way to avoid the issues in the first place, count us in as programmers interested in solutions. So we spent a day in amongst the pixels, with some nitty gritty, further to yesterday’s Region Picker Mobile User Experience Tutorial mobile platform user experience start, and …

turned the “breadcrumb” style ascii letter links into emoji links (and so “I” got the same width as “W”) … and …
even added line feeds to some “a” country name links to help out so that background image overlapping happens less often to their left … and …
added country name to rightmost “Image Chart Map Chart” button wording … and …
played around with tablet and phone platform background-position (of the country image chart) images …
if (window.self == window.parent && eval('' + screen.width) >= 800 || document.URL.indexOf('?right=') != -1) { document.getElementById('tdleft').style.backgroundPosition='right top'; } else if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { //document.getElementById('tdleft').style.backgroundPosition='' + eval(0.4 * eval('' + screen.width)) + 'px ' + eval(-450 + eval('' + screen.height)) + 'px'; // used to be center top document.getElementById('tdleft').style.backgroundPosition='200px 200px'; // used to be center top } else { document.getElementById('tdleft').style.backgroundPosition='center top'; // used to be center top }

… causing a whole lot less clashing, going on in the changed latest draft Region Picker.

Previous relevant Region Picker Mobile User Experience Tutorial is shown below.

Region Picker Mobile User Experience Tutorial

Continuing on with mobile platform concerns regarding yesterday’s Region Picker Mobile GeoJson Trip Leg Tutorial‘s work on the Region Picker web application, today we improve the user experience for mobile platform users by …

making the country text bigger and more noticeable as they load the webpage …
<style>
a.ulmenulink { font-size: 28px; /* used to be 14px */ font-weight: bold; /* color: orange; */por background-image: linear-gradient(to right, lightblue 0%, rgb(255,255,127) 100%); text-shadow:-1px 1px 1px #ff2d95; margin-left: 50px; }
<style>
adding left hand side alternative way to get to non-mobile right click “the whole shebang” logic …
<span id=todd title='Navigate to region list for last country selected' style='border:1px solid green;position:fixed;text-shadow:-1px 1px 1px #2dff95;font-size:20px;left:8px;top:80px;text-decoration:underline;cursor:pointer;z-index:3245;' onclick="if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && lastop != null) { thewholeshebang(lastop); } else if (document.getElementById('bremember')) { window.scrollTo(eval(-80 + eval(document.getElementById('bremember').getBoundingClientRect().left)), 0); } ">↗</span>
… making some elements receive a new CSS margin-left property to help out …
<style>
a.ulmenulink { font-size: 28px; font-weight: bold; /* color: orange; */ background-image: linear-gradient(to right, lightblue 0%, rgb(255,255,127) 100%); text-shadow:-1px 1px 1px #ff2d95; margin-left: 50px; } a.ulmenulink, li a { text-decoration: none; color: #006; background-image: linear-gradient(rgba(255,240,240,0.5), rgba(255,242,242,0.5), rgba(255,244,244,0.5), rgba(255,246,246,0.5), rgba(255,248,248,0.5), rgba(255,250,250,0.5)); /* #fff0f0, #fff2f2, #fff4f4, #fff6f6, #fff8f8, #fffafa); */ text-shadow:-1px 1px 1px #2dff95; margin-left: 30px; }
<style>
bunching up the single letter links into a rectangle of links which do not overlay to the left (and as such do not interfere with any country links) …
var nexttodo='A', nextih='                               ', ournext=''; var orignextih=nextih; var newih=''; //registers mouseenter to each element in xelms array nextih+=orignextih; nextih+=orignextih; newih=nextih; for(var xi=0; xi<xelms.length; xi++){ if (eval(('' + xelms[xi].id).length) == 3) { if (('' + xelms[xi].innerHTML).substring(0).substring(0,1) >= nexttodo) { ournext=('' + xelms[xi].innerHTML).substring(0).substring(0,1) //alert('nexttodo=' + nexttodo + ' andpleasedonotbeequalveryoften ournext=' + ournext + ' and ' + xelms[xi].id); while (nexttodo < ournext) { nextih+=' <a style=color:blue;z-index:786; href="#' + xelms[xi].id + '">' + nexttodo + '</a>'; nexttodo=String.fromCharCode(1 + nexttodo.charCodeAt(0)); //alert('Nexttodo=' + nexttodo + ' and ournext=' + ournext + ' and ' + xelms[xi].id); } if (nexttodo <= 'Z') { nextih+=' <a style=color:blue;z-index:786; href="#' + xelms[xi].id + '">' + nexttodo + '</a>'; nexttodo=String.fromCharCode(1 + nexttodo.charCodeAt(0)); } } //else { //alert('no for nexttodo=' + nexttodo + ' and ournext=' + ournext + ' and ' + xelms[xi].id); //} } // more code follows } // end for if (nextih != '') { nextih=nextih.replace('>F', '>F' + ' ' + newih); nextih=nextih.replace('>J', '>J' + ' ' + newih); nextih=nextih.replace('>O', '>O' + ' ' + newih); nextih=nextih.replace('>T', '>T' + ' ' + newih); document.getElementById('myh3').innerHTML=nextih + "                                                                                                                 ↗"; var hrect=document.getElementById('myh3').getBoundingClientRect(); document.getElementById('myh3').style.position='fixed'; document.getElementById('myh3').style.top='38px'; if (8 == 8) { document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,''); document.getElementById('myh3').style.left='380px'; } else { document.getElementById('myh3').style.left='' + hrect.left + 'px'; } document.getElementById('myh3').style.opacity='0.4'; document.getElementById('myh3').style.zIndex='786'; }
improving the “highlight all dropdown options” code …
function selall() { // thanks to https://stackoverflow.com/questions/55486020/how-to-set-values-of-multiple-select-using-javascript const selecte = document.getElementsByTagName('select')[0]; const selectValues = ['']; var soh=selecte.innerHTML; var wassoh=soh; var its='', jits=0; /* Iterate options of select element */ for (const optionx of document.querySelectorAll('#' + selecte.id + ' option')) { /* Parse value to integer */ const valuex = Number.parseInt(optionx.value); /* If option value contained in values, set selected attribute */ if (selectValues.indexOf(valuex) !== -1 || 1 == 1) { optionx.setAttribute('selected', 'selected'); if (soh.indexOf('">' + optionx.innerText + '<') != -1) { soh=soh.replace('">' + optionx.innerText + '<', '" selected>' + optionx.innerText + '<'); } else { its=optionx.innerText; for (jits=eval(-1 + eval('' + optionx.innerText.length)); jits>=2; jits--) { if (its != '' && soh.indexOf('">' + optionx.innerText.substring(0,jits)) != -1) { soh=soh.replace('">' + optionx.innerText.substring(0,jits), '" selected>' + optionx.innerText.substring(0,jits)); its=''; } } } } /* Otherwise ensure no selected attribute on option */ else { optionx.removeAttribute('selected'); } }
add some background colour to any dropdown to help highlight its importance once country is decided upon …
<style>
select { font-size: 7px; font-weight: bold; padding: 2 2 2 2; min-height: 90%; overflow-y: scroll; overflow-y: hidden; background-color: pink; }
<style>
rule out the use of a meta name=”viewport” tag as being any help

… in the changed latest draft Region Picker.

Previous relevant Region Picker Mobile GeoJson Trip Leg Tutorial is shown below.

Region Picker Mobile GeoJson Trip Leg Tutorial

The last couple of “right click leaning” days may have been annoying for mobile users of our Region Picker out there. And so, onto yesterday’s Region Picker GeoJson Trip Leg Right Click Tutorial we’re starting the …

mobile platform turnaround … recognising …
on mobile platforms zooming will be via a spread gesture rather than a zoom button click …
on mobile platforms the previous non-mobile right click logics will have to be replaced by other event logic (today being more “ondblclick” logic) as required …
on mobile platforms we do not want to re-navigate to the GeoJson iframe content, and so we use the iframe URL and add hashtag navigation helpers …
var locationhash=''; function lhit(inh) { locationhash=inh; ifcheck(document.getElementById('ifcountries')); return inh; } function menuize(rans) { var rdescis=lastplace; var latdeg=-999, longdeg=-999; if (gextras.indexOf(' (') != -1) { if (gextras.split('t to (')[1].split(')')[0].indexOf(',') != -1) { latdeg=eval('' + gextras.split('t to (')[1].split(')')[0].split(',')[0]); longdeg=eval('' + gextras.split('t to (')[1].split(')')[0].split(',')[1]); } } else if (storedsuffs.indexOf('~' + lpw(lastplace) + '`') != -1 && storedsuffs.indexOf('~' + lpw(lastplace) + '`@') == -1) { gextras=storedsuffs.split('~' + lpw(lastplace) + '`')[1].split('@')[0]; if (gextras.split(' (')[1].split(')')[0].indexOf(',') != -1) { latdeg=eval('' + gextras.split(' (')[1].split(')')[0].split(',')[0]); longdeg=eval('' + gextras.split(' (')[1].split(')')[0].split(',')[1]); } } if ((rans + ' ').toUpperCase().substring(0,1) == 'W') { if (rdescis == '') { window.open('//wikipedia.org','_blank','top=180,left=400,width=600,height=600'); } else { window.open('//wikipedia.org/wiki/' + encodeURIComponent(rdescis.replace(/\ $/g,', ').replace(/$$/g,'')).replace(/\%20/g,'_'),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } } else if ((rans + ' ').toUpperCase().substring(0,1) == 'I') { tryit(); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'Y') { if (rdescis == '') { window.open('//www.youtube.com','_blank','top=180,left=400,width=600,height=600'); } else { window.open('//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=' + encodeURIComponent(' ' + rdescis.replace(/\ $/g,', ').replace(/$$/g,'')),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } } else if ((rans + ' ').toUpperCase().substring(0,1) == 'G') { if (rdescis == '') { window.open('//www.google.com','_blank','top=180,left=400,width=600,height=600'); } else { window.open('//www.google.com/search?q=' + encodeURIComponent(rdescis.replace(/\ $/g,', ').replace(/$$/g,'')) + '&tbm=isch','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } } else if ((rans + ' ').toUpperCase().substring(0,1) == 'T') { // && eval(('' + document.getElementById('myp').getAttribute('data-fc')).length) == 2) { if (rdescis == '') { window.open('//www.rjmprogramming.com.au/PHP/tz_places.php','_blank','top=180,left=400,width=800,height=600'); } else { window.open('//www.rjmprogramming.com.au/PHP/tz_places.php?iso=' + ('' + lastcode + ' ').toUpperCase().substring(0,2).trim(),'_blank','top=' + ys + ',left=' + xs + ',width=800,height=' + Math.max(100,eval(-100 + screenheight - ys))); } } else if ((rans + ' ').toUpperCase().substring(0,1) == 'A' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Airports iwo=window.open('//www.rjmprogramming.com.au/HTMLCSS/intair.php?num=3&lat=' + latdeg + '&long=' + longdeg + '&spawn=' + encodeURIComponent('//www.rjmprogramming.com.au/PHP/Map/map.php?title=' + maybenot(document.getElementById('myp').getAttribute('data-fc').toUpperCase(),rdescis) + ';' + encodeURIComponent(rdescis) + '%' + '20and%' + '20Airports&onclick=y&justmenu=y&label=[%' + '27Lat%' + '27,&value=%' + '27Lon%' + '27,%' + '27Name%' + '27]&data=,' + '[' + latdeg + ',' + longdeg + ',~' + encodeURIComponent(rdescis).replace(/\-/g,'%' + '2d').replace(/\#/g,'%' + '23') + '~]'),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'P' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Ports iwo=window.open('//www.rjmprogramming.com.au/HTMLCSS/intair.php?num=4&lat=' + latdeg + '&long=' + longdeg + '&port=y&spawn=' + encodeURIComponent('//www.rjmprogramming.com.au/PHP/Map/map.php?title=' + maybenot(document.getElementById('myp').getAttribute('data-fc').toUpperCase(),rdescis) + ';' + encodeURIComponent(rdescis) + '%' + '20and%' + '20Ports&onclick=y&justmenu=y&label=[%' + '27Lat%' + '27,&value=%' + '27Lon%' + '27,%' + '27Name%' + '27]&data=,' + '[' + latdeg + ',' + longdeg + ',~' + encodeURIComponent(rdescis).replace(/\-/g,'%' + '2d').replace(/\#/g,'%' + '23') + '~]'),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'S' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Sun Angle window.open('//www.rjmprogramming.com.au/PHP/SunAngle/sun_angle_now_at.php?latd=' + ('' + latdeg).split('.')[0] + '&latm=' + Math.round(eval(eval('0.' + ('' + latdeg + '.0').split('.')[1]) * 60)) + '&lats=0&longd=' + ('' + longdeg).split('.')[0] + '&longm=' + Math.round(eval(eval('0.' + ('' + longdeg + '.0').split('.')[1]) * 60)) + '&longs=0&from=from&done=y','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'M' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Moon Angle window.open('//www.rjmprogramming.com.au/PHP/MoonAngle/moon_angle_now_at.php?latd=' + ('' + latdeg).split('.')[0] + '&latm=' + Math.round(eval(eval('0.' + ('' + latdeg + '.0').split('.')[1]) * 60)) + '&lats=0&longd=' + ('' + longdeg).split('.')[0] + '&longm=' + Math.round(eval(eval('0.' + ('' + longdeg + '.0').split('.')[1]) * 60)) + '&longs=0&from=from&done=y','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'C' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Coriolis Effect window.open('//www.rjmprogramming.com.au/PHP/Coriolis/coriolis_force_at.php?latd=' + ('' + latdeg).split('.')[0] + '&latm=' + Math.round(eval(eval('0.' + ('' + latdeg + '.0').split('.')[1]) * 60)) + '&lats=0&longd=' + ('' + longdeg).split('.')[0] + '&longm=' + Math.round(eval(eval('0.' + ('' + longdeg + '.0').split('.')[1]) * 60)) + '&longs=0&from=from&done=y','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'E' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Google Earth window.open('//earth.google.com/web/@' + ('+' + latdeg).replace('+-','-') + (',+' + longdeg).replace('+-','-') + ',328.51120179a,63169669.71505167d,1y,0h,0t,0r','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'O' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Geo Chart iwo=window.open('//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php' + '?title=' + maybenot(document.getElementById('myp').getAttribute('data-fc').toUpperCase(),rdescis) + ';' + encodeURIComponent(rdescis).replace(/\-/g,'%' + '2d').replace(/\#/g,'%' + '23') + '&aregexographicals=y&aregeographicals=&width=500&height=312&onclick=y&country=Places&popularity=&data=%20[' + latdeg + '|' + longdeg + '|~' + encodeURIComponent(rdescis).replace(/\-/g,'%' + '2d').replace(/\#/g,'%' + '23') + '~,2]','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'J') { // GeoJSON //window.open('//www.rjmprogramming.com.au/HTMLCSS/countries.html','ifcountries','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); if (latdeg < -990 && longdeg < -990) { jjans=jjans + ' '; } // if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { // jjans=jjans.replace('No Trip Planning','Yes Trip Planning'); // } if (sofararealist.indexOf('|' + ('' + lastcode + ' ').toUpperCase().substring(0,2).trim() + '|') == -1) { sofararealist+=('' + lastcode + ' ').toUpperCase().substring(0,2).trim() + '|'; } if (1 == 9 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (1 == 6) { zwin=window.open('//www.rjmprogramming.com.au/HTMLCSS/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564), '_blank'); } // 'ifcountries'); } else { if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && document.getElementById('ifcountries').src.indexOf('?') != -1 && document.getElementById('ifcountries').src.indexOf('/countries.') != -1) { document.getElementById('placegeo').value=''; document.getElementById('placegeo').title='' + latdeg + ',' + longdeg; sofararealist+=('' + lastcode + ' ').toUpperCase().substring(0,2).trim() + '|'; zoomword='zoom'; refreshword='refresh'; document.getElementById('ifcountries').src+=lhit('#' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564)); } else { document.getElementById('ifcountries').src='//www.rjmprogramming.com.au/HTMLCSS/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564); } } lastr=rdescis; if ((latdeg < -990 && longdeg < -990) || blurbone == '') { if (confirm('Taking you to ' + decodeURIComponent(rdescis) + ' on world map now' + blurbone + ' ...')) { jjans=jjans.replace('No Trip Planning','Yes Trip Planning').replace(/\ \ \ \ \ $/g,''); if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { document.getElementById('ifcountries').style.display='block'; //document.getElementById('ifcountries').src='//www.rjmprogramming.com.au/HTMLCSS/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564); //zwin=window.open('//www.rjmprogramming.com.au/HTMLCSS/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564), 'ifcountries'); // 'ifcountries'); location.href='#dstyle'; } else { document.getElementById('ifcountries').style.display='block'; //document.getElementById('more').style.display='none'; location.href='#dstyle'; } } } else { jjans=jjans.replace(/\ \ \ \ \ $/g,''); jjans=prompt('Taking you to ' + decodeURIComponent(rdescis) + ' on world map now' + blurbtwo + ' ...', '' + jjans); if (jjans != null) { document.getElementById('ifcountries').style.display='block'; //document.getElementById('more').style.display='none'; location.href='#dstyle'; } } } }

… in the changed latest draft Region Picker for our ongoing quest to improve the user experience of our Region Picker on mobile platforms.

Previous relevant Region Picker GeoJson Trip Leg Right Click Tutorial is shown below.

Region Picker GeoJson Trip Leg Right Click Tutorial

Regular readers know that we enjoy event-driven programming. And we really enjoy scenarios where a whole layer of new functionality is possible via an event design initiative, and today we have a …

right click
… or …
oncontextmenu

… event gala (minus any “h” appendix, thank you very much) for you.

It’s very rare that when you rely on a generic representation of a large entity with a single entity you will satisfy all users. And so, as far as yesterday’s …

Region Picker region representative geographical “marker” placement

… where the large entity is a whole country or region and the single entity is somewhere inside that, allowing for that is a start, but will only satisfy some users. But what if, along the way, with our …

GeoJson world map …
image map …
area subelement scouring … we could start adding to the relevant ones a whole …
new layer of right click event (ie. oncontextmenu event) Javascript logic in amongst the iframe onload event function below …
function ifcheck(ziois) { var waszoom=1; var sparear=null, gsparear=null; var xif=-999, yif=-999, xxif=-999, yyif=-999; zaconto = (ziois.contentWindow || ziois.contentDocument); //alert(11); zzaconto=zaconto; if (zaconto != null) { //alert('111 ' + xiois.src); try { if (zaconto.document) { zaconto = zaconto.document; } //alert('1111 ' + zaconto.body.innerHTML); if (zaconto.body.innerHTML.indexOf('>') != -1) { zoomdone=false; lastiizoom=(ziois.src.indexOf('zoom=') != -1 ? eval(ziois.src.split('zoom=')[1].split('&')[0].split('#')[0]) : lastiizoom); var itwo=''; if (document.getElementById('myp')) { itwo=('' + document.getElementById('myp').getAttribute('data-fc')).replace(/^null/g,'').replace(/^undefined/g,'').trim().toUpperCase(); } if (itwo == '' && lastcode != '') { itwo=lastcode; } if (eval('' + itwo.length) == 2 || (document.getElementById('placegeo').title + document.getElementById('placegeo').value).trim() != '') { var xlatdeg=0, xlongdeg=0; if ((document.getElementById('placegeo').title + document.getElementById('placegeo').value).indexOf(',') != -1) { xlatdeg=eval('' + (document.getElementById('placegeo').title + document.getElementById('placegeo').value).split(',')[0]); xlongdeg=eval('' + (document.getElementById('placegeo').title + document.getElementById('placegeo').value).split(',')[1]); } if (ziois.src.indexOf('refresh=') != -1 && ziois.src.indexOf('zoom=') != -1) { iizoom=lastiizoom; zaconto.getElementById('mg').onmousedown=function(){ lastiizoom=eval(2 * lastiizoom); setTimeout(parent.rifcheck, 3000); return true; }; zaconto.getElementById('mg').ontouchdown=function(){ lastiizoom=eval(2 * lastiizoom); setTimeout(parent.rifcheck, 3000); return true; }; setTimeout(rifcheck, 2000); //alert('Where'); return true; } else { iizoom=eval(eval('' + ('' + zaconto.getElementById('myimg').style.width).replace('px','')) / 360); //eval('' + zaconto.getzoom()); } xif=eval(iizoom * eval(180 + eval('' + xlongdeg))); yif=eval(iizoom * eval(90 - eval('' + xlatdeg))); //alert('' + xif + ',' + yif); //alert(itwo); var isp=0; var jsp=0; if (eval('' + itwo.length) == 2) { if (xif >= -180 && yif >= -90) { if (lastiizoom != iizoom || ziois.src.indexOf('refresh=') != -1) { var huhrect=document.getElementById('ifcountries').getBoundingClientRect(); var ospancount=spancount; newone=eval(1 + spancount); while (document.getElementById('span' + isp)) { if (isp < ospancount) { waszoom=document.getElementById('span' + isp).getAttribute('data-zoom'); if (waszoom != iizoom) { xlatdeg=eval('' + document.getElementById('span' + isp).getAttribute('data-geo').split(',')[0]); xlongdeg=eval('' + document.getElementById('span' + isp).getAttribute('data-geo').split(',')[1]); xxif=eval(iizoom * eval(180 + eval('' + xlongdeg))); yyif=eval(iizoom * eval(90 - eval('' + xlatdeg))); if (1 == 1) { document.getElementById('plots').innerHTML+='<span id=sspan' + spancount + '><span oncontextmenu="event.stopPropagation(); event.preventDefault(); if (isdouble == 0) { storeaway(this); }" data-zoom="' + iiizoom + '" data-iframepos="' + huhrect.left + ',' + huhrect.top + '" data-geo="' + xlatdeg + ',' + xlongdeg + '" title="' + decodeURIComponent(document.getElementById('span' + isp).title) + '" id=span' + spancount + ' style="font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + yyif) + 'px;left:' + eval(eval('' + huhrect.left) + xxif) + 'px;">x</span></span>'; nodiv(isp, spancount); spancount++; jsp++; document.getElementById('span' + isp).style.display='none'; } else { document.getElementById('span' + isp).style.top='' + eval(eval('' + huhrect.top) + yyif) + 'px'; document.getElementById('span' + isp).style.left='' + eval(eval('' + huhrect.left) + xxif) + 'px'; document.getElementById('span' + isp).setAttribute('data-zoom', '' + iizoom); document.getElementById('span' + isp).setAttribute('data-iframepos', '' + huhrect.left + ',' + huhrect.top); document.getElementById('sspan' + isp).innerHTML=document.getElementById('span' + isp).outerHTML; } } } isp++; } } spancount=eval(isp + jsp); if (jjans == jjans.replace(/\ \ \ \ \ $/g,'')) { document.getElementById('plots').innerHTML+='<span id=sspan' + spancount + '><span oncontextmenu="event.stopPropagation(); event.preventDefault(); if (isdouble == 0) { storeaway(this); }" data-zoom="' + iizoom + '" data-iframepos="' + huhrect.left + ',' + huhrect.top + '" data-geo="' + xlatdeg + ',' + xlongdeg + '" title="' + decodeURIComponent(lastr) + '" id=span' + spancount + ' style="font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + yif) + 'px;left:' + eval(eval('' + huhrect.left) + xif) + 'px;">x</span></span>'; spancount++; setTimeout(nospan, 30000); } } sofararealist+=itwo + '|'; var ars=zaconto.getElementsByTagName('area'); for (var iars=0; iars<ars.length; iars++) { while (('' + ars[iars].getAttribute('data-iso2')) == itwo || sofararealist.indexOf('|' + ('' + ars[iars].getAttribute('data-iso2')) + '|') != -1) { //document.title='' + iars + ' ... ' + ('' + ars[iars].getAttribute('data-iso2')); zaconto.getElementsByTagName('table')[0].style.top='385px'; zaconto.getElementsByTagName('table')[0].style.left='0px'; if (ars[iars].outerHTML.indexOf(' onclick="') != -1) { //itwo=' '; if (('' + ars[iars].getAttribute('data-iso2')) == itwo) { sparear=ars[iars]; //document.title+=' ' + 'zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().substring(0,220); if (9 == 9) { //alert(11); sparear.click(); //alert(1); sparear.oncontextmenu=function(event){ event.stopPropagation(); event.preventDefault(); return parent.geojsonrightclick(event,iizoom,isdouble); }; //alert(111); eval('zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().replace(/this\./g,'sparear.').replace(/this\,/g,'sparear,')); } else { eval('zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().replace(/this\./g,'sparear.').replace(/this\,/g,'sparear,')); } } else { gsparear=ars[iars]; //document.title+=' ' + 'zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().substring(0,220); if (9 == 9) { //alert(911); gsparear.click(); //alert(91); gsparear.oncontextmenu=function(event){ event.stopPropagation(); event.preventDefault(); return parent.geojsonrightclick(event,iizoom,isdouble); }; //alert(9111); eval('zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().replace(/this\./g,'gsparear.').replace(/this\,/g,'gsparear,')); } else { eval('zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().replace(/this\./g,'gsparear.').replace(/this\,/g,'gsparear,')); } } } iars++; //itwo=''; } if (sparear) { itwo=''; } } } jjans=jjans.replace(/\ \ \ \ \ $/g,''); if (!zoomdone) { lastiizoom=iizoom; zaconto.getElementById('mg').onmousedown=function(){ setTimeout(parent.rifcheck, 3000); return true; }; zaconto.getElementById('mg').ontouchdown=function(){ setTimeout(parent.rifcheck, 3000); return true; }; } else { if (ziois.src.indexOf('refresh=') != -1) { lastiizoom=iizoom; zaconto.getElementById('mg').onmousedown=function(){ setTimeout(parent.rifcheck, 3000); return true; }; zaconto.getElementById('mg').ontouchdown=function(){ setTimeout(parent.rifcheck, 3000); return true; }; } lastiizoom=sein(iizoom); } if (itwo == '') { zaconto.getElementsByTagName('canvas')[0].dispatchEvent(new Event("click", { bubbles: true, // only bubbles and cancelable cancelable: true, // work in the Event constructor clientX: xif, clientY: yif })); if (1 == 2) { if (zaconto.elementsFromPoint) { var elements = zaconto.elementsFromPoint(xif, yif); elements.forEach((elt, i) => { if (i < elements.length - 1) { zaconto.body.dispatchEvent(new Event("click", { bubbles: true, // only bubbles and cancelable cancelable: true, // work in the Event constructor clientX: xif, clientY: yif })); } }); } else { zaconto.elementFromPoint(xif, yif).click(); } } } } } } catch(hgjgs) { } } jjans=jjans.replace(/\ \ \ \ \ $/g,''); return true; } function geojsonrightclick(ev,iiz,isd) { pos3=-999; pos4=-999; if (ev.touches) { if (ev.touches[0].pageX) { pos3 = ev.touches[0].pageX; pos4 = ev.touches[0].pageY; } else { pos3 = ev.touches[0].clientX; pos4 = ev.touches[0].clientY; } console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4); } else if (ev.clientX || ev.clientY) { pos3 = ev.clientX; pos4 = ev.clientY; console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4); } else { pos3 = ev.pageX; pos4 = ev.pageY; console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4); } if (pos3 >= 0 && pos4 >= 0) { if (iiz < lastiizoom) { iiz=lastiizoom; } xlatdeg=eval(90 - eval(eval('' + pos4) / iiz)); xlongdeg=eval(-180 + eval(eval('' + pos3) / iiz)); var huhrect=document.getElementById('ifcountries').getBoundingClientRect(); //alert(' ... second yay! ' + lastiizoom + ' vs ' + iiz + ' ' + ev.clientX + ',' + ev.clientY); if (isdouble == 0) { document.getElementById('plots').innerHTML+='<span id=sspan' + spancount + '><span oncontextmenu="event.stopPropagation(); event.preventDefault(); if (isdouble == 0) { storeaway(this); }" data-zoom="' + iiz + '" data-iframepos="' + huhrect.left + ',' + huhrect.top + '" data-geo="' + xlatdeg + ',' + xlongdeg + '" title="Right Click at ' + xlatdeg + ',' + xlongdeg + '" id=span' + spancount + ' style="font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + pos4) + 'px;left:' + eval(eval('' + huhrect.left) + pos3) + 'px;">❓</span></span>'; storeaway(document.getElementById('span' + spancount)); spancount++; setTimeout(nospan, 30000); isdouble=1; //nolineplease=true; blk='hidden'; setTimeout(isdf, 3000); //alert('Nolineplease'); } else { blk='hidden'; nolineplease=true; //alert('nolineplease'); } } return false; //' ... second yay! ' + lastiizoom + ' vs ' + iiz + ' ' + e.clientX + ',' + e.clientY; }
...
within any programmatically shaded country area (and underlying div and SVG) elements representing the chosen country of interest from the Region Picker parent, and where the user chooses rather than where it is chosen for them

? And don't you find interesting with all this additional functionality, we've not touched the GeoJson World Map web application (being hosted in the Regional Picker iframe all this time), at all?! We also enjoy not needing to change every component, when trying to achieve new functionality.

And while we're into "and", it passes notice, especially with this work, how this is only a straightforward approach because of the good old Mercator projection used here, that many primary school kids get familiar with regarding wall maps. A pixel is worth a Mercator projection degree, when "unzoomed", and that the top left corner is 90 degrees latitude and -180 longitude. The implication is that areas near the poles are vastly bigger looking than they are (regarding surface area) in reality. Many other projections would involve quite complex mathematics. Phewwww!

Today, further to yesterday's Region Picker GeoJson Trip Leg Tutorial, we worried a lot about the "zoom" button 🔍. We encourage users who use the "J" inhouse menu option with "Yes Trip Planning" to click the "zoom" button as many times as they need to before any Trip Legs are defined via right click actions (within shaded countries). You can involve multiple countries, too, where "marker" inhouse options are presented.

We also allowed for Trip Leg visibility toggling (after the event) via double click, on a leg, functionality in the changed latest draft Region Picker

Previous relevant Region Picker GeoJson Trip Leg Tutorial is shown below.

Region Picker GeoJson Trip Leg Tutorial

Nice legs! Regarding the trips, of course. Trip planning? GeoJson? Region Picker?

Yes, yesterday's Region Picker GeoJson Trip Planning Tutorial's progress had us starting to allow for a Trip Planner subset of functionality for our Google Image Chart Map Chart interfacing Region Picker. Our first job to do moving forward is to allow between ...

Region Picker region representative geographical "marker" placements on the ...
interfacing GeoJson world map ...
be able to be right clicked to flag sets of two such right clicks defining endpoints for a Trip "Leg" drawn as a straight line with huge thanks to ...
<style>
.crossedtotl { // thanks to https://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-with-css background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } .crossedtotr { background: linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); }
</style>
... and from there be able to ...
hover over a leg to see bearing and distance information ... as well as to ...
click a leg to show a Google Directions webpage

... via ...

... for the changed latest draft Region Picker.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged $_GET, $_POST, above the fold, absolute, address bar, API, argument, attribute, background, background-position, bearing, breadcrumbs, button, canvas, cartography, circle, click, client, clientside, clip-path, colour, colour code, colour matching, column, content, context, continent, country, country code, CSS, data, data attributes, degree, delimiter, details, Did you know, distance, document.getElementsByTagName, DOM, double click, dropdown, dynamic, Earth, element, emoji, emoji flag, error, event, event.stopPropagation, fill, flag, font size, form, GD, geo chart, geography, geojson, gesture, getElementById, global data attributes, Google chart, Google Directions, Google Earth, Google Translate, graphics, hash, hashtag, hashtagging, hotkey, hover, HTML, IFRAME, image, image chart, img, inhouse, innerHTML, innerText, inode, integration, internationalization, iso code, iso country code, ISO-3166, Javascript, keyboard, language, left, leg, legend, length, link, Linux, location.hash, lookup, magnify, Mapping, margin-left, margin-top, marker, mathematics, menu, Mercator, mobile, navigation, Object Oriented Programming, offset, onblur, onclick, oncontextmenu, ondblclick, onload, onmousemove, OOP, opacity, overlay, parameter, PHP, picker, pixel, pole, popup, popup window, post, programming, projection, prompt, property, pulldown, pulldown menu, realia, reality, region, regional, regional indicator, representation, request, resize, reveal, right click, scale, select, setAttribute, setTimeout, shade, shading, static, sticky, summary, SVG, text, textbox, timezone, top, touch, translate, translation, trip, trip planner, tutorial, unix, url, user experience, UX, vertical bar, view, web browser, who framed roger rabbit, Wikipedia, window.open, workflow, world, wrapper, z-index, zoom | Leave a comment

Region Picker GeoChart Region Wikipedia Representations Tutorial

Posted on June 27, 2024 by admin

Region Picker GeoChart Region Wikipedia Representations Tutorial

WordPress Blog 404.php (missing webpage page) logic we’ve tailored for all manner of image production purposes helping out …
a changed latest draft Region Picker web application …

… calling that 404.php helper. And it’s within that changed 404.php …

… logic we get the great help from Wikipedia to make up for …

lack of boundary regional definition on a Google Chart Geo Chart marker map … with …
Wikipedia’s representative region positioning, thanks, we can present as the …
1. region name … toggleable backwards and forwards to …
2. region marker
… on the Google Chart Geo Chart marker map now displayed to the user instead of what used to be a Google Chart Image Chart Map Chart regional boundary map … (please pass the tissues … fisst).

Previous relevant Region Picker GeoJson Area of Interest Tutorial is shown below.

Region Picker GeoJson Area of Interest Tutorial

user has picked a country of interest and has gone “The Whole Shebang” resulting in those …
tutti-frutti region links below the Image Chart (rightmost) button …
one of which the user clicks/touches … resulting in …
presentation of inhouse menu prompt window … where …
option “J” (for GeoJson World Map option) is presented (because a relevant latitude and longitude were found) … and “lo and behold” …
user types in J …
user does not click Cancel at the next prompt window … ready for it …

as of today two new buttons appear …

Mobile	Non-mobile

… to the right of the subheading … and while we’re there see how the innards …

Mobile	Non-mobile
<button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:yellow; id=twoc onclick=’event.stopPropagation(); parent.dotwoc();’>Circle of Interest via Next 2 Double Clicks</button> <button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:magenta; id=twoc onclick=’event.stopPropagation(); parent.dotwor();’>Rectangle via 2 Double Clicks</button>	<button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:yellow; id=twoc onclick=’event.stopPropagation(); parent.dotwoc();’>Circle of Interest via Next 2 Right Clicks</button> <button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:magenta; id=twoc onclick=’event.stopPropagation(); parent.dotwor();’>Rectangle via 2 Right Clicks</button>

Mobile

Non-mobile

<button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:yellow; id=twoc onclick=’event.stopPropagation(); parent.dotwoc();’>Circle of Interest via Next 2 Right Clicks</button> <button title=’One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom’ oncontextmenu=’ event.stopPropagation(); parent.setdefzoom(1); ‘ style=background-color:magenta; id=twoc onclick=’event.stopPropagation(); parent.dotwor();’>Rectangle via 2 Right Clicks</button>

means of the iframe onload event
means of referring back to parent operations via references like …
parent.setdefzoom(1); // which is setting the variable "defzoom", back in the parent, to 1
… in this new Javascript …
var oneoftwo=0, xinxy=[], yinxy=[], opis='1.0', ovnum=1, defzoom=2, nextv='hidden'; var zaconto=null; // this is populated at the iframe element's onload event function function getxynow(e) { e = e || window.event; e.preventDefault(); if (e.touches) { if (e.touches[0].pageX) { xinxy.push(eval(e.touches[0].pageX + document.body.scrollLeft * 0) * browserZoomLevel * 0); yinxy.push(eval(e.touches[0].pageY + document.body.scrollTop * 0) * browserZoomLevel * 0); } else { xinxy.push(eval(e.touches[0].clientX + document.body.scrollLeft * 0) * browserZoomLevel * 0); yinxy.push(eval(e.touches[0].clientY + document.body.scrollTop * 0) * browserZoomLevel * 0); } } else if (e.clientX || e.clientY) { xinxy.push(e.clientX + document.body.scrollLeft * 0); yinxy.push(e.clientY + document.body.scrollTop * 0); } else { xinxy.push(e.pageX + document.body.scrollLeft * 0); yinxy.push(e.pageY + document.body.scrollTop * 0); } if (1 == 3 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { alert('' + xinxy.length); } //filloutform(e,0); //yinxy[eval(-1 + yinxy.length)]=eval(-385 + eval('' + yinxy[eval(-1 + yinxy.length)])); if (eval('' + xinxy.length) == 2) { overlayit(0); } } function dotwor() { if (oneoftwo == 1) { defzoom++; } else { defzoom=2; } oneoftwo=1; } function dotwoc() { //alert(45); if (oneoftwo == -1) { defzoom++; } else { defzoom=2; } oneoftwo=-1; } function alternatevisibility() { var igh=1; while (zaconto.getElementById('iciov' + igh)) { if (igh == 1 && zaconto.getElementById('iciov' + igh).outerHTML.indexOf('visibility:') == -1) { nextv='hidden'; } else if (igh == 1 && zaconto.getElementById('iciov' + igh).outerHTML.split('visibility:')[1].split(';')[0].split('>')[0].toLowerCase().indexOf('visible') != -1) { nextv='hidden'; } else if (igh == 1) { nextv='visible'; } zaconto.getElementById('iciov' + igh).style.visibility='' + nextv; igh++; } } function overlayit(ootis) { var prerest='', zb=''; if (ootis == 0) { //alert('here0'); if (eval('' + xinxy.length) == 2) { //alert('here1'); if (ovnum == 1) { // thanks to https://stackoverflow.com/questions/69491728/how-to-zoom-an-image-on-mouse-hover-using-css prerest=' .zoom-img { width: ' + zaconto.getElementById('myimg').width + 'px; height: ' + zaconto.getElementById('myimg').height + 'px; overflow: hidden; } .zoom-img:hover { transform: scale(2.0); } '; } if (defzoom != 2) { zb=' #iciov' + ovnum + ':hover { z-index:1789; transform: scale(' + defzoom + '.0); } '; } //alert('here2'); if (oneoftwo < 0) { // circle if (1 == 3 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { alert(1); } zaconto.getElementById('myimg').style.opacity='1.0'; //alert(11); zaconto.getElementById('imgmore').innerHTML+=zaconto.getElementById('myimg').outerHTML.replace(/myimg/g,'iciov' + ovnum).replace('56;','2365;background-color:transparent;width:360px;height:180px;').replace(/\\\"\\ on/g, '\" data-on').replace('<img ','<img class=zoom-img ').replace(' src=',' src=/HTMLCSS/HYP_50M_SR_W.jpg width=360 height=180 data-src=').replace(' usemap=', ' data-usemap='); //alert(zaconto.getElementById('myimg').outerHTML.replace(/myimg/g,'iciov' + ovnum).replace('56;','365;background-color:transparent;width:360px;height:180px;').replace(/\\\"\\ on/g, '\" data-on').replace('<img ','<img class=zoom-img ').replace(' src=',' src=/HTMLCSS/HYP_50M_SR_W.jpg width=360 height=180 data-src=')); opis='' + eval(-0.1 + eval('' + opis)); zaconto.getElementById('myimg').style.opacity='' + opis; //alert(1111); zaconto.getElementById('dvstyle').innerHTML+='<style> ' + prerest + zb + ' #iciov' + ovnum + ' { margin-top: -385px; -webkit-filter: brightness(110%); filter: brightness(110%); transform-origin: ' + xinxy[0] + 'px ' + yinxy[0] + 'px; clip-path: circle(' + Math.sqrt(eval(xinxy[0] - xinxy[1]) * eval(xinxy[0] - xinxy[1]) + eval(yinxy[0] - yinxy[1]) * eval(yinxy[0] - yinxy[1])) + 'px at ' + xinxy[0] + 'px ' + yinxy[0] + 'px); } </style>'; //alert('<style> ' + prerest + zb + ' #iciov' + ovnum + ' { -webkit-filter: brightness(150%); filter: brightness(150%); transform-origin: ' + xinxy[0] + 'px ' + yinxy[0] + 'px; clip-path: circle(' + Math.sqrt(eval(xinxy[0] - xinxy[1]) * eval(xinxy[0] - xinxy[1]) + eval(yinxy[0] - yinxy[1]) * eval(yinxy[0] - yinxy[1])) + 'px at ' + xinxy[0] + 'px ' + yinxy[0] + 'px); } </style>'); //alert(zaconto.getElementById('imgmore').innerHTML + zaconto.getElementById('dvstyle').innerHTML); } else { // rectangle zaconto.getElementById('myimg').style.opacity='1.0'; zaconto.getElementById('imgmore').innerHTML+=zaconto.getElementById('myimg').outerHTML.replace(/myimg/g,'iciov' + ovnum).replace('56;','2365;position:absolute;background-color:transparent;top:0px;left:0px;').replace(/\\\"\\ on/g, '\" data-on').replace('<img ','<img class=zoom-img ').replace(' src=',' src=/HTMLCSS/HYP_50M_SR_W.jpg width=360 height=180 data-src=').replace(' usemap=', ' data-usemap='); opis='' + eval(-0.1 + eval('' + opis)); zaconto.getElementById('myimg').style.opacity='' + opis; zaconto.getElementById('dvstyle').innerHTML+='<style> ' + prerest + zb + ' #iciov' + ovnum + ' { margin-top: -385px; -webkit-filter: brightness(110%); filter: brightness(110%); transform-origin: ' + eval(eval(xinxy[0] + xinxy[1]) / 2) + 'px ' + eval(eval(yinxy[0] + yinxy[1]) / 2) + 'px; clip-path: polygon(' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px' + '); } </style>'; } if (ovnum == 1) { setInterval(alternatevisibility, 15000); } ovnum++; } oneoftwo=ootis; defzoom=2; xinxy=[]; yinxy=[]; } } function setdefzoom(inv) { defzoom=inv; } function setoneoftwo(inv) { defzoomoneoftwo=inv; } function getoneoftwo() { return oneoftwo; }
… realized, back in the iframe …
<iframe onload='if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { ifcheck(this); } else { nonmifcheck(this); }' name=ifcountries id=ifcountries style='border-top:5px solid transparent;border-left:5px solid transparent;display:none;width:100%;height:900px;z-index:987;margin:0 0 0 0;padding:0 0 0 0;' src=''></iframe>
… onload (via …
document.getElementById('ifcountries').src='//www.rjmprogramming.com.au/HTMLCSS/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564);
… type call) event function (non-mobile one semi-shown below) …
function nonmifcheck(ziois) { // non-mobile iframe onload event function var waszoom=1; var sparear=null, gsparear=null; var xif=-999, yif=-999, xxif=-999, yyif=-999; zaconto = (ziois.contentWindow || ziois.contentDocument); if (zaconto.document) { zaconto = zaconto.document; } // ... // used later into the function, as well as in that new Javascript above, everywhere ... // zaconto.getElementsByTagName('table')[0].style.top='385px'; zaconto.getElementsByTagName('table')[0].style.left='0px'; if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { zaconto.getElementsByTagName('h3')[0].style.marginTop='6px'; zaconto.getElementsByTagName('h3')[0].innerHTML+=" <button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); parent.dotwoc();'>Circle of Interest via Next 2 Right Clicks</button> <button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); parent.dotwor();'>Rectangle via 2 Right Clicks</button><div id=imgmore></div><div id=dvstyle>"; zaconto.body.oncontextmenu=function(event){ if (parent.getoneoftwo() == 0) { event=event; } else if (Math.abs(parent.getoneoftwo()) == 1) { event.stopPropagation(); parent.getxynow(event); if (parent.getoneoftwo() < 0) { parent.setoneoftwo(eval(-1 + eval('' + parent.getoneoftwo()))); } else { parent.setoneoftwo(eval(1 + eval('' + parent.getoneoftwo()))); } } else if (Math.abs(parent.getoneoftwo()) == 2) { event.stopPropagation(); parent.getxynow(event); if (1 == 3) { parent.overlayit(0); } } }; } else { zaconto.getElementsByTagName('h3')[0].innerHTML+=" <button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); parent.dotwoc();'>Circle of Interest via Next 2 Double Clicks</button> <button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); parent.dotwor();'>Rectangle via 2 Double Clicks</button><div id=imgmore></div><div id=dvstyle>"; zaconto.body.ondblclick=function(event){ if (parent.getoneoftwo() == 0) { event=event; } else if (Math.abs(parent.getoneoftwo()) == 1) { event.stopPropagation(); parent.getxynow(event); if (parent.getoneoftwo() < 0) { parent.setoneoftwo(eval(-1 + eval('' + parent.getoneoftwo()))); } else { parent.setoneoftwo(eval(1 + eval('' + parent.getoneoftwo()))); } } else if (Math.abs(parent.getoneoftwo()) == 2) { event.stopPropagation(); parent.getxynow(event); if (1 == 3) { parent.overlayit(0); } } }; } // ... }
… and yet, elements are added to the “iframe child” (rather than to the parent document.body element) here … believe me … this, and using the Mercator Projection means of moving between “pixel land” and “latitude and longitude land”, is better!

which have the on hover blurb …

One click uses hover 2x zoom afterwards … more for larger zoom … right click for no zoom

… which is just to say that the more clicks in a row of the button, the more resultant zoom goes into an onmouseover “hover” over that intermittently shown “circle” or “polygon” rectangle clip-path affected image (ie. img) overlay element placed according to the 2x set of user right click sets (for non-mobile) or double click sets (for mobile) the user subsequently makes on the GeoJson world map above these new buttons

As such, onto the recent Region Picker Area of Interest Tutorial we have a changed latest draft Region Picker for you to try all this out.

Previous relevant Region Picker Area of Interest Tutorial is shown below.

Region Picker Area of Interest Tutorial

Recently we stumbled across the intriguing CSS property clip-path and set ourselves a one day thinking time to see whether we could make use of this CSS feature.

And then it occurred to us with our recent Region Picker, as talked about at yesterday’s Region Picker Google Translate Tutorial, with that …

Image Chart Map Chart interfacer … call … off …
ondblclick event (ie. double click) of right hand Image Chart button

… scenario, regular readers may remember beginning as a concept back at the posting of Region Picker Double Click Tutorial, how …

an intermittent (because the highlighting used can meddle with the original colour coding reasoning) highlighting …
<?php echo ”
<body onkeydown=\"return okd(event);\" style=\"width:600px;height:600px;\" onclick=\" if (oneoftwo == 0) { document.getElementById('lastcol').value=''; isclear=false; document.getElementById('imode').value='click'; filloutform(event,1); } else if (Math.abs(oneoftwo) == 1) { getxynow(event); if (oneoftwo < 0) { oneoftwo--; } else { oneoftwo++; } } else if (Math.abs(oneoftwo) == 2) { getxynow(event); overlayit(0); }\" onload=\" setTimeout(thisonl,2000); if (window.opener) { document.getElementById('premyp').innerHTML=lfdfn(window.opener.document.getElementById('myp').outerHTML); document.getElementById('patparent').value=window.opener.document.getElementById('myp').innerHTML; document.getElementById('mopatparent').value=window.opener.document.getElementById('myp').innerHTML; } else if (window.parent) { document.getElementById('premyp').innerHTML=lfdfn(parent.document.getElementById('myp').outerHTML); document.getElementById('patparent').value=parent.document.getElementById('myp').innerHTML; document.getElementById('mopatparent').value=parent.document.getElementById('myp').innerHTML; } \">
“; ?>
… and …
<?php echo ”
<button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); defzoom=1; ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); dotwoc();'>Circle of Interest via Next 2 Clicks</button><br><br> <button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); defzoom=1; ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); dotwor();'>Rectangle via 2 Clicks</button>
“; ?>
… of Image Chart Map Chart image (ie. img) element “area of interest” (for which we’ve coded for “circle” and “polygon” rectangle, so far) …
coupled with “zoom on hover” …
<?php echo ”
var oneoftwo=0, xinxy=[], yinxy=[], opis='1.0', ovnum=1, defzoom=2; function getxynow(e) { e = e || window.event; e.preventDefault(); if (e.touches) { if (e.touches[0].pageX) { xinxy.push(eval(e.touches[0].pageX + document.body.scrollLeft) * browserZoomLevel); yinxy.push(eval(e.touches[0].pageY + document.body.scrollTop) * browserZoomLevel); } else { xinxy.push(eval(e.touches[0].clientX + document.body.scrollLeft) * browserZoomLevel); yinxy.push(eval(e.touches[0].clientY + document.body.scrollTop) * browserZoomLevel); } } else if (e.clientX || e.clientY) { xinxy.push(e.clientX + document.body.scrollLeft); yinxy.push(e.clientY + document.body.scrollTop); } else { xinxy.push(e.pageX + document.body.scrollLeft); yinxy.push(e.pageY + document.body.scrollTop); } //alert('' + xinxy.length); filloutform(e,0); } function dotwor() { if (oneoftwo == 1) { defzoom++; } else { defzoom=2; } oneoftwo=1; } function dotwoc() { if (oneoftwo == -1) { defzoom++; } else { defzoom=2; } oneoftwo=-1; } function alternatevisibility() { var igh=1; while (document.getElementById('iciov' + igh)) { if (igh == 1 && document.getElementById('iciov' + igh).outerHTML.indexOf('visibility:') == -1) { nextv='hidden'; } else if (igh == 1 && document.getElementById('iciov' + igh).outerHTML.split('visibility:')[1].split(';')[0].split('>')[0].toLowerCase().indexOf('visible') != -1) { nextv='hidden'; } else if (igh == 1) { nextv='visible'; } document.getElementById('iciov' + igh).style.visibility='' + nextv; igh++; } } function overlayit(ootis) { var prerest='', zb=''; if (ootis == 0) { if (eval('' + xinxy.length) == 2) { if (ovnum == 1) { // thanks to https://stackoverflow.com/questions/69491728/how-to-zoom-an-image-on-mouse-hover-using-css prerest=' .zoom-img { width: ' + document.getElementById('ici').width + 'px; height: ' + document.getElementById('ici').height + 'px; overflow: hidden; } .zoom-img:hover { transform: scale(2.0); } '; } if (defzoom != 2) { zb=' #iciov' + ovnum + ':hover { transform: scale(' + defzoom + '.0); } '; } if (oneoftwo < 0) { // circle document.getElementById('ici').style.opacity='1.0'; document.getElementById('imgmore').innerHTML+=document.getElementById('ici').outerHTML.replace('ici','iciov' + ovnum).replace('25;','35;position:absolute;background-color:transparent;top:0px;left:0px;').replace(/\\\"\\ on/g, '\" data-on').replace('<img ','<img class=zoom-img '); opis='' + eval(-0.1 + eval('' + opis)); document.getElementById('ici').style.opacity='' + opis; document.getElementById('dvstyle').innerHTML+='<style> ' + prerest + zb + ' #iciov' + ovnum + ' { -webkit-filter: brightness(150%); filter: brightness(150%); transform-origin: ' + xinxy[0] + 'px ' + yinxy[0] + 'px; clip-path: circle(' + Math.sqrt(eval(xinxy[0] - xinxy[1]) * eval(xinxy[0] - xinxy[1]) + eval(yinxy[0] - yinxy[1]) * eval(yinxy[0] - yinxy[1])) + 'px at ' + xinxy[0] + 'px ' + yinxy[0] + 'px); } </style>'; } else { // rectangle document.getElementById('ici').style.opacity='1.0'; document.getElementById('imgmore').innerHTML+=document.getElementById('ici').outerHTML.replace('ici','iciov' + ovnum).replace('25;','35;position:absolute;background-color:transparent;top:0px;left:0px;').replace(/\\\"\\ on/g, '\" data-on').replace('<img ','<img class=zoom-img '); opis='' + eval(-0.1 + eval('' + opis)); document.getElementById('ici').style.opacity='' + opis; document.getElementById('dvstyle').innerHTML+='<style> ' + prerest + zb + ' #iciov' + ovnum + ' { -webkit-filter: brightness(150%); filter: brightness(150%); transform-origin: ' + eval(eval(xinxy[0] + xinxy[1]) / 2) + 'px ' + eval(eval(yinxy[0] + yinxy[1]) / 2) + 'px; clip-path: polygon(' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px' + '); } </style>'; } if (ovnum == 1) { setInterval(alternatevisibility, 15000); } ovnum++; } oneoftwo=ootis; defzoom=2; xinxy=[]; yinxy=[]; } }
“; ?>

… could be a useful value adding part to the changed image_chart.php Google Chart Image Chart Map Chart interfacer used by the changed latest draft Region Picker.

Previous relevant Region Picker Google Translate Tutorial is shown below.

Region Picker Google Translate Tutorial

heading text and some button text … and …
country names

… this Region Picker being a suitable candidate for a “whole of webpage” Google Translation for a URL such as (this Dutch translation version below) …

https://www-rjmprogramming-com-au.translate.goog/HTMLCSS/regions_via_countries.htm?_x_tr_sl=en&_x_tr_tl=nl&_x_tr_hl=en-GB&_x_tr_pto=nui

… or use the language dropdown to the right below …

Previous relevant Region Picker Revealed Iframes Tutorial is shown below.

Region Picker Revealed Iframes Tutorial

Onto yesterday’s Region Picker Emoji Flags Tutorial‘s progress, today, we combine two of our favourite concepts in our push forward …

iframe usage … as a preferable calling mechanism to popup windows, especially on mobile platforms … and our favourite …
reveal functionality via details/summary usage … initially …
<details style=display:none;margin-left:50px; id=dtla1><summary id=smya1>Airports ...</summary><iframe id=ifra1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtlp1><summary id=smyp1>Ports ...</summary><iframe id=ifrp1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtls1><summary id=smys1>Sun Angle ...</summary><iframe id=ifrs1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtlm1><summary id=smym1>Moon Angle ...</summary><iframe id=ifrm1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtlc1><summary id=smyc1>Coriolis Effect ...</summary><iframe id=ifrc1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtli1><summary id=smyi1>Image Chart Image ...</summary><iframe id=ifri1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtli2><summary id=smyi2>Image Chart Legend ...</summary><iframe id=ifri2 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtli><summary id=smyi>Image Chart Image Map ...</summary><iframe name=ifri id=ifri style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtlt1><summary id=smyt1>Timezone ...</summary><iframe name=ifrt1 id=ifrt1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtly1><summary id=smyy1>YouTube ...</summary><iframe name=ifry1 id=ifry1 style=display:none; src=''></iframe></details> <details style=display:none;margin-left:50px; id=dtlo1><summary id=smyo1>Geo Chart ...</summary><iframe name=ifro1 id=ifro1 style=display:none; src=''></iframe></details>

… in the changed latest draft Region Picker (mobile uses iframes and non-mobile uses popups) or Region Picker (uses iframes where possible).

Previous relevant Region Picker Emoji Flags Tutorial is shown below.

Region Picker Emoji Flags Tutorial

Regular readers will know that we are keen on emojis …

regarding their way to attract attention
internationalization assistance
text (content) that is (like a) graphic (display)

singly they are helping with the breadcrumbs
two together in the form of a country ISO-3166 two character code and they (we kind of think, miraculously) turn into the national flag (emoji) for that country

? And mixing these up into the content mix, we do not have to be quite so sheepish about all the English assumptions in the changed latest draft Region Picker.

Did you know?

Previous relevant Region Picker Geo Chart Image Chart GeoJson Tutorial is shown below.

Region Picker Geo Chart Image Chart GeoJson Tutorial

Region Picker calls Image Chart add GeoJson interfacing smarts … and …
Region Picker calls Geo Chart add GeoJson interfacing smarts

… given the lead in work from a couple of days back.

… looking like …

🇦 🇧 🇨 🇩 🇪 🇫
🇬 🇭 🇮 🇯 🇰
🇱 🇲 🇳 🇴 🇵
🇶 🇷 🇸 🇹 🇺
🇻 🇼 🇽 🇾 🇿 ↗

… and contrary to what we often admire, “static content” serves us better than a “dynamic scenario”, with “right clicking” working much faster after the document.body onload event.

Codewise we needed to work on …

Previous relevant Region Picker Mobile Background Position Tutorial is shown below.

Region Picker Mobile Background Position Tutorial

turned the “breadcrumb” style ascii letter links into emoji links (and so “I” got the same width as “W”) … and …
even added line feeds to some “a” country name links to help out so that background image overlapping happens less often to their left … and …
added country name to rightmost “Image Chart Map Chart” button wording … and …
played around with tablet and phone platform background-position (of the country image chart) images …
if (window.self == window.parent && eval('' + screen.width) >= 800 || document.URL.indexOf('?right=') != -1) { document.getElementById('tdleft').style.backgroundPosition='right top'; } else if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { //document.getElementById('tdleft').style.backgroundPosition='' + eval(0.4 * eval('' + screen.width)) + 'px ' + eval(-450 + eval('' + screen.height)) + 'px'; // used to be center top document.getElementById('tdleft').style.backgroundPosition='200px 200px'; // used to be center top } else { document.getElementById('tdleft').style.backgroundPosition='center top'; // used to be center top }

… causing a whole lot less clashing, going on in the changed latest draft Region Picker.

Previous relevant Region Picker Mobile User Experience Tutorial is shown below.

Region Picker Mobile User Experience Tutorial

making the country text bigger and more noticeable as they load the webpage …
<style>
a.ulmenulink { font-size: 28px; /* used to be 14px */ font-weight: bold; /* color: orange; */por background-image: linear-gradient(to right, lightblue 0%, rgb(255,255,127) 100%); text-shadow:-1px 1px 1px #ff2d95; margin-left: 50px; }
<style>
adding left hand side alternative way to get to non-mobile right click “the whole shebang” logic …
<span id=todd title='Navigate to region list for last country selected' style='border:1px solid green;position:fixed;text-shadow:-1px 1px 1px #2dff95;font-size:20px;left:8px;top:80px;text-decoration:underline;cursor:pointer;z-index:3245;' onclick="if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && lastop != null) { thewholeshebang(lastop); } else if (document.getElementById('bremember')) { window.scrollTo(eval(-80 + eval(document.getElementById('bremember').getBoundingClientRect().left)), 0); } ">↗</span>
… making some elements receive a new CSS margin-left property to help out …
<style>
a.ulmenulink { font-size: 28px; font-weight: bold; /* color: orange; */ background-image: linear-gradient(to right, lightblue 0%, rgb(255,255,127) 100%); text-shadow:-1px 1px 1px #ff2d95; margin-left: 50px; } a.ulmenulink, li a { text-decoration: none; color: #006; background-image: linear-gradient(rgba(255,240,240,0.5), rgba(255,242,242,0.5), rgba(255,244,244,0.5), rgba(255,246,246,0.5), rgba(255,248,248,0.5), rgba(255,250,250,0.5)); /* #fff0f0, #fff2f2, #fff4f4, #fff6f6, #fff8f8, #fffafa); */ text-shadow:-1px 1px 1px #2dff95; margin-left: 30px; }
<style>
bunching up the single letter links into a rectangle of links which do not overlay to the left (and as such do not interfere with any country links) …
var nexttodo='A', nextih='                               ', ournext=''; var orignextih=nextih; var newih=''; //registers mouseenter to each element in xelms array nextih+=orignextih; nextih+=orignextih; newih=nextih; for(var xi=0; xi<xelms.length; xi++){ if (eval(('' + xelms[xi].id).length) == 3) { if (('' + xelms[xi].innerHTML).substring(0).substring(0,1) >= nexttodo) { ournext=('' + xelms[xi].innerHTML).substring(0).substring(0,1) //alert('nexttodo=' + nexttodo + ' andpleasedonotbeequalveryoften ournext=' + ournext + ' and ' + xelms[xi].id); while (nexttodo < ournext) { nextih+=' <a style=color:blue;z-index:786; href="#' + xelms[xi].id + '">' + nexttodo + '</a>'; nexttodo=String.fromCharCode(1 + nexttodo.charCodeAt(0)); //alert('Nexttodo=' + nexttodo + ' and ournext=' + ournext + ' and ' + xelms[xi].id); } if (nexttodo <= 'Z') { nextih+=' <a style=color:blue;z-index:786; href="#' + xelms[xi].id + '">' + nexttodo + '</a>'; nexttodo=String.fromCharCode(1 + nexttodo.charCodeAt(0)); } } //else { //alert('no for nexttodo=' + nexttodo + ' and ournext=' + ournext + ' and ' + xelms[xi].id); //} } // more code follows } // end for if (nextih != '') { nextih=nextih.replace('>F', '>F' + ' ' + newih); nextih=nextih.replace('>J', '>J' + ' ' + newih); nextih=nextih.replace('>O', '>O' + ' ' + newih); nextih=nextih.replace('>T', '>T' + ' ' + newih); document.getElementById('myh3').innerHTML=nextih + "                                                                                                                 ↗"; var hrect=document.getElementById('myh3').getBoundingClientRect(); document.getElementById('myh3').style.position='fixed'; document.getElementById('myh3').style.top='38px'; if (8 == 8) { document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,''); document.getElementById('myh3').style.left='380px'; } else { document.getElementById('myh3').style.left='' + hrect.left + 'px'; } document.getElementById('myh3').style.opacity='0.4'; document.getElementById('myh3').style.zIndex='786'; }
improving the “highlight all dropdown options” code …
function selall() { // thanks to https://stackoverflow.com/questions/55486020/how-to-set-values-of-multiple-select-using-javascript const selecte = document.getElementsByTagName('select')[0]; const selectValues = ['']; var soh=selecte.innerHTML; var wassoh=soh; var its='', jits=0; /* Iterate options of select element */ for (const optionx of document.querySelectorAll('#' + selecte.id + ' option')) { /* Parse value to integer */ const valuex = Number.parseInt(optionx.value); /* If option value contained in values, set selected attribute */ if (selectValues.indexOf(valuex) !== -1 || 1 == 1) { optionx.setAttribute('selected', 'selected'); if (soh.indexOf('">' + optionx.innerText + '<') != -1) { soh=soh.replace('">' + optionx.innerText + '<', '" selected>' + optionx.innerText + '<'); } else { its=optionx.innerText; for (jits=eval(-1 + eval('' + optionx.innerText.length)); jits>=2; jits--) { if (its != '' && soh.indexOf('">' + optionx.innerText.substring(0,jits)) != -1) { soh=soh.replace('">' + optionx.innerText.substring(0,jits), '" selected>' + optionx.innerText.substring(0,jits)); its=''; } } } } /* Otherwise ensure no selected attribute on option */ else { optionx.removeAttribute('selected'); } }
add some background colour to any dropdown to help highlight its importance once country is decided upon …
<style>
select { font-size: 7px; font-weight: bold; padding: 2 2 2 2; min-height: 90%; overflow-y: scroll; overflow-y: hidden; background-color: pink; }
<style>
rule out the use of a meta name=”viewport” tag as being any help

… in the changed latest draft Region Picker.

Previous relevant Region Picker Mobile GeoJson Trip Leg Tutorial is shown below.

Region Picker Mobile GeoJson Trip Leg Tutorial

mobile platform turnaround … recognising …
on mobile platforms zooming will be via a spread gesture rather than a zoom button click …
on mobile platforms the previous non-mobile right click logics will have to be replaced by other event logic (today being more “ondblclick” logic) as required …
on mobile platforms we do not want to re-navigate to the GeoJson iframe content, and so we use the iframe URL and add hashtag navigation helpers …
var locationhash=''; function lhit(inh) { locationhash=inh; ifcheck(document.getElementById('ifcountries')); return inh; } function menuize(rans) { var rdescis=lastplace; var latdeg=-999, longdeg=-999; if (gextras.indexOf(' (') != -1) { if (gextras.split('t to (')[1].split(')')[0].indexOf(',') != -1) { latdeg=eval('' + gextras.split('t to (')[1].split(')')[0].split(',')[0]); longdeg=eval('' + gextras.split('t to (')[1].split(')')[0].split(',')[1]); } } else if (storedsuffs.indexOf('~' + lpw(lastplace) + '`') != -1 && storedsuffs.indexOf('~' + lpw(lastplace) + '`@') == -1) { gextras=storedsuffs.split('~' + lpw(lastplace) + '`')[1].split('@')[0]; if (gextras.split(' (')[1].split(')')[0].indexOf(',') != -1) { latdeg=eval('' + gextras.split(' (')[1].split(')')[0].split(',')[0]); longdeg=eval('' + gextras.split(' (')[1].split(')')[0].split(',')[1]); } } if ((rans + ' ').toUpperCase().substring(0,1) == 'W') { if (rdescis == '') { window.open('//wikipedia.org','_blank','top=180,left=400,width=600,height=600'); } else { window.open('//wikipedia.org/wiki/' + encodeURIComponent(rdescis.replace(/\ $/g,', ').replace(/$$/g,'')).replace(/\%20/g,'_'),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } } else if ((rans + ' ').toUpperCase().substring(0,1) == 'I') { tryit(); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'Y') { if (rdescis == '') { window.open('//www.youtube.com','_blank','top=180,left=400,width=600,height=600'); } else { window.open('//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=' + encodeURIComponent(' ' + rdescis.replace(/\ $/g,', ').replace(/$$/g,'')),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } } else if ((rans + ' ').toUpperCase().substring(0,1) == 'G') { if (rdescis == '') { window.open('//www.google.com','_blank','top=180,left=400,width=600,height=600'); } else { window.open('//www.google.com/search?q=' + encodeURIComponent(rdescis.replace(/\ $/g,', ').replace(/$$/g,'')) + '&tbm=isch','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } } else if ((rans + ' ').toUpperCase().substring(0,1) == 'T') { // && eval(('' + document.getElementById('myp').getAttribute('data-fc')).length) == 2) { if (rdescis == '') { window.open('//www.rjmprogramming.com.au/PHP/tz_places.php','_blank','top=180,left=400,width=800,height=600'); } else { window.open('//www.rjmprogramming.com.au/PHP/tz_places.php?iso=' + ('' + lastcode + ' ').toUpperCase().substring(0,2).trim(),'_blank','top=' + ys + ',left=' + xs + ',width=800,height=' + Math.max(100,eval(-100 + screenheight - ys))); } } else if ((rans + ' ').toUpperCase().substring(0,1) == 'A' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Airports iwo=window.open('//www.rjmprogramming.com.au/HTMLCSS/intair.php?num=3&lat=' + latdeg + '&long=' + longdeg + '&spawn=' + encodeURIComponent('//www.rjmprogramming.com.au/PHP/Map/map.php?title=' + maybenot(document.getElementById('myp').getAttribute('data-fc').toUpperCase(),rdescis) + ';' + encodeURIComponent(rdescis) + '%' + '20and%' + '20Airports&onclick=y&justmenu=y&label=[%' + '27Lat%' + '27,&value=%' + '27Lon%' + '27,%' + '27Name%' + '27]&data=,' + '[' + latdeg + ',' + longdeg + ',~' + encodeURIComponent(rdescis).replace(/\-/g,'%' + '2d').replace(/\#/g,'%' + '23') + '~]'),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'P' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Ports iwo=window.open('//www.rjmprogramming.com.au/HTMLCSS/intair.php?num=4&lat=' + latdeg + '&long=' + longdeg + '&port=y&spawn=' + encodeURIComponent('//www.rjmprogramming.com.au/PHP/Map/map.php?title=' + maybenot(document.getElementById('myp').getAttribute('data-fc').toUpperCase(),rdescis) + ';' + encodeURIComponent(rdescis) + '%' + '20and%' + '20Ports&onclick=y&justmenu=y&label=[%' + '27Lat%' + '27,&value=%' + '27Lon%' + '27,%' + '27Name%' + '27]&data=,' + '[' + latdeg + ',' + longdeg + ',~' + encodeURIComponent(rdescis).replace(/\-/g,'%' + '2d').replace(/\#/g,'%' + '23') + '~]'),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'S' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Sun Angle window.open('//www.rjmprogramming.com.au/PHP/SunAngle/sun_angle_now_at.php?latd=' + ('' + latdeg).split('.')[0] + '&latm=' + Math.round(eval(eval('0.' + ('' + latdeg + '.0').split('.')[1]) * 60)) + '&lats=0&longd=' + ('' + longdeg).split('.')[0] + '&longm=' + Math.round(eval(eval('0.' + ('' + longdeg + '.0').split('.')[1]) * 60)) + '&longs=0&from=from&done=y','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'M' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Moon Angle window.open('//www.rjmprogramming.com.au/PHP/MoonAngle/moon_angle_now_at.php?latd=' + ('' + latdeg).split('.')[0] + '&latm=' + Math.round(eval(eval('0.' + ('' + latdeg + '.0').split('.')[1]) * 60)) + '&lats=0&longd=' + ('' + longdeg).split('.')[0] + '&longm=' + Math.round(eval(eval('0.' + ('' + longdeg + '.0').split('.')[1]) * 60)) + '&longs=0&from=from&done=y','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'C' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Coriolis Effect window.open('//www.rjmprogramming.com.au/PHP/Coriolis/coriolis_force_at.php?latd=' + ('' + latdeg).split('.')[0] + '&latm=' + Math.round(eval(eval('0.' + ('' + latdeg + '.0').split('.')[1]) * 60)) + '&lats=0&longd=' + ('' + longdeg).split('.')[0] + '&longm=' + Math.round(eval(eval('0.' + ('' + longdeg + '.0').split('.')[1]) * 60)) + '&longs=0&from=from&done=y','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'E' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Google Earth window.open('//earth.google.com/web/@' + ('+' + latdeg).replace('+-','-') + (',+' + longdeg).replace('+-','-') + ',328.51120179a,63169669.71505167d,1y,0h,0t,0r','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'O' && latdeg >= -91 && gextras.indexOf(' (') != -1) { // Geo Chart iwo=window.open('//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php' + '?title=' + maybenot(document.getElementById('myp').getAttribute('data-fc').toUpperCase(),rdescis) + ';' + encodeURIComponent(rdescis).replace(/\-/g,'%' + '2d').replace(/\#/g,'%' + '23') + '&aregexographicals=y&aregeographicals=&width=500&height=312&onclick=y&country=Places&popularity=&data=%20[' + latdeg + '|' + longdeg + '|~' + encodeURIComponent(rdescis).replace(/\-/g,'%' + '2d').replace(/\#/g,'%' + '23') + '~,2]','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); } else if ((rans + ' ').toUpperCase().substring(0,1) == 'J') { // GeoJSON //window.open('//www.rjmprogramming.com.au/HTMLCSS/countries.html','ifcountries','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys))); if (latdeg < -990 && longdeg < -990) { jjans=jjans + ' '; } // if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { // jjans=jjans.replace('No Trip Planning','Yes Trip Planning'); // } if (sofararealist.indexOf('|' + ('' + lastcode + ' ').toUpperCase().substring(0,2).trim() + '|') == -1) { sofararealist+=('' + lastcode + ' ').toUpperCase().substring(0,2).trim() + '|'; } if (1 == 9 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (1 == 6) { zwin=window.open('//www.rjmprogramming.com.au/HTMLCSS/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564), '_blank'); } // 'ifcountries'); } else { if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && document.getElementById('ifcountries').src.indexOf('?') != -1 && document.getElementById('ifcountries').src.indexOf('/countries.') != -1) { document.getElementById('placegeo').value=''; document.getElementById('placegeo').title='' + latdeg + ',' + longdeg; sofararealist+=('' + lastcode + ' ').toUpperCase().substring(0,2).trim() + '|'; zoomword='zoom'; refreshword='refresh'; document.getElementById('ifcountries').src+=lhit('#' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564)); } else { document.getElementById('ifcountries').src='//www.rjmprogramming.com.au/HTMLCSS/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564); } } lastr=rdescis; if ((latdeg < -990 && longdeg < -990) || blurbone == '') { if (confirm('Taking you to ' + decodeURIComponent(rdescis) + ' on world map now' + blurbone + ' ...')) { jjans=jjans.replace('No Trip Planning','Yes Trip Planning').replace(/\ \ \ \ \ $/g,''); if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { document.getElementById('ifcountries').style.display='block'; //document.getElementById('ifcountries').src='//www.rjmprogramming.com.au/HTMLCSS/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564); //zwin=window.open('//www.rjmprogramming.com.au/HTMLCSS/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564), 'ifcountries'); // 'ifcountries'); location.href='#dstyle'; } else { document.getElementById('ifcountries').style.display='block'; //document.getElementById('more').style.display='none'; location.href='#dstyle'; } } } else { jjans=jjans.replace(/\ \ \ \ \ $/g,''); jjans=prompt('Taking you to ' + decodeURIComponent(rdescis) + ' on world map now' + blurbtwo + ' ...', '' + jjans); if (jjans != null) { document.getElementById('ifcountries').style.display='block'; //document.getElementById('more').style.display='none'; location.href='#dstyle'; } } } }

… in the changed latest draft Region Picker for our ongoing quest to improve the user experience of our Region Picker on mobile platforms.

Previous relevant Region Picker GeoJson Trip Leg Right Click Tutorial is shown below.

Region Picker GeoJson Trip Leg Right Click Tutorial

Regular readers know that we enjoy event-driven programming. And we really enjoy scenarios where a whole layer of new functionality is possible via an event design initiative, and today we have a …

right click
… or …
oncontextmenu

… event gala (minus any “h” appendix, thank you very much) for you.

It’s very rare that when you rely on a generic representation of a large entity with a single entity you will satisfy all users. And so, as far as yesterday’s …

Region Picker region representative geographical “marker” placement

GeoJson world map …
image map …
area subelement scouring … we could start adding to the relevant ones a whole …
new layer of right click event (ie. oncontextmenu event) Javascript logic in amongst the iframe onload event function below …
function ifcheck(ziois) { var waszoom=1; var sparear=null, gsparear=null; var xif=-999, yif=-999, xxif=-999, yyif=-999; zaconto = (ziois.contentWindow || ziois.contentDocument); //alert(11); zzaconto=zaconto; if (zaconto != null) { //alert('111 ' + xiois.src); try { if (zaconto.document) { zaconto = zaconto.document; } //alert('1111 ' + zaconto.body.innerHTML); if (zaconto.body.innerHTML.indexOf('>') != -1) { zoomdone=false; lastiizoom=(ziois.src.indexOf('zoom=') != -1 ? eval(ziois.src.split('zoom=')[1].split('&')[0].split('#')[0]) : lastiizoom); var itwo=''; if (document.getElementById('myp')) { itwo=('' + document.getElementById('myp').getAttribute('data-fc')).replace(/^null/g,'').replace(/^undefined/g,'').trim().toUpperCase(); } if (itwo == '' && lastcode != '') { itwo=lastcode; } if (eval('' + itwo.length) == 2 || (document.getElementById('placegeo').title + document.getElementById('placegeo').value).trim() != '') { var xlatdeg=0, xlongdeg=0; if ((document.getElementById('placegeo').title + document.getElementById('placegeo').value).indexOf(',') != -1) { xlatdeg=eval('' + (document.getElementById('placegeo').title + document.getElementById('placegeo').value).split(',')[0]); xlongdeg=eval('' + (document.getElementById('placegeo').title + document.getElementById('placegeo').value).split(',')[1]); } if (ziois.src.indexOf('refresh=') != -1 && ziois.src.indexOf('zoom=') != -1) { iizoom=lastiizoom; zaconto.getElementById('mg').onmousedown=function(){ lastiizoom=eval(2 * lastiizoom); setTimeout(parent.rifcheck, 3000); return true; }; zaconto.getElementById('mg').ontouchdown=function(){ lastiizoom=eval(2 * lastiizoom); setTimeout(parent.rifcheck, 3000); return true; }; setTimeout(rifcheck, 2000); //alert('Where'); return true; } else { iizoom=eval(eval('' + ('' + zaconto.getElementById('myimg').style.width).replace('px','')) / 360); //eval('' + zaconto.getzoom()); } xif=eval(iizoom * eval(180 + eval('' + xlongdeg))); yif=eval(iizoom * eval(90 - eval('' + xlatdeg))); //alert('' + xif + ',' + yif); //alert(itwo); var isp=0; var jsp=0; if (eval('' + itwo.length) == 2) { if (xif >= -180 && yif >= -90) { if (lastiizoom != iizoom || ziois.src.indexOf('refresh=') != -1) { var huhrect=document.getElementById('ifcountries').getBoundingClientRect(); var ospancount=spancount; newone=eval(1 + spancount); while (document.getElementById('span' + isp)) { if (isp < ospancount) { waszoom=document.getElementById('span' + isp).getAttribute('data-zoom'); if (waszoom != iizoom) { xlatdeg=eval('' + document.getElementById('span' + isp).getAttribute('data-geo').split(',')[0]); xlongdeg=eval('' + document.getElementById('span' + isp).getAttribute('data-geo').split(',')[1]); xxif=eval(iizoom * eval(180 + eval('' + xlongdeg))); yyif=eval(iizoom * eval(90 - eval('' + xlatdeg))); if (1 == 1) { document.getElementById('plots').innerHTML+='<span id=sspan' + spancount + '><span oncontextmenu="event.stopPropagation(); event.preventDefault(); if (isdouble == 0) { storeaway(this); }" data-zoom="' + iiizoom + '" data-iframepos="' + huhrect.left + ',' + huhrect.top + '" data-geo="' + xlatdeg + ',' + xlongdeg + '" title="' + decodeURIComponent(document.getElementById('span' + isp).title) + '" id=span' + spancount + ' style="font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + yyif) + 'px;left:' + eval(eval('' + huhrect.left) + xxif) + 'px;">x</span></span>'; nodiv(isp, spancount); spancount++; jsp++; document.getElementById('span' + isp).style.display='none'; } else { document.getElementById('span' + isp).style.top='' + eval(eval('' + huhrect.top) + yyif) + 'px'; document.getElementById('span' + isp).style.left='' + eval(eval('' + huhrect.left) + xxif) + 'px'; document.getElementById('span' + isp).setAttribute('data-zoom', '' + iizoom); document.getElementById('span' + isp).setAttribute('data-iframepos', '' + huhrect.left + ',' + huhrect.top); document.getElementById('sspan' + isp).innerHTML=document.getElementById('span' + isp).outerHTML; } } } isp++; } } spancount=eval(isp + jsp); if (jjans == jjans.replace(/\ \ \ \ \ $/g,'')) { document.getElementById('plots').innerHTML+='<span id=sspan' + spancount + '><span oncontextmenu="event.stopPropagation(); event.preventDefault(); if (isdouble == 0) { storeaway(this); }" data-zoom="' + iizoom + '" data-iframepos="' + huhrect.left + ',' + huhrect.top + '" data-geo="' + xlatdeg + ',' + xlongdeg + '" title="' + decodeURIComponent(lastr) + '" id=span' + spancount + ' style="font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + yif) + 'px;left:' + eval(eval('' + huhrect.left) + xif) + 'px;">x</span></span>'; spancount++; setTimeout(nospan, 30000); } } sofararealist+=itwo + '|'; var ars=zaconto.getElementsByTagName('area'); for (var iars=0; iars<ars.length; iars++) { while (('' + ars[iars].getAttribute('data-iso2')) == itwo || sofararealist.indexOf('|' + ('' + ars[iars].getAttribute('data-iso2')) + '|') != -1) { //document.title='' + iars + ' ... ' + ('' + ars[iars].getAttribute('data-iso2')); zaconto.getElementsByTagName('table')[0].style.top='385px'; zaconto.getElementsByTagName('table')[0].style.left='0px'; if (ars[iars].outerHTML.indexOf(' onclick="') != -1) { //itwo=' '; if (('' + ars[iars].getAttribute('data-iso2')) == itwo) { sparear=ars[iars]; //document.title+=' ' + 'zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().substring(0,220); if (9 == 9) { //alert(11); sparear.click(); //alert(1); sparear.oncontextmenu=function(event){ event.stopPropagation(); event.preventDefault(); return parent.geojsonrightclick(event,iizoom,isdouble); }; //alert(111); eval('zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().replace(/this\./g,'sparear.').replace(/this\,/g,'sparear,')); } else { eval('zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().replace(/this\./g,'sparear.').replace(/this\,/g,'sparear,')); } } else { gsparear=ars[iars]; //document.title+=' ' + 'zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().substring(0,220); if (9 == 9) { //alert(911); gsparear.click(); //alert(91); gsparear.oncontextmenu=function(event){ event.stopPropagation(); event.preventDefault(); return parent.geojsonrightclick(event,iizoom,isdouble); }; //alert(9111); eval('zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().replace(/this\./g,'gsparear.').replace(/this\,/g,'gsparear,')); } else { eval('zzaconto.' + ars[iars].outerHTML.split(' onclick="')[1].split('"')[0].trim().replace(/this\./g,'gsparear.').replace(/this\,/g,'gsparear,')); } } } iars++; //itwo=''; } if (sparear) { itwo=''; } } } jjans=jjans.replace(/\ \ \ \ \ $/g,''); if (!zoomdone) { lastiizoom=iizoom; zaconto.getElementById('mg').onmousedown=function(){ setTimeout(parent.rifcheck, 3000); return true; }; zaconto.getElementById('mg').ontouchdown=function(){ setTimeout(parent.rifcheck, 3000); return true; }; } else { if (ziois.src.indexOf('refresh=') != -1) { lastiizoom=iizoom; zaconto.getElementById('mg').onmousedown=function(){ setTimeout(parent.rifcheck, 3000); return true; }; zaconto.getElementById('mg').ontouchdown=function(){ setTimeout(parent.rifcheck, 3000); return true; }; } lastiizoom=sein(iizoom); } if (itwo == '') { zaconto.getElementsByTagName('canvas')[0].dispatchEvent(new Event("click", { bubbles: true, // only bubbles and cancelable cancelable: true, // work in the Event constructor clientX: xif, clientY: yif })); if (1 == 2) { if (zaconto.elementsFromPoint) { var elements = zaconto.elementsFromPoint(xif, yif); elements.forEach((elt, i) => { if (i < elements.length - 1) { zaconto.body.dispatchEvent(new Event("click", { bubbles: true, // only bubbles and cancelable cancelable: true, // work in the Event constructor clientX: xif, clientY: yif })); } }); } else { zaconto.elementFromPoint(xif, yif).click(); } } } } } } catch(hgjgs) { } } jjans=jjans.replace(/\ \ \ \ \ $/g,''); return true; } function geojsonrightclick(ev,iiz,isd) { pos3=-999; pos4=-999; if (ev.touches) { if (ev.touches[0].pageX) { pos3 = ev.touches[0].pageX; pos4 = ev.touches[0].pageY; } else { pos3 = ev.touches[0].clientX; pos4 = ev.touches[0].clientY; } console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4); } else if (ev.clientX || ev.clientY) { pos3 = ev.clientX; pos4 = ev.clientY; console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4); } else { pos3 = ev.pageX; pos4 = ev.pageY; console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4); } if (pos3 >= 0 && pos4 >= 0) { if (iiz < lastiizoom) { iiz=lastiizoom; } xlatdeg=eval(90 - eval(eval('' + pos4) / iiz)); xlongdeg=eval(-180 + eval(eval('' + pos3) / iiz)); var huhrect=document.getElementById('ifcountries').getBoundingClientRect(); //alert(' ... second yay! ' + lastiizoom + ' vs ' + iiz + ' ' + ev.clientX + ',' + ev.clientY); if (isdouble == 0) { document.getElementById('plots').innerHTML+='<span id=sspan' + spancount + '><span oncontextmenu="event.stopPropagation(); event.preventDefault(); if (isdouble == 0) { storeaway(this); }" data-zoom="' + iiz + '" data-iframepos="' + huhrect.left + ',' + huhrect.top + '" data-geo="' + xlatdeg + ',' + xlongdeg + '" title="Right Click at ' + xlatdeg + ',' + xlongdeg + '" id=span' + spancount + ' style="font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + pos4) + 'px;left:' + eval(eval('' + huhrect.left) + pos3) + 'px;">❓</span></span>'; storeaway(document.getElementById('span' + spancount)); spancount++; setTimeout(nospan, 30000); isdouble=1; //nolineplease=true; blk='hidden'; setTimeout(isdf, 3000); //alert('Nolineplease'); } else { blk='hidden'; nolineplease=true; //alert('nolineplease'); } } return false; //' ... second yay! ' + lastiizoom + ' vs ' + iiz + ' ' + e.clientX + ',' + e.clientY; }
...
within any programmatically shaded country area (and underlying div and SVG) elements representing the chosen country of interest from the Region Picker parent, and where the user chooses rather than where it is chosen for them

We also allowed for Trip Leg visibility toggling (after the event) via double click, on a leg, functionality in the changed latest draft Region Picker

Previous relevant Region Picker GeoJson Trip Leg Tutorial is shown below.

Region Picker GeoJson Trip Leg Tutorial

Nice legs! Regarding the trips, of course. Trip planning? GeoJson? Region Picker?

Region Picker region representative geographical "marker" placements on the ...
interfacing GeoJson world map ...
be able to be right clicked to flag sets of two such right clicks defining endpoints for a Trip "Leg" drawn as a straight line with huge thanks to ...
<style>
.crossedtotl { // thanks to https://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-with-css background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } .crossedtotr { background: linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); }
</style>
... and from there be able to ...
hover over a leg to see bearing and distance information ... as well as to ...
click a leg to show a Google Directions webpage

... via ...

... for the changed latest draft Region Picker.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged $_GET, $_POST, above the fold, absolute, address bar, API, argument, attribute, background, background-position, bearing, breadcrumbs, button, canvas, cartography, circle, click, client, clientside, clip-path, colour, colour code, colour matching, column, content, context, continent, country, country code, CSS, data, data attributes, degree, delimiter, details, Did you know, distance, document.getElementsByTagName, DOM, double click, dropdown, dynamic, Earth, element, emoji, emoji flag, error, event, event.stopPropagation, fill, flag, font size, form, GD, geo chart, geography, geojson, gesture, getElementById, global data attributes, Google chart, Google Directions, Google Earth, Google Translate, graphics, hash, hashtag, hotkey, hover, HTML, IFRAME, image, image chart, img, inhouse, innerHTML, innerText, inode, integration, internationalization, iso code, iso country code, ISO-3166, Javascript, keyboard, language, left, leg, legend, length, link, Linux, location.hash, lookup, magnify, Mapping, margin-left, margin-top, marker, mathematics, menu, Mercator, mobile, navigation, Object Oriented Programming, offset, onblur, onclick, oncontextmenu, ondblclick, onload, onmousemove, OOP, opacity, overlay, PHP, picker, pixel, pole, popup, popup window, post, programming, projection, prompt, property, pulldown, pulldown menu, realia, reality, region, regional, regional indicator, representation, request, resize, reveal, right click, scale, select, setAttribute, setTimeout, shade, shading, static, sticky, summary, SVG, text, textbox, timezone, top, touch, translate, translation, trip, trip planner, tutorial, unix, url, user experience, UX, vertical bar, view, web browser, who framed roger rabbit, Wikipedia, window.open, workflow, world, z-index, zoom | Leave a comment

Template Literal Backtick Syntax Quote Delimitation Tutorial

Posted on June 26, 2024 by admin

Template Literal Backtick Syntax Quote Delimitation Tutorial

We spend quite a sizeable proportion of our programmatical coding time working out string variable creation where quotes, be they …

Here’s an example of a complex scenario from some Javascript code …

var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Alt\\01f3d5</text></svg>\") 16 0, progress";

… which the Template Literal backtick syntax can simplify to …

var lastcursor=`Url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Alt\\01f3d5</text></svg>") 16 0, progress`;

… with no backslashes needed to achieve the same result. This is a simple example, but please see a Javascript function reworked from that within the recent Form or Prompt Output Tagged Template Literal Tutorial blog posting thread.

Here’s the HTML and Javascript behind the iframe content below …

<html><head><script type=text/javascript> var millis=7656757543; var strings=[''], rest=';' function myTag(strings, beingExp, ageExp, secondageExp, breedExp, streetExp, suburbExp, stateExp) { let str0 = ''; let str1 = ''; let str2 = ''; let str3 = ''; let str4 = ''; let str5 = ''; let str6 = ''; let str7 = ''; for (var ii=0; ii<strings.length; ii++) { if (ii > 7) { rest+=' ' + strings[ii]; } else { eval("str" + ii + ' = "' + strings[ii] + '"'); } } let ageStr; if (ageExp > 99){ ageStr = 'centenarian'; } else { ageStr = 'youngster'; } // We can even return a string built using a template literal return `${str0}${beingExp}${str1}${ageExp}${str2}${secondageExp}${str3}${breedExp}${str4}${streetExp}${str5}${suburbExp}${str6}${stateExp}${str7}` + rest; } if (document.URL.indexOf('?') != -1) { alert(myTag(["one'str",2,3,4], "two'str", "III", "iv", 'seven"str', "six'str", "VII", "viii")); alert(`seconds elapsed = ${Math.floor(millis / 1000)}`); } else { console.log(myTag(["one'str",2,3,4], "two'str", "III", "iv", 'seven"str', "six'str", "VII", "viii")); console.log(`seconds elapsed = ${Math.floor(millis / 1000)}`); } </script></head><body><a style=text-decoration:underline; onclick='location.href=document.URL + String.fromCharCode(63);''=>Click to show backtick calculations to two alert popups</a></body></html>

…

Previous relevant Form or Prompt Output Tagged Template Literal Tutorial is shown below.

Form or Prompt Output Tagged Template Literal Tutorial

Yesterday’s Scrolling Logging Template Literals Primer Tutorial was the precursor to discussing “Tagged Template Literals” …

A more advanced form of template literals are tagged templates.

Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.

The tag function can then perform whatever operations on these arguments you wish, and return the manipulated string. (Alternatively, it can return something completely different, as described in one of the following examples.)

… we’ve adapted into an HTML and Javascript tagged_template_literal.html codebase proof of concept web application closely using the start the webpages above started us with … thanks.

These “Tagged Template” logics helped us separate the chaff (small words magically handled via “Tagged Template” usage) from the wheat (form or prompt arguments formalized by our interactive input) in the English sentence … such as (today’s default) …

That Nala is a wonderful 9 year ( 81 in K9 years ) old Golden Retriever who lives at 33 Charles Street, Lawson, State of Wow.

… we produce as a result of all the efforts, here.

<html> <head> <title>Tagged Template Literals - RJM Programming - July, 2022 ... thanks to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals</title> <style> input { width: 20%; } </style> </head> <body> <h2 title='A Tagged Template Literal regimen is dealing with all the little word stuff between the arguments.'>Tagged Template Literals</h2> <h3>RJM Programming - July, 2022</h3> <h3>Thanks to <a target=_blank title='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals' href='//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals'>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals</a></h3> <p id=blurb></p> <script type='text/javascript'> const prompt = location.search.split('prompt=')[1] ? (one,two) => { return window.prompt(one,two); } : (one,two) => { return two; }; const alert = location.search.split('prompt=')[1] ? (one) => { document.getElementById('blurb').innerHTML=one; return one; } : (one) => { return window.alert(one); }; let being = location.search.split('being=')[1] ? prompt('Being', decodeURIComponent(location.search.split('being=')[1].split('&')[0]).replace(/\+/g,' ')) : prompt('Being', 'Nala'); let age = location.search.split('age=')[1] ? prompt('Age',decodeURIComponent(location.search.split('age=')[1].split('&')[0]).replace(/\+/g,' ')) : prompt('Age','9'); let breed = location.search.split('breed=')[1] ? prompt('Breed',decodeURIComponent(location.search.split('breed=')[1].split('&')[0]).replace(/\+/g,' ')) : prompt('Breed','Golden Retriever'); let street = location.search.split('street=')[1] ? prompt('Street',decodeURIComponent(location.search.split('street=')[1].split('&')[0]).replace(/\+/g,' ')) : prompt('Street','33 Charles Street'); let suburb = location.search.split('suburb=')[1] ? prompt('Suburb',decodeURIComponent(location.search.split('suburb=')[1].split('&')[0]).replace(/\+/g,' ')) : prompt('Suburb','Lawson'); let state = location.search.split('state=')[1] ? prompt('State',decodeURIComponent(location.search.split('state=')[1].split('&')[0]).replace(/\+/g,' ')) : prompt('State','State of Wow'); let secondage = location.search.split('secondage=')[1] ? prompt('K9 Age', decodeURIComponent(location.search.split('secondage=')[1].split('&')[0]).replace(/\+/g,' ')) : prompt('K9 Age', '' + eval(eval('' + age) * 9)); let rest = location.search.split('rest=')[1] ? decodeURIComponent(location.search.split('rest=')[1].split('&')[0]) : ''; function doform() { var ideas=['Being [' + being + ']', 'Age [' + age + ']', 'K9 Age [' + secondage + ']', 'Breed [' + breed + ']', 'Street [' + street + ']', 'Suburb [' + suburb + ']', 'State [' + state + ']']; var aform='<form method=GET onsubmit="checkis();" action=./tagged_template_literal.html><br><br><input type=submit value=Show></input><br><br><input type=submit name=prompt id=prompt value=Prompt></input></form>'; for (var jj=eval(-1 + ideas.length); jj>=0; jj--) { aform=aform.replace('>', '><input type=text onblur="if (this.value.length == 0) { this.value=this.placeholder.split(String.fromCharCode(91))[1].split(String.fromCharCode(93))[0]; }" id=' + ideas[jj].split('[')[0].toLowerCase().replace('k9 age', 'secondage') + ' name=' + ideas[jj].split('[')[0].toLowerCase().replace('k9 age', 'secondage') + ' placeholder="' + ideas[jj] + '" value=""></input><br>'); } document.body.innerHTML+='<br><br>' + aform; //alert(aform); //document.getElementById(ideas[0].split('[')[0].toLowerCase().replace('k9 age', 'secondage')).focus(); window.setTimeout(function () { document.getElementById('being').focus(); }, 1000); } function checkis() { var eis=document.getElementsByTagName('input'); for (var jis=0; jis<eis.length; jis++) { if (eis[jis].value == '' && ('' + eis[jis].placeholder).indexOf('[') != -1) { eis[jis].value=eis[jis].placeholder.split(String.fromCharCode(91))[1].split(String.fromCharCode(93))[0]; } } } function myTag(strings, beingExp, ageExp, secondageExp, breedExp, streetExp, suburbExp, stateExp) { let str0 = ''; let str1 = ''; let str2 = ''; let str3 = ''; let str4 = ''; let str5 = ''; let str6 = ''; let str7 = ''; for (var ii=0; ii<strings.length; ii++) { if (ii > 7) { rest+=' ' + strings[ii]; } else { eval("str" + ii + ' = "' + strings[ii] + '"'); } } let ageStr; if (ageExp > 99){ ageStr = 'centenarian'; } else { ageStr = 'youngster'; } // We can even return a string built using a template literal return `${str0}${beingExp}${str1}${ageExp}${str2}${secondageExp}${str3}${breedExp}${str4}${streetExp}${str5}${suburbExp}${str6}${stateExp}${str7}` + rest; } let output = myTag`That ${ being } is a wonderful ${ age } year ( ${ secondage } in K9 years ) old ${ breed } who lives at ${ street }, ${ suburb }, ${ state }.`; if (document.URL.indexOf('being=') != -1) { alert(output); // That Mike is a youngster. } doform(); </script> </body> </html>

Previous relevant Scrolling Logging Template Literals Primer Tutorial is shown below.

Scrolling Logging Template Literals Primer Tutorial

Yesterday’s Screen Capture API Download Video Tutorial‘a web application code, thanks to Using Screen Capture, used interesting Javascript Template Literals …

Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, for string interpolation with embedded expressions, and for special constructs called tagged templates.

Template literals are sometimes informally called template strings, because they are used most commonly for string interpolation (to create strings by doing substitution of placeholders). However, a tagged template literal may not result in a string; it can be used with a custom tag function to perform whatever operations you want on the different parts of the template literal.

… we’ve adapted for use today in our very simple “Scrolling Logging” console_override.html web application that scrolls like for a command line interactive terminal session …

<html> <head> <title>Console Message Override - RJM Programming - July, 2022</title> <script type='text/javascript'> var logElem=null; var firstisnot=false; var ii=0; function onl() { logElem=document.getElementById('log'); console.log = msg => logElem.innerHTML += (firstisnot ? '<span id=span' + ii + '></span>' + document.getElementById('topbit').innerHTML : '') + `${msg}<br>Brought to you via console.log at ` + new Date() + `<br><br>`; console.error = msg => logElem.innerHTML += `<span class="error">${msg}<br>Brought to you via console.error at ` + new Date() + `</span><br><br>`; console.warn = msg => logElem.innerHTML += `<span class="warn">${msg}<br>Brought to you via console.warn at ` + new Date() + `<span><br><br>`; console.info = msg => logElem.innerHTML += `<span class="info">${msg}<br>Brought to you via console.info at ` + new Date() + `</span><br><br>`; console.log('A console.log message.'); console.error('A console.error message.'); console.warn('A console.warn message.'); console.info('A console.info message.'); if (firstisnot) { document.getElementById('span' + ii).scrollIntoView(); } ii++; firstisnot=true; setTimeout(onl, 4045); } </script> </head> <body onload='onl();'> <div id=topbit> <h2>Console Message Override</h2> <h3>RJM Programming - July, 2022</h3> </div> <h4 id=log></h4> </body> </html>

… in action below …

If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged backslash, backtick, delimitation, delimiter, double quote, HTML, IFRAME, Javascript, programming, programming.tutorial, quote, single quote, syntax, template literal, tutorial, variable | Leave a comment

Google Chrome Web Store Calculator Extension Tutorial

Posted on June 25, 2024 by admin

Google Chrome Web Store Calculator Extension Tutorial

A logical place to look for those fundamental software applications you use regularly can be the web browser you might be using for day to day “surfing the net” usage. And the …

Google Chrome

… web browser has a helping out …

Chrome Web Store

… online repository of Google Chrome friendly software, from which you can install …

Google Chrome Extensions

… which can look like little desktop applications accessible via a Google Chrome web browser …

Extensions icon

… leading a user to any Google Chrome Extensions installed.

We decided to make this happen for the Google Chrome Extension called “Scientific Calculator”, and were pleased with the simplicity and ease of use, after installing.

Other web browser brands will have similar arrangements to extend their web browser functionality into “extension land”.

If this was interesting you may be interested in this too.

Posted in eLearning, Installers, Software, Tutorials | Tagged app, application, calculator, chrome web store, desktop, extension, Google, Google Chrome, install, installer, scientific calculator, tutorial | Leave a comment

Camera App Photo Live Mode AirDrop Sharing Tutorial

Posted on June 24, 2024 by admin

Camera App Photo Live Mode AirDrop Sharing Tutorial

Some time back, with Camera App Photo Live Mode Sharing Tutorial, we discovered …

iOS
Camera app …
Live Photos mode …
Sharing menu … via …
AirDrop … to our macOS MacBook Air …
sends this to your macOS recipient in the image/heic High Efficiency Image File Format

This an Apple format not universally understood by every image editor out there. Gimp can read one but the Paintbrush all coded for macOS does not.

Anyway, the non-live Camera app image formats (and sharing a Live Format image not with AirDrop) share to *.jpeg or *.png image formats, interestingly.

There’s clearly more to learn, here!

Previous relevant Camera App Photo Live Mode Sharing Tutorial is shown below.

Camera App Photo Live Mode Sharing Tutorial

Yesterday’s Camera App Photo Live Mode Primer Tutorial talked about the iOS Camera app’s Live mode functionality, creating an animated GIF type of photo that can be stored in the …

Albums -> Media Types -> Live Photos

… area. Sharing via the Mail option of the Photos app’s Sharing icon and menu lost the “animation” (for the emailee), creating a “still” (photo) as the downloaded media. But, as promised in the Stop Press yesterday, there are some sharing options that can keep that “animated” (GIF) feel …

via Messages app the shared photo will play like an animated GIF on a long touch (perhaps also on non-iOS devices (we did not test this?))
for sharing with other iOS devices within range and operating system viability you can use AirDrop

… as you can see demonstrated below …

Did you know?

In amongst the Apple “stable” this animated GIF “look and feel” is exclusively a (mobile) iOS (ie. iPhone, iPad etcetera) thing. The same SMS viewed on this macOS MacBook Pro displays as a “still” (photo), and the macOS involvement makes it a “still” even forwarding this on to iOS via the macOS Messages app.

Previous relevant Camera App Photo Live Mode Primer Tutorial is shown below.

Camera App Photo Live Mode Primer Tutorial

Meanwhile, back at Apple‘s iPhone Camera App, further to Camera App Video Slow Motion Primer Tutorial, we wanted to find out more about that yellow “dart board” type “button” up the top that can be toggled between …

live off
live

What is “Live Mode” as far as the iOS Camera app goes? We consulted Google and came to How to Use Live Photos on iPhone and iPad …

Basically, a Live Photo is a combination of a video clip and a still image that results in something akin to an animated GIF when long pressed. With the feature enabled, your iPhone or iPad grabs up to 1.5 seconds of video before and up to 1.5 seconds of video after you tap the shutter button.

… as a “very cute” hybrid between “photo” mode and “video” mode and “slo-mo” (video) mode. Afterwards, if your “live” mode photo is saved into Photos it will sit in …

Albums -> Media Types -> Live Photos

… and will present, initially, like a “still”, but touch (for a goodly time), will “very cutely” turn into an animation (like an animated GIF that you control).

So what happens if you share this “live photo” via email? On this MacBook Pro, it gets shared as a “still”. On an iPad (opened email) it shares as a “still”, as it does on the same iPhone device it was taken on, in that iPhone’s Mail app. But …

Touch Photos app icon -> Albums -> Media Types -> Live Photos -> Long Touch on "Live Photo" of interest

… brings the whole “back story” to light.

Stop Press

If you want to share a Live Mode iPhone Camera app photo in an SMS via Messages app or with another Apple iOS device in the same building, the sharing news is better. We’ll demonstrate tomorrow.

Previous relevant Camera App Video Slow Motion Primer Tutorial is shown below.

Camera App Video Slow Motion Primer Tutorial

Continuing the video theme of yesterday’s QuickTime Player Mov Video Conversion Tutorial today we try out the iPhone (ie. iOS) Camera app’s Video mode’s Slo-Mo mode of use.

Get ready for longer but attention grabbing videos straight from the source …

No doubt many of you out there have been trying this feature out yourselves?!

Previous relevant QuickTime Player Mov Video Conversion Tutorial is shown below.

QuickTime Player Mov Video Conversion Tutorial

Yesterday’s Spinning Around Primer Tutorial changed quite a bit between 27th March 2019 06:00 and 11:20 AEST. Why? Well, our iPhone6 saves its videos (from the Camera iOS application) in *.mov format. This *.mov has an associated mimetype video/quicktime and as you may surmise from that mimetype it’s success as a video playing format depends quite a bit on the user having access to the QuickTime Player application. We say quite a bit here because you can sometimes open an *.mov based URL in a web browser of a computer without QuickTime Player installed, and believe I’ve seen the video be played that way, but with yesterday’s tutorial, we were asking the *.mov be played within an HTML video element (albeit one with no cross-domain issues). The problem here even for computers with QuickTime Player installed …

you see a blank black video screen (with controls (because we specified that with our …
<video style='width:100%;' controlshttp://www.rjmprogramming.com.au/wordpress/wp-admin/post.php?post=44345&action=editsource type='video/quicktime' src='http://www.rjmprogramming.com.au/Mac/iPhone/spinning_around.mov'http://www.rjmprogramming.com.au/wordpress/wp-admin/post.php?post=44345&action=edit/source></video>
… video element HTML above)
you click the play button and nothing happens

All a bit disappointing, but please read on.

Then we set out thinking about conversion from …

*.mov to *.m4v via older QuickTime Player Version 10.4 (894.12) (no longer available as of Version 10.5 (928.50)) … which we associated with its video element in Spinning Around Primer Tutorial
*.mov to *.mp4 via ffmpeg and help from this great link, thanks, to use on a MacBook Pro (Terminal application) command line, the command …
ffmpeg -i spinning_around.mov -vcodec h264 -acodec mp2 spinning_around.mp4
… which we associated with clicking on the tutorial picture of yesterday’s Spinning Around Primer Tutorial

… and then reflecting, and thinking this cannot be so, we got to another great link, thanks, and realized that …

<video style='width:100%;' controls><source type='video/mp4' src='http://www.rjmprogramming.com.au/Mac/iPhone/spinning_around.mov'></source></video>

… could be played in the video element, as below …

You can also see this play out at WordPress 4.1.1’s QuickTime Player Mov Video Conversion Tutorial.

Previous relevant Spinning Around Primer Tutorial is shown below.

Spinning Around Primer Tutorial

That Kylie Minogue song “I’m spinning around …” ~~spins~~springs to mind with today’s tutorial.

Have you ever wanted to made a video to try to make yourself, or someone else, dizzy? Well, we thought about this, and decided we’d …

use an iPhone …
start up its Camera app
get it ready for (normal) Video mode
grab a broom
grab a rubber band, the thicker the safer for your iPhone … please be careful …
bind the iPhone onto the broom handle via the rubber band, as tightly as you can
tap the red button awaiting you starting the Video recording, on the iPhone … doh! …
spin the broom handle for a while … we did about 10 seconds
tap the red button to stop recording
share the dizzifying Video, as we do here and below

Are you dizzy yet?

If this was interesting you may be interested in this too.

Posted in eLearning, iOS, Tutorials | Tagged airdrop, app, camera, heic, High Efficiency Image File Format, image format, imge, iOS, iPhone, live photo, live photos, photos, recipient, share, sharing menu | Leave a comment

Sentence Text Word Underlining Selection Tutorial

Posted on June 23, 2024 by admin

Sentence Text Word Underlining Selection Tutorial

We found today, moving on from the recent Sentence Text Word Underlining Primer Tutorial and adding some event logic down the lines of …

Event
selectionchange	… we got nowhere when the nested h2 elements were hosted by a div contenteditable=true trying to apply this and so resorted to …	onclick onfocus

… via …

… combination to see us through with our aim to add a dictionary lookup (thanks The Free Dictionary) component part to the overall functionality of the changed second draft web application you can also try below.

Previous relevant Sentence Text Word Underlining Primer Tutorial is shown below.

Sentence Text Word Underlining Primer Tutorial

Blog posts like Javascript document.querySelectorAll Textarea Placeholder Tutorial go into our interest in …

Text Talents of HTML Elements

Textarea

… versus …

Div

And CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial set out how we see the pros and cons as …

Text Functionality Issue HTML Element Type Strength Weakness (where a “Yes” is like … “Oh No!”)
Display Monocolour Text Textarea Yes

Div Yes

Display Editable Text Textarea Yes

Div Yes

Display Multicolour Text Textarea Yes

Div Yes

Well, yesterday’s XML Lint Validation CSS Background Colour Tutorial showcases HTML textarea talents and today’s tutorial involves a new inhouse HTML and Javascript and CSS Sentence Text Word Underlining web application showing a div element talent.

The initial …

<div style='border:3px dotted yellow; margin: 8 8 8 8; padding: 8 8 8 8;background-color: rgb(230,230,230);' onblur=checkthis(this); contenteditable=true id=dpalette class=noerr><h2 class=err>The </h2> <h2 class=err>rain </h2> <h2 class=err>in </h2> <h2 class=err>Spain </h2> <h2 class=err>falls</h2> <h2 class=err>mainly </h2> <h2 class=err>on </h2> <h2 class=err>the </h2> <h2 class=err>plain. </h2> </div>

… look of the underlining involves pure CSS (with no Javascript help) …

… but our web application allowing for user editing via attribute contenteditable=true needs (the [divElement].innerText help in) Javascript onblur event logic …

… to add that extra level of functionality in the first draft web application you can also try below …

Previous relevant Javascript document.querySelectorAll Textarea Placeholder Tutorial is shown below.

Javascript document.querySelectorAll Textarea Placeholder Tutorial

Thinking of some great Fred and Ginger types of web application partners we have, at the very least …

HTML and Javascript
PHP and MySql
MySql and phpMyAdmin
Ajax and FormData
Webpage and Iframe
Details and Summary
Div and Contenteditable

… and today we’ve partnered Textarea and Placeholder because we’ve discovered that Placeholder (on many browsers and platforms) can be multiline by nature. That suits our style, whereby we try not to bombard users with loads of user entries to have to worry about in web applications, where that is at all possible, but rather resort to intelligent user interaction, often based on delimiters, encouraging the one piece (or perhaps two or three pieces) of information to fill in.

Today’s progress (added to that of yesterday’s Javascript document.querySelectorAll User Scripting Tutorial) concerns that user interaction design to our “Testing Out document.querySelectorAll” web application is to …

replace single line input type=text element with textarea element … and …
replace single line advice in a single line placeholder attribute with a multiline placeholder “blurb” which includes an example

… and, speaking personally, the relief is incredible, as we have had to grapple with the awkwardness of user entry for days now!

We even styled the placeholder thanks to the advice at W3schools, thanks.

And then we thought we’d allow the user to set the example bit of the placeholder as a “starter” for their real entry via a “two times click on the textarea” set of (on document onload event) logic as per …

Again, using this changed qsall.htm‘s live run link you can test this out for yourself.

Previous relevant Javascript document.querySelectorAll User Scripting Tutorial is shown below.

Javascript document.querySelectorAll User Scripting Tutorial

Another user defined feature we can add to yesterday’s Javascript document.querySelectorAll Absolute URL Tutorial‘s functionality list of …

CSS user defined selector default styling for relative URL
CSS user defined styling for relative URL
Onclick logic related to that CSS selector via Javascript document.querySelectorAll for relative URL
Popup window lor refresh mode child iframe src then srcdoc overlay techniques for relative URL that is nothing (ie. this web application)
Absolute URL support as per the top three functionalities above … today we have added …
User defined Javascript scripting (with the ` character delimiter added in case styling or scripting requires the # character)

Yes, Javascript can be user defined and dynamic in an already running execution via Javascript such as …

<head> <script type='text/javascript'> var thejs=location.search.split("thescript=")[1] ? decodeURIComponent(location.search.split("thescript=")[1].split('&')[0]).replace(/\;\ /g, '; ' + String.fromCharCode(10)) : "";; function onl(injs) { if (injs.trim() != '') { var tag = document.createElement('script'); tag.type='text/javascript'; tag.src='data:text/javascript;base64,' + btoa(injs); document.head.appendChild(tag); } } </script> </head> <body onload="document.getElementById('myinput').focus(); onl(thejs);">

Using this changed qsall.htm‘s live run link’s functionalities, we can …

Use dynamically added Javascript to add three dots to top header

Previous relevant Javascript document.querySelectorAll Absolute URL Tutorial is shown below.

Javascript document.querySelectorAll Absolute URL Tutorial

Just quietly, we add onto the functionality of yesterday’s Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial‘s work with the tolerance for the user to try some absolute URL entries as they try the changed qsall.htm live run link.

As we so often find ourselves doing these days we use the “midair” feeling Ajax/FormData techniques to attempt to satisfy the user interactions, as per …

Previous relevant Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial is shown below.

Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial

Many web applications we present at this blog use what we refer to “inhouse” as …

Client Pre-emptive Iframe

… as that “suck it and see” client approach to do some of the “if it exists try it” functionality you might think has to involve a serverside language like PHP. No, all the discussion below, ignores serverside anything, but instead dwells on …

“child” iframe (leaning towards that Client Pre-emptive Iframe) making use of the “fresh start” their “onload” event (and to a lesser extent “onerror”) provides the client (only) programmer …
initially via “src” attribute … but new to today’s work (at least for us, that we can remember) …
initially involve src=”data:text/html;base64,[base64HTMLContent]” that …
(same) “onload” code can redirect that content to another “child” iframe (leaning towards that Client Pre-emptive Iframe) “srcdoc” attribute … and yes, we were not sure until today, but yes …
“child” iframe (leaning towards that Client Pre-emptive Iframe) that gets its content via “srcdoc” attribute does pass through the “onload” event logic where the “document” object exists (a very happy discovery for us (though we’ve probably been assuming it already in projects up to now))

… this “proof of concept” experimenting being incorporated into our “Javascript document.querySelectorAll” project for scenarios …

For relative URL that is blank (ie. uses this same webpage) suffixes of two blanks refreshes and that of four blanks opens new window and that of eight blanks opens new popup window.

… to the point where you may not notice the difference between this “srcdoc” processing compared to the other (single) “src” attribute executions of the web application.

How does the client wooooooorrrrrrrllllllldddd handle base64? Well, for simple data …

btoa (to base64)
atob (from base64)

Why can’t we manage this new functionality in the one pass through the “onload” event logic? Well, any self-respecting webpage content will contain both apostrophe and double quote characters (let alone line feeds and carriage returns) ( but we can if we can get to a Javascript DOM statement like document.getElementById(‘ifsd’).srcdoc=atob((” + ioissrc).split(‘;base64,’)[1]).replace(‘</bo’ + ‘dy>’, ‘ <style> ‘ + selectorplusis + ‘</style> </bo’ + ‘dy>’); ), making it hard to specify on the Javascript codeline constructing your “child” iframe but now this new functionality uses …

We hope you revisit the recent Javascript document.querySelectorAll User Styled Clickable Border Tutorial‘s improvements today’s work represents in the changed qsall.htm live run link is worth it to try the (Pure) Javascript meets CSS ideas above.

Previous relevant Javascript document.querySelectorAll User Styled Clickable Border Tutorial is shown below.

Javascript document.querySelectorAll User Styled Clickable Border Tutorial

Yesterday’s Javascript document.querySelectorAll Primer Tutorial has been “stretched” in functionality in two ways …

yesterday’s user defined selector but static styling is now opened up to user defined styling as well …
we wanted to allow a user defined CSS styling that involves the use of ” BORDER” somewhere adds border clickable elements that satisfy the selector criteria used in …

Yes, we needed to ask for help, and got good help here, thanks (for that doh! moment).

Today’s changed live run link is worth it to try the (Pure) Javascript meets CSS ideas above.

Previous relevant Javascript document.querySelectorAll Primer Tutorial is shown below.

Javascript document.querySelectorAll Primer Tutorial

“Pure Javascript” versus “jQuery” is an issue for many developers of client side web application code logic. More often than not we plump for the former, though there are notable exceptions for us, such as jQuery Ajax is often of use, and we have used the very apt (for today’s topic) jQuery CSS on occasions. But for today’s proof of concept test run of …

document.querySelectorAll([CSS-selector]);

… it’s all “Pure Javascript”. In today’s qsall.html HTML and “Pure Javascript” code you will not find the string “document.querySelectorAll” anywhere because our web application is …

just some header HTML elements and one HTML input type=text “textbox” element and one containing div element and one input type=text to avoid “tabbing out” annoyances …
“textbox” accepts a relative URL in two parts as per …
[relativeURLTo-//www.rjmprogramming.com.au/]#[CSS-selector]
that relative URL is the “src” attribute to an HTML iframe element that overlays (made to be barely visible) header HTML elements and one HTML input type=text “textbox” element … and whose …
“onload” event logic goes …
function checkif(iois) { var ij; if (iois != null) { var aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (selectoris != '') { eles=aconto.querySelectorAll(selectoris); for (ij=0; ij<eles.length; ij++) { eles[ij].style.border='1px dashed red'; } } } } }

… that you can try for yourself with today’s live run link.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged content, contenteditable, CSS, dictionary, div, DOM, event, HTML, IFRAME, innerText, Javascript, onblur, onclick, onfocos, programming, pros and cons, selection, selectionchange, selector, sentence, text, tutorial, word | Leave a comment

Google Chart Image Chart Geojson Issue Tutorial

Posted on June 22, 2024 by admin

Google Chart Image Chart Geojson Issue Tutorial

Do you remember our fears, expressed at Region Picker Popup Menu Tutorial, as we were discussing (what used to be) the brilliant Google Chart Image Chart functionality …

… and we feel we might have “put the mockers” on ourselves, because, as you may have read, Geo Chart Image Chart is due for deprecation soon. In fact, the regime at the moment is fewer and fewer hours up, and we’ll have to turn our attention to alternatives. But what out there can do those regional views where the map effectively hugs the bounds of the data … brilliant, and we think hard to do with your normal Google Charts suite of software? As well as the image element result, even though we need to try out the “ready event” normal Google Charts “print” way to achieve this. So much more useful than involving Javascript. And more fun to work with too, it being a conduit to HTML canvas usage.

… regarding it’s imminent demise (and don’t you just hate the word “deprecation”)?

Well, it happened. Where does that leave our integrations regarding Google Chart Image Chart Map Chart we developed with this inhouse PHP interfacing web application? Well, lots is still showing, “hoping for redemption”, and the GeoJson button functionality is still intact. That is, barring “friendly fire”?!

Yes, we’re not sure when, but maybe at the time of the recent Google Chart Image Chart Map Chart Mainstream Primer Tutorial we may have introduced a bug, and today we’re here to try to remedy that situation. That situation goes …

navigate to image_chart.php
fill in a comma separated list of ISO 2 character country codes into that first textbox …
click GeoJson button

… and it would keep a “cloudy woooorrrrlllllddd map”, alas. We debugged it, using Google Chrome’s web inspector, again. The error message, and here the lesson is to believe the “red squiggle underlining parts” …

for (xij=0; xij<xars.length; xij++) { areacon=''; if (maybenogood(xars[xij].outerHTML,'FR,DE,BR,CN,US,IN,ID,AU,NZ,EG,ZA',aars[Math.max(0,eval(-3 + xij))].outerHTML).indexOf( ... blahde blah ...

… in the context of the presented error …

TypeError: Cannot read properties of undefined (reading ‘outerHTML’)

… prompted us to come up with the amended codeline …

for (xij=0; xij<xars.length; xij++) { areacon=''; if (aars.length > eval(-3 + xij)) { if (maybenogood(xars[xij].outerHTML,'FR,DE,BR,CN,US,IN,ID,AU,NZ,EG,ZA',aars[Math.max(0,eval(-3 + xij))].outerHTML).indexOf( ... blahde blah ... } ...

… made things right again in the changed rangegeo.php PHP helping code for web application GeoJson button logic.

Previous relevant Google Chart Image Chart Map Chart Mainstream Primer Tutorial is shown below.

Google Chart Image Chart Map Chart Mainstream Primer Tutorial

Ever since we discovered the existence of Google Chart Image Chart Map Charts, the first foray ending with the recent Google Chart Image Chart Map Chart GeoJson Onclick Tutorial, we’ve been keen to hive off functionality …

from the overused Google Chart Map Chart (no Image Chart) …
to both …
1. Google Chart Geo Chart and
2. Google Chart Image Chart Map Chart

… given what we’ve learnt regarding each of the above‘s talents, the new member of the interest group bringing regional maps into the picture better for us.

Over many years of integrating the first as the first port of call, though, has us thinking carefully of non “bull at a gate” approaches, and today, we’re only visiting the first idea of our “three point plan” (so far) …

Help itself … map.php … phase 1
Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3

… asking our favourite integrator to take a hit for the good of the team. Currently map.php is stuck in the bedroom, but we fully expect they’ll be out in just a jiffy to show you a “three part” (so far) PHP code intervention sequence here …

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. … welcome back “mappy” …

… and …

<?php echo ”
function gogeo(usug) { if (documentURL.indexOf('data=') != -1) { if ((documentURL + '~').indexOf('&data=~') != -1 && ('' + pardata).replace('undefined','') != '') { documentURL=documentURL + pardata; } var isusdams='" . (isset($_POST['iso']) ? trim(str_replace('+',' ',urldecode($_POST['iso']))) : (isset($_GET['iso']) ? trim(str_replace('+',' ',urldecode($_GET['iso']))) : '')) . "'; if (window.top || isusdams.trim() != '') { if (isusdams.trim() != '') { if (isusdams.indexOf(';') == -1) { isusdams+=';'; } } else if (top.document.URL.indexOf('/dams_usa.htm') != -1) { isusdams='US;'; } else if (top.document.URL.indexOf('/australian_') != -1) { isusdams='AU;'; } else if (document.URL.indexOf('iso=') != -1) { isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';'; } else if (parent.document.URL.indexOf('/tz_places.php?iso=') != -1) { isusdams=parent.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';'; } else if (top.document.URL.indexOf('/tz_places.php?iso=') != -1) { isusdams=top.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';'; } } else if (document.URL.indexOf('iso=') != -1) { isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';'; } if (isusdams != '') { locationhref=toolong((documentURL + '%20,%20[-90.0|0.0|~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=y&').replace('title=','title=' + isusdams).replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]')); } else { locationhref=toolong((documentURL + '%20,%20[-90.0|0.0|~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=y&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]')); } //locationhref=toolong((documentURL + ',[-90.0,0.0,~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=' + agy + '&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]')); //locationhref=toolong((documentURL + '').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=' + agy + '&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]')); } else { locationhref=usug; } if (locationhref != '#') { location.href=locationhref; } locationhref=''; }
“; ?>

… and within the map.php interactivity logic …

<?php
echo ' var title = ourprompt("Enter Map Title (background image URL or image data URI ; separated (followed by ;) before title are options, and suffix by &iso=XX for XX as country code of interest and suffix by &lines=y for overlay clickable link lines and/or suffix by &onclick=y for all onclick functionalities such as &brgplace=[1] for Bearing Distance table and perhaps &brgmode=trip for that table in trip order). Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] ... ' . $promptsuffix . '", "' . str_replace("+"," ",urldecode($GETtitle)). '"); ' . "\n";
?>

… in the changed map.php.php PHP code for our inhouse Google Chart Map Chart interfacer, starting off with “hive offs” to the Geo Chart in this “first of three” (so far) operation we’ve codenamed …

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. … over to you “mappy” …

“first of three” (so far) operation

Previous relevant Google Chart Image Chart Map Chart GeoJson Onclick Tutorial is shown below.

Google Chart Image Chart Map Chart GeoJson Onclick Tutorial

Still on the “reconstituting” trajectory yesterday’s Google Chart Image Chart Map Chart GeoJson Iframe Tutorial had, continuing on with regarding our interfacing to the Google Charts Image Chart Map Chart hosting of GeoJson functionality, today, we “reconstitute” some “onclick” event logics for those brown map infills that occur. Why? Well, we figure user experience wise, people often assume a deliberately colour coded situation like this means that they might glean further information by clicking on that “minority color” at the very least, especially when we are talking “maps”, here.

If you’re happy, and you know it, feel free to honk!

Okay then, what do we do with these new HTML div element “onclick” event logics. Well, so far, we’re showing a list of three nearby timezones, but the main thing is to establish the “infrastructure” to get to this event logic, and often, what you do once there, is less work. Not always, but quite often, we find.

Hived off what the GeoJson World Countries web application already did was …

used to, in its HTML area elements, set up the “onclick” call to that version of function ouralert … so we transferred that across to …
brown coloured reconstituted HTML div elements

… and tweaked code in the changed rangegeo.php PHP helping code for web application GeoJson button logic.

Stop Press

Today’s work met with a previously established PHP code file, again, and so we’ve taken the opportunity, being as we tweaked above, adding new arguments, to change this tz_places.php by adding some more country specific smarts to the resultant display for the scenario where rangegeo.php is calling it.

It’s not full functionality, but also, today, we open the way to some Google Translate translation interfacing with our tweaked image_chart.php PHP web application for you to try.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged bug, debug, debugging, document.title, error, error message, Google chart, Google Chrome, image chart, map chart, programming, red wavy underling, tutorial, underlining, web inspector | Leave a comment

Sentence Text Word Underlining Primer Tutorial

Posted on June 21, 2024 by admin

Sentence Text Word Underlining Primer Tutorial

Blog posts like Javascript document.querySelectorAll Textarea Placeholder Tutorial go into our interest in …

Text Talents of HTML Elements

Textarea

… versus …

Div

And CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial set out how we see the pros and cons as …

Text Functionality Issue HTML Element Type Strength Weakness (where a “Yes” is like … “Oh No!”)
Display Monocolour Text Textarea Yes

Div Yes

Display Editable Text Textarea Yes

Div Yes

Display Multicolour Text Textarea Yes

Div Yes

The initial …

… look of the underlining involves pure CSS (with no Javascript help) …

… but our web application allowing for user editing via attribute contenteditable=true needs (the [divElement].innerText help in) Javascript onblur event logic …

… to add that extra level of functionality in the first draft web application you can also try below …

Previous relevant Javascript document.querySelectorAll Textarea Placeholder Tutorial is shown below.

Javascript document.querySelectorAll Textarea Placeholder Tutorial

Thinking of some great Fred and Ginger types of web application partners we have, at the very least …

HTML and Javascript
PHP and MySql
MySql and phpMyAdmin
Ajax and FormData
Webpage and Iframe
Details and Summary
Div and Contenteditable

replace single line input type=text element with textarea element … and …
replace single line advice in a single line placeholder attribute with a multiline placeholder “blurb” which includes an example

… and, speaking personally, the relief is incredible, as we have had to grapple with the awkwardness of user entry for days now!

We even styled the placeholder thanks to the advice at W3schools, thanks.

Again, using this changed qsall.htm‘s live run link you can test this out for yourself.

Previous relevant Javascript document.querySelectorAll User Scripting Tutorial is shown below.

Javascript document.querySelectorAll User Scripting Tutorial

Another user defined feature we can add to yesterday’s Javascript document.querySelectorAll Absolute URL Tutorial‘s functionality list of …

CSS user defined selector default styling for relative URL
CSS user defined styling for relative URL
Onclick logic related to that CSS selector via Javascript document.querySelectorAll for relative URL
Popup window lor refresh mode child iframe src then srcdoc overlay techniques for relative URL that is nothing (ie. this web application)
Absolute URL support as per the top three functionalities above … today we have added …
User defined Javascript scripting (with the ` character delimiter added in case styling or scripting requires the # character)

Yes, Javascript can be user defined and dynamic in an already running execution via Javascript such as …

Using this changed qsall.htm‘s live run link’s functionalities, we can …

Use dynamically added Javascript to add three dots to top header

Previous relevant Javascript document.querySelectorAll Absolute URL Tutorial is shown below.

Javascript document.querySelectorAll Absolute URL Tutorial

As we so often find ourselves doing these days we use the “midair” feeling Ajax/FormData techniques to attempt to satisfy the user interactions, as per …

Previous relevant Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial is shown below.

Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial

Many web applications we present at this blog use what we refer to “inhouse” as …

Client Pre-emptive Iframe

“child” iframe (leaning towards that Client Pre-emptive Iframe) making use of the “fresh start” their “onload” event (and to a lesser extent “onerror”) provides the client (only) programmer …
initially via “src” attribute … but new to today’s work (at least for us, that we can remember) …
initially involve src=”data:text/html;base64,[base64HTMLContent]” that …
(same) “onload” code can redirect that content to another “child” iframe (leaning towards that Client Pre-emptive Iframe) “srcdoc” attribute … and yes, we were not sure until today, but yes …
“child” iframe (leaning towards that Client Pre-emptive Iframe) that gets its content via “srcdoc” attribute does pass through the “onload” event logic where the “document” object exists (a very happy discovery for us (though we’ve probably been assuming it already in projects up to now))

… this “proof of concept” experimenting being incorporated into our “Javascript document.querySelectorAll” project for scenarios …

For relative URL that is blank (ie. uses this same webpage) suffixes of two blanks refreshes and that of four blanks opens new window and that of eight blanks opens new popup window.

… to the point where you may not notice the difference between this “srcdoc” processing compared to the other (single) “src” attribute executions of the web application.

How does the client wooooooorrrrrrrllllllldddd handle base64? Well, for simple data …

btoa (to base64)
atob (from base64)

Previous relevant Javascript document.querySelectorAll User Styled Clickable Border Tutorial is shown below.

Javascript document.querySelectorAll User Styled Clickable Border Tutorial

Yesterday’s Javascript document.querySelectorAll Primer Tutorial has been “stretched” in functionality in two ways …

yesterday’s user defined selector but static styling is now opened up to user defined styling as well …
we wanted to allow a user defined CSS styling that involves the use of ” BORDER” somewhere adds border clickable elements that satisfy the selector criteria used in …

Yes, we needed to ask for help, and got good help here, thanks (for that doh! moment).

Today’s changed live run link is worth it to try the (Pure) Javascript meets CSS ideas above.

Previous relevant Javascript document.querySelectorAll Primer Tutorial is shown below.

Javascript document.querySelectorAll Primer Tutorial

document.querySelectorAll([CSS-selector]);

just some header HTML elements and one HTML input type=text “textbox” element and one containing div element and one input type=text to avoid “tabbing out” annoyances …
“textbox” accepts a relative URL in two parts as per …
[relativeURLTo-//www.rjmprogramming.com.au/]#[CSS-selector]
that relative URL is the “src” attribute to an HTML iframe element that overlays (made to be barely visible) header HTML elements and one HTML input type=text “textbox” element … and whose …
“onload” event logic goes …
function checkif(iois) { var ij; if (iois != null) { var aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (selectoris != '') { eles=aconto.querySelectorAll(selectoris); for (ij=0; ij<eles.length; ij++) { eles[ij].style.border='1px dashed red'; } } } } }

… that you can try for yourself with today’s live run link.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged content, contenteditable, CSS, div, DOM, HTML, innerText, Javascript, onblur, programming, pros and cons, selector, sentence, text, tutorial, word | Leave a comment

Your Numbers Game
Get clue	Your answer	Your Score
Clue?		Score 0/0

Search for:
Recent Posts
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
November 2024

S M T W T F S

1 2

3 4 5 6 7 8 9

10 11 12 13 14 15 16

17 18 19 20 21 22 23

24 25 26 27 28 29 30

« Oct
Meta
Tags
Ajax animation background button canvas command line CSS div DOM dropdown email emoji event form game games Google Google chart HTML IFRAME image iOS iPad Javascript MAMP map mobile navigation onclick overlay PHP programming select share sharing SMS SVG table text textarea tutorial url video web browser webpage
Your Background Image
OnTopList

Template Literal Backtick Syntax Quote Delimitation Tutorial

Google Chrome Web Store Calculator Extension Tutorial

Sentence Text Word Underlining Selection Tutorial

Google Chart Image Chart Geojson Issue Tutorial

Sentence Text Word Underlining Primer Tutorial

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Your Background Image

OnTopList

Recent Comments

🇦 🇧 🇨 🇩 🇪 🇫 🇬 🇭 🇮 🇯 🇰 🇱 🇲 🇳 🇴 🇵 🇶 🇷 🇸 🇹 🇺 🇻 🇼 🇽 🇾 🇿 ↗

🇦 🇧 🇨 🇩 🇪 🇫 🇬 🇭 🇮 🇯 🇰 🇱 🇲 🇳 🇴 🇵 🇶 🇷 🇸 🇹 🇺 🇻 🇼 🇽 🇾 🇿 ↗

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Tags

Your Background Image

OnTopList

🇦 🇧 🇨 🇩 🇪 🇫
🇬 🇭 🇮 🇯 🇰
🇱 🇲 🇳 🇴 🇵
🇶 🇷 🇸 🇹 🇺
🇻 🇼 🇽 🇾 🇿 ↗

🇦 🇧 🇨 🇩 🇪 🇫
🇬 🇭 🇮 🇯 🇰
🇱 🇲 🇳 🇴 🇵
🇶 🇷 🇸 🇹 🇺
🇻 🇼 🇽 🇾 🇿 ↗