{"id":63512,"date":"2024-05-03T03:01:08","date_gmt":"2024-05-02T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63512"},"modified":"2024-05-02T21:01:22","modified_gmt":"2024-05-02T11:01:22","slug":"colouring-in-drag-and-drop-mobile-journey-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-mobile-journey-game-tutorial\/","title":{"rendered":"Colouring In Drag and Drop Mobile Journey Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#JourneyReveal\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop Mobile Journey Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game_hazardous_journey_mobile.gif\" title=\"Colouring In Drag and Drop Mobile Journey Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Mobile Journey Game Tutorial<\/p><\/div>\n<p>We needed to considerably change yesterday&#8217;s <a title='Colouring In Drag and Drop Pseudo Element Content Tutorial' href='#ciddpect'>Colouring In Drag and Drop Pseudo Element Content Tutorial<\/a> &#8220;Journey Game&#8221; logic to work with mobile platforms, to do with &#8230;<\/p>\n<ul>\n<li>for &#8220;easy&#8221; Journey Game options we <font color=blue>change size<\/font> of &#8220;mytable&#8221; table and <font color=purple>hide any bottom &#128163; bomb emoji<\/font> display &#8230;<br \/>\n<code><br \/>\n  var mapcontext=null;<br \/>\n  <br \/>\n  function canvasize() {<br \/>\n   <br \/>\n   \/\/document.getElementById('xmwr').innerHTML+='&lt;sty' + 'le&gt; tr { height: 1vh; } &lt;\/sty' + 'le&gt;';<br \/>\n   if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n      document.getElementById('xmwr').innerHTML+='&lt;sty' + 'le&gt; td { overflow: hidden !important; } &lt;\/sty' + 'le&gt;';<br \/>\n   }<br \/>\n   <br \/>\n   var tryimg=document.createElement('img');<br \/>\n   tryimg.onload=function(e){<br \/>\n    <font color=purple>var trrectis=null;<\/font><br \/>\n    var divvs=document.getElementById('mytable');<br \/>\n    newcanvas=document.getElementById('mymobilecanvas');<br \/>\n<br \/>\n    \/\/newcanvas.height=Math.round(tryimg.height * eval(('' + divvs.style.width).replace('px','')) \/ tryimg.width);<br \/>\n    newcanvas.width=eval(('' + divvs.style.width).replace('px',''));<br \/>\n    <font color=blue>newcanvas.height=eval(0.5 * eval(('' + divvs.style.width).replace('px','')));<\/font><br \/>\n    <br \/>\n    mapcontext=newcanvas.getContext('2d');<br \/>\n    mapcontext.drawImage(tryimg, 0, 0, tryimg.width, tryimg.height, 0, 0, newcanvas.width, newcanvas.height);<br \/>\n    <br \/>\n    <font color=blue>document.getElementById('mytbody').style.height='' + eval(0.5 * newcanvas.width) + 'px';<br \/>\n    document.getElementById('mytable').style.height='' + eval(0.5 * newcanvas.width) + 'px';<\/font><br \/>\n    <br \/>\n    \/\/newcanvas.style.display='block';<br \/>\n    <font color=purple>var divvsr=document.getElementById('mytable').getBoundingClientRect();<br \/>\n    var trls=document.getElementsByTagName('tr');<br \/>\n    for (var itrls=0; itrls&lt;trls.length; itrls++) {<br \/>\n       if (('' + trls[itrls].id + '  ').substring(0,2) == 'tr') {<br \/>\n         trrectis=trls[itrls].getBoundingClientRect();<br \/>\n         if (('' + trls[itrls].id) != ('tr' + (across == 3 ? 99 : across)) && eval(eval('' + trrectis.top) - eval('' + divvsr.top)) &gt; eval('' + eval(0.5 * newcanvas.width))) {<br \/>\n            trls[itrls].style.display='none';<br \/>\n            \/\/alert('here ' + trls[itrls].id);<br \/>\n         } \/\/else {<br \/>\n           \/\/document.title='' + eval('' + trrectis.top) + ' - ' + eval('' + divvsr.top) + ' &lt;= ' + eval('' + eval(0.5 * newcanvas.width));<br \/>\n         \/\/}<br \/>\n       }<br \/>\n    }<\/font><br \/>\n   };<br \/>\n   tryimg.src='\/HTMLCSS\/HYP_50M_SR_W.jpg';<br \/>\n   <br \/>\n   return true;<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<li>mobile tr (ie. table row) element heights were not constrained &#8230; but now are via <font color=blue>directing mobile emoji content to cell itself<\/font> &#8230;<br \/>\n<code><br \/>\n   <font color=blue>if (navigator.userAgent.match(\/iPad\/i)) {<br \/>\n   gonto.innerHTML='' + String.fromCodePoint(journeyemoji) + '';<br \/>\n   gonto.innerHTML='&lt;span class=tiny style=\"font-size:4px;overflow:hidden;\"&gt;' + String.fromCodePoint(journeyemoji) + '&lt;\/span&gt;';<br \/>\n   } else if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n   gonto.innerHTML='' + String.fromCodePoint(journeyemoji) + '';<br \/>\n   gonto.innerHTML='&lt;span class=tiny style=\"font-size:2px;overflow:hidden;\"&gt;' + String.fromCodePoint(journeyemoji) + '&lt;\/span&gt;';<br \/>\n   } else {<\/font><br \/>\n   gonto.innerHTML='&lt;span class=tiny style=\"font-size:6px;\"&gt;' + String.fromCodePoint(journeyemoji) + '&lt;\/span&gt;';<br \/>\n   <font color=blue>}<\/font><br \/>\n<\/code>\n<\/li>\n<li>Javascript popup <font color=blue>alert window can be refused<\/font> by the mobile platform web browsers (thanks to <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/21277406\/javascript-why-sometimes-alert-does-not-work-but-console-log-does#:~:text=If%20you%20try%20to%20execute,is%20not%20a%20fresh%20tab.'>heads up<\/a> that this can happen), especially if they &#8220;just proceed a location.href defining codeline&#8221; &#8230;<br \/>\n<code><br \/>\n    if (document.getElementById('pensel').value == '128668') {<br \/>\n    journeycount++;<br \/>\n    evs.push(gred(onto));<br \/>\n    \/\/document.title='' + onto.id;<br \/>\n    if (('' + onto.id).indexOf('TD') == 0) {<br \/>\n       if (!decided) {<br \/>\n       decided=true;<br \/>\n       ctyqgoes++;<br \/>\n       documentURL=document.URL;<br \/>\n       <font color=blue>if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675));  }<\/font><br \/>\n       onto.style.backgroundColor='darkred';<br \/>\n       \/\/onto.innerHTL='&lt;span class=tiny style=\"font-size:6px;background-color:darkred;\"&gt;' + String.fromCodePoint(128165) + '&lt;\/span&gt;'; \/\/String.fromCodePoint(128165);<br \/>\n       \/\/document.getElementById('xmwr').innerHTML+='&lt;sty' + 'le&gt; #' + onto.id + \"::after { content:'\\\\01F4A3'; } &lt;\/sty\" + 'le&gt;';<br \/>\n       <font color=blue>document.getElementById('xmwr').innerHTML+='&lt;sty' + 'le&gt; #' + onto.id + \"::after { content:'\\\\01F4A5'; background-color: darkred; font-size:12px; } &lt;\/sty\" + 'le&gt;';<br \/>\n       document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'Boom! ' + String.fromCodePoint(128165) + ' Sorry, we told you it was &lt;font color=darkgreen&gt;h&lt;\/font&gt;&lt;font color=greenyellow&gt;a&lt;\/font&gt;&lt;font color=yellowgreen&gt;z&lt;\/font&gt;&lt;font color=yellow&gt;a&lt;\/font&gt;&lt;font color=pink&gt;r&lt;\/font&gt;&lt;font color=orange&gt;d&lt;\/font&gt;&lt;font color=lightred&gt;o&lt;\/font&gt;&lt;font color=red&gt;u&lt;\/font&gt;&lt;font color=darkred&gt;s&lt;\/font&gt;?!');<br \/>\n       locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=' + czero + czero)) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';<\/font><br \/>\n       <font color=blue>setTimeout(function(){<\/font><br \/>\n       <font color=blue>if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n       location.href=locationhref;<br \/>\n       } else {<\/font><br \/>\n       alert('Boom! ' + String.fromCodePoint(128165) + ' Sorry, we told you it was hazardous?!');<br \/>\n       <font color=blue>if (locationhref.indexOf('journey=00') != -1) { locationhref=locationhref.replace('journey=00', 'journey=6');  }<br \/>\n       setTimeout(function(){<\/font> location.href=<font color=blue>locationhref; }, 3000); \/\/<\/font>(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=' + czero)) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';<br \/>\n       <font color=blue>}<\/font><br \/>\n       \/\/}<br \/>\n       <font color=blue>}, 3000);<\/font><br \/>\n       \/\/return null;<br \/>\n       }<br \/>\n    } else if (eval('' + journeycount) &gt;= eval('' + (across == 3 ? 99 : across))) {<br \/>\n       if (eval(('' + onto.id).substring(2).split('_')[0].replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'')) == 1) {<br \/>\n       if (!decided) {<br \/>\n       decided=true;<br \/>\n       if (('' + document.getElementById('scy').value) == 'supereasy') {<br \/>\n       ctyqscore++;<br \/>\n       } else if (('' + document.getElementById('scy').value) == 'easy') {<br \/>\n       ctyqscore+=2;<br \/>\n       } else {<br \/>\n       ctyqscore+=3;<br \/>\n       }<br \/>\n       ctyqgoes++;<br \/>\n <br \/>\n       <font color=blue>document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it!  Congratulations! ');<\/font><br \/>\n       onto.style.backgroundColor='darkgreen';<br \/>\n       documentURL=document.URL;<br \/>\n       <font color=blue>locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';<br \/>\n       if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675));  }<\/font><br \/>\n       <font color=blue>setTimeout(function(){<br \/>\n       if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n       location.href=locationhref;<br \/>\n       } else {<br \/>\n       \/\/setTimeout(function(){<\/font><br \/>\n       alert('You made it!  Congratulations! ');<br \/>\n       location.href=locationhref; \/\/(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';<br \/>\n       <font color=blue>\/\/}, 30);<br \/>\n       \/\/return '';<br \/>\n       }<br \/>\n       }, 3000);<\/font><br \/>\n<br \/>\n       }<br \/>\n       } else if (eval(('' + onto.id).substring(2).split('_')[0].replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'')) == (across == 3 ? 99 : across)) {<br \/>\n       if (!decided) {<br \/>\n       decided=true;<br \/>\n       if (('' + document.getElementById('scy').value) == 'supereasy') {<br \/>\n       ctyqscore++;<br \/>\n       } else if (('' + document.getElementById('scy').value) == 'easy') {<br \/>\n       ctyqscore+=2;<br \/>\n       } else {<br \/>\n       ctyqscore+=3;<br \/>\n       }<br \/>\n       ctyqgoes++;<br \/>\n       <font color=blue>document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it!  Congratulations! ');<\/font><br \/>\n       onto.style.backgroundColor='darkgreen';<br \/>\n       documentURL=document.URL;<br \/>\n       <font color=blue>locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';<br \/>\n       if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675));  }<br \/>\n       setTimeout(function(){<br \/>\n       if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n       location.href=locationhref;<br \/>\n       } else {<br \/>\n       \/\/setTimeout(function(){<\/font><br \/>\n       alert('You made it!  Congratulations! ');<br \/>\n       location.href=locationhref; \/\/(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';<br \/>\n       <font color=blue>\/\/}, 30);<br \/>\n       \/\/return '';<br \/>\n       }<br \/>\n       }, 3000);<\/font><br \/>\n       }<br \/>\n       } else if (eval(('' + onto.id).substring(2).split('_')[1].replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'')) == 1) {<br \/>\n       if (!decided) {<br \/>\n       decided=true;<br \/>\n       if (('' + document.getElementById('scy').value) == 'supereasy') {<br \/>\n       ctyqscore++;<br \/>\n       } else if (('' + document.getElementById('scy').value) == 'easy') {<br \/>\n       ctyqscore+=2;<br \/>\n       } else {<br \/>\n       ctyqscore+=3;<br \/>\n       }<br \/>\n       ctyqgoes++;<br \/>\n       <font color=blue>document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it!  Congratulations! ');<\/font><br \/>\n       onto.style.backgroundColor='darkgreen';<br \/>\n       documentURL=document.URL;<br \/>\n       <font color=blue>locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';<br \/>\n       if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675));  }<br \/>\n       setTimeout(function(){<br \/>\n       if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n       location.href=locationhref;<br \/>\n       } else {<br \/>\n       \/\/setTimeout(function(){<\/font><br \/>\n       alert('You made it!  Congratulations! ');<br \/>\n       location.href=locationhref; \/\/(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';<br \/>\n       <font color=blue>\/\/}, 30);<br \/>\n       \/\/return '';<br \/>\n       }<br \/>\n       }, 8000);<\/font><br \/>\n       }<br \/>\n       } else if (eval(('' + onto.id).substring(2).split('_')[1].replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'')) == (across == 3 ? 99 : across)) {<br \/>\n       if (!decided) {<br \/>\n       decided=true;<br \/>\n       if (('' + document.getElementById('scy').value) == 'supereasy') {<br \/>\n       ctyqscore++;<br \/>\n       } else if (('' + document.getElementById('scy').value) == 'easy') {<br \/>\n       ctyqscore+=2;<br \/>\n       } else {<br \/>\n       ctyqscore+=3;<br \/>\n       }<br \/>\n       ctyqgoes++;<br \/>\n       <font color=blue>document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it!  Congratulations! ');<\/font><br \/>\n       onto.style.backgroundColor='darkgreen';<br \/>\n       documentURL=document.URL;<br \/>\n       <font color=blue>locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';<br \/>\n       if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675));  }<br \/>\n       setTimeout(function(){<br \/>\n       if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n       location.href=locationhref;<br \/>\n       } else {<br \/>\n       \/\/setTimeout(function(){<\/font><br \/>\n       alert('You made it!  Congratulations! ');<br \/>\n       location.href=locationhref; \/\/(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';<br \/>\n       <font color=blue>\/\/}, 30);<br \/>\n       \/\/return '';<br \/>\n       }<br \/>\n       }, 8000);<\/font><br \/>\n       }<br \/>\n       }<br \/>\n    }<br \/>\n    } else {<br \/>\n    evs.push(onto);<br \/>\n    }<br \/>\n<\/code>\n<\/li>\n<li>we needed some extra consideration sharing a &#8220;Journey Game&#8221; with email or SMS recipients &#8230;<br \/>\n<code><br \/>\n  tableohprefixbit=tableohprefixbit.replace(encodeURIComponent(' (where red is nearest danger and you try to navigate between World edges)'), '');<br \/>\n  if (tableohprefixbit.indexOf('?') != -1 && documentURL.indexOf('journey=') == -1 && selem == 128668) {<br \/>\n    tableohprefixbit=tableohprefixbit.replace('?', '?journey=' + Math.floor(Math.random() * 19878675) + '&');<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<li>we needed <font color=blue>less wordiness<\/font> for the mobile platforms regarding that instructional span element contents &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n $changeanyto='width:' . trim(explode(';', explode('width:', <font color=blue>str_replace(' (where red is nearest danger and you try to navigate between World edges)','',<\/font>str_replace('+',' ',urldecode($_GET['tableohprefix']))<font color=blue>)<\/font>)[1])[0]) . ';height:' . trim(explode(';', explode('height:', str_replace('+',' ',urldecode($_GET['tableohprefix'])))[1])[0]) . ';';<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<\/ul>\n<p>Codewise this needed &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----------------------------------------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----------------------------------------------------GETME\">experimental_drag_and_drop.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\">Experimental Drag and Drop<\/a> clientside HTML and Javascript basis &#8230; helps out &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php---------------------GETME\">the   changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php---------------------GETME\">colouring_in_was_numbers_guessing_game.php<\/a> PHP coded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\" title=\"Click picture\">Colouring In Game<\/a><\/li>\n<\/ul>\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-colouring-in-drag-and-drop-pseudo-element-content-tutorial\/'>New Colouring In Drag and Drop Pseudo Element Content Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='ciddpect'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Pseudo Element Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-pseudo-element-content-tutorial\/'>Colouring In Drag and Drop Pseudo Element Content Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Colouring In Drag and Drop Pseudo Element Content Tutorial\"]<a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#JourneyReveal\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop Pseudo Element Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game_hazardous_journey_emoji.jpg\" title=\"Colouring In Drag and Drop Pseudo Element Content Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>Our current Colouring In web application project has relied a lot on HTML table, then tbody, then tr (row), then td (table cell) elements, believe it or not, up to today, not requiring any ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>traditional content (in Javascript DOM, that being <i>the HTML element types with a formalized end tag<\/i>'s innerHTML attribute) ... eg.\n<code>\n   document.getElementById('td01_01').innerHTML='';  \/\/ the first table cell of interest for Colouring In has no content\n<\/code>\n ... but neither have we been interested in the other ...<\/li>\n\n\n\n\n<li>CSS <a target=_blank title='CSS Pseudo-element information from W3schools' href='https:\/\/www.w3schools.com\/css\/css_pseudo_elements.asp'>Pseudo-element<\/a> approach to (shall we say) dynamically display content (eg. the day before yesterday's <a title='Colouring In Drag and Drop Hazardous Journey Game Tutorial' href='#ciddhjgt'>Colouring In Drag and Drop Hazardous Journey Game Tutorial<\/a>'s <a title='Colouring In Drag and Drop Browse Button CSS Tutorial' href='#ciddbbcsst'>Colouring In Drag and Drop Browse Button CSS Tutorial<\/a> used CSS syntax like ...\n&lt;style&gt;\n<code>\n  input[type=\"file\"]::after { content: '\\002709 Postcard \\002709'; } \n<\/code>\n&lt;\/style&gt;\n) means by which we could specify table cell content using the Pseudo-element <i>::after<\/i> way to add <i>content<\/i> &#9993; Postcard &#9993; <i>after<\/i> existing traditional content ... for an example of an HTML element with no formalized end tag ... with a formalized end tag it works the same way<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... and we're using both approaches to add emoji interest to our Hazardous Journey Game part of our Colouring In project today.<\/p>\n\n\n\n\n\n<p>Is there a worry doing this?  Sure, for us, because we want even and miniscularly dimensioned table cells that act a bit like (but are courser than) image pixels related to their tabular hosts.  We need to make sure emoji content introduced is small enough to fit into those preordained width and height table cells, and so we designate small CSS property <i>font-size<\/i> or Javascript DOM [element].style.fontSize<\/i> to fit these in without causing any ugly overflows.<\/p>\n\n \n\n\n\n<p>It's not a perfect algorithm but as part of today's \"emoji push\" as a user drags a \"tractor\", or is it a \"ship\", pointer across the World Map image, ahead of time we've mapped that World Map image to a hidden HTML<sub>5<\/sub> canvas element, and use those ideas we discussed at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-hover-tutorial\/' title='Region Picker Hover Tutorial'>Region Picker Hover Tutorial<\/a> to programmatically determine whether the pointer is over sea (use \"ship\" &#128674; emoji content) or land (use \"tractor\" &#128668; emoji content) ...<\/p>\n\n\n\n<code>\n var newcanvas=null, mapcontext=null, journeyemoji=128674;\n <br \/>\n   function rgbToHex(r, g, b) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/6735470\/get-pixel-color-from-canvas-on-mousemove\n    if (r &gt; 255 || g &gt; 255 || b &gt; 255)\n        throw 'Invalid color component';\n    return ((r &lt;&lt; 16) | (g &lt;&lt; 8) | b).toString(16);\n   }\n      <br \/>\n  function canvasize() { \n   <br \/>\n   var tryimg=document.createElement('img');\n   tryimg.onload=function(e){\n    var divvs=document.getElementById('mytable');\n    newcanvas=document.getElementById('mymobilecanvas'); \n<br \/>\n    newcanvas.height=Math.round(tryimg.height * eval(('' + divvs.style.width).replace('px','')) \/ tryimg.width);\n    newcanvas.width=eval(('' + divvs.style.width).replace('px',''));\n    <br \/>\n    mapcontext=newcanvas.getContext('2d');\n    mapcontext.drawImage(tryimg, 0, 0, tryimg.width, tryimg.height, 0, 0, newcanvas.width, newcanvas.height);\n    <br \/>\n    \/\/newcanvas.style.display='block';\n   };\n   tryimg.src='\/HTMLCSS\/HYP_50M_SR_W.jpg';\n   <br \/>\n   return true;\n  }\n<\/code>\n\n\n\n<p> ... used within \"ondragover\" event logic <font color=blue>as per<\/font> ...<\/p>\n\n\n\n<code>\n    if (selem == 128506 || selem == 128668) {\n       if (ev.touches) {\n       if (ev.touches[0].pageX) {\n       pos3 = ev.touches[0].pageX;\n       pos4 = ev.touches[0].pageY;\n       } else {\n       pos3 = ev.touches[0].clientX;\n       pos4 = ev.touches[0].clientY;\n       }\n       \/\/console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4);\n       } else if (ev.clientX || ev.clientY) {\n        pos3 = ev.clientX;\n        pos4 = ev.clientY;\n       \/\/console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4);\n       } else {\n        pos3 = ev.pageX;\n        pos4 = ev.pageY;\n       \/\/console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4);\n       }\n       <font color=blue>if (mapcontext) {\n       \/\/document.title=('x=' + eval(pos3 - ctyqrect.left) + ' and y=' + eval(pos4 - ctyqrect.top));\n       var myp = mapcontext.getImageData(Math.round(eval(pos3 - ctyqrect.left)), Math.round(eval(pos4 - ctyqrect.top)), 1, 1).data;\n       var myhex = ('#' + ('000000' + rgbToHex(myp[0], myp[1], myp[2])).slice(-6)).toUpperCase();\n       if (myhex.substring(0,2) < '#A') {\n        if (journeyemoji != 128674) {\n         journeyemoji=128674; \/\/String.fromCodePoint(128674); \/\/ ship\n         \/\/document.title='ship';\n        }\n       } else {\n        if (journeyemoji != 128668) {\n         journeyemoji=128668; \/\/String.fromCodePoint(128668); \/\/ tractor\n         \/\/document.title='tractor';\n        }\n       }\n       }<\/font>\n    }\n<\/code>\n\n\n\n<p> ... and associated \"ondragover\" event called ...<\/p>\n\n\n\n<code>\nfunction gred(gonto) {\n  var dangercount=0;\n  var bxcols=['darkgreen','greenyellow','yellowgreen','yellow','pink','orange','lightred','red','darkred'];\n  var currow=('' + gonto.id).substring(2).split('_')[0];\n  var curcol=('' + gonto.id).substring(2).split('_')[1];\n  var jrow=eval('' + currow.replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,''));\n  var jcol=eval('' + curcol.replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,''));\n  var crow=currow;\n  var ccol=curcol;\n  journeyred=bxcols[0]; \/\/bxcols[Math.floor(Math.random() * bxcols.length)];\n  if (('' + gonto.id).substring(0,2) == 'TD') {\n    journeyred='darkred';\n  } else {\n    if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {\n      dangercount++;\n    }\n    if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {\n      dangercount++;\n    }\n<br \/>\n    if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount++;\n    }\n    if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount++;\n    }\n<br \/>\n    \/\/document.title='TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;\n    if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount++;\n    }\n    if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount++;\n    }\n<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount++;\n    }\n    if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount++;\n    }\n<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {\n      dangercount+=0.5;\n    }\n    if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {\n      dangercount+=0.5;\n    }\n<br \/>\n    if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount+=0.5;\n    }\n    if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount+=0.5;\n    }\n<br \/>\n    \/\/document.title='TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;\n    if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount+=0.5;\n    }\n    if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount+=0.5;\n    }\n<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount+=0.5;\n    }\n    if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {\n      dangercount+=0.5;\n    }\n<br \/>\n    \/\/if (dangercount != 0) { alert(dangercount); }\n    journeyred=bxcols[Math.round(dangercount)]; \/\/'darkred';\n<br \/>\n  }\n  <font color=blue>gonto.innerHTML='&lt;span style=font-size:6px;&gt;' + String.fromCodePoint(journeyemoji) + '&lt;\/span&gt;';<\/font>\n  return gonto;\n}\n<\/code>\n\n\n\n<p> ... to add to the player's interest, we're hoping.<\/p>\n\n\n\n\n\n<p>Codewise this needed ...<\/p>\n\n \n\n\n\n<ul>\n\n\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html----------------------------------------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html----------------------------------------------------GETME\">experimental_drag_and_drop.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\">Experimental Drag and Drop<\/a> clientside HTML and Javascript basis ... helps out ...<\/li>\n\n\n\n\n<li>PHP coded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\" title=\"Click picture\">Colouring In Game<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-pseudo-element-content-tutorial\/'>Colouring In Drag and Drop Pseudo Element Content Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddhjgt'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Hazardous Journey Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-hazardous-journey-game-tutorial\/'>Colouring In Drag and Drop Hazardous Journey Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop Hazardous Journey Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game_hazardous_journey_betterinterim.jpg\" title=\"Colouring In Drag and Drop Hazardous Journey Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Hazardous Journey Game Tutorial<\/p><\/div>\n<p>Back to thinking about Drag and Drop, a lot of the way it works, favours web application game development.  You don&#8217;t even have to involve the &#8220;drop&#8221; part of the concept.  Just using the &#8220;drag&#8221; part, and the &#8220;ondragover&#8221; event, in particular, can be interesting, as we hope you&#8217;ve picked up from the work of our current focus, our Colouring In web application.<\/p>\n<p>Long way from just &#8220;Colouring In&#8221; by now.  In actuality it could be &#8220;The Drag Show&#8221;, but we all know we don&#8217;t have the &#8220;realia pizzazz&#8221; for that title?!<\/p>\n<p>Today, another Reveal option has been added onto the progress of yesterday&#8217;s <a title='Colouring In Drag and Drop Browse Button CSS Tutorial' href='#ciddbbcsst'>Colouring In Drag and Drop Browse Button CSS Tutorial<\/a>, which you could call &#8230;<\/p>\n<p><code><br \/>\nHazardous Journey Game<br \/>\n<\/code><\/p>\n<p>It involves &#8230;<\/p>\n<ul>\n<li>map of the world background image &#8230; like the other Reveal quizzes and games &#8230; and &#8230;<\/li>\n<li>hidden (like in the <a target=_blank title='Mineseeper game' href='https:\/\/www.google.com\/search?q=minesweeper+game&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=minefield+ga&#038;gs_lcrp=EgZjaHJvbWUqCggAEAAY4wIYgAQyCggAEAAY4wIYgAQyCggBEC4Y1AIYgAQyCggCEC4Y1AIYgAQyBggDEEUYOTIHCAQQABiABDIHCAUQABiABDIHCAYQABiABDIHCAcQABiABDIHCAgQABiABDIHCAkQABiABKgCALACAA&#038;sourceid=chrome&#038;ie=UTF-8'>minesweeper<\/a> game) table cells that stop the user in their tracks should they land on them &#8230; and &#8230;<\/li>\n<li>the user can try to start at one World Map edge and try to get to another (over a long enough distance) &#8230; following &#8230;<\/li>\n<li>colour coded Colouring In of table cells (the redder the more imminently dangerous) &#8230; as well as &#8230;<\/li>\n<li>a &#8220;hint&#8221; system in the &#8220;easy&#8221; category of play showing these dangerous cells (being as, nobody here is saying anything about this game being easy &#8230; but <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=life+wasn%27t+meant+to+be+easy&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=life+wasn%27&#038;gs_lcrp=EgZjaHJvbWUqBwgAEAAYgAQyBwgAEAAYgAQyBggBEEUYOTIHCAIQABiABDIHCAMQABiABDIHCAQQABiABDIHCAUQABiABDIHCAYQABiABDIHCAcQABiABDIHCAgQABiABDIHCAkQABiABKgCALACAA&#038;sourceid=chrome&#038;ie=UTF-8'>Life Wasn&#8217;t Meant to be Easy<\/a>)<\/li>\n<\/ul>\n<p>In the PHP parent <font color=blue>we capitalize<\/font> the IDs of dangerous cells  &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    for ($thisrow=1; $thisrow&lt;=$across; $thisrow++) {<br \/>\n      $cthisrow='0000000000' . $thisrow;<br \/>\n      \/\/$rowsofar='&lt;tr id=svgtr' . $thisrow . ' onclick=textbthis(event); style=\"width:100%;\" id=tr' . substr($cthisrow, -$iacross, $iacross) . '&gt;&lt;\/tr&gt;';<br \/>\n      $rowsofar='&lt;tr id=tr' . ltrim(substr($cthisrow, -$iacross, $iacross),'0') . ' onclick=textbthis(event); style=\"width:100%;\"&gt;&lt;\/tr&gt;';<br \/>\n      \/\/$rowsofar='&lt;tr id=svgtr' . $thisrow . ' style=\"width:100%;\"&gt;&lt;\/tr&gt;';<br \/>\n      <font color=blue>$ynftone='youllneverfindthis';<br \/>\n      $ynfttwo='youllneverfindthis';<br \/>\n      $yynftone='youllneverfindthis';<br \/>\n      $yynfttwo='youllneverfindthis';<br \/>\n      $thistdid='td' . substr($cthisrow, -$iacross, $iacross) . '_';<br \/>\n      for ($thiscol=1; $thiscol&lt;=$across; $thiscol++) {<br \/>\n      $ynftone='youllneverfindthis';<br \/>\n      $ynfttwo='youllneverfindthis';<br \/>\n      $yynftone='youllneverfindthis';<br \/>\n      $yynfttwo='youllneverfindthis';<br \/>\n      $ibv=rand(0, $across);<br \/>\n      if ($ibv &lt; ($across \/ 11) && (isset($_GET['journey']) || isset($_POST['journey']))) {<br \/>\n      $ynftone='td';<br \/>\n      $ynfttwo='TD';<br \/>\n      $yynftone='one';<br \/>\n      $yynfttwo='two';<br \/>\n      }<\/font><br \/>\n        $cthiscol='0000000000' . $thiscol;<br \/>\n        $thistdidsuffix='' . substr($cthiscol, -$iacross, $iacross) . '';<br \/>\n        $rowsofar=str_replace('&gt;&lt;\/tr&gt;', '&gt;&lt;td class=\"td' . <font color=blue>str_replace($yynftone, $yynfttwo,<\/font> 'one'<font color=blue>)<\/font> . '\" id=' . <font color=blue>str_replace($ynftone, $ynfttwo,<\/font> $thistdid<font color=blue>)<\/font> . $thistdidsuffix . ' style=text-align:center; data-answer=' . $ttcnt . '&gt;&lt;\/td&gt;&lt;\/tr&gt;', $rowsofar);<br \/>\n      }<br \/>\n      $newih=str_replace('&lt;\/tbody&gt;', $rowsofar . '&lt;\/tbody&gt;', $newih);<br \/>\n    }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; and this is used in some new HTML and Javascript basis functionality &#8230;<\/p>\n<p><code><br \/>\nvar journeyred='red';<br \/>\n<br \/>\nfunction gred(gonto) {<br \/>\n  var dangercount=0;<br \/>\n  var bxcols=['darkgreen','greenyellow','yellowgreen','yellow','pink','orange','lightred','red','darkred'];<br \/>\n  var currow=('' + gonto.id).substring(2).split('_')[0];<br \/>\n  var curcol=('' + gonto.id).substring(2).split('_')[1];<br \/>\n  var jrow=eval('' + currow.replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,''));<br \/>\n  var jcol=eval('' + curcol.replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,''));<br \/>\n  var crow=currow;<br \/>\n  var ccol=curcol;<br \/>\n  journeyred=bxcols[0]; \/\/bxcols[Math.floor(Math.random() * bxcols.length)];<br \/>\n  if (('' + gonto.id).substring(0,2) == 'TD') {<br \/>\n    journeyred='darkred';<br \/>\n  } else {<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {<br \/>\n      dangercount++;<br \/>\n    }<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {<br \/>\n      dangercount++;<br \/>\n    }<br \/>\n<br \/>\n    if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount++;<br \/>\n    }<br \/>\n    if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount++;<br \/>\n    }<br \/>\n<br \/>\n    \/\/document.title='TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount++;<br \/>\n    }<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount++;<br \/>\n    }<br \/>\n<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount++;<br \/>\n    }<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount++;<br \/>\n    }<br \/>\n<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {<br \/>\n      dangercount+=0.5;<br \/>\n    }<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {<br \/>\n      dangercount+=0.5;<br \/>\n    }<br \/>\n<br \/>\n    if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount+=0.5;<br \/>\n    }<br \/>\n    if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount+=0.5;<br \/>\n    }<br \/>\n<br \/>\n    \/\/document.title='TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount+=0.5;<br \/>\n    }<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount+=0.5;<br \/>\n    }<br \/>\n<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount+=0.5;<br \/>\n    }<br \/>\n    if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {<br \/>\n      dangercount+=0.5;<br \/>\n    }<br \/>\n<br \/>\n    \/\/if (dangercount != 0) { alert(dangercount); }<br \/>\n    journeyred=bxcols[Math.round(dangercount)]; \/\/'darkred';<br \/>\n<br \/>\n  }<br \/>\n  return gonto;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Codewise this needed &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---------------------------------------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---------------------------------------------------GETME\">experimental_drag_and_drop.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\">Experimental Drag and Drop<\/a> clientside HTML and Javascript basis &#8230; helps out &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php-------------------GETME\">the   changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php-------------------GETME\">colouring_in_was_numbers_guessing_game.php<\/a> PHP coded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\" title=\"Click picture\">Colouring In Game<\/a><\/li>\n<\/ul>\n<hr>\n<p id='ciddbbcsst'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Browse Button CSS Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-browse-button-css-tutorial\/'>Colouring In Drag and Drop Browse Button CSS Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop Browse Button CSS Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/postcard_css_again.jpg\" title=\"Colouring In Drag and Drop Browse Button CSS Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Browse Button CSS Tutorial<\/p><\/div>\n<p>Some HTML features that interface to the underlying operating system, you may have noticed yourself, are more restricted regarding how you can style them, than the usual HTML element catalogue.  One which is always coming up, in this regard, for us is &#8230;<\/p>\n<p><code><br \/>\ninput type=file browsing (from underlying operating system files) button<br \/>\n<\/code><\/p>\n<p>The thing is, as an improvement on yesterday&#8217;s <a title='Colouring In Drag and Drop Mobile Postcard Tutorial' href='#ciddmpt'>Colouring In Drag and Drop Mobile Postcard Tutorial<\/a> we&#8217;re butting up against this issue, because we wanted to make it more obvious for our mobile platform users of our Colouring In web application, that the way in to the functionality whereby they can create and share personalized (online) postcards is via them clicking that input type=file browsing button.   And so we went looking for advice and came across <a target=_blank title='Excellent link' href='https:\/\/www.viget.com\/articles\/styling-native-file-upload-input-field\/'>this excellent link&#8217;s advice<\/a> that got us <font color=blue>to set up the scenario<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  <font color=blue>if (preg_match(\"\/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\\.browser|up\\.link|webos|wos)\/i\", $_SERVER[\"HTTP_USER_AGENT\"])) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/4117555\/simplest-way-to-detect-a-mobile-device-in-php<br \/>\n  $templategame=str_replace('&gt;Game&lt;\/button&gt;', '&gt;Colouring In &lt;font style=display:none;&gt;Numbers Guessing Game&lt;\/font&gt; Game &lt;br&gt;&lt;font size=1&gt;... drag &lt;select onchange=\"document.getElementById(' . \"'source'\" . ').innerHTML=String.fromCodePoint(mwr(this.value));\" id=pensel&gt;&lt;option value=128396&gt;pen &#128396;&lt;\/option&gt;&lt;option value=9999&gt;pencil &#9999;&lt;\/option&gt;&lt;option value=128397&gt;crayon &#128397;&lt;\/option&gt;&lt;option value=8598&gt;totopleft &#8598;&lt;\/option&gt;&lt;option value=8599&gt;totopright &#8599;&lt;\/option&gt;8624&gt;&lt;option value=8624&gt;topandright &#8624;&lt;\/option&gt;&lt;option value=8625&gt;topandleft &#8625;&lt;\/option&gt;&lt;option value=8626&gt;bottomandright &#8626;&lt;\/option&gt;&lt;option value=8627&gt;bottomandleft &#8627;&lt;\/option&gt;&lt;option value=128506&gt;World Reveal &#128506;&lt;\/option&gt;&lt;option value=127754&gt;Rivers &#127754;&lt;\/option&gt;&lt;option value=127956&gt;Mountain &#127956;&lt;\/option&gt;&lt;option value=127966&gt;Waterfall &#127966;&lt;\/option&gt;&lt;\/select&gt; over canvas to colour in&lt;\/font&gt;&lt;\/button&gt;&nbsp;&lt;span id=dimageb title=\"Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you\" onclick=\"event.preventDefault(); woca=window.open(' . \"'https:\/\/www.google.com\/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))\" . ';\" style=\"padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;\"&gt;&lt;iframe onload=\"jifopen(this);\" class=\"spag\" scrolling=\"no\" data-onload=\"iifopen(this);\" id=\"cbi\" frameborder=\"0\" style=\"width:175px;height:228px;margin-top:-194px;\" data-ok=\"218,-194\" data-nmok=\"200,-178\" src=\"\/HTMLCSS\/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20\"&gt;&lt;\/iframe&gt;&nbsp;&lt;input onclick=\"event.stopPropagation();\" id=inurl style=width:420px; onblur=\"if (mayberesultalready(this.value).trim().length &gt; 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . \"'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''\" . '); } else {  location.href=document.URL.replace(String.fromCharCode(63), ' . \"'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'\" . ');  } }\" type=url placeholder=\"Optional linework, postcard, other background image URL or text\" value=\"\"&gt;&lt;\/input&gt;&nbsp;&lt;input onclick=\"event.stopPropagation();\" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00&gt;&lt;\/input&gt;&lt;\/span&gt;&lt;div id=\"doverlay\" style=display:none;&gt;&lt;\/div&gt;&lt;div id=\"result\" style=display:none;&gt;&lt;\/div&gt;&lt;div id=\"resultav\" style=display:none;&gt;&lt;\/div&gt;&lt;div id=\"videoag\" style=display:none;&gt;&lt;\/div&gt;&lt;input type=hidden id=\"audioname\" style=display:none; value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden id=\"outputname\" style=display:none; value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden id=\"cto\" style=display:none; value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden id=\"thewords\" style=display:none; value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden id=\"saysub\" style=display:none; value=\"\"&gt;&lt;\/input&gt;', $templategame); \/\/'', $templategame);<br \/>\n  } else {<\/font><br \/>\n  $templategame=str_replace('&gt;Game&lt;\/button&gt;', '&gt;Colouring In &lt;font style=display:none;&gt;Numbers Guessing Game&lt;\/font&gt; Game &lt;br&gt;&lt;font size=1&gt;... drag &lt;select onchange=\"document.getElementById(' . \"'source'\" . ').innerHTML=String.fromCodePoint(mwr(this.value));\" id=pensel&gt;&lt;option value=128396&gt;pen &#128396;&lt;\/option&gt;&lt;option value=9999&gt;pencil &#9999;&lt;\/option&gt;&lt;option value=128397&gt;crayon &#128397;&lt;\/option&gt;&lt;option value=8598&gt;totopleft &#8598;&lt;\/option&gt;&lt;option value=8599&gt;totopright &#8599;&lt;\/option&gt;8624&gt;&lt;option value=8624&gt;topandright &#8624;&lt;\/option&gt;&lt;option value=8625&gt;topandleft &#8625;&lt;\/option&gt;&lt;option value=8626&gt;bottomandright &#8626;&lt;\/option&gt;&lt;option value=8627&gt;bottomandleft &#8627;&lt;\/option&gt;&lt;option value=128506&gt;World Reveal &#128506;&lt;\/option&gt;&lt;option value=127754&gt;Rivers &#127754;&lt;\/option&gt;&lt;option value=127956&gt;Mountain &#127956;&lt;\/option&gt;&lt;option value=127966&gt;Waterfall &#127966;&lt;\/option&gt;&lt;\/select&gt; over canvas to colour in&lt;\/font&gt;&lt;\/button&gt;&nbsp;&lt;span id=dimageb title=\"Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you\" onclick=\"event.preventDefault(); woca=window.open(' . \"'https:\/\/www.google.com\/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))\" . ';\" style=\"padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;\"&gt;&lt;iframe class=\"spag\" scrolling=\"no\" data-onload=\"iifopen(this);\" id=\"cbi\" frameborder=\"0\" style=\"width:175px;height:200px;margin-top:-178px;\" data-ok=\"218,-194\" data-nmok=\"200,-178\" src=\"\/HTMLCSS\/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20\"&gt;&lt;\/iframe&gt;&nbsp;&lt;input onclick=\"event.stopPropagation();\" id=inurl style=width:420px; onblur=\"if (mayberesultalready(this.value).trim().length &gt; 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . \"'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''\" . '); } else {  location.href=document.URL.replace(String.fromCharCode(63), ' . \"'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'\" . ');  } }\" type=url placeholder=\"Optional linework, postcard, other background image URL or text\" value=\"\"&gt;&lt;\/input&gt;&nbsp;&lt;input onclick=\"event.stopPropagation();\" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00&gt;&lt;\/input&gt;&lt;\/span&gt;&lt;div id=\"doverlay\" style=display:none;&gt;&lt;\/div&gt;&lt;div id=\"result\" style=display:none;&gt;&lt;\/div&gt;&lt;div id=\"resultav\" style=display:none;&gt;&lt;\/div&gt;&lt;div id=\"videoag\" style=display:none;&gt;&lt;\/div&gt;&lt;input type=hidden id=\"audioname\" style=display:none; value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden id=\"outputname\" style=display:none; value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden id=\"cto\" style=display:none; value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden id=\"thewords\" style=display:none; value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden id=\"saysub\" style=display:none; value=\"\"&gt;&lt;\/input&gt;', $templategame); \/\/'', $templategame);<br \/>\n  <font color=blue>}<\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; for mobile platforms, where, on opening the HTML iframe linking to this relevant input type=file browsing button we restyle according to &#8230;<\/p>\n<p><code><br \/>\n var cbaconto=null;<br \/>\n <br \/>\n function jifopen(iois) {<br \/>\n   if (iois != null) {<br \/>\n     cbaconto = (iois.contentWindow || iois.contentDocument);<br \/>\n     if (cbaconto.document) { cbaconto = cbaconto.document; }<br \/>\n     if (cbaconto != null) {<br \/>\n       \/\/ Thanks to https:\/\/www.viget.com\/articles\/styling-native-file-upload-input-field\/<br \/>\n       setInterval(function() {<br \/>\n       cbaconto.getElementById('apostcard').innerHTML+='&lt;sty' + 'le&gt; input[type=\"file\"]::after { content:' + \"'\\\\002709 Postcard \\\\002709'; }  &lt;\/sty\" + 'le&gt;';<br \/>\n       setTimeout(function() {<br \/>\n       cbaconto.getElementById('apostcard').innerHTML+='&lt;sty' + 'le&gt; input[type=\"file\"]::after { content:' + \"'\\\\01F4F7 Take Photo \\\\01F4F7'; }  &lt;\/sty\" + 'le&gt;';<br \/>\n       }, 5000);<br \/>\n       }, 10000);<br \/>\n     }<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; creating a small emoji assisted animation informing of Postcard &#8220;Take Photo&#8221; possibilities regarding Postcard creation ideas, via a click of this input type=file browsing button.<\/p>\n<p>Codewise this needed &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------GETME\">inhouse tweaked<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------GETME\">client_browsing.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">Client Browsing<\/a> FileReader API interfacer &#8230; helps out &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--------------------------------------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--------------------------------------------------GETME\">experimental_drag_and_drop.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\">Experimental Drag and Drop<\/a> clientside HTML and Javascript basis &#8230; helps out &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php------------------GETME\">the   changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php------------------GETME\">colouring_in_was_numbers_guessing_game.php<\/a> PHP coded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\" title=\"Click picture\">Colouring In Game<\/a><\/li>\n<\/ul>\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\/colouring-in-drag-and-drop-browse-button-css-tutorial\/'>Colouring In Drag and Drop Browse Button CSS Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddmpt'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Mobile Postcard Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-mobile-postcard-tutorial\/'>Colouring In Drag and Drop Mobile Postcard Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop Mobile Postcard Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/postcard_again.gif\" title=\"Colouring In Drag and Drop Mobile Postcard Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Mobile Postcard Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-postcard-tutorial\/' title='Colouring In Drag and Drop Postcard Tutorial'>Colouring In Drag and Drop Postcard Tutorial<\/a> mentioned two issues with its Postcard creation functionalities that needed further attention &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-postcard-tutorial\/'><p>\nWe have more work to do regarding data limits (even with hashtagging) using mobile platforms and the Take Photo idea, and we have some text positioning to fix also &#8230;\n<\/p><\/blockquote>\n<p> &#8230; and today we look into that a bit more.<\/p>\n<p>Regarding <i>&#8220;We have more work to do regarding data limits (even with hashtagging) using mobile platforms&#8221;<\/i> we were finding the &#8220;Take Photo&#8221; iOS Camera app functionality was producing images of more than 3000&#215;4000 and as such, though amazingly it can still work in non-mobile, we were not surprised it didn&#8217;t work when shaping to create the mainly hashtagged email link required to share a Postcard with an emailee (ie. email recipient).  So <font color=blue>we did some pruning<\/font> &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>var lesserinurl='';<\/font><br \/>\n<br \/>\nfunction checkspag() {<br \/>\n  <font color=blue>if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && document.getElementById('result').innerHTML.trim() != '' && lesserinurl == '' && document.getElementById('result').innerHTML.indexOf('data:') == 0) {<br \/>\n  newimg=document.createElement('img');<br \/>\n  newimg.onload = function() {<br \/>\n    \/\/ draw the image onto the canvas<br \/>\n    \/\/alert(11);<br \/>\n    newcanvas=document.getElementById('mymobilecanvas'); \/\/document.createElement('canvas');<br \/>\n    \/\/alert(111);<br \/>\n    if (newimg.width > 800) {<br \/>\n    newcanvas.width=800;<br \/>\n    newcanvas.height=Math.round(newimg.height * 800 \/ newimg.width);<br \/>\n    \/\/alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);<br \/>\n    newcanvas.getContext('2d').drawImage(newimg, 0, 0, newimg.width, newimg.height, 0, 0, newcanvas.width, newcanvas.height);<br \/>\n    } else {<br \/>\n    newcanvas.width=newimg.width;<br \/>\n    \/\/alert('' + newimg.width + 'x' + newimg.height);<br \/>\n    newcanvas.height=newimg.height;<br \/>\n    \/\/alert('wh=' + newcanvas.width + 'x' + newcanvas.height);<br \/>\n    newcanvas.getContext('2d').drawImage(newimg, 0, 0);<br \/>\n    }<br \/>\n    lesserinurl=newcanvas.toDataURL('image\/jpeg', 0.1);<br \/>\n    document.getElementById('result').innerHTML=lesserinurl;<br \/>\n    \/\/document.getElementById('inurl').value=lesserinurl;<br \/>\n    \/\/alert(lesserinurl);<br \/>\n    \/\/document.getElementById('inurl').blur();<br \/>\n  }<br \/>\n  newimg.src = document.getElementById('result').innerHTML;<br \/>\n    setTimeout(checkspag, 5000);<br \/>\n  } else <\/font>if (document.getElementById('result').innerHTML.trim() != '' && multistyle == '') {<br \/>\n    imdu=document.getElementById('result').innerHTML.trim();<br \/>\n    document.getElementById('result').innerHTML='';<br \/>\n    document.getElementById('cbi').src='\/HTMLCSS\/client_browsing.htm?d=' + Math.floor(Math.random() * 1987867564) + '&wording=Allimages%20images%2E%20';<br \/>\n    \/\/alert('<sty' + 'le> #mytable { background:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(\/\\ \/g,'+').substring(0,20) + '); background-repeat:no-repeat; background-size:contain; } <\/sty' + 'le>');<br \/>\n    if (document.getElementById('ddstyle')) {<br \/>\n    if (document.getElementById('ddstyle').innerHTML.indexOf(imdu) == -1) {<br \/>\n    document.getElementById('ddstyle').innerHTML='<sty' + 'le> #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(\/\\ \/g,'+') + '); background-repeat:no-repeat; background-size:contain; } <\/sty' + 'le>';<br \/>\n    }<br \/>\n    } else {<br \/>\n    if (document.getElementById('dstyle').innerHTML.indexOf(imdu) == -1) {<br \/>\n\/\/alert('Here');<br \/>\n    document.getElementById('dstyle').innerHTML+='<sty' + 'le> #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(\/\\ \/g,'+') + '); background-repeat:no-repeat; background-size:contain; } <\/sty' + 'le>';<br \/>\n    }<br \/>\n    }<br \/>\n    setTimeout(checkspag, 5000);<br \/>\n  } else {<br \/>\n    setTimeout(checkspag, 5000);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; using the great HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element invention, and found it could send such a pruned down postcard, though we are not ruling out future tweaks that may add back some resolution and size into the future.  We&#8217;ll see.<\/p>\n<p>And regarding <i>&#8220;we have some text positioning to fix&#8221;<\/i>, our hunch about the offset needed to fix being the (opposite of the) amount to the top of the imagery in a normal Colouring In webpage, <font color=blue>panned out<\/font> &#8230;<\/p>\n<p><code><br \/>\n var postcard=false;<br \/>\n var origmytablerect=null;<br \/>\n <br \/>\n         setTimeout(function(){<br \/>\n          <font color=blue>origmytablerect=document.getElementById('mytable').getBoundingClientRect();<\/font><br \/>\n          console.log('356:' + origmytablerect.top);<br \/>\n          var woois=window.open('', '_blank', 'top=50,left=50,width=800,height=800');<br \/>\n          if (1 == 1) {<br \/>\n          woois.document.write('&lt;html&gt;' + document.head.outerHTML.replace('postc' + 'ard=false', 'postc' + 'ard=true') + document.body.outerHTML + '&lt;\/html&gt;');<br \/>\n          \/\/origmytablerect=woois.document.getElementById('mytable').getBoundingClientRect();<br \/>\n          \/\/console.log('56:' + origmytablerect.top);<br \/>\n          <font color=blue>if (eval('' + origmytablerect.top) &gt; 0) {<br \/>\n             var wasthetop=0, thespans=woois.document.getElementsByTagName('span');<br \/>\n             for (var iispans=0; iispans&lt;thespans.length; iispans++) {<br \/>\n               if (thespans[iispans].outerHTML.indexOf('absolute;') != -1 && thespans[iispans].outerHTML.indexOf('top:') != -1) {<br \/>\n               console.log('10:' + thespans[iispans].outerHTML);<br \/>\n                 wasthetop=eval('' + thespans[iispans].outerHTML.split('top:')[1].split(';')[0].replace('px','').trim());<br \/>\n                 wasthetop-=eval('' + origmytablerect.top);<br \/>\n                 thespans[iispans].style.top='' + wasthetop + 'px';<br \/>\n               }<br \/>\n             }<br \/>\n          }<\/font><br \/>\n     woois.document.getElementById('mytable').style.position='fixed';<br \/>\n     woois.document.getElementById('mytable').style.left='0px';<br \/>\n     woois.document.getElementById('mytable').style.top='0px';<br \/>\n     woois.document.getElementById('mytable').style.zIndex='23';<br \/>\n     woois.document.getElementsByTagName('h1')[0].style.display='none';<br \/>\n     woois.document.getElementsByTagName('h3')[0].style.display='none';<br \/>\n     woois.document.getElementsByTagName('h3')[1].style.display='none';<br \/>\n     woois.document.getElementsByTagName('h4')[0].style.display='none';<br \/>\n     woois.document.getElementById('spancb').style.display='none';<br \/>\n     woois.document.getElementById('dsource').style.display='none';<br \/>\n          } else {<br \/>\n          \/\/woois.document.write('&lt;html&gt;' + document.head.outerHTML + document.body.outerHTML.replace('&lt;div id=\"ta' + 'rget\"&gt;', '&lt;div id=\"ta' + 'rget\" style=\"position:fixed;top:0px;left:0px;z-index:23;\"&gt;') + '&lt;\/html&gt;');<br \/>\n          woois.document.write('&lt;html&gt;' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing=\"0\" sty' + 'le=\"', ' cellspacing=\"0\" sty' + 'le=\"position:fixed;top:0px;left:0px;z-index:23;') + '&lt;\/html&gt;');<br \/>\n          \/\/woois.document.write('&lt;html&gt;' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing=\"0\" sty' + 'le=\"', ' cellspacing=\"0\" sty' + 'le=\"margin-top:-150px;z-index:23;') + '&lt;\/html&gt;');<br \/>\n<br \/>\n     woois.document.getElementsByTagName('h1')[0].style.display='none';<br \/>\n     woois.document.getElementsByTagName('h3')[0].style.display='none';<br \/>\n     woois.document.getElementsByTagName('h3')[1].style.display='none';<br \/>\n     woois.document.getElementsByTagName('h4')[0].style.display='none';<br \/>\n     woois.document.getElementById('spancb').style.display='none';<br \/>\n     woois.document.getElementById('dsource').style.display='none';<br \/>\n         }<br \/>\n         }, 15000);<br \/>\n<\/code> <\/p>\n<p>Only <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-------------------------------------------------GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-------------------------------------------------GETME\">experimental_drag_and_drop.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\">Experimental Drag and Drop<\/a> clientside HTML and Javascript basis was needed to help out our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\">Colouring In<\/a> web application&#8217;s Postcard production ideas.<\/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='#d63485' onclick='var dv=document.getElementById(\"d63485\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/camera\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63485' 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='#d63492' onclick='var dv=document.getElementById(\"d63492\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/styling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63492' 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='#d63496' onclick='var dv=document.getElementById(\"d63496\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63496' 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='#d63503' onclick='var dv=document.getElementById(\"d63503\"); 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='d63503' 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='#d63512' onclick='var dv=document.getElementById(\"d63512\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/alert\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63512' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We needed to considerably change yesterday&#8217;s Colouring In Drag and Drop Pseudo Element Content Tutorial &#8220;Journey Game&#8221; logic to work with mobile platforms, to do with &#8230; for &#8220;easy&#8221; Journey Game options we change size of &#8220;mytable&#8221; table and hide &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-mobile-journey-game-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,15,20,37],"tags":[2824,2516,84,2367,126,127,2471,2472,2379,161,1993,3531,174,2862,184,1580,210,4723,2503,1707,222,1604,230,2690,2081,281,3197,4732,322,327,2365,354,4721,4722,359,2237,364,4717,4385,380,385,3192,2023,386,4739,3539,2242,448,476,477,2718,482,4198,4733,2208,513,2298,3922,557,3961,2258,576,2658,578,590,4724,3554,1525,626,630,631,4563,652,673,684,4730,2169,719,739,772,4727,4738,795,4736,812,4301,2092,3357,830,4719,2394,3987,1666,4713,1705,894,3434,2255,1738,929,932,1918,3666,950,4731,967,968,2519,993,997,1986,4720,1976,2128,3285,3665,2085,1022,2141,1843,2079,1991,4734,1063,4728,4737,4729,1075,1917,1133,1137,2272,1159,1200,1209,1211,1212,1226,1238,1581,1240,1811,1254,1292,1302,1319,4351,1842,1899,1345,1350,1356,4718,4735,2257,1431,2811,4726],"class_list":["post-63512","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-ios","category-tutorials","tag-absolute","tag-alert","tag-animation-2","tag-answer","tag-background","tag-background-image","tag-background-position","tag-background-repeat","tag-background-size","tag-border","tag-browse","tag-browsing","tag-button","tag-camer","tag-canvas","tag-cell","tag-class","tag-clip-art","tag-clone","tag-co-ordinates","tag-collaborate","tag-collaboration","tag-column","tag-confirm","tag-country","tag-css","tag-dataset","tag-dblclick","tag-device","tag-did-you-know","tag-dimensions","tag-dom","tag-doodle","tag-doodling","tag-double-click","tag-drag","tag-drag-and-drop","tag-dragover","tag-drop","tag-email","tag-emoji","tag-emoji-flag","tag-encoding","tag-encryption","tag-end-tag","tag-entity","tag-flag","tag-focus","tag-game","tag-games-2","tag-genericize","tag-geography","tag-geojson","tag-geospatial","tag-getboundingclientrect","tag-google","tag-grid","tag-guess","tag-hashtag","tag-hashtagging","tag-height","tag-html","tag-html-entity","tag-html5","tag-image","tag-image-search","tag-image-url","tag-innerhtml","tag-ios","tag-ipad","tag-iphone","tag-iso-3166-2","tag-javascript","tag-keyboard","tag-latitude","tag-left-width","tag-location-hash","tag-longitude","tag-mailto","tag-mercator","tag-mercator-projection-opacity","tag-minesweeper","tag-mobile","tag-mountain","tag-mouse","tag-mouse-wheel","tag-multiple","tag-multiple-background","tag-navigation","tag-nickname","tag-number","tag-oncontextmenu","tag-ondblclick","tag-ondragover","tag-onkeydown","tag-overlay","tag-palette","tag-percentage","tag-photo","tag-photograph","tag-php","tag-pixel","tag-pixels","tag-platform","tag-polyline","tag-popup","tag-popup-window","tag-postcard","tag-processing","tag-programming","tag-proof-of-concept","tag-proportional","tag-pseudo-class","tag-pseudo-element","tag-pseudo-selector","tag-px","tag-question","tag-quiz","tag-range","tag-redo","tag-resolution","tag-responsive-design","tag-revael","tag-reveal","tag-river","tag-river-world","tag-rivers","tag-row","tag-scroll","tag-share","tag-sharing","tag-size","tag-sms","tag-stop-press","tag-style","tag-stylesheet","tag-styling","tag-svg","tag-table","tag-table-cell","tag-tag","tag-television","tag-text","tag-top","tag-transparency","tag-tutorial","tag-underlay","tag-undo","tag-units","tag-url","tag-user-experience","tag-ux","tag-value-add","tag-warerfall","tag-width","tag-wikipedia","tag-world","tag-world-map"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63512"}],"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=63512"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63512\/revisions"}],"predecessor-version":[{"id":63520,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63512\/revisions\/63520"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=63512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=63512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=63512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}