{"id":59248,"date":"2023-05-03T03:01:08","date_gmt":"2023-05-02T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59248"},"modified":"2023-05-03T16:48:31","modified_gmt":"2023-05-03T06:48:31","slug":"country-data-circular-text-buttons-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/country-data-circular-text-buttons-tutorial\/","title":{"rendered":"Country Data Circular Text Buttons 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 Circular Text Buttons Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data_translated_wikipedia.jpg\" title=\"Country Data Circular Text Buttons Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Country Data Circular Text Buttons Tutorial<\/p><\/div>\n<p>It&#8217;s time to go back to the reason we embarked on the <a target=_blank title='Circular Text Around Media Animated QR Code Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-around-media-animated-qr-code-tutorial\/'>Circular Text Button exploration<\/a> of recent times and rejoin the woooorrrrllllddd of the &#8220;Country Data&#8221; web application of <a title='Country Data Emoji Buttons Tutorial' href='#cdebt'>Country Data Emoji Buttons Tutorial<\/a>.  The reason we rejoin, is that we have a more <i>obvious<\/i> alternative piece of &#8220;Circular Text Button&#8221; functionality to the &#8220;long hover&#8221; concepts, we can add into the mix, so that a user does not have to remember &#8220;long hover&#8221; rules as outlined in <a title='Country Data Long Hover Tutorial' href='#cdlht'>Country Data Long Hover Tutorial<\/a>.<\/p>\n<p>The &#8220;Circular Text Button&#8221; modus operandi suits here because there is &#8230;<\/p>\n<ul>\n<li>the main requirement of what a button can do as an element, <i>which can be clicked once<\/i>, and set up a navigational change\/addition of webpage (destination URL) &#8230; as well as &#8230;<\/li>\n<li>a visual display precursor to what that destination URL webpage might contain, as showable in the Circular Text part of the Circular Text Buttons &#8230;<\/li>\n<\/ul>\n<p> &#8230; we now use for translated (from English) <a target=_blank title='Wikipedia ... thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a> (destination URL) webpages.<\/p>\n<p>This only needed small tweaks to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-----------------GETME\" title=\"circular_text.html\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-----------------GETME\" title=\"circular_text.html\">circular_text.html<\/a> because <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> may not translate into your inhouse HTML iframe content, quite understandably <font size=1>(even trying translate=yes)<\/font> to internationalize &#8220;Click for &#8221; hardcoding with the emoji &amp;#128433; ( &#128433; ).<\/p>\n<p>But 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'>live run link 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>, most of the changes have happened, the main new Javascript function being &#8230;<\/p>\n<p><code><br \/>\n  function langwiki() {<br \/>\n     var thisx='', newccx='', newcn='';<br \/>\n     var lcd=document.getElementById('lang').value.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 (document.getElementById('cname').options[document.getElementById('cname').selectedIndex].innerText.trim() != '') {<br \/>\n       if (lcd == 'en') {<br \/>\n       if (window.top) {<br \/>\n       if (top.document.URL.indexOf('&_x_tr_tl=') != -1) {<br \/>\n       newccx=top.document.URL.split('&_x_tr_tl=')[1].split('&')[0];<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n       if (newccx != '') { lcd=newccx; }<br \/>\n       document.getElementById('cemojis').innerHTML='&lt;div translate=yes title=\"Wikipedia - ' + document.getElementById('tdcapital').innerText.replace(\/\\'\/g,'`') + '\" style=\"width:80px;height:60px;overflow:hidden;display:inline-block;\"&gt;&lt;iframe translate=yes scrolling=no frameborder=\"0\" style=\"width:80px;height:80px;margin:0 0 0 0;padding:0 0 0 0;\" src=\"\/HTMLCSS\/circular_text.html?radius=30.360&text=' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '&amp;fontsize=8&ih=' + encodeURIComponent(String.fromCodePoint(127760)) + '&im=' + encodeURIComponent('\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/8\/80\/Wikipedia-logo-v2.svg\/150px-Wikipedia-logo-v2.svg.png') + '&iu=%2F%2F' + lcd + '.wikipedia.org%2Fwiki%2F' + encodeURIComponent(document.getElementById('tdcapital').innerText.replace(\/\\ \/g,'_')) + '\"&gt;&lt;\/iframe&gt;&lt;\/div&gt;';<br \/>\n       thisx=document.getElementById('cname').options[document.getElementById('cname').selectedIndex].innerText.trim().split(' ')[-1 + eval('' + document.getElementById('cname').options[document.getElementById('cname').selectedIndex].innerText.trim().split(' ').length)];<br \/>\n       \/\/newcn=document.getElementById('cname').options[document.getElementById('cname').selectedIndex].innerText.trim().replace(thisx,'').trim().replace(\/\\'\/g,'`');<br \/>\n       document.getElementById('ctyemojis').innerHTML='&lt;div translate=yes title=\"Wikipedia - ' + document.getElementById('cname').options[document.getElementById('cname').selectedIndex].innerText.trim().replace(thisx,'').trim().replace(\/\\'\/g,'`') + '\" style=\"width:80px;height:60px;overflow:hidden;display:inline-block;\"&gt;&lt;iframe translate=yes scrolling=no frameborder=\"0\" style=\"width:80px;height:80px;margin:0 0 0 0;padding:0 0 0 0;\" src=\"\/HTMLCSS\/circular_text.html?radius=30.360&text=' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '&amp;fontsize=8&ih=' + encodeURIComponent(String.fromCodePoint(127760)) + '&im=' + encodeURIComponent('\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/8\/80\/Wikipedia-logo-v2.svg\/150px-Wikipedia-logo-v2.svg.png') + '&iu=%2F%2F' + lcd + '.wikipedia.org%2Fwiki%2F' + encodeURIComponent(document.getElementById('cname').options[document.getElementById('cname').selectedIndex].innerText.trim().replace(thisx,'').trim().replace(\/\\ \/g,'_')) + '\"&gt;&lt;\/iframe&gt;&lt;\/div&gt;';<br \/>\n     } else if (document.getElementById('cnameone')) {<br \/>\n       newccx='';<br \/>\n       if (window.top) {<br \/>\n       if (top.document.URL.indexOf('&_x_tr_tl=') != -1) {<br \/>\n       newccx=top.document.URL.split('&_x_tr_tl=')[1].split('&')[0];<br \/>\n       }<br \/>\n       }<br \/>\n       if (document.getElementById('cnameone').innerText.trim() == '') {<br \/>\n       setTimeout(langwiki, 3000);<br \/>\n       } else {<br \/>\n       \/\/alert(document.getElementById('ccodeone').outerHTML);<br \/>\n       if (newccx != '') { lcd=newccx; }<br \/>\n       document.getElementById('cemojis').innerHTML='&lt;div translate=yes title=\"Wikipedia - ' + document.getElementById('tdcapital').innerText.replace(\/\\'\/g,'`') + '\" style=\"width:80px;height:60px;overflow:hidden;display:inline-block;\"&gt;&lt;iframe translate=yes scrolling=no frameborder=\"0\" style=\"width:80px;height:80px;margin:0 0 0 0;padding:0 0 0 0;\" src=\"\/HTMLCSS\/circular_text.html?radius=30.360&text=' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '&amp;fontsize=8&ih=' + encodeURIComponent(String.fromCodePoint(127760)) + '&im=' + encodeURIComponent('\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/8\/80\/Wikipedia-logo-v2.svg\/150px-Wikipedia-logo-v2.svg.png') + '&iu=%2F%2F' + lcd + '.wikipedia.org%2Fwiki%2F' + encodeURIComponent(document.getElementById('tdcapital').innerText.replace(\/\\ \/g,'_')) + '\"&gt;&lt;\/iframe&gt;&lt;\/div&gt;';<br \/>\n       thisx=document.getElementById('cnameone').innerText.trim().split(' ')[-1 + eval('' + document.getElementById('cnameone').innerText.trim().split(' ').length)];<br \/>\n       document.getElementById('ctyemojis').innerHTML='&lt;div translate=yes title=\"Wikipedia - ' + document.getElementById('cnameone').innerText.trim().replace(thisx,'').trim().replace(\/\\'\/g,'`') + '\" style=\"width:80px;height:60px;overflow:hidden;display:inline-block;\"&gt;&lt;iframe translate=yes scrolling=no frameborder=\"0\" style=\"width:80px;height:80px;margin:0 0 0 0;padding:0 0 0 0;\" src=\"\/HTMLCSS\/circular_text.html?radius=30.360&text=' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '%20' + lcd + '&amp;fontsize=8&ih=' + encodeURIComponent(String.fromCodePoint(127760)) + '&im=' + encodeURIComponent('\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/8\/80\/Wikipedia-logo-v2.svg\/150px-Wikipedia-logo-v2.svg.png') + '&iu=%2F%2F' + lcd + '.wikipedia.org%2Fwiki%2F' + encodeURIComponent(document.getElementById('cnameone').innerText.trim().replace(thisx,'').trim().replace(\/\\ \/g,'_')) + '\"&gt;&lt;\/iframe&gt;&lt;\/div&gt;';<br \/>\n       }<br \/>\n     }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>We figured another step towards internationalization with this work would be to involve an emoji flag in the Google Chart titles, the changes for which you can see with <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'>live run link 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>.<\/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-circular-text-buttons-tutorial\/'>Country Data Circular Text Buttons Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cdebt'>Previous relevant <a target=_blank title='Country Data Emoji Buttons Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-data-emoji-buttons-tutorial\/'>Country Data Emoji Buttons 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 Emoji Buttons Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_data_emoji_buttons.jpg\" title=\"Country Data Emoji Buttons Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Country Data Emoji Buttons Tutorial<\/p><\/div>\n<p>Today we incorporate &#8220;cow.txt&#8221; URL data items into the functionality of our Country Data web application, on top of the progress up to yesterday&#8217;s <a title='Country Data Long Hover Tutorial' href='#cdlht'>Country Data Long Hover Tutorial<\/a>.<\/p>\n<p>We&#8217;ve decided to present these as &#8230;<\/p>\n<p><code><br \/>\nEmoji Button Links<br \/>\n<\/code><\/p>\n<p> &#8230; a term we use because &#8230;<\/p>\n<ul>\n<li>the look is a bit like a button, courtesy of the artistry of the emoji (which is really text, to a webpage &#8230; <font size=1>just ask one?!<\/font>)<\/li>\n<li>the HTML is in the form of an &#8220;a&#8221; link<\/li>\n<\/ul>\n<p>All simple, huh?!  But there&#8217;s the issue, we found, with the URL relevance, on occasions.  So we funnel the proposed URL through PHP <a target=_blank title='PHP file_get_contents method information' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents<\/a> to determine whether we &#8230;<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>window.open<\/a> the actual URL &#8230; best option, or &#8230;<\/li>\n<li>window.open the contents of a successful file_get_contents &#8230; not so good &#8230;<\/li>\n<li>hide the emoji button for URLs that are not suitable<\/li>\n<\/ul>\n<p> &#8230; which you can see happening 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-emoji-buttons-tutorial\/'>Country Data Emoji Buttons Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cdlht'>Previous relevant <a target=_blank title='Country Data Long Hover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-data-long-hover-tutorial\/'>Country Data Long Hover Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/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<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='#d59073' onclick='var dv=document.getElementById(\"d59073\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59073' 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='#d59248' onclick='var dv=document.getElementById(\"d59248\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/circular-text\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59248' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s time to go back to the reason we embarked on the Circular Text Button exploration of recent times and rejoin the woooorrrrllllddd of the &#8220;Country Data&#8221; web application of Country Data Emoji Buttons Tutorial. The reason we rejoin, is &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/country-data-circular-text-buttons-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,174,4323,4324,290,2276,2147,355,385,3606,429,2137,1619,480,1690,4206,513,518,519,532,1608,576,587,620,4325,652,1560,3173,1807,3000,745,2126,870,1661,871,872,873,877,932,997,4225,1200,2167,1300,1301,1319,1345,2580,1431,1433],"class_list":["post-59248","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-attribute","tag-attributes","tag-button","tag-circular-text","tag-circular-text-button","tag-data","tag-delimitation","tag-delimiter","tag-domain","tag-emoji","tag-emoji-button","tag-file_get_contents","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-internationalize","tag-javascript","tag-language","tag-language-code","tag-link","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-stop-press","tag-title","tag-translate","tag-translation","tag-tutorial","tag-url","tag-where","tag-wikipedia","tag-window-open"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59248"}],"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=59248"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59248\/revisions"}],"predecessor-version":[{"id":59273,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59248\/revisions\/59273"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=59248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=59248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=59248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}