{"id":59209,"date":"2023-04-30T03:01:47","date_gmt":"2023-04-29T17:01:47","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59209"},"modified":"2023-04-30T16:25:29","modified_gmt":"2023-04-30T06:25:29","slug":"circular-text-around-media-data-uri-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-around-media-data-uri-tutorial\/","title":{"rendered":"Circular Text Around Media Data URI Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text Around Media Data URI Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing_data_uri.jpg\" title=\"Circular Text Around Media Data URI Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text Around Media Data URI Tutorial<\/p><\/div>\n<p>If we were to channel the &#8220;inner nerd&#8221;, we&#8217;d say the day we discovered there was such a thing as a <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'><i>data URI<\/i><\/a> was hugely notable.  But on that first day, we didn&#8217;t get how good they were.  In the online wooooorrrrllllddd age where &#8230;<\/p>\n<ul>\n<li>https: protocol is being asked for so much more (in favour of the old http: protocol) that the use of data URIs is irrelevant regarding<\/li>\n<li>absolute media URLs (so rarely available to be looked up these days) can be expressed in that &#8220;universal<font size=1>ly understood<\/font> language&#8221; that is the data URI<\/li>\n<li>we don&#8217;t use it so much any more, but data URIs in emails with inline HTML content (via PHP mail), was useful<\/li>\n<li>PHP <a target=_blank href='https:\/\/www.php.net\/manual\/en\/function.base64-encode.php'>ba<\/a>se<a target=_blank href='https:\/\/www.php.net\/manual\/en\/function.base64-decode.php'>64<\/a> and <a target=_blank title='PHP file_get_contents' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents<\/a> and <a target=_blank title='PHP file_put_contents' href='http:\/\/php.net\/manual\/en\/function.file-put-contents.php'>file_put_contents<\/a> functions can turn media files into or out of data URIs easily<\/li>\n<\/ul>\n<p>Supposing a user knows the data URI of some media?  We want to add that chance as an option for them to enter <font color=blue>in amongst the mix<\/font> of yesterday&#8217;s <a title='Circular Text Around Media Tutorial' href='#ctamt'>Circular Text Around Media Tutorial<\/a>&#8216;s &#8230;<\/p>\n<blockquote>\n<ul>\n<li>inner text only<\/li>\n<li>inner text and a relative or absolute image URL <font size=1>(which we were happy to discover yesterday could be an animated GIF)<\/font><\/li>\n<li>relative or absolute image URL &#8230; and today we add onto that list &#8230;<\/li>\n<li>no inner text but a data URI &#8220;svg+xml&#8221; protocol <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> data background content<\/li>\n<li>data URI image data as a background image<\/font><\/li>\n<li>data URI video data as a nested video element<\/font><\/li>\n<li>data URI audio data as a nested audio element<\/font><\/li>\n<li>data URI media data deduced via a user entered media URL<font color=blue> or data URI<\/font> interactively<\/li>\n<\/ul>\n<\/blockquote>\n<p>Also, nuancing yesterday&#8217;s <a title='Circular Text Around Media Tutorial' href='#ctamt'>Circular Text Around Media Tutorial<\/a>&#8216;s functionality we think we should offer &#8230;<\/p>\n<ul>\n<li>background-repeat: repeat;<\/li>\n<li>background-size: contain;<\/li>\n<\/ul>\n<p> &#8230; control for the user, as well as trying to ascertain media dimensions that suit, better, as well as offering user defined Javascript onclick logic creation mechanisms, as well as (the idea of) having no Circular Text involved (at all), as a way for people not interested in &#8220;browsing&#8221; per se, the chance to just stay in the woooorrrrllldd of interactive entry of &#8230;<\/p>\n<ul>\n<li>media URLs (whether they be absolute or relative) &#8230; or &#8230;<\/li>\n<li>media data URIs<\/li>\n<\/ul>\n<p> &#8230; to help it be <font size=1>(a better chance to be)<\/font> &#8220;a one stop shop&#8221; for more Media Browsers out there &#8230;<\/p>\n<table>\n<tr>\n<th>HTML<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n&lt;select style=display:inline-block; id=cirdec onchange=cirdecf(this);&gt;&lt;option id=optif value=''&gt;Iframe&lt;\/option&gt;&lt;option value='ct'&gt;Circular Text Iframe Browsing&lt;\/option&gt;&lt;option value='CT'&gt;Circular Text Iframe via Media URL or Data URI&lt;\/option&gt;&lt;option value='cT'&gt;Circular Text Iframe via Media URL or Data URI repeat&lt;\/option&gt;&lt;option value='cT '&gt;Circular Text Iframe via Media URL or Data URI contain&lt;\/option&gt;&lt;option value='CT '&gt;Iframe via Media URL or Data URI&lt;\/option&gt;&lt;\/select&gt;<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>Javascript<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n  var ctimode=false, ctiname='', nuancec='', lastsrc='', prad=200, preihf='', iusuff='';<br \/>\n<br \/>\nfunction getwh(induri) {<br \/>\n    var im=null, srcit=true, erro;<br \/>\n<br \/>\n    if (induri.indexOf(':image\/') != -1 || induri.indexOf(':video\/') != -1 || induri.indexOf(':audio\/') != -1) {<br \/>\n    if (induri.indexOf(':image\/') != -1) {<br \/>\n    try {<br \/>\n    im=new Image();<br \/>\n    } catch(erro) {<br \/>\n    return induri;<br \/>\n    }<br \/>\n    } else if (induri.indexOf(':video\/') != -1) {<br \/>\n    if (nuancec == 'CT ') {<br \/>\n      srcit=false;<br \/>\n      \/\/alert(im.type);<br \/>\n      document.getElementById('icontent').innerHTML='&lt;video controls&gt;&lt;source src=\"' + induri + '\" type=\"' + 'video\/' + induri.split(':video\/')[1].split(';')[0].split(',')[0] + '\"&gt;&lt;\/source&gt;&lt;\/video&gt;';<br \/>\n      induri=induri.replace('data:', 'Data:');<br \/>\n      document.getElementById('dctimode').innerHTML='';<br \/>\n      setTimeout(agnone, 9000);<br \/>\n      return induri;<br \/>\n    } else {<br \/>\n    try {<br \/>\n    im=new Video();<br \/>\n    } catch(erro) {<br \/>\n    return induri;<br \/>\n    }<br \/>\n    im.type='video\/' + induri.split(':video\/')[1].split(';')[0].split(',')[0];<br \/>\n    }<br \/>\n    } else if (induri.indexOf(':audio\/') != -1) {<br \/>\n    if (nuancec == 'CT ') {<br \/>\n      srcit=false;<br \/>\n      \/\/alert(im.type);<br \/>\n      document.getElementById('icontent').innerHTML='&lt;audio controls&gt;&lt;source src=\"' + induri + '\" type=\"' + 'audio\/' + induri.split(':audio\/')[1].split(';')[0].split(',')[0] + '\"&gt;&lt;\/source&gt;&lt;\/audio&gt;';<br \/>\n      induri=induri.replace('data:', 'Data:');<br \/>\n      document.getElementById('dctimode').innerHTML='';<br \/>\n      setTimeout(agnone, 9000);<br \/>\n      return induri;<br \/>\n    } else {<br \/>\n    try {<br \/>\n    im=new Audio();<br \/>\n    } catch(erro) {<br \/>\n    return induri;<br \/>\n    }<br \/>\n    im.type='audio\/' + induri.split(':audio\/')[1].split(';')[0].split(',')[0];<br \/>\n    }<br \/>\n    }<br \/>\n<br \/>\n    im.onload = function() {<br \/>\n      \/\/alert(88);<br \/>\n      var maxhw=Math.max(eval('' + im.width), eval('' + im.height));<br \/>\n      \/\/alert('' + im.width);<br \/>\n      var wass=document.getElementById('icontent').innerHTML; \/\/lastsrc;<br \/>\n      \/\/alert(188);<br \/>\n      if (eval('' + maxhw) &lt;= 70 || nuancec == 'cT') {<br \/>\n      \/\/alert(288);<br \/>\n      wass=wass.replace('?','?repeat=repeat&bsize=auto&');<br \/>\n      document.getElementById('cirdec').value='cT';<br \/>\n      \/\/alert(wass);<br \/>\n      } else {<br \/>\n      \/\/alert(388);<br \/>\n      wass=wass.replace('&radius=' + ('' + eval(prad \/ 2)).split('.')[0] + '.', '&radius=' + ('' + eval(maxhw \/ 2)).split('.')[0] + '.').replace('width:' + eval(50 + eval(1 * eval('' + prad))) + 'px', 'width:' + eval('' + im.width) + 'px').replace('height:' + eval(50 + eval(1 * eval('' + prad))) + 'px', 'height:' + eval('' + im.width) + 'px')<br \/>\n      }<br \/>\n      \/\/alert(488);<br \/>\n      if (nuancec == 'cT ' && eval('' + maxhw) &gt; 70) {<br \/>\n      \/\/alert(588);<br \/>\n      wass=wass.replace('?','?bsize=contain&');<br \/>\n      }<br \/>\n      \/\/alert(688);<br \/>\n      if (nuancec == 'CT ') {<br \/>\n        \/\/alert('9:' + im.outerHTML);<br \/>\n        wass=im.outerHTML;<br \/>\n      }<br \/>\n      document.getElementById('icontent').innerHTML=wass;<br \/>\n    };<br \/>\n<br \/>\n    im.onerror = function error(event) {<br \/>\n      console.log(event)<br \/>\n    };<br \/>\n<br \/> <br \/>\n        \/\/alert('7:' + induri);<br \/>\n    if (srcit) { im.src=induri; }<br \/>\n    }<br \/>\n<br \/> <br \/>\n    return induri;<br \/>\n}<br \/>\n<br \/>\nfunction ourprompt(inb, defb) {<br \/>\n  iusuffix='';<br \/>\n  var huhr=window.prompt(inb + ' Optionally suffix &iu= to any Javascript (onclick logic) you would like to see happen.', defb);<br \/>\n  if (huhr == null) { huhr=''; }<br \/>\n  if (huhr.indexOf('&iu=') != -1) {<br \/>\n    iusuffix='&iu=' + encodeURIComponent(huhr.split('&iu=')[1]);<br \/>\n    return huhr.split('&iu=')[0];<br \/>\n  }<br \/>\n  return huhr;<br \/>\n}<br \/>\n<br \/>\nfunction cirdecf(oosel) {<br \/>\n  nuancec=oosel.value;<br \/>\n  ansis='';<br \/>\n  iusuffix='';<br \/>\n  if (oosel.value.toLowerCase().trim() == 'ct') { document.getElementById('dctimode').innerHTML=''; document.getElementById('icontent').innerHTML=''; document.getElementById('agifn').innerHTML=''; if (oosel.value.trim() != 'ct') { ansis=ourprompt('What is your media URL or Data URI?',''); if (ansis == null) { ansis=''; } if (ansis.trim() != '') { if (ansis.indexOf('\/') != -1) { ctiname=ansis.split('\/')[-1 + ansis.split('\/').length]; } else if (ansis.indexOf('\\\\'.substring(0,1)) != -1) { ctiname=ansis.split('\\\\'.substring(0,1))[-1 + ansis.split('\\\\'.substring(0,1)).length]; } else { ctiname=ansis; }  if (ansis.indexOf('data:') == 0 && ansis.indexOf('\/') != -1) { document.getElementById('agifn').innerHTML=ansis; ctiname='data.' + ansis.split('\/')[1].split('.')[0].split(';')[0]; } else { document.getElementById('dctimode').innerHTML='&lt;iframe src=\"\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(ansis) + '\"&gt;&lt;\/iframe&gt;'; } ctimode=true; document.getElementById('ibchkbox').checked=true;  setTimeout(ctilookfor, 3000); }  } else { document.getElementById('icontent').innerHTML=''; document.getElementById('dctimode').innerHTML=''; document.getElementById('agifn').innerHTML='';   ctimode=true; document.getElementById('ibchkbox').checked=true; setTimeout(ctilookfor, 3000); } } else { ctimode=false; }<br \/>\n}<br \/>\n<br \/>\nfunction ctilookfor() {<br \/>\n  var longlen=-1, detid='', prectis=null, ihf='', dutwo='';<br \/>\n  prad=200;<br \/>\n  preihf='';<br \/>\n  if (!ctimode) {<br \/>\n    ctiname='';<br \/>\n  } else if (ctiname != '' && (document.getElementById('dtlv') || document.getElementById('agifn').innerHTML.trim() != '')) {<br \/>\n    if (ansis != '' && document.getElementById('agifn').innerHTML.trim() != '') {<br \/>\n       detid='agifn';<br \/>\n       ihf='agifn';<br \/>\n       prad=eval(-50 + eval('' + screen.width));<br \/>\n       ansis='';<br \/>\n       preihf='icontent';<br \/>\n       dutwo=getwh(document.getElementById('agifn').innerHTML);<br \/>\n       longlen=eval('' + dutwo.length);<br \/>\n    }<br \/>\n    if (document.getElementById('dtlv')) {<br \/>\n    if (eval('' + document.getElementById('dtlv').innerHTML.length) &gt; eval('' + longlen)) {<br \/>\n      longlen=eval('' + document.getElementById('dtlv').innerHTML.length);<br \/>\n      if (document.getElementById('dtlv').innerHTML.indexOf('&lt;video') != -1) {<br \/>\n        detid='dtlv';<br \/>\n        if (document.getElementById('vb')) {<br \/>\n          prectis=document.getElementById('vb').getBoundingClientRect();<br \/>\n          prad=Math.max(eval('' + prectis.width), eval('' + prectis.height));<br \/>\n          ihf='divvb';<br \/>\n          preihf='pre' + ihf;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    if (eval('' + document.getElementById('dtla').innerHTML.length) &gt; eval('' + longlen)) {<br \/>\n      longlen=eval('' + document.getElementById('dtla').innerHTML.length);<br \/>\n      if (document.getElementById('dtla').innerHTML.indexOf('&lt;audio') != -1) {<br \/>\n        detid='dtla';<br \/>\n        if (document.getElementById('ab')) {<br \/>\n          prectis=document.getElementById('ab').getBoundingClientRect();<br \/>\n          prad=Math.max(eval('' + prectis.width), eval('' + prectis.height));<br \/>\n          ihf='divab';<br \/>\n          preihf='pre' + ihf;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    if (ihf != 'divvb' && eval('' + document.getElementById('dtli').innerHTML.length) &gt; eval('' + longlen)) {<br \/>\n      longlen=eval('' + document.getElementById('dtli').innerHTML.length);<br \/>\n      if (document.getElementById('dtli').innerHTML.indexOf('&lt;img') != -1) {<br \/>\n        detid='dtli';<br \/>\n        if (document.getElementById('gb')) {<br \/>\n          prectis=document.getElementById('gb').getBoundingClientRect();<br \/>\n          prad=Math.max(eval('' + prectis.width), eval('' + prectis.height));<br \/>\n          ihf='divgb';<br \/>\n          preihf='pre' + ihf;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    if (detid != '' && ihf != '') {<br \/>\n      \/\/alert('' + prectis.width + ' becomes ' + eval(50 + eval(2 * eval('' + prectis.width))));<br \/>\n      \/\/document.getElementById('pre' + ihf).innerHTML='&lt;iframe frameborder=0 style=\"width:' + eval(50 + eval(1 * eval('' + prectis.width))) + 'px;height:' + eval(50 + eval(1 * eval('' + prectis.height))) + 'px;\" data-onload=\"document.getElementById(' + \"'\" + ihf + \"'\" + ').style.display=' + \"'\" + 'none' + \"'\" + ';\" id=ifon src=\"\/HTMLCSS\/circular_text.html?id=' + detid + '&idget=' + ihf.replace('div','') + '&ihfill=' + ihf + '&radius=' + ('' + eval(prad \/ 2)).split('.')[0] + '.360&widxth=' + eval(1 * eval('' + prectis.width)) + '&heigxht=' + eval(1 * eval('' + prectis.height)) + '&text=' + encodeURIComponent(ctiname) + '&fontsize=18&im=' + encodeURIComponent('data:') + '\"&gt;&lt;\/iframe&gt;';<br \/>\n      lastsrc='\/HTMLCSS\/circular_text.html?id=' + detid + '&idget=' + ihf.replace('div','') + '&ihfill=' + ihf + '&radius=' + ('' + eval(prad \/ 2)).split('.')[0] + '.360&text=' + encodeURIComponent(ctiname) + '&fontsize=18&im=' + encodeURIComponent('data:') + iusuffix;<br \/>\n      iusuffix='';<br \/>\n      if (dutwo.indexOf('Data:') != 0 && document.getElementById(preihf).innerHTML.indexOf('?repeat=repeat&bsize=auto&') == -1) {<br \/>\n      document.getElementById(preihf).innerHTML='&lt;iframe id=pif frameborder=0 style=\"width:' + eval(50 + eval(1 * eval('' + prad))) + 'px;height:' + eval(50 + eval(1 * eval('' + prad))) + 'px;\" data-onload=\"document.getElementById(' + \"'\" + ihf + \"'\" + ').style.display=' + \"'\" + 'none' + \"'\" + ';\" id=ifon src=\"' + lastsrc + '\"&gt;&lt;\/iframe&gt;';<br \/>\n      document.getElementById('dctimode').innerHTML='';<br \/>\n      setTimeout(agnone, 9000);<br \/>\n      }<br \/>\n      ctiname='';<br \/>\n    }<br \/>\n    setTimeout(ctilookfor, 3000);<br \/>\n  } else {<br \/>\n    setTimeout(ctilookfor, 3000);<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction agnone() {<br \/>\n      document.getElementById('agifn').innerHTML='';<br \/>\n      if (document.getElementById('cirdec').value != '') {<br \/>\n      document.getElementById('optif').innerText=document.getElementById('cirdec')[document.getElementById('cirdec').selectedIndex].innerText; \/\/'Iframe via Media URL or Data URI';<br \/>\n      document.getElementById('cirdec').value='';<br \/>\n      }<br \/>\n}<br \/>\n<br \/>\nfunction moveto(iois) {<br \/>\n}<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------GETME\">client_browsing.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\" title=\"Click picture\">inhouse conduit<\/a> to HTML5 File API object (local file) browsing, using <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\">today&#8217;s changed Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html--------------GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-around-media-data-uri-tutorial\/'>Circular Text Around Media Data URI Tutorial<\/a> ...<\/p-->\n<hr>\n<p id='ctamt'>Previous relevant <a target=_blank title='Circular Text Around Media Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-around-media-tutorial\/'>Circular Text Around Media 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\/client_browsing.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text Around Media Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text_media.jpg\" title=\"Circular Text Around Media Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text Around Media Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Circle Terminology in Mathematics Tutorial' href='#ctmt'>Circle Terminology in Mathematics Tutorial<\/a>&#8216;s &#8230;<\/p>\n<blockquote style='font-size:8px;'>\n<ul>\n<li>inner text only<\/li>\n<li>inner text and a relative or absolute image URL <font size=1>(which we were happy to discover yesterday could be an animated GIF)<\/font><\/li>\n<li>relative or absolute image URL &#8230; and today we add onto that list &#8230;<\/li>\n<li>no inner text but a data URI &#8220;svg+xml&#8221; protocol <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> data background content<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; &#8220;Circular Text&#8221; hosting element background content types list is extended with today&#8217;s work <font color=blue>to become<\/font> &#8230;<\/p>\n<ul>\n<li>inner text only<\/li>\n<li>inner text and a relative or absolute image URL <font size=1>(which we were happy to discover yesterday could be an animated GIF)<\/font><\/li>\n<li>relative or absolute image URL &#8230; and today we add onto that list &#8230;<\/li>\n<li>no inner text but a data URI &#8220;svg+xml&#8221; protocol <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> data background content<\/li>\n<li><font color=blue>data URI image data as a background image<\/font><\/li>\n<li><font color=blue>data URI video data as a nested video element<\/font><\/li>\n<li><font color=blue>data URI audio data as a nested audio element<\/font><\/li>\n<li><font color=blue>data URI media data deduced via a user entered media URL interactively<\/font><\/li>\n<\/ul>\n<p> &#8230; with respect to our &#8216;atend&#8217; (div) element we apply circular text to in our &#8220;Circular Text tool web application&#8221; that is called in a wide variety of guises, now, as to can imagine, by a variety of parent web applications.<\/p>\n<p>Today&#8217;s parent web application getting acquainted with our &#8220;Circular Text tool&#8221; is a tool itself, it being <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html------------------------GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html------------------------GETME\">client_browsing.htm<\/a> inhouse conduit to HTML5 File API object (local file) browsing, itself &#8230;<\/p>\n<ul>\n<li>often called by Grandparent web applications interested in browsing &#8230; but today, we are more interested in its (very original) use, being &#8230;<\/li>\n<li>as a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">web application called from a web browser address bar<\/a> where we have overwritten (the seen, in this scenario) what used to be the hardcoding <font color=blue>Iframe<\/font> with &#8230;<br \/>\n<code><br \/>\n&lt;select style=display:inline-block; id=cirdec onchange=cirdecf(this);&gt;&lt;option value=''&gt;<font color=blue>Iframe<\/font>&lt;\/option&gt;&lt;option value='ct'&gt;Circular Text Iframe&lt;\/option&gt;&lt;option value='CT'&gt;Circular Text Iframe via Media URL&lt;\/option&gt;&lt;\/select&gt;<br \/>\n<\/code><br \/>\n &#8230; calling on new Javascript &#8230;<br \/>\n<code><br \/>\nfunction cirdecf(oosel) {<br \/>\n  ansis='';<br \/>\n  if (oosel.value.toLowerCase() == 'ct') { document.getElementById('dctimode').innerHTML='';  if (oosel.value != 'ct') { ansis=prompt('What is your media URL?',''); if (ansis == null) { ansis=''; } if (ansis.trim() != '') { if (ansis.indexOf('\/') != -1) { ctiname=ansis.split('\/')[-1 + ansis.split('\/').length]; } else if (ansis.indexOf('\\\\'.substring(0,1)) != -1) { ctiname=ansis.split('\\\\'.substring(0,1))[-1 + ansis.split('\\\\'.substring(0,1)).length]; } else { ctiname=ansis; }  document.getElementById('dctimode').innerHTML='&lt;iframe src=\"\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(ansis) + '\"&gt;&lt;\/iframe&gt;'; ctimode=true; document.getElementById('ibchkbox').checked=true;  setTimeout(ctilookfor, 3000); }  } else {  ctimode=true; document.getElementById('ibchkbox').checked=true; setTimeout(ctilookfor, 3000); } } else { ctimode=false; }<br \/>\n}<br \/>\n<br \/>\nfunction ctilookfor() {<br \/>\n  var longlen=-1, detid='', prad=200, prectis=null, ihf='', preihf='';<br \/>\n  if (!ctimode) {<br \/>\n    ctiname='';<br \/>\n  } else if (ctiname != '' && (document.getElementById('dtlv') || document.getElementById('agifn').innerHTML.trim() != '')) {<br \/>\n    if (ansis != '' && document.getElementById('agifn').innerHTML.trim() != '') {<br \/>\n       detid='agifn';<br \/>\n       ihf='agifn';<br \/>\n       prad=eval(-50 + eval('' + screen.width));<br \/>\n       longlen=eval('' + document.getElementById('agifn').innerHTML.length);<br \/>\n       ansis='';<br \/>\n       preihf='icontent';<br \/>\n    }<br \/>\n    if (document.getElementById('dtlv')) {<br \/>\n    if (eval('' + document.getElementById('dtlv').innerHTML.length) &gt; eval('' + longlen)) {<br \/>\n      longlen=eval('' + document.getElementById('dtlv').innerHTML.length);<br \/>\n      if (document.getElementById('dtlv').innerHTML.indexOf('&lt;video') != -1) {<br \/>\n        detid='dtlv';<br \/>\n        if (document.getElementById('vb')) {<br \/>\n          prectis=document.getElementById('vb').getBoundingClientRect();<br \/>\n          prad=Math.max(eval('' + prectis.width), eval('' + prectis.height));<br \/>\n          ihf='divvb';<br \/>\n          preihf='pre' + ihf;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    if (eval('' + document.getElementById('dtla').innerHTML.length) &gt; eval('' + longlen)) {<br \/>\n      longlen=eval('' + document.getElementById('dtla').innerHTML.length);<br \/>\n      if (document.getElementById('dtla').innerHTML.indexOf('&lt;audio') != -1) {<br \/>\n        detid='dtla';<br \/>\n        if (document.getElementById('ab')) {<br \/>\n          prectis=document.getElementById('ab').getBoundingClientRect();<br \/>\n          prad=Math.max(eval('' + prectis.width), eval('' + prectis.height));<br \/>\n          ihf='divab';<br \/>\n          preihf='pre' + ihf;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    if (ihf != 'divvb' && eval('' + document.getElementById('dtli').innerHTML.length) &gt; eval('' + longlen)) {<br \/>\n      longlen=eval('' + document.getElementById('dtli').innerHTML.length);<br \/>\n      if (document.getElementById('dtli').innerHTML.indexOf('&lt;img') != -1) {<br \/>\n        detid='dtli';<br \/>\n        if (document.getElementById('gb')) {<br \/>\n          prectis=document.getElementById('gb').getBoundingClientRect();<br \/>\n          prad=Math.max(eval('' + prectis.width), eval('' + prectis.height));<br \/>\n          ihf='divgb';<br \/>\n          preihf='pre' + ihf;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    if (detid != '' && ihf != '') {<br \/>\n      \/\/alert('' + prectis.width + ' becomes ' + eval(50 + eval(2 * eval('' + prectis.width))));<br \/>\n      \/\/document.getElementById('pre' + ihf).innerHTML='&lt;iframe frameborder=0 style=\"width:' + eval(50 + eval(1 * eval('' + prectis.width))) + 'px;height:' + eval(50 + eval(1 * eval('' + prectis.height))) + 'px;\" data-onload=\"document.getElementById(' + \"'\" + ihf + \"'\" + ').style.display=' + \"'\" + 'none' + \"'\" + ';\" id=ifon src=\"\/HTMLCSS\/circular_text.html?id=' + detid + '&idget=' + ihf.replace('div','') + '&ihfill=' + ihf + '&radius=' + ('' + eval(prad \/ 2)).split('.')[0] + '.360&widxth=' + eval(1 * eval('' + prectis.width)) + '&heigxht=' + eval(1 * eval('' + prectis.height)) + '&text=' + encodeURIComponent(ctiname) + '&fontsize=18&im=' + encodeURIComponent('data:') + '\"&gt;&lt;\/iframe&gt;';<br \/>\n      document.getElementById(preihf).innerHTML='&lt;iframe frameborder=0 style=\"width:' + eval(50 + eval(1 * eval('' + prad))) + 'px;height:' + eval(50 + eval(1 * eval('' + prad))) + 'px;\" data-onload=\"document.getElementById(' + \"'\" + ihf + \"'\" + ').style.display=' + \"'\" + 'none' + \"'\" + ';\" id=ifon src=\"\/HTMLCSS\/circular_text.html?id=' + detid + '&idget=' + ihf.replace('div','') + '&ihfill=' + ihf + '&radius=' + ('' + eval(prad \/ 2)).split('.')[0] + '.360&text=' + encodeURIComponent(ctiname) + '&fontsize=18&im=' + encodeURIComponent('data:') + '\"&gt;&lt;\/iframe&gt;';<br \/>\n      ctiname='';<br \/>\n    }<br \/>\n    setTimeout(ctilookfor, 3000);<br \/>\n  } else {<br \/>\n    setTimeout(ctilookfor, 3000);<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction moveto(iois) {<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; and one new static HTML element &#8230;<br \/>\n<code><br \/>\n&lt;div id=dctimode style=display:none;&gt;&lt;\/div&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; to set up an arrangement where no form or Ajax FormData related call uploads these data URIs, just the child iframe&#8217;s &#8220;looking back&#8221; relationship to the parent webpage via &#8220;parent.document&#8221; related code is how the media data ends up at the child iframe element.  Why is this important?  It is much less work to use an iframe, which allows for CSS styled displays &#8220;plonked&#8221; where you want them &#8230; hence the word &#8220;tool&#8221; we are using a lot for this project.<\/p>\n<p>Examine the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-------------GETME\">child iframe changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-------------GETME\">circular_text.html<\/a> &#8220;Circular Text&#8221; helper tool and you&#8217;ll see that GET parameter &#8220;im&#8221; (for innards<font size=1>, obviously?!<\/font>) <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\nvar atendim=location.search.split('im=')[1] ? decodeURIComponent(location.search.split('im=')[1]).split('&')[0] : '';<br \/>\nvar parid=location.search.split('id=')[1] ? decodeURIComponent(location.search.split('id=')[1]).split('&')[0].replace(\/\\+\/g,' ') : '';<br \/>\n<br \/>\n<font color=blue>if (atendim == 'data:' && parid.trim() != '') {<br \/>\n   atendim='data:' + parent.document.getElementById(parid).innerHTML.split('data:')[1].split(\"'\")[0].split('\"')[0].split('&gt;')[0];<br \/>\n}<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; right at the start, by which time the data is over to the child iframe, and concepts conjoin.<\/p>\n<p>Of interest was the border-radius clobbering of a video element &#8220;play button&#8221;, and though you can &#8220;guess click it&#8221; we did supply an inhouse &#8220;play emoji button&#8221; &#8230;<\/p>\n<p><code><br \/>\n&lt;div id=myplay title='Click to play video' style='display:none;font-color:red;font-size:24px;' data-status='stop' onclick=\"if (this.getAttribute('data-status') == 'stop') { this.title='Click to pause video'; this.setAttribute('data-status', 'start'); document.getElementById('myvidis').play(); this.innerHTML='&amp;#9208;'; } else { this.title='Click to play video'; this.setAttribute('data-status', 'stop'); document.getElementById('myvidis').pause(); this.innerHTML='&amp;#9654;'; } \"&gt;&amp;#9654;&lt;\/div&gt;<br \/>\n<\/code> <\/p>\n<p> &#8230; that is moved into position <font color=blue>and kept in the user&#8217;s &#8220;eye line&#8221;, as relevant<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction bitlat() {<br \/>\n         vrect=document.getElementById('atend').getBoundingClientRect();<br \/>\n         \/\/alert('' + vrect.bottom);<br \/>\n<br \/> <br \/>\n         document.getElementById('myplay').style.position='absolute';<br \/>\n         \/\/alert('2:' + vrect.bottom);<br \/>\n         document.getElementById('myplay').style.top='' + eval(15 + eval('' + vrect.top)) + 'px';<br \/>\n         \/\/alert('3:' + vrect.bottom);<br \/>\n         document.getElementById('myplay').style.left='2px';<br \/>\n         \/\/alert('4:' + vrect.bottom);<br \/>\n         document.getElementById('myplay').style.zIndex='99';<br \/>\n         \/\/alert('5:' + vrect.bottom);<br \/>\n         document.getElementById('myplay').style.opacity='1.0';<br \/>\n         \/\/alert('6:' + vrect.bottom);<br \/>\n         document.getElementById('myplay').style.display='inline-block';<br \/>\n         \/\/alert('7:' + document.getElementById('myplay').outerHTML);<br \/>\n         \/\/document.getElementById('myvvidis').scrollIntoView();<br \/>\n         setTimeout(bitlatr, 2000);<br \/>\n}<br \/>\n<br \/>\nfunction bitlatr() {<br \/>\n         \/\/var arectis=document.body.getBoundingClientRect();<br \/>\n         \/\/console.log('parent.document.body.scrollTop()=' + window.parent.scrollY);<br \/>\n         \/\/document.getElementById('myplay').style.top='' + eval(eval(15 + eval('' + vrect.top)) + eval('' + parent.document.documentElement.scrollTop | parent.document.body.scrollTop)) + 'px';<br \/>\n         document.getElementById('myplay').style.top='' + eval(eval(15 + eval('' + vrect.top)) + eval('' + window.parent.scrollY)) + 'px';<br \/>\n         setTimeout(bitlatr, 5000);<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; amidst the circular text that shows the media file <sub>base<\/sub>name.<\/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\/circular-text-around-media-tutorial\/'>Circular Text Around Media Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ctmt'>Previous relevant <a target=_blank title='Circle Terminology in Mathematics Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circle-terminology-in-mathematics-tutorial\/'>Circle Terminology in Mathematics 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\/circle_terminology.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circle Terminology in Mathematics Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.jpg\" title=\"Circle Terminology in Mathematics Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circle Terminology in Mathematics Tutorial<\/p><\/div>\n<p>We&#8217;ve got another style of usage to make of &#8220;Circular Text&#8221; ideas today, presenting a &#8220;Circle Terminology in Mathematics&#8221; quiz, further to yesterday&#8217;s <a title='Circular Text Button Solar System Statistics Tutorial' href='#ctbssst'>Circular Text Button Solar System Statistics Tutorial<\/a>.<\/p>\n<p>This time we are asking our <i>circular_text.html<\/i> &#8220;hosted in an iframe&#8221; tool to change, because we want to cater for another way to express aspects about the &#8216;atend&#8217; element background look.  You might <font size=1>(or you mightn&#8217;t)<\/font> recall that so far we allow for the &#8220;innards&#8221; of the &#8216;atend&#8217; element to contain &#8230;<\/p>\n<ul>\n<li>inner text only<\/li>\n<li>inner text and a relative or absolute image URL <font size=1>(which we were happy to discover yesterday could be an animated GIF)<\/font><\/li>\n<li>relative or absolute image URL &#8230; and today we add onto that list &#8230;<\/li>\n<li>no inner text but a data URI &#8220;svg+xml&#8221; protocol <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> data background content<\/li>\n<\/ul>\n<p> &#8230; which we use in our &#8220;Circle Terminology in Mathematics&#8221; (or perhaps Circle Terminology in Geometry) quiz.<\/p>\n<p>This new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html_GETME\">&#8220;proof of concept&#8221; circle_terminology.html<\/a> HTML and Javascript quiz <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html\" title=\"Click picture\">web application<\/a>, you can <a href='#ifssz'>also try below<\/a>, incorporates that Javascript logic passed through to the iframe idea, as a way that the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html------------GETME\">child iframe changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html------------GETME\">circular_text.html<\/a> &#8220;Circular Text&#8221; helper tool performs the user interaction, and via <i>parent.document<\/i> style looking back at parent score and goes elements, controls the quiz scoring &#8230;<\/p>\n<p><code><br \/>\nvar egtextis=location.search.split('text=')[1] ? (location.search.split('text=')[1].split('&')[0]).replace(\/\\+\/g, ' ') : '';<br \/>\nvar qans=location.search.split('answer=')[1] ? decodeURIComponent(location.search.split('answer=')[1]).split('&')[0].replace(\/\\+\/g,' ') : '';<br \/>\nvar parid=location.search.split('id=')[1] ? decodeURIComponent(location.search.split('id=')[1]).split('&')[0].replace(\/\\+\/g,' ') : '';<br \/>\n<br \/>\nfunction qask() {<br \/>\n  var qqans='';<br \/>\n  if (qans != '') {<br \/>\n    qqans=prompt('What is your answer?  Cannot stand it anymore, and need you to tell me the answer, you should enter a question mark.', '');<br \/>\n    if (qqans != null) {<br \/>\n      if (qqans == '?') {<br \/>\n        alert(qans.substring(0,1).toUpperCase() + qans.substring(1).toLowerCase());<br \/>\n        qqans=null;<br \/>\n      }<br \/>\n    }<br \/>\n    if (qqans == null) {<br \/>\n      qqans='';<br \/>\n    } else if (qqans.toLowerCase() == qans.toLowerCase()) {<br \/>\n      if (parid != '') {<br \/>\n        if (parent.document.getElementById(parid)) {<br \/>\n          parent.document.getElementById(parid).src=parent.document.getElementById(parid).src.replace(egtextis, encodeURIComponent(qqans.substring(0,1).toUpperCase() + qqans.substring(1).toLowerCase())).replace(\/\\%22red\\%22\/g, '%22green%22').replace(\/\\%22blue\\%22\/g, '%22purple%22');<br \/>\n          if (parent.document.getElementById('score') && parent.document.getElementById('goes')) {<br \/>\n            parent.document.getElementById('score').innerHTML='' + eval(1 + eval('' + parent.document.getElementById('score').innerHTML));<br \/>\n            parent.document.getElementById('goes').innerHTML='' + eval(1 + eval('' + parent.document.getElementById('goes').innerHTML));<br \/>\n          } else {<br \/>\n            alert('Well done!');<br \/>\n          }<br \/>\n        } else {<br \/>\n          alert('Well done!');<br \/>\n        }<br \/>\n      } else {<br \/>\n        alert('Well done!');<br \/>\n      }<br \/>\n    } else {<br \/>\n      if (parid != '') {<br \/>\n        if (parent.document.getElementById(parid)) {<br \/>\n          if (parent.document.getElementById('goes')) {<br \/>\n            parent.document.getElementById('goes').innerHTML='' + eval(1 + eval('' + parent.document.getElementById('goes').innerHTML));<br \/>\n          } else {<br \/>\n            alert('Bad luck.');<br \/>\n          }<br \/>\n        } else {<br \/>\n          alert('Bad luck.');<br \/>\n        }<br \/>\n      } else {<br \/>\n        alert('Bad luck.');<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>On the way into the iframe, question mark characters replace the answers, and when a correct answer happens they are replaced by the correct answer, along with some SVG element colour changes.<\/p>\n<div style='width:1800px;height:1750px;overflow:visible;'>\n<iframe id=ifssz style='width:1800px;height:1750px;transform:scale(0.36);transform-origin:0 0;' src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html\"><\/iframe>\n<\/div>\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\/circle-terminology-in-mathematics-tutorial\/'>Circle Terminology in Mathematics Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ctbssst'>Previous relevant <a target=_blank title='Circular Text Button Solar System Statistics Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-button-solar-system-statistics-tutorial\/'>Circular Text Button Solar System Statistics 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\/solar_system_planets_and_sun.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text Button Solar System Statistics Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/solar_system_planets_and_sun_more.jpg\" title=\"Circular Text Button Solar System Statistics Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text Button Solar System Statistics Tutorial<\/p><\/div>\n<p>There were a couple of issues we wanted to address, today, to do towards extending the progress of yesterday&#8217;s <a title='Circular Text Button Solar System Tutorial' href='#ctbsst'>Circular Text Button Solar System Tutorial<\/a> &#8220;Solar System&#8221; web application &#8230;<\/p>\n<ul>\n<li>the one we were sure we could make happen, scouring <a target=_blank title=NASA href='https:\/\/solarsystem.nasa.gov\/'>NASA<\/a> further, regarding statistics and presenting that via displays interfacing to <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Bar Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/barchart'>Bar Chart<\/a>s functioning via a new dropdown, and its Javascript onchange event &#8230;<br \/>\n<code><br \/>\n  var pandsnames=['Sun','Mercury','Venus','Earth','Mars','Jupiter','Saturn','Uranus','Neptune'];<br \/>\n  var pandsradis=[69634,244,605,637,339,6991,5823,1576,1530];<br \/>\n<br \/>\n  var ds=[0,58000000,108000000,150000000,228000000,779000000,1400000000,2900000000,4500000000];<br \/>\n  \/\/ Thanks to <a target=_blank href='http:\/\/hyperphysics.phy-astr.gsu.edu\/hbase\/Solar\/soldata2.html' title='http:\/\/hyperphysics.phy-astr.gsu.edu\/hbase\/Solar\/soldata2.html'>ht<font color=black>tp<\/font>:\/\/hyperphysics.phy-astr.gsu.edu\/hbase\/Solar\/soldata2.html<\/a><br \/>\n  var omax=[0,69800000,108900000,152100000,249100000,815700000,1503000000,3003000000,4546000000];<br \/>\n  var omin=[0,46000000,107500000,147100000,138200000,495100000,1348000000,2739000000,4456000000];<br \/>\n  var yedop=[0,88,225,365,687,4333,10759,30687,60190];<br \/>\n  var dedop=[0,1408,5832,24,25,10,11,17,16];<br \/>\n<br \/>\n  var bc='https:\/\/www.rjmprogramming.com.au\/PHP\/BarChart\/bar_chart.php?title=Sun&onclick=y&label=Planet&value=One&data=,%20[~Mercury~,23]%20,%20[~Venus~,45]';<br \/>\n<br \/>\n  function changeit(osel) {<br \/>\n     var ij=0, ourbc='', dprefix='';<br \/>\n     if (osel.value == 't') {<br \/>\n       ourbc=bc.split('&data=')[0].replace('=Sun', '=' + encodeURIComponent('Distance to Sun in Millions of Kilometers')).replace('=One', '=' + encodeURIComponent('Distance to Sun (million kilometers)')) + '&data=';<br \/>\n       for (ij=1; ij&lt;pandsnames.length; ij++) {<br \/>\n         ourbc+=dprefix + ',%20[~' + pandsnames[ij] + '~,' + eval(ds[ij] \/ 1000000) + ']';<br \/>\n         dprefix='%20';<br \/>\n       }<br \/>\n       document.getElementById('tdt').innerHTML='';<br \/>\n       document.getElementById('tdo').innerHTML='';<br \/>\n       document.getElementById('tdy').innerHTML='';<br \/>\n       document.getElementById('tdd').innerHTML='';<br \/>\n       document.getElementById('tdr').innerHTML='';<br \/>\n       document.getElementById('ssmall').innerHTML='Not to Scale Animated GIF and Distance to Sun ...';<br \/>\n       document.getElementById('dsmall').style.display='block';<br \/>\n       document.getElementById('dsmall').open=true;<br \/>\n       document.getElementById('td' + osel.value).innerHTML='&lt;iframe name=stat style=width:800px;height:500px; src=\"' + ourbc + '\" title=\"Distancce to Sun\"&gt;&lt;\/iframe&gt;';<br \/>\n       window.open(ourbc, 'stat', 'top=50,left=50,width=800,height=600');<br \/>\n     } else if (osel.value == 'r') {<br \/>\n       ourbc=bc.split('&data=')[0].replace('=Sun', '=' + encodeURIComponent('Radius Relative to Sun (km)')).replace('=One', '=' + encodeURIComponent('Radius Planet,Radius Sun')) + '&data=';<br \/>\n       for (ij=1; ij&lt;pandsnames.length; ij++) {<br \/>\n         ourbc+=dprefix + ',%20[~' + pandsnames[ij] + '~,' + eval(10 * pandsradis[ij]) + ',696340]';<br \/>\n         dprefix='%20';<br \/>\n       }<br \/>\n       document.getElementById('tdt').innerHTML='';<br \/>\n       document.getElementById('tdo').innerHTML='';<br \/>\n       document.getElementById('tdy').innerHTML='';<br \/>\n       document.getElementById('tdd').innerHTML='';<br \/>\n       document.getElementById('tdr').innerHTML='';<br \/>\n       document.getElementById('ssmall').innerHTML='Not to Scale Animated GIF and Radius Relative to Sun ...';<br \/>\n       document.getElementById('dsmall').style.display='block';<br \/>\n       document.getElementById('dsmall').open=true;<br \/>\n       document.getElementById('td' + osel.value).innerHTML='&lt;iframe name=stat style=width:800px;height:500px; src=\"' + ourbc + '\" title=\"Radius Relative to Sun\"&gt;&lt;\/iframe&gt;';<br \/>\n       window.open(ourbc, 'stat', 'top=50,left=50,width=800,height=600');<br \/>\n     } else if (osel.value == 'o') {<br \/>\n       ourbc=bc.split('&data=')[0].replace('=Sun', '=' + encodeURIComponent('Orbit around the Sun (km)')).replace('=One', '=' + encodeURIComponent('Orbit Minimum Distance,Orbit Maximum Distance')) + '&data=';<br \/>\n       for (ij=1; ij&lt;pandsnames.length; ij++) {<br \/>\n         ourbc+=dprefix + ',%20[~' + pandsnames[ij] + '~,' + eval(1 * omin[ij]) + ',' + eval(1 * omax[ij]) + ']';<br \/>\n         dprefix='%20';<br \/>\n       }<br \/>\n       document.getElementById('tdt').innerHTML='';<br \/>\n       document.getElementById('tdo').innerHTML='';<br \/>\n       document.getElementById('tdy').innerHTML='';<br \/>\n       document.getElementById('tdd').innerHTML='';<br \/>\n       document.getElementById('tdr').innerHTML='';<br \/>\n       document.getElementById('ssmall').innerHTML='Not to Scale Animated GIF and Orbit Around the Sun ...';<br \/>\n       document.getElementById('dsmall').style.display='block';<br \/>\n       document.getElementById('dsmall').open=true;<br \/>\n       document.getElementById('td' + osel.value).innerHTML='&lt;iframe name=stat style=width:800px;height:500px; src=\"' + ourbc + '\" title=\"Orbit Around the Sun\"&gt;&lt;\/iframe&gt;';<br \/>\n       window.open(ourbc, 'stat', 'top=50,left=50,width=800,height=600');<br \/>\n     } else if (osel.value == 'y') {<br \/>\n       ourbc=bc.split('&data=')[0].replace('=Sun', '=' + encodeURIComponent('Planet Year Earth Days')).replace('=One', '=' + encodeURIComponent('Planet Year Earth Days')) + '&data=';<br \/>\n       for (ij=1; ij&lt;pandsnames.length; ij++) {<br \/>\n         ourbc+=dprefix + ',%20[~' + pandsnames[ij] + '~,' + yedop[ij] + ']';<br \/>\n         dprefix='%20';<br \/>\n       }<br \/>\n       document.getElementById('tdt').innerHTML='';<br \/>\n       document.getElementById('tdo').innerHTML='';<br \/>\n       document.getElementById('tdy').innerHTML='';<br \/>\n       document.getElementById('tdd').innerHTML='';<br \/>\n       document.getElementById('tdr').innerHTML='';<br \/>\n       document.getElementById('ssmall').innerHTML='Not to Scale Animated GIF and Planet Year around Sun Earth Days ...';<br \/>\n       document.getElementById('dsmall').style.display='block';<br \/>\n       document.getElementById('dsmall').open=true;<br \/>\n       document.getElementById('td' + osel.value).innerHTML='&lt;iframe name=stat style=width:800px;height:500px; src=\"' + ourbc + '\" title=\"Planet Year around Sun Earth Days\"&gt;&lt;\/iframe&gt;';<br \/>\n       window.open(ourbc, 'stat', 'top=50,left=50,width=800,height=600');<br \/>\n     } else if (osel.value == 'd') {<br \/>\n       ourbc=bc.split('&data=')[0].replace('=Sun', '=' + encodeURIComponent('Planet Day Earth Hours')).replace('=One', '=' + encodeURIComponent('Planet Year Earth Hours')) + '&data=';<br \/>\n       for (ij=1; ij&lt;pandsnames.length; ij++) {<br \/>\n         ourbc+=dprefix + ',%20[~' + pandsnames[ij] + '~,' + dedop[ij] + ']';<br \/>\n         dprefix='%20';<br \/>\n       }<br \/>\n       document.getElementById('tdt').innerHTML='';<br \/>\n       document.getElementById('tdo').innerHTML='';<br \/>\n       document.getElementById('tdy').innerHTML='';<br \/>\n       document.getElementById('tdd').innerHTML='';<br \/>\n       document.getElementById('tdr').innerHTML='';<br \/>\n       document.getElementById('ssmall').innerHTML='Not to Scale Animated GIF and Planet Day Earth Hours ...';<br \/>\n       document.getElementById('dsmall').style.display='block';<br \/>\n       document.getElementById('dsmall').open=true;<br \/>\n       document.getElementById('td' + osel.value).innerHTML='&lt;iframe name=stat style=width:800px;height:500px; src=\"' + ourbc + '\" title=\"Planet Day Earth Hours\"&gt;&lt;\/iframe&gt;';<br \/>\n       window.open(ourbc, 'stat', 'top=50,left=50,width=800,height=600');<br \/>\n     }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; logic and &#8230;<\/li>\n<li>the one we were happily surprised was not needing underlying <i>circular_text.html<\/i> changes, was to have as an underlying background image, an animated GIF (but we did need to remember some very nuanced inhouse <i>watermark<\/i> animated GIF creation rules)<\/li>\n<\/ul>\n<p>The day started wanting and wondering about what we often think is the <i>extension thought<\/i> to involving images in a piece of functionality, that of <i>animation<\/i> (and\/or other visual media) ideas that can be supported.  However, the trick here, with <i>circular text<\/i> and default <i>watermark<\/i> usage thoughts, was that we had to &#8220;middle&#8221; the inner text if it is vital, else the border radius applied to the circular text element will &#8220;curl&#8221; that watermark out of view.  But we eventually used a &#8230;<\/p>\n<p><code><br \/>\n#(150,150)<br \/>\n<\/code><\/p>\n<p> &#8230; in the &#8220;Tutorial Slideshow Title&#8221; textbox to plot our watermark at <font size=1>&#8230; you guessed it &#8230;<\/font> 150px 150px (left top) within the animated GIF slide image we access using <a target=_blank title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p>Feel free to (re-)try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/solar_system_planets_and_sun.html-GETME\" title='solar_system_planets_and_sun.html'>the second draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/solar_system_planets_and_sun.html-GETME\" title='solar_system_planets_and_sun.html'>solar_system_planets_and_sun.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/solar_system_planets_and_sun.html\">Solar System web application<\/a>, or <a href='#ifss'>try 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\/circular-text-button-solar-system-statistics-tutorial\/'>Circular Text Button Solar System Statistics Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ctbsst'>Previous relevant <a target=_blank title='Circular Text Button Solar System Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-button-solar-system-tutorial\/'>Circular Text Button Solar System 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\/solar_system_planets_and_sun.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text Button Solar System Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text_solar_system.gif\" title=\"Circular Text Button Solar System Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text Button Solar System Tutorial<\/p><\/div>\n<p>A web application we wanted to try incorporating our latest &#8220;Circular Text Buttons&#8221; onto yesterday&#8217;s <a title='Circular Text Button Nuance Tutorial' href='#ctbnt'>Circular Text Button Nuance Tutorial<\/a> start is a &#8230;<\/p>\n<blockquote><p>\nSolar System Planets and Sun to Scale\n<\/p><\/blockquote>\n<p> &#8230; web application.  That &#8220;to Scale&#8221; bit above will jar with the astronomers out there, that this will be very hard to achieve.  True, and we give over to &#8220;learnings&#8221; rather than &#8220;aesthetics&#8221; and &#8220;display&#8221; keeping the &#8220;to Scale&#8221; going, but aspects to this project in its favour are &#8230;<\/p>\n<ul>\n<li>planets are circular (when displayed in 2D) &#8230;<\/li>\n<li>lots of planets have an associated emoji (because of zodiac signs, for instance) that we can (quite forlornly) display as the circular text &#8230;<\/li>\n<li>Mercury fits<\/li>\n<\/ul>\n<p> &#8230; and that last item above led us to involving &#8220;details\/summary&#8221; reveal arrangements that start as closed except for Mercury&#8217;s one.  Others like Venus and Earth and Mars also fit within a laptop screen, but we&#8217;ll grant you the others are &#8220;off the charts&#8221;, so to speak!<\/p>\n<p>Regarding the getting of information here, we were not surprised that <a target=_blank title=NASA href='https:\/\/solarsystem.nasa.gov\/'>NASA<\/a> turned out to be our primary source of great reliable information, so, thanks.<\/p>\n<p>Getting a perspective on life can be got, perhaps, thinking about how small and fragile Earth is, even, around here, looking at <a target=_blank title='Local mountains' href='https:\/\/www.rjmprogramming.com.au\/thewest\/'>some of our mountains<\/a> around here, scary but puny by world standards, let alone the ones on <a target=_blank title=Mountains href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Frameset\/frameset_content.html'>Mars<\/a> &#8230; amazing!<\/p>\n<p>So, to see what we mean, feel free to try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/solar_system_planets_and_sun.html_GETME\" title='solar_system_planets_and_sun.html'>first draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/solar_system_planets_and_sun.html\">web application<\/a> (helped out by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-----------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-----------GETME\">circular_text.html<\/a>) you can also try below &#8230;<\/p>\n<p><iframe id=ifss style='width:100%;height:1050px;' src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/solar_system_planets_and_sun.html\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-circular-text-button-nuance-tutorial\/'>New Circular Text Button Nuance Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ctbnt'>Previous relevant <a target=_blank title='Circular Text Button Nuance Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-button-nuance-tutorial\/'>Circular Text Button Nuance 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\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text Button Nuance Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text_nuance.jpg\" title=\"Circular Text Button Nuance Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text Button Nuance Tutorial<\/p><\/div>\n<p>There is little doubt that an objective look at a project the day after an initial &#8220;proof of concept&#8221; phase can be worth it.  It can be our &#8230;<\/p>\n<blockquote><p>\nNuance Day\n<\/p><\/blockquote>\n<p> &#8230; but hopefully not a &#8220;Throw Out Day&#8221; when the realities of data meet the HTML and Javascript and CSS (and PHP or other serverside code) design you have.  Yesterday&#8217;s <a title='Circular Text Button Tutorial' href='#ctbt'>Circular Text Button Tutorial<\/a>&#8216;s &#8220;Circular Text Buttons&#8221; (the concept, and its associated web application conduit) have been improved, we hope, by a series of nuanced changes &#8230;<\/p>\n<ul>\n<li>as far as inner text goes, encase this in a &#8220;p&#8221; element so that we can <font color=blue>now go<\/font> &#8230;<br \/>\n<code><br \/>\n     if (atendih != '') { document.getElementById('atend').innerHTML=<strike style=color:blue;><font color=black>'&lt;br&gt;' + <\/font><\/strike><font color=blue>'&lt;p style=text-align:center;vertical-align:middle;&gt;' + <\/font>atendih<font color=blue> + '&lt;\/p&gt;'<\/font>; }<br \/>\n<\/code><br \/>\n &#8230; allowing for better control of inner text justification (thanks, <a target=_blank title='Useful webpage' href='https:\/\/stackoverflow.com\/questions\/14031740\/how-to-center-in-div-without-text-align'>useful nesting advice regarding text justification webpage<\/a>) &#8230; and in the same line of thinking regarding that struck out kludge above &#8230;\n<\/li>\n<li>we keep a textbox for entry purposes (because all this button stuff is optional, after all) but allow the user their own control over vertical positioning via the <font color=blue>new<\/font> placeholder advice &#8230;<br \/>\n<blockquote><p>\nthis text is in a circle &amp;#x1f34d; &amp;#x1f34c; (Optionally | separate words <font color=blue>(++ is line feed)<\/font> &#038; image URL &#038; onclick URL<font color=purple> or Javascript<\/font>)\n<\/p><\/blockquote>\n<p> &#8230; <strike>secondary kludge<\/strike> initiative to save the user the boredom of entering any <i>&lt;br&gt;<\/i> linefeeds themselves <font size=1>&#8230; heaven forebid!<\/font>\n<\/li>\n<li>and did you notice, above, the <font color=purple>quietly mentioned<\/font> last optional field idea that on top of &#8230;\n<ol>\n<li>onclick URL (yesterday&#8217;s assumption) &#8230; today we code for &#8230;<\/li>\n<li>your own onclick Javascript as a choice to ponder<\/li>\n<\/ol>\n<p> &#8230; as per &#8230;<br \/>\n<code><br \/>\n     if (atendiu != '') {<br \/>\n        <font color=purple>if (atendiu.substring(0,2) == '\/\/') {<br \/>\n          atendiu=document.URL.split('\/\/')[0] + atendiu;<br \/>\n        } else if (atendiu.substring(0,1) == '\/') {<br \/>\n          atendiu=document.URL.split('\/\/')[0] + '\/\/' + document.URL.split('\/\/')[1].split('\/')[0] + atendiu;<br \/>\n        } else if (atendiu.substring(0,4) == 'www.') {<br \/>\n          atendiu=document.URL.split('\/\/')[0] + '\/\/' + atendiu;<br \/>\n        }<\/font><br \/>\n        document.getElementById('atend').title = 'Click for ' + atendiu;<br \/>\n        document.getElementById('atend').style.cursor='pointer';<br \/>\n        document.getElementById('atend').setAttribute('data-url', atendiu);<br \/>\n        <font color=blue>var valid = \/^(ftp|http|https):\\\/\\\/[^ \"]+$\/.test(atendiu);  \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/1410311\/regular-expression-for-url-validation-in-javascript' href='https:\/\/stackoverflow.com\/questions\/1410311\/regular-expression-for-url-validation-in-javascript'>https:\/\/stackoverflow.com\/questions\/1410311\/regular-expression-for-url-validation-in-javascript<\/a><br \/>\n        if (valid) {<\/font><br \/>\n        document.getElementById('atend').addEventListener('click', function(evt) {  window.open(evt.target.getAttribute('data-url'), '_blank', 'top=50,left=50,width=600,height=600');  });<br \/>\n        <font color=blue>} else {<br \/>\n        document.getElementById('atend').addEventListener('click', function(event) {  eval(event.target.getAttribute('data-url'));  });<br \/>\n        }<\/font><br \/>\n     }<br \/>\n<\/code><br \/>\n &#8230; an example of which you can try below &#8230;<br \/>\n<iframe id=xmyesif name=xmyesif frameborder=0 style='width:400px;height:150px;margin:0 0 0 0;padding:0 0 0 0;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=55.360&#038;text=en%20en%20en%20en%20en%20en%20en%20en%20en%20en%20en%20en&#038;fontsize=14&#038;ih=Javascript&#038;im=%2FHTMLCSS%2Fwindow_object_method_override.jpg&#038;iu=var%20mya%3Dprompt(%5C%22Tahiti%20sounds%20nice.%20%20Madrid%20excellent!%20%20%20And%20we%20hear%20that%20people%20...%20some%20...%20go%20to%20Rio!%20%20What%20sayest%20thou%3F%5C%22%2C%5C%22%5C%22)%3B'><\/iframe>\n<\/li>\n<li>just as we allowed the new details\/summary <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>reveal<\/a> arrangement to start as not there for a button but there for everything else at the start, and as of yesterday for the button scenario we catered for the user toggling the visibility of the details\/summary elements (by adjusting CSS margin-top of element <i>atend<\/i>), today we return the compliment for the Analogue Clock and Roulette Wheel and Periodic Table Quiz parts of the web application functionality<\/li>\n<li>we add an &#8220;a&#8221; &#8220;-&#8221; link to start again with the default Circular Text, as default, webpage look<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html----------GETME\" title=\"circular_text.html\">today&#8217;s changed Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html----------GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link for you to try this <strike>new<\/strike> <font size=1>so yesterday<\/font> circular text button creating logic.<\/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\/circular-text-button-nuance-tutorial\/'>Circular Text Button Nuance Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ctbt'>Previous relevant <a target=_blank title='Circular Text Button Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-button-tutorial\/'>Circular Text Button 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\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text Button Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text_button.gif\" title=\"Circular Text Button Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text Button Tutorial<\/p><\/div>\n<p>At the end of March we made functionality extensions to our Circular Text web application featuring in <a title='Chemistry Wonder Periodic Table Quiz Tutorial' href='#cwptqt'>Chemistry Wonder Periodic Table Quiz Tutorial<\/a>, but concerning today&#8217;s idea we wanted to explore, it comes more in line with the idea of &#8230;<\/p>\n<p><code><br \/>\nweb application <i>tool<\/i><br \/>\n<\/code><\/p>\n<p> &#8230; involving the idea of incorporating circular text in the design and creation of a button.<\/p>\n<p>Getting this going, we could imagine uses straight from today&#8217;s amended code ideas, but the original thought for all this stemmed from another integration idea that we&#8217;ll see what happens about into the near future.<\/p>\n<p>We need to facilite additional optional pieces of information in addition to the already asked for &#8230;<\/p>\n<ul>\n<li>font size (in px)<\/li>\n<li>radius (in px)<\/li>\n<li>arc (in degrees)<\/li>\n<li>circular text &#8230; but, today, into that same &#8220;circular text&#8221; textbox (with the <font color=blue>new<\/font> <i>placeholder<\/i> advice) &#8230;<br \/>\n<blockquote><p>\nthis text is in a circle &amp;#x1f34d; &amp;#x1f34c;<font color=blue> (Optionally | separate words and image URL and onclick URL)<\/font>\n<\/p><\/blockquote>\n<p> &#8230; allowing for new optional &#8230;\n<\/li>\n<li>inner text (of the div element the circular text surrounds)<\/li>\n<li>background image URL (background-repeat:no-repeat; and background-size:cover;)<\/li>\n<li>onclick URL to navigate to<\/li>\n<\/ul>\n<p> &#8230; to open up the possibility of showing a user constructed button with a look that can resemble a button and <i>onclick<\/i> logic that can help this button be useful to a user, in a dynamic way, as you can see with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text_button.gif\">animated GIF<\/a> presentation, creating a button shown <a target=_blank title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=55.360&#038;text=es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es&#038;fontsize=14&#038;ih=Wikipedia&#038;im=%2FHTMLCSS%2Fworld.jpg&#038;iu=%2F%2Fes.wikipedia.org%2Fwiki%2FMadrid' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=55.360&#038;text=es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es&#038;fontsize=14&#038;ih=Wikipedia&#038;im=%2FHTMLCSS%2Fworld.jpg&#038;iu=%2F%2Fes.wikipedia.org%2Fwiki%2FMadrid'>here<\/a> or <a  title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=55.360&#038;text=es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es&#038;fontsize=14&#038;ih=Wikipedia&#038;im=%2FHTMLCSS%2Fworld.jpg&#038;iu=%2F%2Fes.wikipedia.org%2Fwiki%2FMadrid'  style='text-decoration:underline;cursor:pointer;' onclick=\"window.open('http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=55.360&#038;text=es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es&#038;fontsize=14&#038;ih=Wikipedia&#038;im=%2FHTMLCSS%2Fworld.jpg&#038;iu=%2F%2Fes.wikipedia.org%2Fwiki%2FMadrid','_blank','top=50,left=50,width=600,height=600');\">here<\/a> or <\/p>\n<form style=display:inline-block; target=myesif method=GET action=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html><input style=display:inline-block; type=hidden name=radius value='55.360'><\/input><input style=display:inline-block; type=hidden name=fontsize value='14'><\/input><input style=display:inline-block; type=hidden name=text value='es es es es es es es es es es es es'><\/input><input style=display:inline-block; type=hidden name=ih value='Wikipedia'><\/input><input style=display:inline-block; type=hidden name=im value='\/HTMLCSS\/world.jpg'><\/input><input id=iuid style=display:inline-block; type=hidden name=iu value='\/\/es.wikipedia.org\/wiki\/Madrid'><\/input><input style=display:inline-block; type=submit value='below' title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=55.360&#038;text=es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es&#038;fontsize=14&#038;ih=Wikipedia&#038;im=%2FHTMLCSS%2Fworld.jpg&#038;iu=%2F%2Fes.wikipedia.org%2Fwiki%2FMadrid' ><\/input><\/form>\n<p><!--a style='text-decoration:underline;cursor:pointer;' onclick=\"window.open('http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=55.360&text=es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es&fontsize=14&ih=Wikipedia&im=%2FHTMLCSS%2Fworld.jpg&iu=%2F%2Fes.wikipedia.org%2Fwiki%2FMadrid','myeesif');\">below<\/a--><\/p>\n<p><iframe onload=\"document.getElementById('iuis').value=document.URL.split('\/\/')[0] + '\/\/' + document.getElementById('iuis').value.split('\/\/')[1];\" id=myesif name=myesif frameborder=0 style='width:400px;height:150px;margin:0 0 0 0;padding:0 0 0 0;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=55.360&#038;text=es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es&#038;fontsize=14&#038;ih=Wikipedia&#038;im=%2FHTMLCSS%2Fworld.jpg&#038;iu=%2F%2Fes.wikipedia.org%2Fwiki%2FMadrid'><\/iframe><\/p>\n<p>Let&#8217;s see <font color=blue>how the onload event logic changed<\/font> below &#8230;<\/p>\n<p><code><br \/>\nfunction onl() {<br \/>\n  <font color=blue>var factor=1.0;<br \/>\n  var stt=0, stl=0;<\/font><br \/>\n  var crad=location.search.split('radius=')[1] ? decodeURIComponent(location.search.split('radius=')[1].split('&')[0]) : '' + rad;<br \/>\n  <font color=blue>if (atendih != '' || atendim != '' || atendiu != '') {<br \/>\n     \/\/document.title='' + eval(eval(-0.5 * screen.width) + eval(crad \/ 2.0) - 30) + 'px';<br \/>\n     \/\/document.getElementById('mycontainer').style.marginLeft='' + eval(eval(-0.5 * screen.width) + eval(crad \/ 2.0) - 30) + 'px';<br \/>\n     \/\/document.title='' + eval(eval(-0.5 * window.innerWidth) + eval(crad \/ 2.0) - 30) + 'px';<br \/>\n     var recta=document.getElementById('mycontainer').getBoundingClientRect();<br \/>\n     if (1 == 1) {<br \/>\n     \/\/alert('' + recta.left);<br \/>\n     document.getElementById('mycontainer').style.marginLeft='' + eval(eval(-0.5 * recta.width) + eval(crad * 1.0) - 30) + 'px';<br \/>\n     } else {<br \/>\n     document.getElementById('mycontainer').style.marginLeft='' + eval(eval(-0.5 * window.innerWidth) + eval(crad \/ 2.0) - 220) + 'px';<br \/>\n     }<br \/>\n     document.getElementById('mycontainer').style.marginTop='-40px';<br \/>\n     if (atendih != '') { document.getElementById('atend').innerHTML='&lt;br&gt;' + atendih; }<br \/>\n     if (atendim != '') {<br \/>\n       \/\/alert(atendim);<br \/>\n       if (atendih.trim() != '') {<br \/>\n       document.getElementById('atend').style.background=\"linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),URL('\" + atendim + \"')\";<br \/>\n       } else {<br \/>\n       document.getElementById('atend').style.background=\"URL('\" + atendim + \"')\";<br \/>\n       }<br \/>\n       document.getElementById('atend').style.backgroundRepeat=\"no-repeat\";<br \/>\n       document.getElementById('atend').style.backgroundSize=\"cover\";<br \/>\n     }<br \/>\n     if (atendiu != '') {<br \/>\n        document.getElementById('atend').title = 'Click for ' + atendiu;<br \/>\n        document.getElementById('atend').onclick = function() {  window.open(atendiu, '_blank', 'top=50,left=50,width=600,height=600');  };<br \/>\n     }<br \/>\n     setTimeout(detvis, 5000);<br \/>\n  } else {<br \/>\n     document.getElementById('mydetails').open=true;<br \/>\n  }<\/font><br \/>\n<br \/>\n  var notr=location.search.split('notr=')[1] ? (' ' + decodeURIComponent(location.search.split('notr=')[1].split('&')[0])) : '';<br \/>\n  var textis=location.search.split('text=')[1] ? decodeURIComponent(location.search.split('text=')[1].split('&')[0]) : '';<br \/>\n  if (textis == rw) { if (notr == '') { isRoulette=true; } else { isThirtySeven=true; } preitc=oncr + \" class=\\\"roulettered\\\"\"; }<br \/>\n  deg=location.search.split('degrees=')[1] ? eval(decodeURIComponent(location.search.split('degrees=')[1].split('&')[0])) : deg;<br \/>\n  fs=location.search.split('fontsize=')[1] ? decodeURIComponent(location.search.split('fontsize=')[1].split('&')[0]) : fs;<br \/>\n  if (crad != ('' + rad)) {<br \/>\n    if (crad.indexOf('.') != -1) {<br \/>\n      deg=eval(crad.split('.')[1]);<br \/>\n      rad=eval(crad.split('.')[0]);<br \/>\n    } else if (rad.indexOf('.') != -1) {<br \/>\n      deg=eval(rad.split('.')[1]);<br \/>\n      rad=eval(rad.split('.')[0]);<br \/>\n    } else {<br \/>\n      rad=eval(crad);<br \/>\n    }<br \/>\n  }<br \/>\n  document.getElementById('iself').value='' + fs;<br \/>\n\/\/alert(1);<br \/>\n  if (('' + rad) != '100' || ('' + deg) != '360') { radbit='radius=' + encodeURIComponent('' + rad + '.' + deg) + '&'; document.getElementById('irad').value=('' + rad).split('.')[0]; document.getElementById('ideg').value='' + deg; }<br \/>\n  if (textis == '') {<br \/>\n\/\/alert(11);<br \/>\n    circularText(\"this text is in a circle &amp;#x1f34d; &amp;#x1f34c; (Optionally | separate words and image URL and onclick URL)\", rad, deg);<br \/>\n  } else {<br \/>\n    \/\/document.getElementById('inp').value=textis; \/\/.replace(\/\\&\\#\/g,'&amp;#');<br \/>\n    \/\/alert(textis);<br \/>\n\/\/alert(111);<br \/>\n    circularText(textis, rad, deg);<br \/>\n    document.getElementById('inp').value=textis.replace(\/\\&\\#\/g,'&amp;#');<br \/>\n  }<br \/>\n  var rect=document.getElementById('test').getBoundingClientRect();<br \/>\n  var twenty=20, thirtyeight=38, thirtyeight=38, twentyeight=28, four=4;<br \/>\n\/\/alert(1111);<br \/>\n  if (isRoulette || isThirtySeven) {<br \/>\n    \/\/alert('here');<br \/>\n    twenty=-15;<br \/>\n    thirtyeight=-30;<br \/>\n    twentyeight=0;<br \/>\n    four=-14;<br \/>\n  } <font color=blue>else if (window.self !== window.top && (atendih != '' || atendim != '' || atendiu != '')) {<br \/>\n\/\/alert(11111);<br \/>\n    twenty=25;<br \/>\n  } \/\/else {<br \/>\n    \/\/alert(98);<br \/>\n  \/\/}<\/font><br \/>\n  \/\/alert('' + rect.left + ',' + rect.top + ' ... ' + rect.width + ',' + rect.height);<br \/>\n  document.getElementById('atend').style.position='absolute';<br \/>\n  document.getElementById('atend').style.left=eval(factor * eval(-rad + (eval('' + twenty)) + rect.left)) + 'px';<br \/>\n  stl=eval(factor * eval(-rad + (eval('' + twenty)) + rect.left));<br \/>\n  \/\/document.getElementById('atend').style.top=eval(38 + rect.top) + 'px';<br \/>\n  \/\/document.getElementById('atend').style.top=eval(98 + rect.top) + 'px';  \/\/ 14.34 32.?  54.98<br \/>\n  document.getElementById('atend').style.top=eval(factor * eval(eval('' + fs) * 2 + (eval('' + four)) + eval('' + rect.top))) + 'px';<br \/>\n  stt=eval(factor * eval(eval('' + fs) * 2 + (eval('' + four)) + eval('' + rect.top)));<br \/>\n<br \/>\n  document.getElementById('atend').style.width=eval(2 * rad - (eval('' + thirtyeight))) + 'px';<br \/>\n  document.getElementById('atend').style.height=eval(2 * rad - (eval('' + thirtyeight))) + 'px';<br \/>\n  \/\/document.getElementById('atend').innerHTML='X';<br \/>\n  document.getElementById('atend').style.borderRadius=eval(2 * rad - twentyeight) + 'px';<br \/>\n  \/\/if (document.getElementById('atend').innerHTML != '') { document.getElementById('atend').style.backgroundColor='#c0d0f0'; } \/\/'transparent';<br \/>\n  if (document.getElementById('atend').innerHTML != '' && atendim == '') {<br \/>\n    document.getElementById('atend').style.background='radial-gradient(circle,#c0d0f0,#c3d3f3)';<br \/>\n  } else if (isThirtySeven) {<br \/>\n    document.getElementById('atend').style.backgroundColor='rgba(165,265,0,0.3)';<br \/>\n    document.getElementById('atend').innerHTML='&lt;p id=pscore&gt;Score: ' + score + '\/' + goes + '&lt;\/p&gt;Pick Your &lt;br&gt;Periodic Table &lt;br&gt;Symbol&lt;br&gt;&lt;i&gt;&lt;b&gt;&lt;div contenteditable=true onblur=huhd(this.innerHTML); onchange=huhd(this.innerHTML); id=mynum&gt;?&lt;\/div&gt;&lt;\/b&gt;&lt;\/i&gt;';<br \/>\n    \/\/alert(76);<br \/>\n  } else if (isRoulette) {<br \/>\n    document.getElementById('atend').style.backgroundColor='rgba(265,165,0,0.3)';<br \/>\n    document.getElementById('atend').innerHTML='Score: ' + score + '\/' + goes + '&lt;br&gt;Pick Your Number&lt;br&gt;&lt;i&gt;&lt;b&gt;&lt;div contenteditable=true onblur=huhd(this.innerHTML); onchange=huhd(this.innerHTML); id=mynum&gt;?&lt;\/div&gt;&lt;\/b&gt;&lt;\/i&gt;';<br \/>\n    var ccl=Math.floor(eval(eval(-rad + (eval('' + twenty)) + rect.left) + eval(eval(2 * rad - (eval('' + thirtyeight))) \/ 2)));<br \/>\n    var cct=Math.floor(eval(eval(eval('' + fs) * 2 + (eval('' + four)) + eval('' + rect.top)) + eval(eval(2 * rad - (eval('' + thirtyeight))) \/ 2)));<br \/>\n    lasta=document.getElementById('myballdivtwo');<br \/>\n    animateonorbit('myballdivtwo', ccl, cct, 150, 6);<br \/>\n    var toccl=eval(180 + ccl);<br \/>\n    var tocct=eval(180 + cct);<br \/>\n    lasta=document.getElementById('myballdiv');<br \/>\n    \/\/animateonline('myballdiv', ccl, cct, toccl, tocct, 6);<br \/>\n<br \/>\n  } \/\/#c0d0f0'; } \/\/'transparent';<br \/>\n  \/\/document.getElementById('atend').style.display='none';<br \/>\n  <font color=blue>atendih='';<br \/>\n  atendiu='';<br \/>\n  atendim='';<\/font><br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html---------GETME\" title=\"circular_text.html\">today&#8217;s changed Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html---------GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link for you to try this new circular text button creating logic.<\/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\/circular-text-button-tutorial\/'>Circular Text Button Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cwptqt'>Previous relevant <a target=_blank title='Chemistry Wonder Periodic Table Quiz Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chemistry-wonder-periodic-table-quiz-tutorial\/'>Chemistry Wonder Periodic Table Quiz Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Chemistry Wonder Periodic Table Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chemistry_wonder.jpg\" title=\"Chemistry Wonder Periodic Table Quiz Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Chemistry Wonder Periodic Table Quiz Tutorial<\/p><\/div>\n<p>We had occasion to revisit <a title='Circular Text or Emoji Periodic Table Quiz Tutorial' href='#cteptqt'>Circular Text or Emoji Periodic Table Quiz Tutorial<\/a> and it set us to wondering if you can just feed a chemical equation or formula into the <a target=_blank title=Google href='https:\/\/google.com'>Google<\/a> search engine and &#8230;<\/p>\n<ul>\n<li>find out good chemistry based information &#8230; <font size=1>Spoiler Alert: yes<\/font><\/li>\n<li>even be set right that an inputted formula is probably inaccurate and a &#8220;nearby&#8221; known compound equation or formula is such and such &#8230; <font size=1>Spoiler Alert: <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chemistry_wonder.jpg\">yes<\/a><\/font><\/li>\n<\/ul>\n<p>And so we added &#8220;dead end&#8221; but &#8220;non interfering&#8221; Javascript code, such code often working off window.<a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a> user interactive entry functionality, to add this feature into the existant &#8220;Periodic Table Quiz&#8221; functionality, <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction huhd(dv) {<br \/>\n  <font color=blue>var formula='', nonformula='', wds=[], prevanswer='';<\/font><br \/>\n  var answer='',ans='',wasih='';<br \/>\n  if (isThirtySeven) {<br \/>\n  if (dv.trim().length &lt;= 2 && dv.indexOf('\/') == -1) {<br \/>\n  answer=prompt('What is the name of the element in the Period Table with the symbol ' + dv.trim() + '?  To just find out, but not score, enter a question mark.<font color=blue>  Append on numbers and symbology to name a compound we can look up for you as you please.<\/font>', '');<br \/>\n  if (answer == null) {  answer=''  }<br \/>\n  goes++;<br \/>\n  <font color=blue>wds=answer.split(' ');<br \/>\n  prevanswer=answer;<br \/>\n  answer=answer.replace(wds[eval(-1 + wds.length)], dv.trim() + wds[eval(-1 + wds.length)]).replace(\/NaCl$\/g, 'NaCl()').replace(\/KBr$\/g, 'KBr()').replace(\/CsF$\/g, 'CsF()').replace(\/CdS$\/g, 'CdS()').replace(\/Nacl$\/g, 'Nacl()').replace(\/Kbr$\/g, 'Kbr()').replace(\/Csf$\/g, 'Csf()').replace(\/Cds$\/g, 'Cds()').replace(\/NaCL$\/g, 'NaCL()').replace(\/KBR$\/g, 'KBR()').replace(dv.trim() + wds[eval(-1 + wds.length)], wds[eval(-1 + wds.length)]);<br \/>\n  \/\/alert(answer);<br \/>\n  if (answer.replace('?','').trim() != '' && answer.replace('(','').replace(')','').replace('0','').replace('1','').replace('2','').replace('3','').replace('4','').replace('5','').replace('6','').replace('7','').replace('8','').replace('9','') != answer) {<br \/>\n    nonformula=answer.split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0].split('()')[0];<br \/>\n  \/\/alert('nonformula=' + nonformula + ' dv=' + dv.trim());<br \/>\n    if (prevanswer != answer || 8 == 8) {<br \/>\n    formula=dv.trim() + answer.split(' ')[eval(-1 + answer.split(' ').length)]; \/\/.split('()')[0];<br \/>\n    answer=answer.replace(answer.split(' ')[eval(-1 + answer.split(' ').length)], '');<br \/>\n    formula=formula.split('()')[0];<br \/>\n    } else {<br \/>\n    formula=dv.trim() + answer.substring(nonformula.length).split('()')[0];<br \/>\n    answer=nonformula.trim();<br \/>\n    }<br \/>\n  \/\/alert('formula=' + formula + ' dv=' + dv.trim());<br \/>\n    window.open('\/\/www.google.com\/search?q=' + encodeURIComponent(formula), '_blank', 'top=50,left=50,width=600,height=600');<br \/>\n  }<\/font><br \/>\n  if (answer.trim() == '?') {<br \/>\n   goes--;<br \/>\n   answer='';<br \/>\n   ans=document.head.innerHTML.replace(\/\\\"\/g,\"'\").split(\"'\" + dv.trim() + \":\")[1].split(\"'\")[0];<br \/>\n  }<br \/>\n  if (document.head.innerHTML.toLowerCase().replace(\/\\\"\/g,\"'\").indexOf(\"'\" + dv.trim().toLowerCase() + \":\" + (answer + ans).toLowerCase() + \"'\") != -1) {<br \/>\n   if (answer.trim() != '') { score++; }<br \/>\n   wasih=lastois.innerHTML;<br \/>\n   lastois.innerHTML='&lt;font size=1&gt;&lt;a title=\"Click here for Google search\" target=_blank style=\"color:white;text-decoration:none;cursor:pointer;\" href=\"https:\/\/www.google.com\/search?q=' + encodeURIComponent(answer + ans) + '\"&gt;' + answer + ans + '&lt;\/a&gt;&lt;\/font&gt;&lt;br&gt;' + wasih;<br \/>\n  }<br \/>\n  document.getElementById('pscore').innerHTML='Score: ' + score + '\/' + goes;<br \/>\n  document.getElementById('p36').innerHTML='' + score + '\/' + goes;<br \/>\n  }<br \/>\n  userpicked='';<br \/>\n   } else {<br \/>\n  if (dv.trim() == '') {<br \/>\n    if (userpicked != '') {<br \/>\n     document.getElementById('mynum').innerHTML=userpicked;<br \/>\n    } else {<br \/>\n     document.getElementById('mynum').innerHTML='?';<br \/>\n    }<br \/>\n  } else if (dv.toLowerCase() == 'red' || dv.toLowerCase() == 'green' || dv.toLowerCase() == 'black') {<br \/>\n    userpicked=dv.toLowerCase();<br \/>\n  } else if (dv.substring(0,1) &gt;= '0' && dv.substring(0,1) &lt;= '9') {<br \/>\n    var huhi=eval('' + dv);<br \/>\n    if (huhi &gt;= 0 && huhi &lt;= 36) {<br \/>\n    userpicked=dv;<br \/>\n    document.getElementById('mynum').innerHTML=userpicked;<br \/>\n    } else {<br \/>\n    if (userpicked != '') {<br \/>\n     document.getElementById('mynum').innerHTML=userpicked;<br \/>\n    } else {<br \/>\n     document.getElementById('mynum').innerHTML='?';<br \/>\n    }<br \/>\n    }<br \/>\n  } else {<br \/>\n    if (userpicked != '') {<br \/>\n     document.getElementById('mynum').innerHTML=userpicked;<br \/>\n    } else {<br \/>\n     document.getElementById('mynum').innerHTML='?';<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html--------GETME\" title=\"circular_text.html\">today&#8217;s changed Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html--------GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=300.360&#038;text=3%3Cspan%3E2%3C%2Fspan%3E1%3Cspan%3E5%3C%2Fspan%3E1%3Cspan%3E9%3C%2Fspan%3E42%3Cspan%3E1%3C%2Fspan%3E22%3Cspan%3E5%3C%2Fspan%3E1%3Cspan%3E7%3C%2Fspan%3E3%3Cspan%3E4%3C%2Fspan%3E62%3Cspan%3E7%3C%2Fspan%3E1%3Cspan%3E3%3C%2Fspan%3E3%3Cspan%3E6%3C%2Fspan%3E1%3Cspan%3E1%3C%2Fspan%3E3%3Cspan%3E0%3C%2Fspan%3E82%3Cspan%3E3%3C%2Fspan%3E1%3Cspan%3E0%3C%2Fspan%3E52%3Cspan%3E4%3C%2Fspan%3E1%3Cspan%3E6%3C%2Fspan%3E3%3Cspan%3E3%3C%2Fspan%3E12%3Cspan%3E0%3C%2Fspan%3E1%3Cspan%3E4%3C%2Fspan%3E3%3Cspan%3E1%3C%2Fspan%3E92%3Cspan%3E2%3C%2Fspan%3E1%3Cspan%3E8%3C%2Fspan%3E2%3Cspan%3E9%3C%2Fspan%3E72%3Cspan%3E8%3C%2Fspan%3E1%3Cspan%3E2%3C%2Fspan%3E3%3Cspan%3E5%3C%2Fspan%3E32%3Cspan%3E6%3C%2Fspan%3E0&#038;notr=y&#038;fontsize=14\" title=\"Click picture\">Periodic Table Quiz live run<\/a> link for you to try the Periodic Table Quiz (now featuring <font size=1>new improved<\/font> &#8220;Chemistry Compound Formula Wonder&#8221; prompting) part of the functionality yourself at a link up the top of the webpage.<\/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\/chemistry-wonder-periodic-table-quiz-tutorial\/'>Chemistry Wonder Periodic Table Quiz Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cteptqt'>Previous relevant <a target=_blank title='Circular Text or Emoji Periodic Table Quiz Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emoji-periodic-table-quiz-tutorial\/'>Circular Text or Emoji Periodic Table Quiz Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text or Emoji Periodic Table Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/periodic_table_quiz.jpg\" title=\"Circular Text or Emoji Periodic Table Quiz Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text or Emoji Periodic Table Quiz Tutorial<\/p><\/div>\n<p>Meanwhile, back at Circular Text ideas we were wondering if we could add more interest to a quiz by making the circular ends to a similar wheel as the roulette wheel (as discussed with <a title='Circular Text or Emoji Roulette Animation Tutorial' href='#cterat'>Circular Text or Emoji Roulette Animation Tutorial<\/a>) be clickable as the user&#8217;s way to learn about some Periodic Table symbols and correspondent names.<\/p>\n<p>We are forever wondering about ways to hide answers from users, for quizzes and games.  Well, at least for those users not venturing to any Webpage -&gt; View Source ideas, that is.  Today&#8217;s sort of clunky, yet satisfying, way is to hide the Periodic Table element names, along with their symbols, in a single dimension array.  Then we use that, scouring the whole &lt;head&gt; &lt;\/head&gt; using the DOM <b>document.head.innerHTML<\/b> reference approach, in the way below <font size=1>(and we warn that if you do not want help with the game avert your gaze below 1.734523417cm down the webpage)<\/font> &#8230;<\/p>\n<p><code><br \/>\nvar pts=['H:Hydrogen','He:Helium','Li:Lithium','Be:Beryllium','B:Boron','C:Carbon','N:Nitrogen','O:Oxygen','F:Fluorine','Ne:Neon','Na:Sodium','Mg:Magnesium','Al:Aluminium','Si:Silicon','P:Phosphorus','S:Sulphur','Cl:Chlorine','Ar:Argon','K:Potassium','Ca:Calcium','Sc:Scandium','Ti:Titanium','V:Vanadium','Cr:Chromium','Mn:Manganese','Fe:Iron','Co:Cobalt','Ni:Nickel','Cu:Copper','Zn:Zinc','Ga:Gallium','Ge:Germanium','As:Arsenic','Se:Selenium','Br:Bromine','Kr:Krypton'];<br \/>\n<br \/>\nfunction huhd(dv) {<br \/>\n  var answer='',ans='',wasih='';<br \/>\n  if (isThirtySeven) { \/\/ Periodic Table Quiz logic<br \/>\n  if (dv.trim().length &lt;= 2 && dv.indexOf('\/') == -1) {<br \/>\n  answer=prompt('What is the name of the element in the Period Table with the symbol ' + dv.trim() + '?  To just find out, but not score, enter a question mark.', '');<br \/>\n  if (answer == null) {  answer=''  }<br \/>\n  goes++;<br \/>\n  if (answer == '?') {<br \/>\n   answer='';<br \/>\n   ans=<b>document.head.innerHTML<\/b>.replace(\/\\\"\/g,\"'\").split(\"'\" + dv.trim() + \":\")[1].split(\"'\")[0];<br \/>\n  }<br \/>\n  if (<b>document.head.innerHTML<\/b>.toLowerCase().replace(\/\\\"\/g,\"'\").indexOf(\"'\" + dv.trim().toLowerCase() + \":\" + (answer + ans).toLowerCase() + \"'\") != -1) {<br \/>\n   if (answer != '') { score++; }<br \/>\n   wasih=lastois.innerHTML;<br \/>\n   lastois.innerHTML='&lt;font size=1&gt;&lt;a title=\"Click here for Google search\" target=_blank style=\"color:white;text-decoration:none;cursor:pointer;\" href=\"https:\/\/www.google.com\/search?q=' + encodeURIComponent(answer + ans) + '\"&gt;' + answer + ans + '&lt;\/a&gt;&lt;\/font&gt;&lt;br&gt;' + wasih;<br \/>\n  }<br \/>\n  document.getElementById('pscore').innerHTML='Score: ' + score + '\/' + goes;<br \/>\n  document.getElementById('p36').innerHTML='' + score + '\/' + goes;<br \/>\n  }<br \/>\n  userpicked='';<br \/>\n  }<br \/>\n  \/\/ rest for Roulette logic<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and the other way this array is used is to populate the content of the wheel outer rim, starting with the Roulette Wheel content as a template, via &#8230;<\/p>\n<p><code><br \/>\n function reworked(intis) {  \/\/ RE: pts array Period Table symbol\/name quiz<br \/>\n   \/\/ 3&lt;span&gt;2&lt;\/span&gt;1&lt;span&gt;5&lt;\/span&gt;1&lt;span&gt;9&lt;\/span&gt;42&lt;span&gt;1&lt;\/span&gt;22&lt;span&gt;5&lt;\/span&gt;1&lt;span&gt;7&lt;\/span&gt;3&lt;span&gt;4&lt;\/span&gt;62&lt;span&gt;7&lt;\/span&gt;1&lt;span&gt;3&lt;\/span&gt;3&lt;span&gt;6&lt;\/span&gt;1&lt;span&gt;1&lt;\/span&gt;3&lt;span&gt;0&lt;\/span&gt;82&lt;span&gt;3&lt;\/span&gt;1&lt;span&gt;0&lt;\/span&gt;52&lt;span&gt;4&lt;\/span&gt;1&lt;span&gt;6&lt;\/span&gt;3&lt;span&gt;3&lt;\/span&gt;12&lt;span&gt;0&lt;\/span&gt;1&lt;span&gt;4&lt;\/span&gt;3&lt;span&gt;1&lt;\/span&gt;92&lt;span&gt;2&lt;\/span&gt;1&lt;span&gt;8&lt;\/span&gt;2&lt;span&gt;9&lt;\/span&gt;72&lt;span&gt;8&lt;\/span&gt;1&lt;span&gt;2&lt;\/span&gt;3&lt;span&gt;5&lt;\/span&gt;32&lt;span&gt;6&lt;\/span&gt;0<br \/>\n   var okayis=false, outtis=intis + '&lt;span&gt;\/0&lt;\/span&gt;', <i>sofar=','<\/i>, iso=-1;<br \/>\n   var outtisa='3&lt;span&gt;2&lt;\/span&gt;;1&lt;span&gt;5&lt;\/span&gt;;1&lt;span&gt;9&lt;\/span&gt;;4;2&lt;span&gt;1&lt;\/span&gt;;2;2&lt;span&gt;5&lt;\/span&gt;;1&lt;span&gt;7&lt;\/span&gt;;3&lt;span&gt;4&lt;\/span&gt;;6;2&lt;span&gt;7&lt;\/span&gt;;1&lt;span&gt;3&lt;\/span&gt;;3&lt;span&gt;6&lt;\/span&gt;;1&lt;span&gt;1&lt;\/span&gt;;3&lt;span&gt;0&lt;\/span&gt;;8;2&lt;span&gt;3&lt;\/span&gt;;1&lt;span&gt;0&lt;\/span&gt;;5;2&lt;span&gt;4&lt;\/span&gt;;1&lt;span&gt;6&lt;\/span&gt;;3&lt;span&gt;3&lt;\/span&gt;;1;2&lt;span&gt;0&lt;\/span&gt;;1&lt;span&gt;4&lt;\/span&gt;;3&lt;span&gt;1&lt;\/span&gt;;9;2&lt;span&gt;2&lt;\/span&gt;;1&lt;span&gt;8&lt;\/span&gt;;2&lt;span&gt;9&lt;\/span&gt;;7;2&lt;span&gt;8&lt;\/span&gt;;1&lt;span&gt;2&lt;\/span&gt;;3&lt;span&gt;5&lt;\/span&gt;;3;2&lt;span&gt;6&lt;\/span&gt;'.split(';');       \/\/;0&lt;span&gt;\/0&lt;\/span&gt;';<br \/>\n   for (var i=0; i&lt;pts.length; i++) {<br \/>\n     okayis=false;<br \/>\n     while (!okayis) {<br \/>\n      iso=Math.floor(Math.random() * pts.length);<br \/>\n      if (<i>sofar<\/i>.indexOf(',' + iso + ',') == -1) { okayis=true; <i>sofar<\/i>+='' + iso + ','; }<br \/>\n     }<br \/>\n     if (pts[iso].split(':')[0].length == 1) {<br \/>\n     outtis=outtis.replace(outtisa[i], pts[iso].split(':')[0]);<br \/>\n     } else {<br \/>\n     outtis=outtis.replace(outtisa[i], pts[iso].split(':')[0].substring(0,1) + '&lt;span&gt;' + pts[iso].split(':')[0].substring(1) + '&lt;\/span&gt;');<br \/>\n     }<br \/>\n   }<br \/>\n   return outtis;<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; also illustrating our <i>sofar<\/i> var<font size=1>iable<\/font> oft used technique of appending to a delimited single string that is <a target=_blank title='Javascript indexOf function information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_indexof.asp'>&#8220;indexOf&#8221;<\/a>ed against to determine if an action has previously been taken, and, in this case here, not do it more than once.<\/p>\n<p><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\">Today&#8217;s changed HTML and CSS<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-------GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link for you to try the Periodic Table Quiz part of the functionality yourself at a link up the top of the webpage.<\/p>\n<hr>\n<p id='cterat'>Previous relevant <a target=_blank title='Circular Text or Emoji Roulette Animation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emoji-roulette-animation-tutorial\/'>Circular Text or Emoji Roulette Animation 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\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text or Emoji Roulette Animation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/roulette_wheel_action.gif\" title=\"Circular Text or Emoji Roulette Animation Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text or Emoji Roulette Animation Tutorial<\/p><\/div>\n<p>As we left off with the recent <a title='Circular Text or Emoji Roulette Game Tutorial' href='#ctergt'>Circular Text or Emoji Roulette Game Tutorial<\/a> we wanted to improve on the animation aspects to representing the roulette wheel ball, but still only involve &#8230;<\/p>\n<ul>\n<li>emoji (content) for HTML elements styled by &#8230;<\/li>\n<li>CSS <a target=_blank title='CSS3 @keyframes rule information' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp'>@keyframes<\/a> <a target=_blank title='CSS3 transitions rule information' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>transition<\/a> animations &#8230; <i>in orbit<\/i><\/li>\n<\/ul>\n<p> &#8230; and it was this <i>in orbit<\/i> bit that daunted us most.  That is, until we &#8230;<\/p>\n<ul>\n<li>read the <a target=_blank title='Great link, thanks' href='https:\/\/www.useragentman.com\/blog\/2013\/03\/03\/animating-circular-paths-using-css3-transitions\/'>great advice of this link<\/a>, thanks &#8230; and enjoyed the wonder of &#8230;<\/li>\n<li>how dynamic and easy dynamic CSS styling can be simply by adding &lt;style&gt; &lt;\/style&gt; encased styling to the end of document.body.innerHTML &#8230; via &#8230;<br \/>\n<code><br \/>\nfunction animateonorbit(bid, ccl, cct, anrad, fhl) { \/\/ thanks to https:\/\/www.useragentman.com\/blog\/2013\/03\/03\/animating-circular-paths-using-css3-transitions\/<br \/>\n    var dba='&lt;style&gt; #' + bid + ' { display:block;  top:' + cct + 'px; ';<br \/>\n    dba+=' left:' + ccl + 'px; position:absolute; -moz-border-radius: 12px; border-radius: 12px;  ';<br \/>\n    dba+=' filter: alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; transform: rotate(45deg) translateX(' + anrad + 'px) rotate(-45deg); ';<br \/>\n    dba+=' animation:animateonorbit  ' + fhl + 's linear infinite; -webkit-animation:animateonorbit ' + fhl + 's linear infinite; z-index:79; } ';<br \/>\n    dba+=' @keyframes animateonorbit {  from   { \ttransform: rotate(0deg) translateX(' + anrad + 'px) rotate(0deg);    } ';<br \/>\n    dba+='  to     { transform: rotate(360deg) translateX(' + anrad + 'px) rotate(-360deg);    } ';<br \/>\n    dba+=' @-webkit-keyframes animateonorbit {  from   { \t-webkit-transform: rotate(0deg) translateX(' + anrad + 'px) rotate(0deg);    } ';<br \/>\n    dba+='  to     { -webkit-transform: rotate(360deg) translateX(' + anrad + 'px) rotate(-360deg);    } &lt;\/style&gt; ';<br \/>\n    document.body.innerHTML+=dba;<br \/>\n    lasto=document.getElementById(bid);<br \/>\n    document.getElementById(bid).style.display='block';<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p><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\">Today&#8217;s changed HTML and CSS<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html------GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link for you to try the Roulette Wheel (and its animated ball) part of the functionality yourself at a link up the top of the webpage.<\/p>\n<hr>\n<p id='ctergt'>Previous relevant <a target=_blank title='Circular Text or Emoji Roulette Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emoji-roulette-game-tutorial\/'>Circular Text or Emoji Roulette Game 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\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text or Emoji Roulette Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/roulette.jpg\" title=\"Circular Text or Emoji Roulette Game Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text or Emoji Roulette Game Tutorial<\/p><\/div>\n<p>Extending the recent <a title='Circular Text or Emoji Onclick Tutorial' href='#cteot'>Circular Text or Emoji Onclick Tutorial<\/a> circular text ideas, today we are starting out on a game that uses a Roulette Wheel as its basic web page component.  To all those &#8220;graphically challenged&#8221; users, like me, we do not use any homegrown imagery of any sort, instead just use &#8230;<\/p>\n<ul>\n<li>HTML basis of design &#8230;<\/li>\n<li>CSS as &#8230;\n<ol>\n<li>&lt;head&gt; &lt;\/head&gt; styling &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n .roulettered { color:white; background:<a target=_blank title='CSS3 linear gradient information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_gradients.asp'>linear-gradient<\/a>(to top,orange 92%,red 8%);    }<br \/>\n .rouletteblack { color:white; background:linear-gradient(to top,orange 92%,black 8%);    }<br \/>\n .roulettegreen { color:white; background:linear-gradient(to top,orange 92%,green 8%);    }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<li>inline HTML styling<\/li>\n<\/ol>\n<\/li>\n<li>Javascript DOM dynamic styling and animation (the roulette wheel is sent spinning via <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> Javascript timer logic)<\/li>\n<\/ul>\n<p> &#8230; involving our original &#8230;<\/p>\n<ul>\n<li>&#8220;circular text&#8221; as the numbers near the outer rim of the roulette wheel<\/li>\n<li>background border-radius parts in the middle (&#8216;atend&#8217; element) as the ribbing bits that form the rest of the roulette wheel<\/li>\n<\/ul>\n<p> &#8230; and, so far, the one ball emoji at the end of a user turn.  This last bit is where we feel we shall work at more improvement.<\/p>\n<p><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\">Today&#8217;s changed HTML<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-----GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link for you to try the Roulette Wheel part of the functionality yourself at a link up the top of the webpage.  You can guess a number or red or black or green colours, and odds based scoring is applied.<\/p>\n<hr>\n<p id='cteot'>Previous relevant <a target=_blank title='Circular Text or Emoji Onclick Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emoji-onclick-tutorial\/'>Circular Text or Emoji Onclick 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\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text or Emoji Onclick Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ctlinkbetter.jpg\" title=\"Circular Text or Emoji Onclick Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text or Emoji Onclick Tutorial<\/p><\/div>\n<p>In this increasingly connected online world, it can be surprising when an image looking part of a webpage cannot be linked to.  The unusual thing about emojis is their way to &#8230;<\/p>\n<ul>\n<li>be part of the textual web armoury &#8230; yet &#8230;<\/li>\n<li>look like an image<\/li>\n<\/ul>\n<p> &#8230; and, as such, it would definitely not offend, maybe even &#8220;tickle pink&#8221; the user to have an emoji be linked to further information.  In the case of the emojis featuring in yesterday&#8217;s <a title='Circular Text or Emojis Genericity Tutorial' href='#ctegt'>Circular Text or Emojis Genericity Tutorial<\/a> which are country flags (that are compound emojis) you can query the Google search engine with the contents of the <a target=_blank title='Iemoji website' href='http:\/\/www.iemoji.com'>Iemoji<\/a> website webpages (such as <a target=_blank title='Japan flag emoji information from Iemoji' href='https:\/\/www.iemoji.com\/view\/emoji\/173\/flags\/japan'>Japan&#8217;s<\/a> flag emoji one) with the right column data next to the &#8220;Decimal HTML Entity&#8221; left column.  In fact, as we often urge our students, just copy this Decimal HTML Entity value straight up into the address bar, and your favourite search engine is likely to come up with a (in my case Google) search engine URL like &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Japan flag emoji search' href='https:\/\/www.google.com\/search?client=firefox-b-ab&#038;q=%26%23127471%3B+%26%23127477%3B'>https:\/\/www.google.com\/search?client=firefox-b-ab&q=%26%23127471%3B+%26%23127477%3B<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; getting you (emoji onclick event) links to some pretty pertinent information about Japan within seconds, let alone what you might find under the Images and\/or Videos menu subsearches.  Notice how integrated this is with the <a target=_blank title='Google search engine' href='http:\/\/google.com'>Google<\/a> search engine webpages &#8230;<\/p>\n<blockquote cite='https:\/\/emojipedia.org\/flag-for-japan\/'><p>\nThe Flag: Japan emoji is a sequence of the <b><a target=_blank title='Regional Indicator Symbol Letter J' href='https:\/\/emojipedia.org\/regional-indicator-symbol-letter-j\/'>&#127471; Regional Indicator Symbol Letter J<\/a> and <a target=_blank title='Regional Indicator Symbol Letter P' href='https:\/\/emojipedia.org\/regional-indicator-symbol-letter-p\/'>&#127477; Regional Indicator Symbol Letter P<\/a> emojis.<\/b> These display as a single emoji on supported platforms.\n<\/p><\/blockquote>\n<p> &#8230; showing you how ISO 2-letter codes are linked to emoji country flag Decimal HTML Entity creation construction rules.<\/p>\n<p><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\">Today&#8217;s changed HTML<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html---GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link for you to try yourself (or try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.php-GETME\" title=\"circular_text.html\">changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.php-GETME\" title=\"circular_text.php\">circular_text.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.php\" title=\"Click picture\">live run<\/a>), then, features &#8230;<\/p>\n<ul>\n<li>changed emoji linking, the one thing left to say about this being, that the &#8220;missing link&#8221; between text and link HTML elements can be that elements that start as text can be made to act like linked elements (later) via (definitely the first, and sometimes, but not today, the second) CSS styling (via inline HTML CSS style=&#8221;&#8221;) &#8230;\n<ol>\n<li>cursor:pointer;<\/li>\n<li>text-decoration:underline;<\/li>\n<\/ol>\n<p> &#8230; we make happen within the webpage&#8217;s Javascript (DOM) code\n<\/li>\n<li>functionality to be able to increase or decease the circular text&#8217;s font size (that being the way to control an emoji size as well, that reminds you that emojis are text, just not that very small part of the text world with ascii codes less than 256)<\/li>\n<li>a very subtle <a target=_blank title='Radial gradient CSS information from w3schools' href='https:\/\/www.w3schools.com\/csSref\/func_radial-gradient.asp'>radial gradient<\/a> background replaces the single colour background colour for the HTML &#8216;atend&#8217; div element within the circular text <b>as per<\/b> &#8230;<br \/>\n<code><br \/>\n  if (document.getElementById('atend').innerHTML != '') { document.getElementById('atend').style.background='<b>radial-gradient(circle,#c0d0f0,#c3d3f3)<\/b>'; } \/\/#c0d0f0'; } \/\/'transparent';<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<hr>\n<p id='ctegt'>Previous relevant <a target=_blank title='Circular Text or Emojis Genericity Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emojis-genericity-tutorial\/'>Circular Text or Emojis Genericity 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\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text or Emojis Genericity Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ctbiggerbetter.jpg\" title=\"Circular Text or Emojis Genericity Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text or Emojis Genericity Tutorial<\/p><\/div>\n<p>A major consideration in any &#8220;genericity&#8221; drive you have for your web applications is to allow for a large amount of user entered data, perhaps a surprising amount.  If you offer a textbox to enter data, then a user may enter a hugely long, and perhaps valid, field.  If we&#8217;d left it at the scenario of yesterday&#8217;s <a title='Circular Text or Emojis Analogue Clock Tutorial' href='#cteact'>Circular Text or Emojis Analogue Clock Tutorial<\/a>, though, we&#8217;d have been restricted to a textbox entry of about 800 characters for the rjmprogramming.com.au domain.  In the first of the improvements below, then, we try to cater for this via &#8230;<\/p>\n<ul>\n<li>for textbox entries that are long we now populate an HTML form method=POST action=<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.php_GETME\" title=\"circular_text.php\">circular_text.php<\/a> where we intervene at appropriate places with the large data items &#8230; and today we also &#8230;<\/li>\n<li>make sure compound emojis like the country flags work (where the great <a target=_blank title='Iemoji website' href='http:\/\/www.iemoji.com'>Iemoji<\/a> website webpages such as <a target=_blank title='Japan flag emoji information from Iemoji' href='https:\/\/www.iemoji.com\/view\/emoji\/173\/flags\/japan'>Japan&#8217;s<\/a> flag emoji one, become so useful) &#8230; and we test that out with a &#8230;<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>Pie Chart<\/a> content inside the circular text<\/li>\n<\/ul>\n<p> &#8230; and an <b>interesting thing<\/b> happened with the &#8220;getting to work&#8221; of today&#8217;s textbox entry (for a radius value of 570) you can try &#8230;<\/p>\n<p><!--code>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127464;&amp;amp;#127475;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127470;&amp;amp;#127475;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127482;&amp;amp;#127480;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127470;&amp;amp;#127465;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127463;&amp;amp;#127479;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127477;&amp;amp;#127472;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127475;&amp;amp;#127468;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127463;&amp;amp;#127465;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127479;&amp;amp;#127482;&nbsp;&nbsp;&nbsp;&amp;amp;#127471;&amp;amp;#127477;&nbsp;&nbsp;&nbsp;&amp;amp;#127474;&amp;amp;#127485;&nbsp;&nbsp;&nbsp;&amp;amp;#127477;&amp;amp;#127469;&nbsp;&nbsp;&amp;amp;#127483;&amp;amp;#127475;&nbsp;&nbsp;&amp;amp;#127466;&amp;amp;#127481;&nbsp;&nbsp;&amp;amp;#127465;&amp;amp;#127466;&nbsp;&nbsp;&amp;amp;#127466;&amp;amp;#127468;&nbsp;&amp;amp;#127470;&amp;amp;#127479;&nbsp;&amp;amp;#127481;&amp;amp;#127479;&nbsp;&amp;amp;#127481;&amp;amp;#127469;&nbsp;&amp;amp;#127464;&amp;amp;#127465;&nbsp;&amp;amp;#127467;&amp;amp;#127479;&nbsp;&amp;amp;#127468;&amp;amp;#127463;&nbsp;&amp;amp;#127470;&amp;amp;#127481;&lt;iframe scrolling=no frameborder=0 style=border-radius:600px;width:900px;height:600px;z-index:23;margin-left:87px;margin-top:270px; src=https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php?title=<b>%c2%a0<\/b>%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0Country%20Populations&amp;onclick=y&amp;task=Country&amp;desc=Populations&amp;data=,%20[~https;China,1347000000,India,1241000000,United%20States,312000000,Indonesia,238000000,Brazil,197000000,Pakistan,177000000,Nigeria,162000000,Bangladesh,151000000,Russia,143000000,Japan,128000000,Mexico,115000000,Philippines,96000000,Vietnam,88000000,Ethiopia,87000000,Germany,81800000,Egypt,82600000,Iran,78000000,Turkey,74000000,Thailand,69500000,Congo,67800000,France,63300000,United%20Kingdom,62700000,Italy,60800000~,100]#bitsatend&gt;&lt;\/iframe&gt;\n<\/code--><\/p>\n<p><code><br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127464;&amp;#127475;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127470;&amp;#127475;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127482;&amp;#127480;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127470;&amp;#127465;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127463;&amp;#127479;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127477;&amp;#127472;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127475;&amp;#127468;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127463;&amp;#127465;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127479;&amp;#127482;&nbsp;&nbsp;&nbsp;&amp;#127471;&amp;#127477;&nbsp;&nbsp;&nbsp;&amp;#127474;&amp;#127485;&nbsp;&nbsp;&nbsp;&amp;#127477;&amp;#127469;&nbsp;&nbsp;&amp;#127483;&amp;#127475;&nbsp;&nbsp;&amp;#127466;&amp;#127481;&nbsp;&nbsp;&amp;#127465;&amp;#127466;&nbsp;&nbsp;&amp;#127466;&amp;#127468;&nbsp;&amp;#127470;&amp;#127479;&nbsp;&amp;#127481;&amp;#127479;&nbsp;&amp;#127481;&amp;#127469;&nbsp;&amp;#127464;&amp;#127465;&nbsp;&amp;#127467;&amp;#127479;&nbsp;&amp;#127468;&amp;#127463;&nbsp;&amp;#127470;&amp;#127481;&lt;iframe frameborder=0 style=border-radius:600px;width:900px;height:600px;z-index:23;margin-left:87px;margin-top:270px; src=https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php?title=<b>%c2%a0<\/b>%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0Country%20Populations&amp;onclick=y&amp;task=Country&amp;desc=Populations&amp;data=,%20[~https;China,1347000000,India,1241000000,United%20States,312000000,Indonesia,238000000,Brazil,197000000,Pakistan,177000000,Nigeria,162000000,Bangladesh,151000000,Russia,143000000,Japan,128000000,Mexico,115000000,Philippines,96000000,Vietnam,88000000,Ethiopia,87000000,Germany,81800000,Egypt,82600000,Iran,78000000,Turkey,74000000,Thailand,69500000,Congo,67800000,France,63300000,United%20Kingdom,62700000,Italy,60800000~,100]#bitsatend&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; where the use of <b>%c2%a0<\/b> creates whitespace but isn&#8217;t cleared by your normal trim functions, which is how we managed to get our Pie Chart title centralized enough not to be cut off by the HTML iframe border-radius applied to it.  Cute, huh?!<\/p>\n<p>Here is <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\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html--GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link for you to try yourself.<\/p>\n<hr>\n<p id='cteact'>Previous relevant <a target=_blank title='Circular Text or Emojis Analogue Clock Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emojis-analogue-clock-tutorial\/'>Circular Text or Emojis Analogue Clock 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\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text or Emojis Analogue Clock Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ctmorebetter.jpg\" title=\"Circular Text or Emojis Analogue Clock Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text or Emojis Analogue Clock Tutorial<\/p><\/div>\n<p>Often a good way to proceed to challenge genericity issues with a web application you think has potential to be more than it appears is to make it be the missing piece to another web application and interface to it.  This is the scenario, today, putting together yesterday&#8217;s &#8230;<\/p>\n<ul>\n<li><a title='Circular Text or Emojis Primer Tutorial' href='#ctept'>Circular Text or Emojis Primer Tutorial<\/a> &#8230; and adapt it to an older &#8230;<\/li>\n<li><a title='Analogue Clock Timezone Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/analogue-clock-timezone-tutorial\/'>Analogue Clock Timezone Tutorial<\/a> web application, that eventually became so much more than its top left analogue clock missing the hour numbers quite useful for mere mortal sanity purposes<\/li>\n<\/ul>\n<p>This interfacing match is great, as it fills in a gap, but there are a couple of things to overcome, those being &#8230;<\/p>\n<ol>\n<li>allow for a circular text component consist of more than one character, and here we allow the user to put &#8230;<br \/>\n<code><br \/>\n1&lt;span&gt;2&lt;\/span&gt;<br \/>\n<\/code><br \/>\n &#8230; to show &#8220;12&#8221; for example\n <\/li>\n<li>allow for an element like the HTML iframe &#8220;child&#8221; element be the contents within a newly introduced HTML div element for <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\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> placed into the &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>? &#8230; yes, Franklin D. Roosevelt, that would be in the circle the circular text goes around, and we do that stylewise via (on the fly Javascript) code making use of the centrally justified circular text element (curiously causing rect.width and rect.height below to be zero) &#8230;<\/p>\n<p><code><br \/>\n  var rect=document.getElementById('test').<a target=_blank title='getBoundingClientRect' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>();<br \/>\n  document.getElementById('atend').style.position='absolute';<br \/>\n  document.getElementById('atend').style.left=eval(-rad + 20 + rect.left) + 'px';<br \/>\n  document.getElementById('atend').style.top=eval(38 + rect.top) + 'px';<br \/>\n  document.getElementById('atend').style.width=eval(2 * rad - 38) + 'px';<br \/>\n  document.getElementById('atend').style.height=eval(2 * rad - 38) + 'px';<br \/>\n  document.getElementById('atend').style.borderRadius=eval(2 * rad - 28) + 'px';<br \/>\n  if (document.getElementById('atend').innerHTML != '') { document.getElementById('atend').style.backgroundColor='#c0d0f0'; } \/\/'transparent';<br \/>\n<\/code><\/p>\n<p> &#8230; and ahead of this our user entered data needed for the Analogue Clock has an HTML (child) <b>iframe element<\/b> part &#8230;<\/p>\n<p><code><br \/>\n1&lt;span&gt;2&lt;\/span&gt;1234567891&lt;span&gt;0&lt;\/span&gt;1&lt;span&gt;1&lt;\/span&gt;<b>&lt;iframe scrolling=no frameborder=0 style='z-index:23;margin-left:127px;margin-top:130px;height:400px;' src=analogue_clock.htm#xbody&gt;&lt;\/iframe&gt;<\/b><br \/>\n<\/code> <\/p>\n<p> &#8230; that we figure, because it is HTML containing spaces in its non-innerHTML parts, is meant as content for that new &#8216;atend&#8217; HTML div element located in the middle of the circular text, and created via the <b>codeline<\/b> reached in this scenario &#8230;<\/p>\n<p><code><br \/>\nfunction justinnertextish(intx, within) {<br \/>\n  var sone=1, tagis='', iit=0, less=false, ioffset=0;<br \/>\n  outx=intx;<br \/>\n  it=[];<br \/>\n  if (intx.indexOf('&lt;\/') != -1) {<br \/>\n    outx=\"\";<br \/>\n    for (iit=0; iit&lt;intx.length; iit+=sone) {<br \/>\n      if (intx.substring(iit, eval(1 + iit)) == '&lt;') {<br \/>\n        tagis=intx.substring(iit).substring(1).split('&gt;')[0];<br \/>\n        less=false;<br \/>\n        if (tagis.indexOf(' ') != -1 || within) {<br \/>\n        less=true;<br \/>\n        <b>document.getElementById('atend').innerHTML='&lt;' + tagis + '&gt;' + intx.substring(eval(iit + 2 + tagis.length)).split('&gt;')[0] + '&gt;';<\/b><\/p>\n<p>   \/\/ etcetera etcetera etcetera<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p><a target=_blank title='Time' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=320.360&#038;text=1%3Cspan%3E2%3C%2Fspan%3E1234567891%3Cspan%3E0%3C%2Fspan%3E1%3Cspan%3E1%3C%2Fspan%3E%3Ciframe%20scrolling%3Dno%20frameborder%3D0%20style%3D%27z-index%3A23%3Bmargin-left%3A127px%3Bmargin-top%3A130px%3Bheight%3A400px%3B%27%20src%3Danalogue_clock.htm%23xbody%3E%3C%2Fiframe%3E'>Got the time?<\/a><\/p>\n<p><iframe scrolling=no style='width:100%;height:900px;' src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=320.360&#038;text=1%3Cspan%3E2%3C%2Fspan%3E1234567891%3Cspan%3E0%3C%2Fspan%3E1%3Cspan%3E1%3C%2Fspan%3E%3Ciframe%20scrolling%3Dno%20frameborder%3D0%20style%3D%27z-index%3A23%3Bmargin-left%3A127px%3Bmargin-top%3A130px%3Bheight%3A400px%3B%27%20src%3Danalogue_clock.htm%23xbody%3E%3C%2Fiframe%3E'><\/iframe><\/p>\n<hr>\n<p id='ctept'>Previous relevant <a target=_blank title='Circular Text or Emojis Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emojis-primer-tutorial\/'>Circular Text or Emojis 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\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text or Emojis Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text_or_emoji.jpg\" title=\"Circular Text or Emojis Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text or Emojis Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got a &#8220;proof of concept&#8221; tutorial for you today, because we got put onto an idea for something by <a target=_blank title='Usefulk link, thanks' href='https:\/\/appendto.com\/2016\/09\/how-to-make-circularcurved-text-with-javascript\/'>How to Make Circular\/Curved Text with JavaScript<\/a>, thanks.  We wanted to extend the logic of that &#8230;<\/p>\n<ul>\n<li>ascii codes (of characters) less than 256, text handling &#8230; to, now, be able to handle &#8230;<\/li>\n<li>emoji data (or that&#8217;s what we like to &#8220;nickname&#8221; it &#8230; sorry if this annoys, but it really concerns UTF-8 characters really<\/li>\n<\/ul>\n<p>We resisted the <a target=_blank title='Sushi Train Circuit Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/sushi-train-circuit-game-tutorial\/'>Sushi Train Circuit Game Tutorial<\/a> ideas, because it isn&#8217;t lunchtime, and opted to allow the user to enter their own text (including any emojis (available via Command-Control-Space menu here at Mac OS X) or via &amp;#[CodePoint]; HTML Entity (decimal or hexidecimal (CodePoint)) entries (where we&#8217;d like you to put &amp;amp; rather than just &amp; if you are going to do this, and if you want to do this, but need tips on how you might approach this, please consult our previous <a target=_blank title='Karaoke via YouTube API in Iframe Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-emoji-tutorial\/'>Karaoke via YouTube API in Iframe Emoji Tutorial<\/a> where we often start at good ol&#8217; <a target=_blank title='emojipedia' href='http:\/\/emojipedia.org'>emojipedia<\/a>).<\/p>\n<p>Maybe there will be some sequels, but for the meantime you can examine the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html_GETME\" title=\"circular_text.html\">circular_text.html<\/a> code (including more thank you links), that you can try for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>With that in mind, take a look at us creeping through the text characters you enter, and notice how an emoji will have two bytes in a row with ascii code greater than 255 &#8230;<\/p>\n<p><code><br \/>\n        var etxt=intxt.replace(\/\\&amp;amp\\;\/g,'&amp;').replace(\/\\;\\&amp;\\#\/g,',').split('&amp;#'); \/\/ intxt is your text<br \/>\n        var txt=[], zero=0; \/\/ changed elsewhere as well<br \/>\n        <br \/>\n        var one=1;<br \/>\n        for (kk=zero; kk&lt;etxt[k].length; kk+=one) {<br \/>\n         if (etxt[k].substring(kk, eval(1 + kk)).<a target=_blank title='charCodeAt information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_charcodeat.asp'>charCodeAt<\/a>(0) &gt; 255) { \/\/ emoji found<br \/>\n          txt.push(<a target=_blank title='String.fromCodePoint() information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/fromCodePoint'>String.fromCodePoint<\/a>(eval('' + etxt[k].substring(kk).charCodeAt(0)),eval('' + etxt[k].substring(kk).substring(1).charCodeAt(0))   ));<br \/>\n          one=2;<br \/>\n         } else {  \/\/ normal ascii text<br \/>\n          txt.push(etxt[k].substring(kk, eval(1 + kk)));<br \/>\n          one=1;<br \/>\n         }<br \/>\n        }<br \/>\n        }<br \/>\n        one=1;<br \/>\n        zero=0;<br \/>\n<\/code><\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank title='Circular Text or Emojis Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emojis-primer-tutorial\/'>Circular Text or Emojis Primer Tutorial<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d42527' onclick='var dv=document.getElementById(\"d42527\"); 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='d42527' 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='#d42555' onclick='var dv=document.getElementById(\"d42555\"); 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='d42555' 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='#d42570' onclick='var dv=document.getElementById(\"d42570\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/genericization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42570' 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='#d42595' onclick='var dv=document.getElementById(\"d42595\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42595' 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='#d42722' onclick='var dv=document.getElementById(\"d42722\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42722' 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='#d42756' onclick='var dv=document.getElementById(\"d42756\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/keyframes\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42756' 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='#d42989' onclick='var dv=document.getElementById(\"d42989\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quiz\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42989' 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='#d58814' onclick='var dv=document.getElementById(\"d58814\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/formula\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58814' 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='#d59079' onclick='var dv=document.getElementById(\"d59079\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/button\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59079' 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='#d59134' onclick='var dv=document.getElementById(\"d59134\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/nesting\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59134' 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='#d59156' onclick='var dv=document.getElementById(\"d59156\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/solar-system\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59156' 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='#d59164' onclick='var dv=document.getElementById(\"d59164\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/planet\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59164' 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='#d59171' onclick='var dv=document.getElementById(\"d59171\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59171' 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='#d59197' onclick='var dv=document.getElementById(\"d59197\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59197' 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='#d59209' onclick='var dv=document.getElementById(\"d59209\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/data-uri\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59209' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If we were to channel the &#8220;inner nerd&#8221;, we&#8217;d say the day we discovered there was such a thing as a data URI was hugely notable. But on that first day, we didn&#8217;t get how good they were. In the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-around-media-data-uri-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":[83,84,109,113,126,127,130,1653,174,203,208,4319,2712,1654,297,3667,1727,367,1549,392,454,484,513,519,2258,576,587,2780,652,1643,3965,752,760,2732,4297,2521,2621,861,4320,2805,1589,4318,2362,4321,997,1761,1022,3995,1094,1100,1111,1866,2272,1628,1196,2445,1226,3889,1644,2005,1891,1352,1369,2529,2257,4298,4283],"class_list":["post-59209","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-animated-gif","tag-animation-2","tag-astronomy","tag-audio","tag-background","tag-background-image","tag-bar-chart","tag-base64","tag-button","tag-chemistry","tag-circle","tag-circular","tag-compound","tag-data-uri","tag-data-url","tag-day","tag-distance","tag-dropdown","tag-element","tag-equation","tag-formula","tag-geometry","tag-google","tag-google-charts","tag-height","tag-html","tag-iframe","tag-interactive-entry","tag-javascript","tag-justification","tag-justify","tag-mathematics","tag-media","tag-mimetype","tag-molecule","tag-nest","tag-nesting","tag-onclick","tag-orbit","tag-periodic-table","tag-perspective","tag-planet","tag-play","tag-play-button","tag-programming","tag-prompt","tag-quiz","tag-radius","tag-scale","tag-science","tag-search-engine","tag-select","tag-size","tag-solar-system","tag-statistics","tag-sun","tag-svg","tag-svgxml","tag-text-justification","tag-tool","tag-user","tag-utf-8","tag-video","tag-watermark","tag-width","tag-window-prompt","tag-year"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59209"}],"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=59209"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59209\/revisions"}],"predecessor-version":[{"id":59222,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59209\/revisions\/59222"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=59209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=59209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=59209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}