{"id":59065,"date":"2023-04-22T03:01:02","date_gmt":"2023-04-21T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59065"},"modified":"2023-04-21T20:01:28","modified_gmt":"2023-04-21T10:01:28","slug":"country-data-long-hover-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/country-data-long-hover-tutorial\/","title":{"rendered":"Country Data Long Hover Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Country Data Long Hover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data_long_hover.gif\" title=\"Country Data Long Hover Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Country Data Long Hover Tutorial<\/p><\/div>\n<p>Ever since the work of <a title='Country Data Google Translate Tutorial' href='#cdgtt'>Country Data Google Translate Tutorial<\/a> before yesterday&#8217;s <a title='Country Data Conduits Tutorial' href='#cdct'>Country Data Conduits Tutorial<\/a> we&#8217;ve been keen to &#8230;<\/p>\n<ul>\n<li>add to existing <a target=_blank title='Wikipedia ... thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a> links off the SVG buttons of the Google Geo Charts that are presented in English &#8230; with, today &#8230;<\/li>\n<li>allowing for Wikipedia links presented in the selected <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> translation language of choice <i>associated<\/i> with the Country dropdowns and Capital City table cell<\/li>\n<\/ul>\n<p>But, the question for us was, how best to design that <i>&#8220;association&#8221;<\/i>?  We decided a &#8220;long hover&#8221; approach could do, and we intervened, event wise, at &#8230;<\/p>\n<table>\n<tr>\n<th>Non mobile<\/th>\n<th>Mobile<\/th>\n<th>Interest in 8 seconds time? ( ie. &#8220;long hover&#8221; on non-mobile or &#8220;long hold&#8221; on mobile )<\/th>\n<\/tr>\n<tr>\n<td>onmouseover<\/td>\n<td>ontouchstart<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>onmouseoout<\/td>\n<td>ontouchend<\/td>\n<td>No<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; as per Javascript event code call (for dropdown example) &#8230;<\/p>\n<p><code><br \/>\n onmouseover='lhw(this,this.innerHTML,1);' onmouseout='lhw(this,this.innerHTML,0);' ontouchstart='lhw(this,this.innerHTML,1);' ontouchend='lhw(this,this.innerHTML,0);'<br \/>\n<\/code><\/p>\n<p> &#8230; which dovetails with event Javascript code logic &#8230;<\/p>\n<p><code><br \/>\n var wow=null, dolwiki=false, wikil='';<br \/>\n<br \/>\n  function trylwiki() {<br \/>\n    if (dolwiki) {<br \/>\n      dolwiki=false;<br \/>\n      if (wikil.trim() != '') {<br \/>\n        if (wow) {<br \/>\n          if (!wow.closed) { wow.close(); wow=null; }<br \/>\n        }<br \/>\n        wow=window.open(wikil, '_blank', 'top=50,left=50,height=600,width=600');<br \/>\n        wikil='';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function lhw(sio, cwords, conoff) {<br \/>\n    if (conoff == 0) {<br \/>\n      dolwiki=false;<br \/>\n    } else {<br \/>\n      if (cwords.trim() != '') {<br \/>\n        dolwiki=true;<br \/>\n        var lpre=document.getElementById('cname').value.split(' ')[0].toLowerCase();<br \/>\n        var lsuf=encodeURIComponent(document.getElementById('ccode').value.split(' ' + orflag(lpre.toUpperCase()))[0].split(' (')[0].replace(\/\\ \/g,'_'));<br \/>\n        lpre=document.getElementById('lang').value.toLowerCase().trim().replace(\/^4$\/g, 'en').replace(\/^8$\/g, 'fr').replace(\/^15$\/g, 'es').replace(\/^17$\/g, 'ru').replace(\/^29$\/g, 'it').replace(\/^32$\/g, 'et');<br \/>\n        if (lpre.trim() == '') { lpre='en'; }<br \/>\n        if (('' + sio.id) == 'tdcapital') {<br \/>\n          lsuf=encodeURIComponent(cwords.replace(\/\\ \/g,'_'))<br \/>\n        }<br \/>\n        wikil='\/\/' + lpre + '.wikipedia.org\/wiki\/' + lsuf;<br \/>\n        setTimeout(trylwiki, 8000);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; working with new title attribute data, at least displayed for non-mobile, like &#8230;<\/p>\n<p><code><br \/>\n title='Long hover over Country selection here opens language code specific Wikipedia information'<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html----GETME\">country_data.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\">Country Data<\/a> web application <a href='#myifcow'>start below<\/a>, that, now, may navigate you to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data\/index.php------GETME\">&#8220;the how we got there&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data\/index.php-----GETME\">PHP code<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data\/index.php\">Google Translate friendly version<\/a> for your perusal.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/country-data-long-hover-tutorial\/'>Country Data Long Hover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cdct'>Previous relevant <a target=_blank title='Country Data Conduits Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-data-conduits-tutorial\/'>Country Data Conduits Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Country Data Conduits Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data_title.jpg\" title=\"Country Data Conduits Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Country Data Conduits Tutorial<\/p><\/div>\n<p>The data flows surrounding the use of &#8220;cow.txt&#8221; in yesterday&#8217;s <a title='Country Data Google Translate Tutorial' href='#cdgtt'>Country Data Google Translate Tutorial<\/a> take a variety of forms &#8230;<\/p>\n<ul>\n<li>country data is selected via dropdowns, so we have arranged those dropdowns to contain a variety of <a target=_blank href='https:\/\/www.w3schools.com\/tags\/att_global_data.asp' title='Global data attributes information from W3schools'>global data attributes<\/a> &#8230;\n<ol>\n<li><i>data-mapurl<\/i> &#8230; is populated with a Google Chart Map Chart URL (derived via fields in &#8220;cow.txt&#8221;)<\/li>\n<li><i>data-geourl<\/i> &#8230; is populated with a Google Chart Geo Chart URL (derived via fields in &#8220;cow.txt&#8221;)<\/li>\n<li><i>data-langlist<\/i> &#8230; is populated with country Language Code list (as a field in &#8220;cow.txt&#8221;)<\/li>\n<li><i>data-it<\/i> &#8230; helps us link Country Names with Country Codes  (derived from &#8220;cow.txt&#8221;)<\/li>\n<li>whole series of <i>data-capital<\/i> prefixing global data attributes describing Capital City Names in a variety of languages (directly from &#8220;cow.txt&#8221; fields)<\/li>\n<\/ol>\n<p> &#8230; and today those dropdowns are also given a &#8230;<\/li>\n<li>title attribute &#8230;\n<ol>\n<li>containing Population and Population Year and Area (out of &#8220;cow.txt&#8221;) and Population Density we calculate &#8230; that &#8230;<\/li>\n<li>at least for non-mobile platforms this information above will display when hovering over the dropdowns<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; which begs the question &#8230;<\/p>\n<p><code><br \/>\nFor a dropdown <i>onchange<\/i> event (passing in <i>this<\/i> to var<font size=1>iable<\/font> iso) how could you reference global data attribute <i>data-mapurl<\/i> for example?<br \/>\n<\/code><\/p>\n<p> &#8230; try &#8230;<\/p>\n<p><code><br \/>\n  var theurlformapchartis = iso.options[iso.selectedIndex].getAttribute('data-mapurl');<br \/>\n<\/code><\/p>\n<p> &#8230; showing you how lots of the dynamics of the web application can launch themselves from dropdown <i>onchange<\/i> event Javascript functions.<\/p>\n<p>Bit like XML for (albeit kludgy) data usefulness, don&#8217;t you think?<\/p>\n<p>Yet again, try this, in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html---GETME\">country_data.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\">Country Data<\/a> web application <a href='#myifcow'>start below<\/a>, that, now, may navigate you to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data\/index.php-----GETME\">&#8220;the how we got there&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data\/index.php----GETME\">PHP code<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data\/index.php\">Google Translate friendly version<\/a> for your perusal.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/country-data-conduits-tutorial\/'>Country Data Conduits Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cdgtt'>Previous relevant <a target=_blank title='Country Data Google Translate Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-data-google-translate-tutorial\/'>Country Data Google Translate Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Country Data Google Translate Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data_gt.jpg\" title=\"Country Data Google Translate Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Country Data Google Translate Tutorial<\/p><\/div>\n<p>The &#8230;<\/p>\n<ul>\n<li>&#8220;cow.txt&#8221; in an HTML iframe arrangement<\/li>\n<li>limits to Google Translate timings related to Javascript DOM (element populating in particular) can result in half done translations<\/li>\n<\/ul>\n<p> &#8230; within yesterday&#8217;s <a title='Country Data Geodata Tutorial' href='#cdgt'>Country Data Geodata Tutorial<\/a>&#8216;s web application&#8217;s design has had us needing to involve PHP into the mix as we try to add &#8220;cow.txt&#8221; derived <i>country language codes of interest<\/i> into the <i><a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> friendly <font size=1>thanks<\/font><\/i> functionality of our recent and ongoing Country Data web application.<\/p>\n<p>We get help from <a target=_blank title='Useful link' href='https:\/\/www.science.co.il\/language\/Codes.php'>another language code lookup source<\/a>, thanks, today, we allow for Language Code presentations that are not just a pretty unfriendly code, only.<\/p>\n<p>Let&#8217;s see an example of a Google Translate URL &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='https:\/\/www-rjmprogramming-com-au.translate.goog\/HTMLCSS\/country_data\/?_x_tr_sl=en&#038;_x_tr_hl=en-GB&#038;_x_tr_pto=nui&#038;_x_tr_tl=ru&#038;_x_tr_pto=wapp&#038;data_cc=AR' href='https:\/\/www-rjmprogramming-com-au.translate.goog\/HTMLCSS\/country_data\/?_x_tr_sl=en&#038;_x_tr_hl=en-GB&#038;_x_tr_pto=nui&#038;_x_tr_tl=ru&#038;_x_tr_pto=wapp&#038;data_cc=AR&#038;amgt=y' style=text-decoration:none;cursor:pointer;><font color=purple>https:\/\/www-rjmprogramming-com-au.translate.goog\/HTMLCSS\/country_data\/<\/font>?_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui<font color=blue>&_x_tr_tl=ru<\/font>&_x_tr_pto=wapp<font color=magenta>&data_cc=AR<\/font>&amgt=y<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; with the following characteristics &#8230;<\/p>\n<ul>\n<li>an RJM Programming PHP URL equivalent is mapped to a <font color=purple>Google Translate<\/font> one &#8230; via &#8230;\n<ol>\n<li>dot ( ie . ) parts of domain name are replaced by minus ( ie <font color=purple>&#8211;<\/font> )<\/li>\n<li>straight after domain name <font color=purple>.translate.goog<\/font> is placed<\/li>\n<\/ol>\n<\/li>\n<li><font color=blue>&#038;_x_tr_tl=<\/font> GET argument ( eg &#038;_x_tr_tl=ru means translate from &#8220;?_x_tr_sl=en&#8221; English to Russian )<\/li>\n<li><font color=magenta>&#038;data_cc=<\/font> GET argument is an inhouse construct <font size=1>(yes, you can append your own GET arguments and use a &#8220;top.location.href&#8221; approach to updating a Google Translate URL )<\/font>  ( eg &#038;data_cc=AR means display &#8220;cow.txt&#8221; data relating to Country Code AR which is Argentina )<\/li>\n<\/ul>\n<p>We use a special blank language code to revert back to an RJM Programming URL from a Google Translate URL using language code EN which is English.   Otherwise, once within a Google Translate URL the user generally stays there.<\/p>\n<p>This Google Translate approach does a much more thorough translation job of all the &#8220;cow.txt&#8221; derived data above the &#8220;geodata&#8221; HTML mapping iframes, allowing &#8230;<\/p>\n<ul>\n<li>Country names<\/li>\n<li>Capital City names<\/li>\n<\/ul>\n<p> &#8230; be translated into many languages that &#8220;cow.txt&#8221; is not designed to address.<\/p>\n<p>Of particular importance, now, in the revised code, is the use made of the global HTML element attribute <a target=_blank title='HTML attribute translate information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_translate.asp#:~:text=The%20translate%20attribute%20specifies%20whether,%22no%22%3A%20ice%20cream.'>&#8220;translate&#8221;<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/tags\/att_translate.asp#:~:text=The%20translate%20attribute%20specifies%20whether,%22no%22%3A%20ice%20cream.'><p>\nThe translate attribute specifies whether the content of an element should be translated or not.\n<\/p><\/blockquote>\n<p> &#8230; and we use <i>translate=&#8221;no&#8221;<\/i> for data &#8220;code&#8221; elements and <i>translate=&#8221;yes&#8221;<\/i> for data &#8220;display text (of that code)&#8221; elements, so as to Internationalize what this web application is capable of.<\/p>\n<p>Again, try this, in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html--GETME\">country_data.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\">Country Data<\/a> web application <a href='#myifcow'>start below<\/a>, that, now, may navigate you to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data\/index.php---GETME\">&#8220;the how we got there&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data\/index.php---GETME\">PHP code<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data\/index.php\">Google Translate friendly version<\/a> for your perusal.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/country-data-google-translate-tutorial\/'>Country Data Google TranslateTutorial<\/a>.<\/p-->\n<hr>\n<p id='cdgt'>Previous relevant <a target=_blank title='Country Data Geodata Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-data-geodata-tutorial\/'>Country Data Geodata Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Country Data Geodata Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_based_data_geo.jpg\" title=\"Country Data Geodata Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Country Data Geodata Tutorial<\/p><\/div>\n<p>We started <a title='Country Data Primer Tutorial' href='#cdpt'>Country Data Primer Tutorial<\/a>&#8216;s perusal of the &#8230;<\/p>\n<blockquote cite=''><p>\n great Open Licence data source concerning a <a target=_blank title='https:\/\/web.archive.org\/web\/20150319012353\/http:\/\/opengeocode.org\/cude\/download.php?file=\/home\/fashions\/public_html\/opengeocode.org\/download\/cow.txt' href='https:\/\/web.archive.org\/web\/20150319012353\/http:\/\/opengeocode.org\/cude\/download.php?file=\/home\/fashions\/public_html\/opengeocode.org\/download\/cow.txt'>country data &#8220;cow.txt&#8221;<\/a> flat file with semicolon column separators, thanks to the heads up at <a target=_blank title='https:\/\/gis.stackexchange.com\/questions\/152758\/countries-latitude-and-longitude-range' href='https:\/\/gis.stackexchange.com\/questions\/152758\/countries-latitude-and-longitude-range'>this great link<\/a>\n<\/p><\/blockquote>\n<p> &#8230; start to our endeavours without referencing <a target=_blank title='Geodata information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Geographic_data_and_information'>&#8220;geodata&#8221;<\/a>.   But there is &#8220;geodata&#8221; in &#8220;cow.txt&#8221;, and so it behoves us to represent that in a &#8230; in a &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>?  Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Anaximander'>Anaximander, son of Praxiades<\/a> &#8230; <font size=1>or is that Praximander, son of Anaxiades &#8230; please, in future, can you separate or one of you <a target=_blank href='https:\/\/h2g2.com\/entry\/A546518\/conversation\/view\/F66728\/T143709'>take the town drain home<\/a><\/font> &#8230; we <i>can<\/i> plot positions on a <i>map<\/i>.<\/p>\n<p>How about one of <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google&#8217;s Charts<\/a>, such as &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>Map Chart<\/a> &#8230; and\/or &#8230;<\/li>\n<li><a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; so that the user can see &#8220;where&#8221; in the world the Country (and its Capital) are located?<\/p>\n<p>Try this, in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html-GETME\">country_data.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\">Country Data<\/a> web application <a href='#myifcow'>start below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/country-data-geodata-tutorial\/'>Country Data Geodata Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cdpt'>Previous relevant <a target=_blank title='Country Data Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-data-primer-tutorial\/'>Country Data Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Country Data Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data_primer.jpg\" title=\"Country Data Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Country Data Primer Tutorial<\/p><\/div>\n<p>The other day we came upon a great Open Licence data source concerning a <a target=_blank title='https:\/\/web.archive.org\/web\/20150319012353\/http:\/\/opengeocode.org\/cude\/download.php?file=\/home\/fashions\/public_html\/opengeocode.org\/download\/cow.txt' href='https:\/\/web.archive.org\/web\/20150319012353\/http:\/\/opengeocode.org\/cude\/download.php?file=\/home\/fashions\/public_html\/opengeocode.org\/download\/cow.txt'>country data &#8220;cow.txt&#8221;<\/a> flat file with semicolon column separators, thanks to the heads up at <a target=_blank title='https:\/\/gis.stackexchange.com\/questions\/152758\/countries-latitude-and-longitude-range' href='https:\/\/gis.stackexchange.com\/questions\/152758\/countries-latitude-and-longitude-range'>this great link<\/a>.<\/p>\n<p>With today&#8217;s blog posting we start out writing a Javascript and HTML web application using &#8220;cow.txt&#8221; hosted in an HTML iframe element arrangement, and relying on its &#8220;onload&#8221; event Javascript language &#8230;<\/p>\n<p><code><br \/>\n  function checkif(iois, four) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n          if (origihcode == '') {<br \/>\n            origihcode=document.getElementById('ccode').innerHTML;<br \/>\n            origihname=document.getElementById('cname').innerHTML;<br \/>\n          } else {<br \/>\n            document.getElementById('ccode').innerHTML=origihcode;<br \/>\n            document.getElementById('cname').innerHTML=origihname;<br \/>\n         }<br \/>\n          var cols=[];<br \/>\n          var lines=aconto.body.innerText.split(String.fromCharCode(10));<br \/>\n          document.getElementById('tdcapital').innerHTML='';<br \/>\n          for (var i=0; i&lt;lines.length; i++) {<br \/>\n            cols=lines[i].split(';');<br \/>\n            if (eval('' + lines[i].length) &gt; 3 && eval('' + cols[0].length) == 2 && eval('' + cols.length) &gt; eval('' + four)) {<br \/>\n              if (prevval != '' && prevval.indexOf(orflag(cols[0])) != -1) {<br \/>\n              var ihis='&lt;option data-capital=\"' + cols[36].trim() + '\"  data-capital4=\"' + cols[36].trim() + '\"  data-capital8=\"' + cols[39].trim() + '\"  data-capital15=\"' + cols[40].trim() + '\"  data-capital17=\"' + cols[41].trim() + '\"  data-capital32=\"' + cols[42].trim() + '\"   data-capital29=\"' + cols[36].trim() + '\" value=\"' + cols[0] + ' ' + orflag(cols[0]) +  '\" selected&gt;' + (cols[eval('' + four)].trim() == '' ? cols[4] : cols[eval('' + four)]) + ' ' + orflag(cols[0]) + '&lt;\/option&gt;';<br \/>\n              document.getElementById('cname').innerHTML+=ihis;<br \/>\n              document.getElementById('ccode').innerHTML+='&lt;option data-capital=\"' + cols[36].trim() + '\"  data-capital4=\"' + cols[36].trim() + '\"  data-capital8=\"' + cols[39].trim() + '\" data-capital15=\"' + cols[40].trim() + '\"  data-capital17=\"' + cols[41].trim() + '\"  data-capital32=\"' + cols[42].trim() + '\"   data-capital29=\"' + cols[36].trim() + '\"   value=\"' + (cols[eval('' + four)].trim() == '' ? cols[4] : cols[eval('' + four)]) + ' ' + orflag(cols[0]) +  '\" selected&gt;' + cols[0] + ' ' + orflag(cols[0])  + '&lt;\/option&gt;';<br \/>\n              document.getElementById('tdcapital').innerHTML=(('' + ihis.split(' data-capital' + document.getElementById('lang').value + '=\"')[1].split('\"')[0].trim()) == '' ? ('' + ihis.split(' data-capital' + '=\"')[1].split('\"')[0].trim())  : ('' + ihis.split(' data-capital' + document.getElementById('lang').value + '=\"')[1].split('\"')[0].trim()) );<br \/>\n              } else {<br \/>\n              document.getElementById('cname').innerHTML+='&lt;option data-capital=\"' + cols[36].trim() + '\"  data-capital4=\"' + cols[36].trim() + '\"  data-capital8=\"' + cols[39].trim() + '\" data-capital15=\"' + cols[40].trim() + '\"  data-capital17=\"' + cols[41].trim() + '\"  data-capital32=\"' + cols[42].trim() + '\"   data-capital29=\"' + cols[36].trim() + '\"   value=\"' + cols[0] + ' ' + orflag(cols[0]) +  '\"&gt;' + (cols[eval('' + four)].trim() == '' ? cols[4] : cols[eval('' + four)])  + ' ' + orflag(cols[0]) + '&lt;\/option&gt;';<br \/>\n              document.getElementById('ccode').innerHTML+='&lt;option data-capital=\"' + cols[36].trim() + '\"  data-capital4=\"' + cols[36].trim() + '\"  data-capital8=\"' + cols[39].trim() + '\" data-capital15=\"' + cols[40].trim() + '\"  data-capital17=\"' + cols[41].trim() + '\"  data-capital32=\"' + cols[42].trim() + '\"   data-capital29=\"' + cols[36].trim() + '\"   value=\"' + (cols[eval('' + four)].trim() == '' ? cols[4] : cols[eval('' + four)])  + ' ' + orflag(cols[0]) +  '\"&gt;' + cols[0] + ' ' + orflag(cols[0])  + '&lt;\/option&gt;';<br \/>\n              }<br \/>\n           }<br \/>\n          }<br \/>\n       }<br \/>\n    }<br \/>\n    prevval='';<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; that dovetails with HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe style=display:none; id=myif onload=checkif(this,document.getElementById('lang').value); src='\/cow.txt'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and imagine we&#8217;ll extend its functionality into the near future, onto its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html_GETME\">proof of concept country_data.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\">Country Data<\/a> web application start &#8230;<\/p>\n<p><iframe id=myifcow style=\"width:100%;height:1150px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data.html\"><\/iframe><\/p>\n<p>We hope you hang about for the ride?!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58994' onclick='var dv=document.getElementById(\"d58994\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58994' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59006' onclick='var dv=document.getElementById(\"d59006\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59006' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59011' onclick='var dv=document.getElementById(\"d59011\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/internationalization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59011' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59053' onclick='var dv=document.getElementById(\"d59053\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/global-data-attribute\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59053' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59065' onclick='var dv=document.getElementById(\"d59065\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hover\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59065' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ever since the work of Country Data Google Translate Tutorial before yesterday&#8217;s Country Data Conduits Tutorial we&#8217;ve been keen to &#8230; add to existing Wikipedia links off the SVG buttons of the Google Geo Charts that are presented in English &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/country-data-long-hover-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[112,1688,290,2276,2147,355,2137,1619,480,1690,4206,513,518,519,532,1608,576,587,620,652,1560,3173,3000,745,2126,870,1661,871,872,873,877,932,997,4225,2167,1300,1301,1319,1345,2580,1431],"class_list":["post-59065","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-attribute","tag-attributes","tag-data","tag-delimitation","tag-delimiter","tag-domain","tag-flat-file","tag-geo-chart","tag-geodata","tag-getattribute","tag-global-data-attributes","tag-google","tag-google-chart","tag-google-charts","tag-google-translate","tag-hover","tag-html","tag-iframe","tag-internationalization","tag-javascript","tag-language","tag-language-code","tag-long-hover","tag-map","tag-map-chart","tag-onload","tag-onmouseout","tag-onmouseover","tag-ontouchend","tag-ontouchstart","tag-open-source","tag-php","tag-programming","tag-semicolon","tag-title","tag-translate","tag-translation","tag-tutorial","tag-url","tag-where","tag-wikipedia"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59065"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=59065"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59065\/revisions"}],"predecessor-version":[{"id":59071,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59065\/revisions\/59071"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=59065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=59065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=59065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}