{"id":69980,"date":"2025-10-02T03:01:00","date_gmt":"2025-10-01T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69980"},"modified":"2025-10-02T09:01:04","modified_gmt":"2025-10-01T23:01:04","slug":"australian-place-and-postcode-ajax-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-place-and-postcode-ajax-tutorial\/","title":{"rendered":"Australian Place and Postcode Ajax Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Place and Postcode Ajax Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/aus_pp_ajax.gif\" title=\"Australian Place and Postcode Ajax Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Place and Postcode Ajax Tutorial<\/p><\/div>\n<p>The recent <a title='Co-ordinate Mercator Projection Mobile TimeZone DateTime Tutorial' href='#c-mpmtzdtt'>Co-ordinate Mercator Projection Mobile TimeZone DateTime Tutorial<\/a> pointed out, regarding non-mobile versus mobile platforms, when it comes to web application functionality &#8230;<\/p>\n<blockquote>\n<p>Two quite glaring differences are &#8230;<\/p>\n<p><\/p>\n<ul>\n<li>way on non-mobile regarding elements containing a <i>title<\/i> attribute that you hover over, you will be shown that <i>title<\/i> attribute &#8230; hence our recent interest in <a target=\"_blank\" title='CSS Tooltip Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-tooltip-primer-tutorial\/' rel=\"noopener\">CSS Tooltips<\/a> &#8230; and today regarding the &#8230;<\/li>\n<li>way on non-mobile the user can see a cursor (which can be programmatically tailored) as the mouse moves across the webpage screen<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; where, around here, we&#8217;d add to that &#8230;<\/p>\n<blockquote><p>\nway on non-mobile <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)' rel=\"noopener\">Ajax<\/a> (Javascript functionality) has a natural &#8220;hover event friend&#8221; of <i>onmouseover<\/i> that mobile platforms do not\n<\/p><\/blockquote>\n<p> &#8230; and lately, we&#8217;ve been turning more and more to the <i>ontouchmove<\/i> event as a mobile alternative.  We decided to apply it to the tabular placenames presented in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-----------GETME\" title=\"australia_place_crowfly_distances.php\" rel=\"noopener\">the changed<\/a> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n    var classicxhr=null, classicplace='', curdelay=-1, longdelayis=8, gdivo=null, lastdivo=null, classicwo=null;<br \/>\n   <br \/> <br \/>\n    function afterfind() {<br \/>\n      if (curdelay &gt;= 0) {<br \/>\n        curdelay++;<br \/>\n        if (eval('' + curdelay) &gt;= eval('' + longdelayis)) {<br \/>\n          curdelay=-1;<br \/>\n          if (classicwo) {<br \/>\n            if (!classicwo.closed) {<br \/>\n              classicwo.close();<br \/>\n              classicwo=null;<br \/>\n            }<br \/>\n          }<br \/>\n          gdivo=null;<br \/>\n          lastdivo=null;<br \/>\n          classicwo=window.open('\/\/wikipedia.org\/wiki\/' + encodeURIComponent(classicplace.replace(\/\\ \/g,'_')), '_blank', 'top=10,left=10,width=600,height=600');<br \/>\n        } else {<br \/>\n          setTimeout(afterfind, 1000);<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    <br \/>\n    function classicajaxit(divo) {<br \/>\n      if (divo.innerHTML == '') {<br \/>\n        curdelay=-1;<br \/>\n        gdivo=null;<br \/>\n        lastdivo=null;<br \/>\n      } else {<br \/>\n      classicplace=divo.innerHTML;<br \/>\n      if (divo != lastdivo) {<br \/>\n        curdelay=0;<br \/>\n        lastdivo=divo;<br \/>\n      }<br \/>\n      gdivo=divo;<br \/>\n      if (curdelay == 0) {<br \/>\n        setTimeout(afterfind, 1000);<br \/>\n      }<br \/>\n      if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n         longdelayis=2;<br \/>\n      } else {<br \/>\n         if (divo.outerHTML.indexOf(' onmouseout=') == -1) {<br \/>\n           divo.onmouseout=function(event){  curdelay=-1; };<br \/>\n         }<br \/>\n         if (eval('' + curdelay) &gt; eval('' + longdelayis)) {<br \/>\n           curdelay=-1;<br \/>\n         }<br \/>\n      }<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; called via <i>onmouseover=classicajaxit(this);<\/i> and  <i>ontouchmove=classicajaxit(this);<\/i> interventions within the HTML (that the PHP writes out) &#8230; for the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-----------GETME\" rel=\"noopener\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\" rel=\"noopener\">Australian Places and Postcodes<\/a> web application.<\/p>\n<p>Please don&#8217;t get the idea that Ajax and mobile platforms do not mix.  Far from it, Ajax is useful for more than just <font size=1>(in today&#8217;s case, &#8220;long&#8221;)<\/font> &#8220;hovering over&#8221; interventions (we often use, as with today&#8217;s work, to harness the smarts of the great <a target=\"_blank\" title='Wikipedia ... thanks' href='http:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> resource, thanks), but early on getting to know Ajax, that &#8220;hovering over&#8221; context is the easiest one to see the power of Ajax up close and personal.<\/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\/australian-place-and-postcode-ajax-tutorial\/' rel=\"noopener\">Australian Place and Postcode Ajax Tutorial<\/a>.<\/p-->\n<hr>\n<p id='c-mpmtzdtt'>Previous relevant <a target=\"_blank\" title='Co-ordinate Mercator Projection Mobile TimeZone DateTime Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/co-ordinate-mercator-projection-mobile-timezone-datetime-tutorial\/' rel=\"noopener\">Co-ordinate Mercator Projection Mobile TimeZone DateTime 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\/regions.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Co-ordinate Cursor Mercator Projection TimeZone DateTime Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_countries_cursor_tz_mobile.gif\" title=\"Co-ordinate Cursor Mercator Projection TimeZone DateTime Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Co-ordinate Mercator Projection Mobile TimeZone DateTime Tutorial<\/p><\/div>\n<p>We find lots of need to use the word &#8230;<\/p>\n<blockquote><p>\nnon-mobile\n<\/p><\/blockquote>\n<p> &#8230; and perhaps you&#8217;re regular enough to have noticed?!   Yes, of course there are quite of lot of differences between how a &#8230;<\/p>\n<ul>\n<li>non-mobile web browser webpage behaves &#8230; compared to how a &#8230;<\/li>\n<li>mobile web browser webpage behaves<\/li>\n<\/ul>\n<p>Two quite glaring differences are &#8230;<\/p>\n<ul>\n<li>way on non-mobile regarding elements containing a <i>title<\/i> attribute that you hover over, you will be shown that <i>title<\/i> attribute &#8230; hence our recent interest in <a target=\"_blank\" title='CSS Tooltip Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-tooltip-primer-tutorial\/' rel=\"noopener\">CSS Tooltips<\/a> &#8230; and today regarding the &#8230;<\/li>\n<li>way on non-mobile the user can see a cursor (which can be programmatically tailored) as the mouse moves across the webpage screen<\/li>\n<\/ul>\n<p>But, today, the cursor work of yesterday&#8217;s <a title='Co-ordinate Cursor Mercator Projection TimeZone DateTime Tutorial' href='#c-cmptzdtt'>Co-ordinate Cursor Mercator Projection TimeZone DateTime Tutorial<\/a> is not lost to the mobile woooorrrrlllddd because &#8230;<\/p>\n<ul>\n<li>the non-mobile onmousemove event means by which a webpage screen position can help determine a contextual cursor with useful SVG+XML display content &#8230; and today &#8230;<\/li>\n<li>the mobile ontouchmove event is called into play as a means by which a webpage screen position can help determine a contextual position:absolute &#8220;overlay&#8221; span element whose innerHTML contains the SVG part of the SVG+XML display content talked about above<\/li>\n<\/ul>\n<p>We&#8217;re not saying that we will not tweak the way it works over time for &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" rel=\"noopener\">World Coastlines<\/a> GeoJson world map web application &#8230; and &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" rel=\"noopener\">World Countries<\/a> GeoJson world map web application<\/li>\n<\/ul>\n<p> &#8230; <span><a target=\"_blank\" class=\"audioytplay\" title=\"https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=157s\" href=\"https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=157s\" rel=\"noopener\">again<\/a><\/span>.  But at least for now a user can trail their finger down across the Mercator Projection map and one of &#8230;<\/p>\n<ul>\n<li><i>current date time at<\/i> functionality <font size=1>data<\/font> addition &#8230; <strike>non-mobile cursor wise &#8230; <\/strike>in addition to existant &#8230;<\/li>\n<li>latitude, longitude<\/li>\n<li>responsive percentage left%, top%<\/li>\n<\/ul>\n<p> &#8230; appears as they move, holding that finger down.  The effect created resembles a non-mobile cursor on a mobile platform because the quick changes of data modes as above, makes the <a target=\"_blank\" title='Claytons ... the drink you are having when you are not having a drink ... and this CSS technique contributes to what we know of as an option element innerText area but is not there in the Javascript DOM (and we are happy about this, being kind of lazy).' href='https:\/\/www.youtube.com\/watch?v=3qf4yUMxnjw' rel=\"noopener\">Clayton<\/a>&#8216;s cursor blink like on non-mobile with non-Clayton&#8217;s cursors <font size=1>(my head hurts)<\/font>, thanks to <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/lefttopcursor.js---GETME\" rel=\"noopener\">the changed<\/a> the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/lefttopcursor.js---GETME\" rel=\"noopener\">lefttopcursor.js<\/a> external Javascript helper.<\/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\/co-ordinate-cursor-mercator-projection-timezone-datetime-tutorial\/' rel=\"noopener\">Co-ordinate Cursor Mercator Projection TimeZone DateTime Tutorial<\/a>.<\/p-->\n<hr>\n<p id='c-cmptzdtt'>Previous relevant <a target=\"_blank\" title='Co-ordinate Cursor Mercator Projection TimeZone DateTime Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/co-ordinate-cursor-mercator-projection-timezone-datetime-tutorial\/' rel=\"noopener\">Co-ordinate Cursor Mercator Projection TimeZone DateTime 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\/regions.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Co-ordinate Cursor Mercator Projection TimeZone DateTime Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_countries_cursor_tz.gif\" title=\"Co-ordinate Cursor Mercator Projection TimeZone DateTime Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Co-ordinate Cursor Mercator Projection TimeZone DateTime Tutorial<\/p><\/div>\n<p>We&#8217;re baaaaack!  <a class=\"audioytplay\" target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=3aeETaCsop8' rel=\"noopener\">And &#8230; loving it!<\/a>  Yes, back at GeoJson world map work as last talked about with <a title='Co-ordinate Cursor Mercator Projection External Javascript Tutorial' href='#c-cmpejt'>Co-ordinate Cursor Mercator Projection External Javascript Tutorial<\/a>, regarding <i>your better than garden variety<\/i> non-mobile cursor, today, we&#8217;re adding a &#8230;<\/p>\n<ul>\n<li><i>current date time at<\/i> functionality <font size=1>data<\/font> addition &#8230; non-mobile cursor wise &#8230; in addition to existant &#8230;<\/li>\n<li>latitude, longitude<\/li>\n<li>responsive percentage left%, top%<\/li>\n<\/ul>\n<p> &#8230; information carried along as a cursor over the Mercator Projection maps used in &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" rel=\"noopener\">World Coastlines<\/a> GeoJson world map web application &#8230; and &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" rel=\"noopener\">World Countries<\/a> GeoJson world map web application<\/li>\n<\/ul>\n<p>Huh?!  No changes to the parents?  Luckily, we have a scenario only needing <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/lefttopcursor.js--GETME\" rel=\"noopener\">changes to<\/a> the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/lefttopcursor.js--GETME\" rel=\"noopener\">lefttopcursor.js<\/a> external Javascript.<\/p>\n<p>What question did these changes seek to <i>improve upon<\/i> <font size=1>(shall we say, because a perfect solution is not on the cards, in any free way, here &#8230; but it works a lot of the time)<\/font>?<\/p>\n<blockquote><p>\n<a target=\"_blank\" title='Given latitude and longitude lookup current local time?' href='https:\/\/www.google.com\/search?q=given+latitude+and+longitude+lookup+current+local+time&#038;rlz=1C5OZZY_en&#038;oq=given+latitude+and+longitude+lookup+current+local+time&#038;gs_lcrp=EgZjaHJvbWUyCwgAEEUYChg5GKABMgkIARAhGAoYoAEyCQgCECEYChigATIHCAMQIRifBdIBCTE2Nzk1ajBqN6gCALACAA&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">Given latitude and longitude lookup current local time<\/a>?\n<\/p><\/blockquote>\n<p>If you follow through on this research you will see there is no free native Javascript that neatly addresses solutions, directly, but, around here, because of the wonderful &#8230;<\/p>\n<ul>\n<li>PHP in our lives &#8230; that means that &#8230;<\/li>\n<li>PHP <a target=\"_blank\" title='PHP TimeZone list' href='http:\/\/php.net\/manual\/en\/timezones.php' rel=\"noopener\">TimeZone<\/a> functionality is also in our lives &#8230; and we&#8217;ve <i>sort of<\/i> memorized what PHP does here in Javascript terms &#8230; hence have a &#8230;<\/li>\n<li>Javascript &#8220;one liner&#8221; variable made up of that PHP TimeZone data (if you will) &#8230; as a first call (we&#8217;ve decided if near enough to latitude and longitude of interest) &#8230; else falling back to &#8230;<\/li>\n<li>TimeZone UTC hour offset = Math.floor(longitude \/ 15) &#8230; mostly in International waters<\/li>\n<\/ul>\n<p> &#8230; as a paradigm <font color=blue>we&#8217;ve used<\/font> (where longlattotime() is called near the webpage document.body onload event timing) &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var yourtzlist=\"&lt;option value=\\\"GMT\\\" data-geo=\\\"51.4934,0.0098,GMT,GB,+0\\\"&gt;GMT&lt;\/option&gt;&lt;option value=\\\"Africa\/Abidjan\\\" data-geo=\\\"5.31666,-4.03334,GMT,CI,+0\\\"&gt;Africa\/Abidjan&lt;\/option&gt;&lt;option value=\\\"Africa\/Accra\\\" data-geo=\\\"5.55,-0.21667,GMT,GH,+0\\\"&gt;Africa\/Accra&lt;\/option&gt; ... blah blah blah\";<br \/>\n  var tznamelists=[], tzlatlist=[], tzlonglist=[], tzoffsetlist=[], tzisolist=[], lastlongis='', lastlatis='', lasttzsuff='', lasttzname='', withingettz=false;<br \/>\n<br \/>\nfunction toIso(date, timeZone) {  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/73576351\/how-do-you-get-the-dst-time-adjustment-from-a-timezone<br \/>\n    return new Date(date).toLocaleString('sv', { timeZone } ).replace(' ', 'T').replace(',', '.');<br \/>\n}<br \/>\n<br \/>\nfunction getUTCOffset(year, month, day, hour, minute, second, timeZone) {  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/73576351\/how-do-you-get-the-dst-time-adjustment-from-a-timezone<br \/>\n    const date = [year, month, day].map(e =&gt; (e + '').padStart(2, '0')).join('-') + 'T' + [hour, minute, second].map(e =&gt; (e + '').padStart(2, '0')).join(':');<br \/>\n    const dt = Date.parse(date + 'Z');<br \/>\n    for(let offsetMinutes = -900; offsetMinutes &lt;= 900; offsetMinutes += 15) {<br \/>\n        const test = new Date(dt - offsetMinutes * 60000);<br \/>\n        if (date === toIso(test, timeZone)) {<br \/>\n            return offsetMinutes;<br \/>\n        }<br \/>\n    }<br \/>\n}<br \/>\n<br \/>\nfunction getDSTDetails(zone, year) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/73576351\/how-do-you-get-the-dst-time-adjustment-from-a-timezone<br \/>\n    const jan = getUTCOffset(year, 1, 1, 0, 0, 0, zone);<br \/>\n    const jul = getUTCOffset(year, 7, 1, 0, 0, 0, zone);<br \/>\n    if (jan === jul) return { zone, year, standardOffsetMinutes: Math.min(jan, jul), dstOffsetMinutes: Math.max(jan, jul), janOffsetMinutes: jan, julOffsetMinutes: jul }<br \/>\n    return { zone, year, standardOffsetMinutes: Math.min(jan, jul), dstOffsetMinutes: Math.max(jan, jul), dstChangeMinutes: Math.abs(jan - jul) }<br \/>\n}<br \/>\n<br \/>\n  function gettzsuff() {<br \/>\n    var defoff=-999, wasdefoff=-999, deftz='';<br \/>\n    if (withingettz) {<br \/>\n        setTimeout(gettzsuff, 50);<br \/>\n    } else {<br \/>\n        var xlastlongis=lastlongis;<br \/>\n        var xlastlatis=lastlatis;<br \/>\n        withingettz=true;<br \/>\n        defoff=Math.floor(eval('' + xlastlongis) \/ 15);<br \/>\n        var nearestone=-1, nearestsum=-1, newsum=-1;<br \/>\n        for (var iuh=1; iuh&lt;tzlonglist.length; iuh++) {<br \/>\n          if (nearestone &lt; 0) {<br \/>\n            nearestone=iuh;<br \/>\n            wasdefoff=defoff;<br \/>\n            try {<br \/>\n            defoff=eval('' + tzoffsetlist[iuh]);<br \/>\n            } catch(ytryt) {<br \/>\n            console.warn('bad is ' + tzoffsetlist[iuh]);<br \/>\n            defoff=wasdefoff;<br \/>\n            }<br \/>\n            nearestsum=eval(Math.abs(tzlonglist[iuh] - xlastlongis) + Math.abs(tzlatlist[iuh] - xlastlatis));<br \/>\n            if (nearestsum &lt; 10) {<br \/>\n                deftz=tznamelists[iuh].replace('GMT','UTC');<br \/>\n                lasttzname=' (near to TimeZone ' + deftz + ')';<br \/>\n            }<br \/>\n          } else {<br \/>\n            newsum=eval(Math.abs(tzlonglist[iuh] - xlastlongis) + Math.abs(tzlatlist[iuh] - xlastlatis));<br \/>\n            if (newsum &lt; nearestsum) {<br \/>\n            nearestone=iuh;<br \/>\n            try {<br \/>\n            defoff=eval('' + tzoffsetlist[iuh]);<br \/>\n            } catch(ytrayt) {<br \/>\n            console.warn('Bad is ' + tzoffsetlist[iuh]);<br \/>\n            defoff=wasdefoff;<br \/>\n            }<br \/>\n            nearestsum=newsum;<br \/>\n            if (nearestsum &lt; 10) {<br \/>\n            deftz=tznamelists[iuh].replace('GMT','UTC');<br \/>\n                lasttzname=' (near to TimeZone ' + deftz + ')';<br \/>\n            }<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        if (deftz != '' && nearestsum &lt; 10) {<br \/>\n var xcd = new Date();<br \/>\n var xcyear = xcd.getUTCFullYear();<br \/>\n            console.log('' + (new Date(new Date().toLocaleString(\"en-US\", {timeZone: deftz}))).getTimezoneOffset() + ' ');<br \/>\n            console.log(getDSTDetails(deftz, xcyear));<br \/>\n            lasttzsuff=String.fromCharCode(32) + ' ' + ('' + (new Date(new Date().toLocaleString(\"en-US\", {timeZone: deftz})))).split(' GMT')[0].split(' UTC')[0];<br \/>\n            console.warn('0:' + lasttzsuff);<br \/>\n        } else if (defoff != -999) {<br \/>\n            lasttzname='';<br \/>\n var ud = new Date();<br \/>\n var uhour = ud.getUTCHours();<br \/>\n var umin = ud.getUTCMinutes();<br \/>\n var uday = ud.getUTCDay();<br \/>\n var usec = 0;<br \/>\n var udate = ud.getUTCDate();<br \/>\n var umonth = ud.getUTCMonth();<br \/>\n var uyear = ud.getUTCFullYear();<br \/>\n var newudt = new Date(Date.UTC(uyear, umonth, udate, uhour, umin, usec));<br \/>\n console.warn('defoff=' + defoff + ' RE ' + ('' + newudt));<br \/>\n if (('' + newudt).indexOf(' GMT+') != -1) {<br \/>\n defoff-=eval(('' + newudt).split(' GMT+')[1].substring(0,2));<br \/>\n defoff-=eval(eval(('' + newudt).split(' GMT+')[1].substring(2).substring(0,2).replace(\/^0\/g,'')) \/ 60);<br \/>\n } else if (('' + newudt).indexOf(' GMT-') != -1) {<br \/>\n defoff+=eval(('' + newudt).split(' GMT-')[1].substring(0,2));<br \/>\n defoff+=eval(eval(('' + newudt).split(' GMT-')[1].substring(2).substring(0,2).replace(\/^0\/g,'')) \/ 60);<br \/>\n }<br \/>\n console.warn(('' + (addHours(newudt,defoff))).split(' GMT')[0].split(' UTC')[0]);<br \/>\n            lasttzsuff=String.fromCharCode(32) + ' ' + ('' + (addHours(newudt,defoff))).split(' GMT')[0].split(' UTC')[0];<br \/>\n            console.warn('1:' + lasttzsuff);<br \/>\n        }<br \/>\n        \/\/lasttzsuff=''; \/\/ temporary<br \/>\n        withingettz=false;<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function addHours(xdate, hoursToAdd) {<br \/>\n  var newDate = new Date(xdate); \/\/ Create a copy to avoid modifying the original date<br \/>\n  newDate.setHours(newDate.getHours() + hoursToAdd);<br \/>\n  return newDate;<br \/>\n  }<br \/>\n<br \/>\n  function longlattotime() {<br \/>\n    var tzs=yourtzlist.split('\" data-geo=\"');<br \/>\n    for (var itzs=1; itzs&lt;tzs.length; itzs++) {<br \/>\n      tznamelists.push(tzs[eval(-1 + itzs)].split(' value=\"')[eval(-1 + tzs[eval(-1 + itzs)].split(' value=\"').length)]);<br \/>\n      tzlatlist.push(tzs[itzs].split(',')[0]);<br \/>\n      tzlonglist.push(tzs[itzs].split(',')[1]);<br \/>\n      tzisolist.push(tzs[itzs].split(',')[3]);<br \/>\n      if (eval('' + tzs[itzs].split(',').length) &gt; 4) {<br \/>\n      tzoffsetlist.push(tzs[itzs].split(',')[4].split('\"')[0].replace('+',''));<br \/>\n      } else {<br \/>\n      tzoffsetlist.push('0');<br \/>\n      }<br \/>\n    }<br \/>\n    console.warn('tzlonglist.length=' + tzlonglist.length);<br \/>\n  }<\/font><br \/>\n  <br \/>\n  function xmap(inidx) {<br \/>\n    var outidx=eval('' + inidx);<br \/>\n    if (geno) {<br \/>\n    if (altotherx != 0.0 || altothery != 0.0 || altoriginx != 0.0 || altoriginy != 0.0 || altscalex != 1.0) {<br \/>\n      outidx=('' + eval(eval('' + altoriginx) + (eval('' + inidx) - eval('' + genoriginx)) * eval('' + altscalex)).toPrecision(15));<br \/>\n      \/\/document.title='' + inidx + ' fixed=' + (eval('' + inidx) - eval('' + genoriginx)) + ' then ' + outidx;<br \/>\n      if (outidx.indexOf('.') != -1) {<br \/>\n        <font color=blue>lastlongis=outidx.split('.')[0] + '.' + outidx.split('.')[1].substring(0,2);<\/font><br \/>\n        return lastlongis.replace(\/0$\/g,String.fromCodePoint(176));  \/\/outidx.split('.')[0] + '.' + outidx.split('.')[1].substring(0,2).replace(\/0$\/g,String.fromCodePoint(176));<br \/>\n      }<br \/>\n      <font color=blue>lastlongis=outidx;<\/font><br \/>\n      return outidx.replace(\/0$\/g,String.fromCodePoint(176));<br \/>\n    \/\/} else {<br \/>\n    \/\/  alert('Oops');<br \/>\n    }<br \/>\n    }<br \/>\n    <font color=blue>lastlongis='' + inidx;<\/font><br \/>\n    return inidx;<br \/>\n  }<br \/>\n  <br \/>\n  function ymap(inidy) {<br \/>\n    var outidy=eval('' + inidy);<br \/>\n    if (geno) {<br \/>\n    if (altotherx != 0.0 || altothery != 0.0 || altoriginx != 0.0 || altoriginy != 0.0 || altscaley != 1.0) {<br \/>\n      outidy=('' + eval(eval('' + altoriginy) + (eval('' + inidy) - eval('' + genoriginy)) * eval('' + altscaley)).toPrecision(15));<br \/>\n      if (outidy.indexOf('.') != -1) {<br \/>\n        <font color=blue>lastlatis=outidy.split('.')[0] + '.' + outidy.split('.')[1].substring(0,2);<br \/>\n        setTimeout(gettzsuff, 50);<\/font><br \/>\n        return lastlatis.replace(\/0$\/g,String.fromCodePoint(176));  \/\/outidy.split('.')[0] + '.' + outidy.split('.')[1].substring(0,2).replace(\/0$\/g,String.fromCodePoint(176));<br \/>\n      }<br \/>\n      <font color=blue>lastlatis=outidy;<br \/>\n      setTimeout(gettzsuff, 50);<\/font><br \/>\n      return outidy.replace(\/0$\/g,String.fromCodePoint(176));<br \/>\n    }<br \/>\n    }<br \/>\n    <font color=blue>lastlatis='' + inidy;<br \/>\n    setTimeout(gettzsuff, 50);<\/font><br \/>\n    return inidy;<br \/>\n  }<br \/>\n  <br \/>\n  <font color=blue>function toTimestamp(strDate) {  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/9873197\/how-to-convert-date-to-timestamp<br \/>\n   var datum = Date.parse(strDate);<br \/>\n   return datum\/1000;<br \/>\n  }<br \/>\n  <br \/>\n  function timestamped(inidt) {<br \/>\n    if (inidt.split(':').length == 3) {<br \/>\n var uhour = inidt.split(':')[0].split(' ')[eval(-1 + inidt.split(':')[0].split(' ').length)];<br \/>\n var umin = inidt.split(':')[1];<br \/>\n     inidt=inidt.split(' ' + uhour + ':' + umin)[0];<br \/>\n var uyear = inidt.split(' ')[eval(-1 + inidt.split(' ').length)];<br \/>\n var udate = ('0' + inidt.split(' ')[eval(-2 + inidt.split(' ').length)]).slice(-2);<br \/>\n var umonth = inidt.split(' ')[eval(-3 + inidt.split(' ').length)].substring(0,3).replace('Jan','01').replace('Feb','02').replace('Mar','03').replace('Apr','04').replace('May','05').replace('Jun','06').replace('Jul','07').replace('Aug','08').replace('Sep','09').replace('Oct','10').replace('Nov','11').replace('Dec','12');<br \/>\n     return udate + '\/' + umonth + '\/' + uyear + ' ' + uhour + ':' + umin;<br \/>\n    }<br \/>\n    return inidt;<br \/>\n  }<br \/>\n  <br \/>\n  function lottery(valone, valtwo) {<br \/>\n    var anum=Math.floor(Math.random() * 20);<br \/>\n    if (valtwo != '' && anum &lt;= 5) {<br \/>\n      var bittoch=valone.split('&lt;\/text&gt;')[0].split('&gt;')[eval(-1 + valone.split('&lt;\/text&gt;')[0].split('&gt;').length)];<br \/>\n      console.warn('4:' + valtwo.slice(-8).replace(\/\\:\/g,' '));<br \/>\n      return valone.replace(bittoch, timestamped(valtwo)); \/\/valtwo.slice(-8).replace(\/\\:\/g,' ');<br \/>\n    }<br \/>\n    console.warn('5:' + valone);<br \/>\n    return valone;<br \/>\n  }<\/font><br \/>\n<\/code><\/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\/co-ordinate-cursor-mercator-projection-timezone-datetime-tutorial\/' rel=\"noopener\">Co-ordinate Cursor Mercator Projection TimeZone DateTime Tutorial<\/a>.<\/p-->\n<hr>\n<p id='c-cmpejt'>Previous relevant <a target=\"_blank\" title='Co-ordinate Cursor Mercator Projection External Javascript Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/co-ordinate-cursor-mercator-projection-external-javascript-tutorial\/' rel=\"noopener\">Co-ordinate Cursor Mercator Projection External Javascript 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\/regions.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Co-ordinate Cursor Mercator Projection External Javascript Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_countries_cursor.gif\" title=\"Co-ordinate Cursor Mercator Projection External Javascript Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Co-ordinate Cursor Mercator Projection External Javascript Tutorial<\/p><\/div>\n<p>For describing where you are on Earth humans have set up the &#8230;<\/p>\n<p><code><br \/>\nLongitude,Latitude<br \/>\n<\/code><\/p>\n<p> &#8230; <font size=1>(usually measured in degrees, especially <\/font><span><a target=\"_blank\" title=\"?\" class=\"audioytplay\" href='https:\/\/www.youtube.com\/watch?v=5OpuZzsPBhQ' rel=\"noopener\">in Mbeya and Madrid<\/a><\/span><font size=1>)<\/font> system of describing positions, and on a <a target=\"_blank\" title='Mercator map projection information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Mercator_projection' rel=\"noopener\">Mercator Projection<\/a> <font size=1>(ie. at school, the ones showing Greenland huge (when it is, in actuality, roughly, <a target=\"_blank\" title='Which country has a similar surface area to Greenland?' href='https:\/\/www.google.com\/search?q=which+country+has+a+similar+surface+area+to+greenland&#038;rlz=1C5OZZY_en&#038;oq=which+country+has+a+similar+surface+area+to+greenland&#038;gs_lcrp=EgZjaHJvbWUyCwgAEEUYChg5GKABMgkIARAhGAoYoAEyBwgCECEYjwLSAQkxODg0OWowajeoAgCwAgA&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">similar in surface area to Saudi Arabia<\/a>))<\/font> that globe is slapped onto a 2d rectangular sheet of map <font size=1>(like perfectly peeling an apple but fixing up the tears in forming a rectangle, sort of)<\/font>, if you will &#8230;<\/p>\n<p><code><br \/>\n360,-180<br \/>\n<\/code><\/p>\n<p> &#8230; wide,high starting up at the top left of that rectangle with Longitude,Latitude &#8230;<\/p>\n<p><code><br \/>\n-180,90<br \/>\n<\/code><\/p>\n<p> &#8230; degrees.  We&#8217;re saying the height is <i>-180<\/i> because down the bottom right of this Mercator Projection arrangement the Longitude,Latitude is &#8230;<\/p>\n<p><code><br \/>\n180,-90<br \/>\n<\/code><\/p>\n<p>Knowing all this and working out the webpage stuff as per usual we can, with a call, now catered for &#8230;<\/p>\n<p><code><br \/>\n  function xmap(inidx) {<br \/>\n    var outidx=eval('' + inidx);<br \/>\n    if (geno) {<br \/>\n    if (altotherx != 0.0 || altothery != 0.0 || altoriginx != 0.0 || altoriginy != 0.0 || altscalex != 1.0) {<br \/>\n      outidx=('' + eval(eval('' + altoriginx) + (eval('' + inidx) - eval('' + genoriginx)) * eval('' + altscalex)).toPrecision(15));<br \/>\n      \/\/document.title='' + inidx + ' fixed=' + (eval('' + inidx) - eval('' + genoriginx)) + ' then ' + outidx;<br \/>\n      if (outidx.indexOf('.') != -1) {<br \/>\n        return outidx.split('.')[0] + '.' + outidx.split('.')[1].substring(0,2).replace(\/0$\/g,String.fromCodePoint(176));<br \/>\n      }<br \/>\n      return outidx.replace(\/0$\/g,String.fromCodePoint(176));<br \/>\n    \/\/} else {<br \/>\n    \/\/  alert('Oops');<br \/>\n    }<br \/>\n    }<br \/>\n    return inidx;<br \/>\n  }<br \/>\n  <br \/>\n  function ymap(inidy) {<br \/>\n    var outidy=eval('' + inidy);<br \/>\n    if (geno) {<br \/>\n    if (altotherx != 0.0 || altothery != 0.0 || altoriginx != 0.0 || altoriginy != 0.0 || altscaley != 1.0) {<br \/>\n      outidy=('' + eval(eval('' + altoriginy) + (eval('' + inidy) - eval('' + genoriginy)) * eval('' + altscaley)).toPrecision(15));<br \/>\n      if (outidy.indexOf('.') != -1) {<br \/>\n        return outidy.split('.')[0] + '.' + outidy.split('.')[1].substring(0,2).replace(\/0$\/g,String.fromCodePoint(176));<br \/>\n      }<br \/>\n      return outidy.replace(\/0$\/g,String.fromCodePoint(176));<br \/>\n    }<br \/>\n    }<br \/>\n    return inidy;<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\/lefttopcursor.js-GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/lefttopcursor.js-GETME\" rel=\"noopener\">lefttopcursor.js<\/a> external Javascript call of the ilk &#8230;<\/p>\n<p><code><br \/>\n&lt;script type=text\/javascript src='\/\/www.rjmprogramming.com.au\/lefttopcursor.js?rand=876538765&scp=1F310&type=img&tl=-180,90&wh=360,-180'&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; affecting, further to yesterday&#8217;s <a title='Co-ordinate Cursor External Javascript Primer Tutorial' href='#c-cejpt'>Co-ordinate Cursor External Javascript Primer Tutorial<\/a>, as per &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php----------------GETME\" title=\"countries.php\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php----------------GETME\" title=\"countries.php\" rel=\"noopener\">countries.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson World Countries PHP web application<\/a> &#8230; and &#8230;<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php---------GETME\" title=\"regions.php\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php---------GETME\" title=\"regions.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson World Coastlines PHP web application<\/a><\/li>\n<\/ul>\n<p> &#8230; to improve these web applications.<\/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\/co-ordinate-cursor-mercator-projection-external-javascript-tutorial\/' rel=\"noopener\">Co-ordinate Cursor Mercator Projection External Javascript Tutorial<\/a>.<\/p-->\n<hr>\n<p id='c-cejpt'>Previous relevant <a target=\"_blank\" title='Co-ordinate Cursor External Javascript Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/co-ordinate-cursor-external-javascript-primer-tutorial\/' rel=\"noopener\">Co-ordinate Cursor External Javascript 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\/do_away_with_the_boring_bits.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Co-ordinate Cursor External Javascript Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.gif\" title=\"Co-ordinate Cursor External Javascript Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Co-ordinate Cursor External Javascript Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;re taking what we learnt regarding &#8230;<\/p>\n<blockquote><p>\nco-ordinate<sup>d<\/sup> cursors\n<\/p><\/blockquote>\n<p> &#8230; <font size=1>(only regarding non-mobile platforms, alas)<\/font> we implemented via the document.body <i>onmousemove<\/i> event logics in the recent <a title='Animated Plane Refuel Game Tutorial' href='#aprgt'>Animated Plane Refuel Game Tutorial<\/a>, and creating new external Javascript useful <strike>callee<\/strike>tool whereby &#8230;<\/p>\n<ul>\n<li>not needing to implement it for that project above (except before launching into it making responsive design percentage friendly units into the mix via <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-------------GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-------------GETME\" rel=\"noopener\">&#8220;latest draft&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html?rand=refuel\" rel=\"noopener\"><font size=1>Animated Plane<\/font> Plane Refuel Game<\/a> web application <a title='Previous link is for a new window, this one for below ...' href='#spif'>below<\/a>), but doing a quick check to see that even if you did, the external Javascript would know enough to &#8220;lay off&#8221; &#8230; and &#8230;.<\/li>\n<li>try out on yesterday&#8217;s <a target=\"_blank\" title='Background Blend Mode Example' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_blend_mode_example.html' rel=\"noopener\">Background Blend Mode Example<\/a> web application <font size=1>(and which, eventually, we said &#8220;What the heck, so what if it gets an inapt cursor?!&#8221; and ended up creating a <a target=\"_blank\" title='Background Blend Mode Example' href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_blend_mode_example.html-GETME' rel=\"noopener\">&#8220;second<\/a> <a target=\"_blank\" title='Background Blend Mode Example' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_blend_mode_example.html-GETME' rel=\"noopener\">draft&#8221;<\/a>) <\/font> calling this new <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/lefttopcursor.js_GETME\" rel=\"noopener\">lefttopcursor.js<\/a> external Javascript &#8230; via &#8230;<br \/>\n<code><br \/>\n&lt;script type=text\/javascript src='\/\/www.rjmprogramming.com.au\/lefttopcursor.js?scp=26fd'&gt;&lt;\/script&gt;<br \/>\n<\/code><br \/>\n &#8230; as an example call implementing cursor text with the &#x26fd; fuel pump emoji mentioned, on our macOS <a target=\"_blank\" title='MAMP' href='http:\/\/www.mamp.info' rel=\"noopener\">MAMP<\/a> local Apache\/PHP\/MySql web server, and you can see working within today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.gif\" rel=\"noopener\">animated GIF<\/a> presentation\n<\/li>\n<li>try out on <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html--------------GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html--------------GETME\" rel=\"noopener\">do_away_with_the_boring_bits.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\" rel=\"noopener\">Try Your Own HTML web application<\/a>&#8216;s iframe HTML validator <font color=blue>using<\/font> it&#8217;s <i>srcdoc<\/i> &#8230;<br \/>\n<code><br \/>\n&lt;iframe <font color=blue>srcdoc=\"&lt;html&gt;&lt;head&gt;&lt;script type=text\/javascript src='\/\/www.rjmprogramming.com.au\/lefttopcursor.js?rand=7635476'&gt;&lt;\/script&gt;&lt;\/head&gt;&lt;body style=width:100%;height:650px;&gt;&nbsp;&lt;\/body&gt;&lt;\/html&gt;\" data-<\/font>src='about:blank' name='ihtmlcontent' id='ihtmlcontent' style='z-index:99;height:650px; background-color:lightblue;'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n &#8230; attribute<\/li>\n<\/ul>\n<p> &#8230; all happening.<\/p>\n<div style=\"-webkit-overflow-scrolling:touch;width:1200px;\">\n<iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\" style=\"width:200%;height:1800px;zoom:0.5;\"><\/iframe>\n<\/div>\n<p>It being <i>external Javascript<\/i> we wanted to see it working from a localhost web browser address bar URL call, and it did, making it a tool, to our mind.<\/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\/co-ordinate-cursor-external-javascript-primer-tutorial\/' rel=\"noopener\">Co-ordinate Cursor External Javascript Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aprgt'>Previous relevant <a target=\"_blank\" title='Animated Plane Refuel Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-refuel-game-tutorial\/' rel=\"noopener\">Animated Plane Refuel 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\/animated_plane.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated Plane and Coconut Hunt Game Nuances Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane_refuel_game.jpg\" title=\"Animated Plane and Coconut Hunt Game Nuances Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated Plane Refuel Game Tutorial<\/p><\/div>\n<p>Today we wondered how best to involve the &#8230;<\/p>\n<ul>\n<li>plane &#8230; mainly, but perhaps also the &#8230;<\/li>\n<li>gymnast &#8230; with a <i>guest starring<\/i> role &#8230;<\/li>\n<\/ul>\n<p> &#8230; in an online game in our recent <a title='Animated Plane and Coconut Hunt Game Nuances Tutorial' href='#apchgnt'>Animated Plane and Coconut Hunt Game Nuances Tutorial<\/a>&#8216;s web application, because their existence to do with Hunt Games seems a bit obscure.<\/p>\n<p>And so, we thought, you see those games where characters get strength by picking up objects they &#8220;run into&#8221; or &#8220;run over&#8221; and we thought &#8230;<\/p>\n<blockquote><p>\nPlane Refuel Game\n<\/p><\/blockquote>\n<p> &#8230; <font size=1>(where the longer the flight survives the more skillful the player)<\/font> as a result of that thinking, plus being able to find an apt emoji &#9981; for the fuel pump we wanted to base the game around, along with an HTML <a target=\"_blank\" title='Progress tag information from W3schools' href='https:\/\/www.w3schools.com\/tags\/tag_progress.asp' rel=\"noopener\">progress<\/a> element to inform the user regarding how much fuel is left, in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html------------GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html------------GETME\" rel=\"noopener\">&#8220;latest draft&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html?rand=refuel\" rel=\"noopener\"><font size=1>Animated Plane<\/font> Plane Refuel Game<\/a> web application <a title='Previous link is for a new window, this one for below ...' href='#spif'>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\/animated-plane-refuel-game-tutorial\/' rel=\"noopener\">Animated Plane Refuel Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='apchgnt'>Previous relevant <a target=\"_blank\" title='Animated Plane and Coconut Hunt Game Nuances Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-and-coconut-hunt-game-nuances-tutorial\/' rel=\"noopener\">Animated Plane and Coconut Hunt Game Nuances 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\/animated_plane.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated Plane and Coconut Hunt Game Nuances Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane_nuance.gif\" title=\"Animated Plane and Coconut Hunt Game Nuances Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated Plane and Coconut Hunt Game Nuances Tutorial<\/p><\/div>\n<p>Today&#8217;s a day of nuanced progress, after yesterday&#8217;s <a title='Coconut Hunt Game Tutorial' href='#chgt'>Coconut Hunt Game Tutorial<\/a>&#8216;s &#8220;filling in sideways&#8221; work on our Animated Plane and Coconut Hunt Game web application.  Today, we &#8230;<\/p>\n<ul>\n<li>fixed some document.body.title annoyances whereby it would appear too often<\/li>\n<li>worked on the default <i>A<\/i> option textarea via &#8230;\n<ol>\n<li>some &#8220;panda &#128060; led recovery&#8221; modelling of a <i>p<\/i> emoji usage (with animation) and <i>span<\/i>  emoji usage (without animation) &#8230; and &#8230;<\/li>\n<li>modelling of how iframe onload event can be used to develop dynamic Javascript (the default example changing the <i>coconut<\/i> &#129381; hunt into a <i>bear<\/i> &#128059; hunt<sup title=\"Get it?! We're all going on a ...\">?!<\/sup>) &#8230; as opposed to a document.<a target=\"_blank\" title='Javascript createElement method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_createelement.asp' rel=\"noopener\">createElement(&#8216;script&#8217;)<\/a> alternative approach<\/li>\n<\/ol>\n<li>fixed some window.open <i>too small<\/i> size annoyances<\/li>\n<li>allowed for screen co-ordinates cursor (on non-mobile), via <i>onmousemove<\/i> event logic, to assist intrepid users going above and beyond <a target=\"_blank\" title='Overlay postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay' rel=\"noopener\">&#8220;overlay&#8221;<\/a> positioning their own elements via <i>position:absolute;<\/i> left:?; top:?; in <i>A<\/i> option textareas<\/li>\n<li>allowed for toggling of non-mobile cursor between as above and <i>crosshair<\/i> via right click<\/li>\n<li>allowed for the last left:?; top:?; as above detected be remembered and involve itself as the default <i>position:absolute;<\/i> &#8220;overlay&#8221; positioning of the <i>A<\/i> option textarea default &#8220;panda &#128060; led recovery&#8221; emoji of above<\/li>\n<li>allow for 8 seconds of time for a user to change default coconut &#129381; emoji to some other text via <a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=true ahead of the Hunt Game starting &#8230; thanks to <a target=\"_blank\" href='https:\/\/stackoverflow.com\/questions\/2260782\/how-do-i-remove-the-border-around-a-focused-contenteditable-pre' title='Useful link, thanks' rel=\"noopener\">this useful link<\/a> regarding hiding a contenteditable=true focus border<\/li>\n<li>allow for sharing of the Hunt Game<\/li>\n<li>Hunt Game sound effects<\/li>\n<\/ul>\n<p>Feel free to try these tweaks to our Animated Plane and Coconut Hunt Game, in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----------GETME\" rel=\"noopener\">a nuanced<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----------GETME\" rel=\"noopener\">&#8220;latest draft&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html\" rel=\"noopener\"><font size=1>Animated Plane<\/font> Coconut Hunt Game<\/a> web application <a title='Previous link is for a new window, this one for below ...' href='#spif'>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\/animated-plane-and-coconut-hunt-game-nuances-tutorial\/' rel=\"noopener\">\"Animated Plane and Coconut Hunt Game Nuances Tutorial<\/a>.<\/p-->\n<hr>\n<p id='chgt'>Previous relevant <a target=\"_blank\" title='Coconut Hunt Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/coconut-hunt-game-tutorial\/' rel=\"noopener\">Coconut Hunt 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\/animated_plane.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Coconut Hunt Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane_coconuthuntgame.png\" title=\"Coconut Hunt Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Coconut Hunt Game Tutorial<\/p><\/div>\n<p>Are you a reader who has been amused or bemused by the word <i>Game<\/i> being in the blog posting titles lately, up to yesterday&#8217;s  <a title='Animated Plane Game User Animations and Styling Tutorial' href='#apguast'>Animated Plane Game User Animations and Styling Tutorial<\/a>, when <strong><font size=4>No Game<\/font><\/strong> really, about any of it?  Well, today, it&#8217;s &#8230;<\/p>\n<blockquote><p>\nGame On\n<\/p><\/blockquote>\n<p>Do you like coconuts?  Can I ask you, have you ever looked into a coconut, and asked yourself &#8230;<\/p>\n<blockquote cite='https:\/\/foodiegiggles.com\/coconut-puns'><p>\n<a target=\"_blank\" title='?' href='https:\/\/foodiegiggles.com\/coconut-puns' rel=\"noopener\">I shell always love you.<\/a>\n<\/p><\/blockquote>\n<p>?  Well, have we got the game for you?!  Start the <strike>ball rolling<\/strike>shell shaking via the first click\/top on the coconut fallen from the tree.  And from there, it&#8217;s a fast reactions game, to score well!  Good luck, in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----------GETME\" rel=\"noopener\">&#8220;latest draft&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html\" rel=\"noopener\"><font size=1>Animated Plane<\/font> Coconut Hunt Game<\/a> web application <a title='Previous link is for a new window, this one for below ...' href='#spif'>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\/coconut-hunt-game-tutorial\/' rel=\"noopener\">Coconut Hunt Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='apguast'>Previous relevant <a target=\"_blank\" title='Animated Plane Game User Animations and Styling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-game-user-animations-and-styling-tutorial\/' rel=\"noopener\">Animated Plane Game User Animations and Styling 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\/animated_plane.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated Plane Game User Animations and Styling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane_more_a_c.gif\" title=\"Animated Plane Game User Animations and Styling Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated Plane Game User Animations and Styling Tutorial<\/p><\/div>\n<p>On top of yesterday&#8217;s <a title='Animated Plane Game User Content Sharing Tutorial' href='#apgucst'>Animated Plane Game User Content Sharing Tutorial<\/a>&#8216;s honing in on the five &#8220;nouns&#8221; of interest &#8230;<\/p>\n<ul>\n<li>trees<\/li>\n<li>plane<\/li>\n<li>gymnast<\/li>\n<li>clouds<\/li>\n<li>ground<\/li>\n<\/ul>\n<p> &#8230; today we wanted to offer two more user controllable parts to this Animated Plane Game web application, those being &#8230;<\/p>\n<ul>\n<li>CSS styling &#8230; easy, as CSS can be dynamically added to a web application at the clientside, as the Javascript is executing &#8230; and, a bit more of a learning curve for beginners is &#8230;<\/li>\n<li>user animations &#8230; we&#8217;re envisaging, in it&#8217;s &#8220;easiest to understand encapsulation for a newbie&#8221; uses &#8230;\n<ol>\n<li><a target=\"_blank\" title='CSS3 @keyframes rule information' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp' rel=\"noopener\">@keyframes<\/a><\/li>\n<li><a target=\"_blank\" title='CSS3 transitions rule information' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp' rel=\"noopener\">transition<\/a><\/li>\n<\/ol>\n<p> &#8230; a whole big wooooorrrrlllldddd of animation study just by itself (and in order for modelling to, perhaps, help we used an example from <a target=\"_blank\" title='Useful link, thanks' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_animations\/Using_CSS_animations' rel=\"noopener\">this excellent link<\/a>, thanks, as the default option <i>A<\/i> textarea usage model)\n<\/li>\n<\/ul>\n<p> &#8230; but a hell of a lot easier for a user to establish than some arcane Javascript DOM animations involving setTimeout or setInterval timers?!<\/p>\n<p>For these two new ideas, popup textarea windows appear to give the user plenty of space to play around in.  As ever, email and SMS can follow up for that user to share with others what their animation ideas are, perhaps far removed from the original plane and gymnast scenario by the time they finish.  And here it may be pertinent to point out that even using hashtag emailing (and even more so with SMSing) there must be message size limits that will stop you event-u-al-ly!<\/p>\n<p>Try this in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---------GETME\" rel=\"noopener\">&#8220;latest draft&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html\" rel=\"noopener\">Animated Plane Game<\/a> web application <a title='Previous link is for a new window, this one for below ...' href='#spif'>below<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>In yesterday&#8217;s &#8220;noun&#8221; work we talked about &#8220;content&#8221; defined by the user in terms of real references to media data URIs or URLs.  Well, the other way a user can now affect &#8220;content&#8221; is via CSS.  Below we make the plane and gymnast disappear via the <i>C<\/i> (for CSS styling) option (that can take you to a popup window textarea where you can Apply  this) &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n   #myif { \/* plane *\/<br \/>\n     display:none;   \/* other choice could be visibility:hidden; *\/<br \/>\n   }<br \/>\n<br \/>\n   #mytwoif { \/* gymnast *\/<br \/>\n     visibility:hidden;  \/* other choice could be display:none; *\/<br \/>\n   }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/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-animated-plane-game-user-animations-and-styling-tutorial\/' rel=\"noopener\">New Animated Plane Game User Animations and Styling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='apgucst'>Previous relevant <a target=\"_blank\" title='Animated Plane Game User Content Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-game-user-content-sharing-tutorial\/' rel=\"noopener\">Animated Plane Game User Content Sharing 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\/animated_plane.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated Plane Game User Content Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane_more.gif\" title=\"Animated Plane Game User Content Sharing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated Plane Game User Content Sharing Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Animated Plane Game Primer Tutorial' href='#apgpt'>Animated Plane Game Primer Tutorial<\/a> set up five &#8220;nouns&#8221; of interest &#8230;<\/p>\n<ul>\n<li>trees<\/li>\n<li>plane<\/li>\n<li>gymnast<\/li>\n<li>clouds<\/li>\n<li>ground<\/li>\n<\/ul>\n<p> &#8230; each of which has a relationship to a piece of media content.  The <i>border-image<\/i> (ie. ground) content aspects we allow a user to define emoji text for, but the rest are associated with a data URI or URL.<\/p>\n<p>Today&#8217;s work is to allow the user to specify these &#8220;content&#8221; data items themselves, as well as share this via email or SMS to another user, with those user &#8220;content&#8221; data items recreated for the recipient user clicking the email or SMS link containing those hashtagged user data components.  Later we hope to expand the functionality more, from today&#8217;s &#8230;<\/p>\n<p><code><br \/>\n  function getsrc(fromoh) {<br \/>\n     var forvpre='Currently this content points at ... ' + String.fromCharCode(10);<br \/>\n     var forvsuf=String.fromCharCode(10) + 'Enter an alternative content URL (can be clipart style data URI you see often using Google Image (Copy Image Address via right click) Searches) ... or ... ' + String.fromCharCode(10) + String.fromCharCode(10) + '1[:URL] for trees, 2[:URL] for plane, 3[:URL] for gymnast, 4[:URL] for clouds, 5[:emoji(s)] for ground, E for email, S for SMS';<br \/>\n     if (fromoh.indexOf(' src=\"\/\/') != -1) {<br \/>\n       return forvpre + document.URL.split('\/\/')[0] + fromoh.split(' src=\"')[1].split('\"')[0] + forvsuf;<br \/>\n     } else if (fromoh.indexOf(\" src='\/\/\") != -1) {<br \/>\n       return forvpre + document.URL.split('\/\/')[0] + fromoh.split(\" src='\")[1].split(\"'\")[0] + forvsuf;<br \/>\n     } else if (fromoh.indexOf(\" src=\/\/\") != -1) {<br \/>\n       return forvpre + document.URL.split('\/\/')[0] + fromoh.split(\" src=\")[1].split(\" \")[0].split(\"&gt;\")[0] + forvsuf;<br \/>\n     } else if (fromoh.indexOf(' src=\"') != -1) {<br \/>\n       return forvpre + fromoh.split(' src=\"')[1].split('\"')[0] + forvsuf;<br \/>\n     } else if (fromoh.indexOf(\" src='\") != -1) {<br \/>\n       return forvpre + fromoh.split(\" src='\")[1].split(\"'\")[0] + forvsuf;<br \/>\n     } else if (fromoh.indexOf(\" src=\") != -1) {<br \/>\n       return forvpre + fromoh.split(\" src=\")[1].split(\" \")[0].split(\"&gt;\")[0] + forvsuf;<br \/>\n     }<br \/>\n     return fromoh;<br \/>\n  }<br \/>\n  <br \/>\n  function yourprompt(ino, intlis) {<br \/>\n    var ei=-1, si=-1;<br \/>\n    isac=true;<br \/>\n    var opsd=prompt(getsrc(ino.outerHTML), '');<br \/>\n    if (opsd == null) { isac=false; return false; }<br \/>\n    if (opsd.trim() != '') {<br \/>\n      switch (opsd.substring(0,1).toLowerCase().replace('+','s')) {<br \/>\n        case '1': \/\/ trees<br \/>\n          if ((opsd + ' ').substring(0,2) == '1:') {<br \/>\n            treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myimg').src=('' + (opsd + ' ').substring(2) + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where trees are.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n  <br \/> <br \/>\n        case '2': \/\/ plane<br \/>\n          if ((opsd + ' ').substring(0,2) == '2:') {<br \/>\n            planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where plane is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '3': \/\/ gymnast<br \/>\n          if ((opsd + ' ').substring(0,2) == '3:') {<br \/>\n            gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('mytwoif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where gymnast is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('mytwoif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '4': \/\/ clouds<br \/>\n          if ((opsd + ' ').substring(0,2) == '4:') {<br \/>\n            cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps via Google image search) data URI or URL suiting where cloud background image is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '5': \/\/ ground<br \/>\n          if ((opsd + ' ').substring(0,2) == '5:') {<br \/>\n            groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + (opsd + ' ').substring(2) + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (probably quite long) emoji (we are guessing) border image text.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd != '') {<br \/>\n                 groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n              } else {<br \/>\n                 groundalt='&groundalt='; \/\/ + encodeURIComponent(opsd);<br \/>\n                 document.body.style.borderImage='none';<br \/>\n                 document.body.style.borderBottom='1px solid transparent';<br \/>\n                 document.body.style.borderBottomWidth='0px';<br \/>\n                 \/\/document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-bottom-width:0px !important; } &lt;\/sty' + 'le&gt;';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n            <br \/>\n        case 'e': \/\/ email<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.trim().indexOf('@') != -1) {<br \/>\n                anchor.href = 'mailto:' + opsd.split('@')[0].split(' ')[eval(-1 + opsd.split('@')[0].split(' ').length)] + opsd.split(opsd.split('@')[0])[1].split(' ')[0] + '?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'mailto:?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n            <br \/>\n        case 's': \/\/ SMS<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.substring(0,1).toLowerCase() == '+') {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[0] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else if (opsd.indexOf(' ') != -1) {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[eval(-1 + opsd.split(' ').length)] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'sms:&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n        <br \/>\n        default:<br \/>\n          if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n          }<br \/>\n          break;<br \/>\n      }<br \/>\n    } else {<br \/>\n      setTimeout(function(){ ino.click(); }, 100); return true;<br \/>\n    }<br \/>\n    isac=false;<br \/>\n    return false;<br \/>\n  }<br \/>\n    <br \/>\n  function anyprompt(opsd) {<br \/>\n    if (opsd.trim() != '') {<br \/>\n      opsd=opsd;<br \/>\n      switch (opsd.substring(0,1).toLowerCase().replace('+','s')) {<br \/>\n        case '1': \/\/ trees<br \/>\n          if ((opsd + ' ').substring(0,2) == '1:') {<br \/>\n            treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myimg').src=('' + (opsd + ' ').substring(2) + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where trees are.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '2': \/\/ plane<br \/>\n          if ((opsd + ' ').substring(0,2) == '2:') {<br \/>\n            planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where plane is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '3': \/\/ gymnast<br \/>\n          if ((opsd + ' ').substring(0,2) == '3:') {<br \/>\n            gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('mytwoif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where gymnast is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('mytwoif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '4': \/\/ clouds<br \/>\n          if ((opsd + ' ').substring(0,2) == '4:') {<br \/>\n            cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps via Google image search) data URI or URL suiting where cloud background image is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '5': \/\/ ground<br \/>\n          if ((opsd + ' ').substring(0,2) == '5:') {<br \/>\n            groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + (opsd + ' ').substring(2) + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (probably quite long) emoji (we are guessing) border image text.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd != '') {<br \/>\n                 groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n              } else {<br \/>\n                 groundalt='&groundalt='; \/\/ + encodeURIComponent(opsd);<br \/>\n                 document.body.style.borderImage='none';<br \/>\n                 document.body.style.borderBottom='1px solid transparent';<br \/>\n                 document.body.style.borderBottomWidth='0px';<br \/>\n                 \/\/document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-bottom-width:0px !important; } &lt;\/sty' + 'le&gt;';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n            <br \/>\n        case 'e': \/\/ email<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.trim().indexOf('@') != -1) {<br \/>\n                anchor.href = 'mailto:' + opsd.split('@')[0].split(' ')[eval(-1 + opsd.split('@')[0].split(' ').length)] + opsd.split(opsd.split('@')[0])[1].split(' ')[0] + '?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'mailto:?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n            <br \/>\n        case 's': \/\/ SMS<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.substring(0,1).toLowerCase() == '+') {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[0] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else if (opsd.indexOf(' ') != -1) {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[eval(-1 + opsd.split(' ').length)] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'sms:&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n        <br \/>\n        default:<br \/>\n          if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n          }<br \/>\n          break;<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n    <br \/>\n  function ourprompt(ino, intlis) {<br \/>\n    var ei=-1, si=-1;<br \/>\n    isac=true;<br \/>\n    var opsd=null;<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    opsd=prompt(intlis + String.fromCharCode(10) + String.fromCharCode(10) + intlis, '');<br \/>\n    } else {<br \/>\n    opsd=prompt(getsrc(document.getElementById('myimg').outerHTML), '');<br \/>\n    }<br \/>\n    if (opsd == null) { isac=false; return false; }<br \/>\n    if (opsd.trim() != '') {<br \/>\n      opsd=opsd;<br \/>\n      switch (opsd.substring(0,1).toLowerCase().replace('+','s')) {<br \/>\n        case '1': \/\/ trees<br \/>\n          if ((opsd + ' ').substring(0,2) == '1:') {<br \/>\n            treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myimg').src=('' + (opsd + ' ').substring(2) + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where trees are.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '2': \/\/ plane<br \/>\n          if ((opsd + ' ').substring(0,2) == '2:') {<br \/>\n            planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where plane is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '3': \/\/ gymnast<br \/>\n          if ((opsd + ' ').substring(0,2) == '3:') {<br \/>\n            gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('mytwoif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where gymnast is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('mytwoif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '4': \/\/ clouds<br \/>\n          if ((opsd + ' ').substring(0,2) == '4:') {<br \/>\n            cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps via Google image search) data URI or URL suiting where cloud background image is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '5': \/\/ ground<br \/>\n          if ((opsd + ' ').substring(0,2) == '5:') {<br \/>\n            groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + (opsd + ' ').substring(2) + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (probably quite long) emoji (we are guessing) border image text.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd != '') {<br \/>\n                 groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n              } else {<br \/>\n                 groundalt='&groundalt='; \/\/ + encodeURIComponent(opsd);<br \/>\n                 document.body.style.borderImage='none';<br \/>\n                 document.body.style.borderBottom='1px solid transparent';<br \/>\n                 document.body.style.borderBottomWidth='0px';<br \/>\n                 \/\/document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-bottom-width:0px !important; } &lt;\/sty' + 'le&gt;';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n            <br \/>\n        case 'e': \/\/ email<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.trim().indexOf('@') != -1) {<br \/>\n                anchor.href = 'mailto:' + opsd.split('@')[0].split(' ')[eval(-1 + opsd.split('@')[0].split(' ').length)] + opsd.split(opsd.split('@')[0])[1].split(' ')[0] + '?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'mailto:?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n            <br \/>\n        case 's': \/\/ SMS<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.substring(0,1).toLowerCase() == '+') {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[0] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else if (opsd.indexOf(' ') != -1) {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[eval(-1 + opsd.split(' ').length)] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'sms:&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n        <br \/>\n        default:<br \/>\n          if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n          }<br \/>\n          break;<br \/>\n      }<br \/>\n    } else {<br \/>\n      setTimeout(function(){ ino.click(); }, 100); return true;<br \/>\n    }<br \/>\n    isac=false;<br \/>\n    return false;<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\/animated_plane.html-------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-------GETME\" rel=\"noopener\">&#8220;eighth draft&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html\" rel=\"noopener\">Animated Plane Game<\/a> web application.<\/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\/animated-plane-game-user-content-sharing-tutorial\/' rel=\"noopener\">Animated Plane Game User Content Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='apgpt'>Previous relevant <a target=\"_blank\" title='Animated Plane Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-game-primer-tutorial\/' rel=\"noopener\">Animated Plane Game 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\/animated_plane.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated Plane Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane_top.png\" title=\"Animated Plane Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated Plane Game Primer Tutorial<\/p><\/div>\n<p>The <i><a target=\"_blank\" title='CSS mix-blend-mode information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_mix-blend-mode.php' rel=\"noopener\">mix-blend-mode<\/a>:multiply;<\/i> discoveries <font size=1>(along with those naive previous usage without realizing it&#8217;s implications)<\/font> we made creating <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/periodic-table-image-map-primer-tutorial\/' title='Periodic Table Image Map Primer Tutorial' rel=\"noopener\">Periodic Table Image Map Primer Tutorial<\/a> recently has opened up new &#8220;vistas of possibility&#8221; (VOP, of course) for us, and has inspired us to give &#8220;just Javascript and CSS and HTML animated games&#8221; (aided in large part by clipart free content components) another go &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.htm' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/p>\n<p> &#8230; with a &#8220;widget feel&#8221; now realizable, for us, knowing that white backgrounded HTML iframe content no longer has to hold us back piecing together animations (in an &#8220;OOP feeling&#8221; way) consisting of &#8230;<\/p>\n<ul>\n<li>base webpage CSS and HTML and Javascript (DOM, also helping out the control of) &#8230;<\/li>\n<li>HTML iframe components (and in our case the image content is it&#8217;s background image with background-size:contain; and background-repeat:no-repeat; along with a specific iframe width and height) for any one &#8220;noun&#8221; (or class of object) in your game storyboard &#8230; if you will &#8230; if you will &#8230; if you will &#8230; and &#8230;<\/li>\n<li>HTML img components in a similar vein &#8230; but today&#8217;s trees did not need <i><a target=\"_blank\" title='CSS mix-blend-mode information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_mix-blend-mode.php' rel=\"noopener\">mix-blend-mode<\/a>:multiply;<\/i> because the originator made the background transparent (ie. another option with all this &#8220;animated pieces thinking&#8221;)<\/li>\n<\/ul>\n<p>Animation(s) can be CSS @keyframe transitions (though not yet with animation above) or Javascript DOM logic via setTimeout (or setInterval) timers or animated GIF\/webp content or, we daresay, many other approaches.<\/p>\n<p>We&#8217;re going to tabularize below &#8220;how we got to the result above&#8221; below &#8230;<\/p>\n<table style=\"width:100%;\">\n<tr>\n<th>We started with a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html_GETME\" rel=\"noopener\">&#8220;first draft&#8221;<\/a> &#8230; getting <img title=\"Thanks to Image by brgfx on Freepik\" alt=\"Freepik image\" style=\"height:60px;\" src='\/HTMLCSS\/r8zh_rcsk_141001.jpg'><\/img> plane image animated with a rudimentary green border-bottom representing the ground &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html_GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME\" rel=\"noopener\">&#8220;second draft&#8221;<\/a> &#8230; adding  <img title=\"Thanks to https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" alt=\"https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" style=\"height:60px;\" src='\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif'><\/img> animated GIF cloud background to go with edited <img title=\"Thanks to Image by brgfx on Freepik\" alt=\"Freepik image\" style=\"height:60px;\" src='\/HTMLCSS\/r8zh_rcsk_141001.jpeg'><\/img> because mix-blend-mode:multiply will not mask out the non heterogenous bluish clouds in the image &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html--GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME\" rel=\"noopener\">&#8220;third draft&#8221;<\/a> &#8230; tweaking <img title=\"Thanks to https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" alt=\"https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" style=\"height:60px;\" src='\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif'><\/img> animated GIF cloud background &#8230; &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html--GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---GETME\" rel=\"noopener\">&#8220;fourth draft&#8221;<\/a> &#8230; establishing an SVG+XML (with SVG text emoji content) border-image for the bottom border representing the ground &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----GETME\" rel=\"noopener\">&#8220;fifth draft&#8221;<\/a> &#8230; added acknowledgements for all the help &#8230;<\/p>\n<blockquote><p>\nThanks to Image by brgfx on Freepik and https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif and https:\/\/procul.org\/images\/2025\/Animated-Clouds-Gif\/ and  and https:\/\/au.pinterest.com\/pin\/587930926347995281\/ and https:\/\/giphy.com\/explore\/trees-swaying-stickers\n<\/p><\/blockquote>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----GETME\" rel=\"noopener\">&#8220;sixth draft&#8221;<\/a> &#8230; added <img title=\"Thanks to https:\/\/au.pinterest.com\/pin\/587930926347995281\/\" alt=\"https:\/\/au.pinterest.com\/pin\/587930926347995281\/\" style=\"height:60px;\" src='\/HTMLCSS\/GIF_from_GIFER.gif'><\/img> animated GIF gymnast background and thereby proving that overlapping &#8220;iframe widgets&#8221; (helped out by mix-blend-mode:multiply presumably) was possible, and important &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html------GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html------GETME\" rel=\"noopener\">&#8220;seventh draft&#8221;<\/a> &#8230; added <img title=\"Thanks to https:\/\/giphy.com\/explore\/trees-swaying-stickers giphy.com\/explore\/trees-swaying-stickers\" alt=\"https:\/\/giphy.com\/explore\/trees-swaying-stickers giphy.com\/explore\/trees-swaying-stickers\" src='\/HTMLCSS\/swaying_trees.webp' style=\"height:60px;\"><\/img> animated (and transparently backgrounded) webp swaying trees image along with tweaked <img title=\"Thanks to Image by brgfx on Freepik\" alt=\"Freepik image\" style=\"height:60px;\" src='\/HTMLCSS\/r8zh_rcsk_141001.gif'><\/img> now animated GIF to animate the plane itself a little, in place, separate to the Javascript DOM based animation moving across the screen &#8230; for today&#8217;s final draft &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.htm' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p><i><b>Stop Press<\/b><\/i><\/p>\n<p>In tomorrow&#8217;s installment we allow for user defined content, and sharing, as per &#8230;<\/p>\n<p><iframe id=spif src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/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='#d69240' onclick='var dv=document.getElementById(\"d69240\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mix-blend-mode\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69240' 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='#d69297' onclick='var dv=document.getElementById(\"d69297\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/prompt\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69297' 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='#d69304' onclick='var dv=document.getElementById(\"d69304\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/transition\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69304' 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='#d69319' onclick='var dv=document.getElementById(\"d69319\"); 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='d69319' 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='#d69331' onclick='var dv=document.getElementById(\"d69331\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cursor\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69331' 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='#d69362' onclick='var dv=document.getElementById(\"d69362\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/progress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69362' 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='#d69382' onclick='var dv=document.getElementById(\"d69382\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/external-javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69382' 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='#d69399' onclick='var dv=document.getElementById(\"d69399\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mercator\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69399' 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='#d69897' onclick='var dv=document.getElementById(\"d69897\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/datetime\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69897' 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='#d69907' onclick='var dv=document.getElementById(\"d69907\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ontouchmove\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69907' 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='#d69980' onclick='var dv=document.getElementById(\"d69980\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69980' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent Co-ordinate Mercator Projection Mobile TimeZone DateTime Tutorial pointed out, regarding non-mobile versus mobile platforms, when it comes to web application functionality &#8230; Two quite glaring differences are &#8230; way on non-mobile regarding elements containing a title attribute that &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-place-and-postcode-ajax-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,37],"tags":[69,114,1608,576,652,3000,871,2723,2134,2919,997,1238,1319,1431],"class_list":["post-69980","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-australia","tag-hover","tag-html","tag-javascript","tag-long-hover","tag-onmouseover","tag-ontouchmove","tag-place","tag-postcode","tag-programming","tag-table","tag-tutorial","tag-wikipedia"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69980"}],"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=69980"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69980\/revisions"}],"predecessor-version":[{"id":69994,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69980\/revisions\/69994"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=69980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=69980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=69980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}