{"id":50266,"date":"2020-09-11T03:01:28","date_gmt":"2020-09-10T17:01:28","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=50266"},"modified":"2024-01-24T08:15:59","modified_gmt":"2024-01-23T22:15:59","slug":"details-summary-button-delayed-onclick-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/details-summary-button-delayed-onclick-tutorial\/","title":{"rendered":"Details Summary Button Delayed Onclick Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Details Summary Button Delayed Onclick Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_detailsbutton_delayedonclick.jpg\" title=\"Details Summary Button Delayed Onclick Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Details Summary Button Delayed Onclick Tutorial<\/p><\/div>\n<p>You might have noticed with yesterday&#8217;s <a title='Details Summary Button Onclick Primer Tutorial' href='#dsbopt'>Details Summary Button Onclick Primer Tutorial<\/a>&#8216;s &#8230;.<\/p>\n<ul>\n<li>details or summary element onclick logic that it relied on an assumption that &#8230;<\/li>\n<li>the onclick event occurs after a details element attribute &#8220;open&#8221; is finalized &#8230; and though &#8230;<\/li>\n<li>we &#8220;feel&#8221; that this might be true &#8230; yet, we would rather &#8230;<\/li>\n<li>not chance it, and make it that the onclick event occurs &#8220;delayed&#8221; after any details element attribute &#8220;open&#8221; is finalized &#8230; using &#8230;<\/li>\n<li>that ever useful <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timer function<\/li>\n<\/ul>\n<p> &#8230; but with more nuance than our usual Javascript &#8230;<\/p>\n<p><code><br \/>\n function calledBySetTimeout_nothingPassed() {<br \/>\n   console.log('called by setTimeout');<br \/>\n }<br \/>\n<br \/>\n setTimeout(calledBySetTimeout_nothingPassed, 3000);  \/\/ delayed by 3 seconds<br \/>\n<\/code><\/p>\n<p> &#8230; way of doing things, that we seem to use in every second project.  Today, with great advice from <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/3048005\/document-onclick-settimeout-function-javascript-help'>this very useful link<\/a> we jump quite a few <i>nuances<\/i> to more complexity than we had in mind for some future &#8220;infilling&#8221; blog postings, but the ideas being so cute, we want to drop you users unfamiliar with the joys of the &#8220;setTimeout&#8221; timer into some quite deeeeeeeeeeep water &#8230; with &#8230; called &#8230;<\/p>\n<p><code><br \/>\n  function makeDelayedHandler(f, time){ \/\/ Delay execution of event handler function \"f\" by \"time\" ms, thanks to https:\/\/stackoverflow.com\/questions\/3048005\/document-onclick-settimeout-function-javascript-help<br \/>\n   return function(e){<br \/>\n    var ev = e || window.event;<br \/>\n    setTimeout(function(){<br \/>\n      f(ev);<br \/>\n    }, time);<br \/>\n   };<br \/>\n  }<br \/>\n<br \/>\n  function checkds(e) {<br \/>\n   var ois = (e && e.target) || (event && event.srcElement);<br \/>\n   var dpp='';<br \/>\n   var dld='';<br \/>\n   var oga='';<br \/>\n   try {<br \/>\n    dpp=ois.getAttribute('data-preid').replace(\/^null$\/g, '').replace(\/^undefined$\/g, '');<br \/>\n    dld=ois.getAttribute('data-lastid').replace(\/^null$\/g, '').replace(\/^undefined$\/g, '');<br \/>\n   } catch(ewq) {<br \/>\n   }<br \/>\n   if (ois.parentElement && ois.outerHTML.toLowerCase().indexOf('&lt;summary') == 0) {<br \/>\n     oga=('' + ois.getAttribute('data-pardet')).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '').replace(\/^false$\/g, '');<br \/>\n     if (oga != '') {<br \/>\n     ois=document.getElementById(oga);<br \/>\n     oga=ois.open; \/\/('' + ois.getAttribute('open')).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '').replace(\/^false$\/g, '');<br \/>\n   try {<br \/>\n     if (dpp.trim() == '' && dld.trim() == '') {<br \/>\n    dpp=ois.getAttribute('data-preid').replace(\/^null$\/g, '').replace(\/^undefined$\/g, '');<br \/>\n    dld=ois.getAttribute('data-lastid').replace(\/^null$\/g, '').replace(\/^undefined$\/g, '');<br \/>\n     }<br \/>\n   } catch(ewqtwo) {<br \/>\n   }<br \/>\n     } else {<br \/>\n     oga=ois.parentElement.open; \/\/('' + ois.parentElement.getAttribute('open')).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '').replace(\/^false$\/g, '');<br \/>\n     ois=ois.parentElement;<br \/>\n     }<br \/>\n     if (dpp.trim() == '' && dld.trim() == '') {<br \/>\n      dpp=ois.getAttribute('data-preid').replace(\/^null$\/g, '').replace(\/^undefined$\/g, '');<br \/>\n      dld=ois.getAttribute('data-lastid').replace(\/^null$\/g, '').replace(\/^undefined$\/g, '');<br \/>\n     }<br \/>\n   } else {<br \/>\n     oga=ois.open; \/\/('' + ois.getAttribute('open')).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '').replace(\/^false$\/g, '');<br \/>\n   }<br \/>\n   if (oga) {<br \/>\n     location.href='#' + dpp; \/\/ois.getAttribute('data-preid');<br \/>\n     location.href='#' + dld; \/\/ois.getAttribute('data-lastid');<br \/>\n   }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; via <font color=blue>changed calling logic<\/font> as per &#8230;<\/p>\n<p><code><br \/>\n  var initiallynone=false;<br \/>\n<br \/> <br \/>\n  function lookfordsa() {<br \/>\n    <font color=blue>var lastdet1='', lastdet2='', lastdetid='';<\/font><br \/>\n    var ebefore='', fbefore='';<br \/>\n    var nodetails=true;<br \/>\n    var lasteis=null, lastid='';<br \/>\n    var indselems=document.getElementsByTagName('details');<br \/>\n    var hashtop='top';<br \/>\n    var bihis='';<br \/>\n    if (eval('' + indselems.length) &gt; 0) {<br \/>\n    var inelems=document.getElementsByTagName('*');<br \/>\n    nodetails=false;<br \/>\n    if (initiallynone) { initiallynone=false; setTimeout(lookfordsa, 3000); return;   }<br \/>\n    bihis=document.body.innerHTML;<br \/>\n<br \/> <br \/>\n    for (var iplj=0; iplj&lt;inelems.length; iplj++) {<br \/>\n      if (('' + inelems[iplj].outerHTML).toLowerCase().replace(\/^null$\/g, '').replace(\/^undefined$\/g, '').indexOf('&lt;br') == 0) {<br \/>\n        lastid=lastid;<br \/>\n      } else if (('' + inelems[iplj].outerHTML).toLowerCase().replace(\/^null$\/g, '').replace(\/^undefined$\/g, '').indexOf('&lt;summary') == 0) {<br \/>\n        nodetails=false;<br \/>\n        <font color=blue>if (lastdetid != '') {<br \/>\n          inelems[iplj].setAttribute('data-pardet', lastdetid);<br \/>\n          lastdetid='';<br \/>\n        }<\/font><br \/>\n        if (lasteis && lastid != '') {<br \/>\n          if (('' + inelems[iplj].onclick).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '') == '') {<br \/>\n            inelems[iplj].setAttribute('data-preid', '' + hashtop.replace('#',''));<br \/>\n            inelems[iplj].setAttribute('data-lastid', '' + lastid);<br \/>\n            <font color=blue>if (1 == 1) {<br \/>\n             inelems[iplj].onclick = makeDelayedHandler(checkds, 1000);<br \/>\n            } else {<\/font><br \/>\n             inelems[iplj].onclick = function(evt) { location.href='#' + evt.target.getAttribute('data-preid'); location.href='#' + evt.target.getAttribute('data-lastid'); }<br \/>\n            <font color=blue>}<\/font><br \/>\n            console.log('summary:' + lastid);<br \/>\n          }<br \/>\n        }<br \/>\n        lasteis=null;<br \/>\n        lastid='';<br \/>\n      } else if (('' + inelems[iplj].outerHTML).toLowerCase().replace(\/^null$\/g, '').replace(\/^undefined$\/g, '').indexOf('&lt;details') == 0) {<br \/>\n        nodetails=false;<br \/>\n        if (lasteis && lastid != '') {<br \/>\n          if (('' + inelems[iplj].onclick).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '') == '') {<br \/>\n            lastdet1=hashtop.replace('#','');<br \/>\n            inelems[iplj].setAttribute('data-preid', '' + hashtop.replace('#',''));<br \/>\n            lastdet2=lastid;<br \/>\n            inelems[iplj].setAttribute('data-lastid', '' + lastid);<br \/>\n            \/\/document.getElementById('myh1').innerHTML+=('details:' + lastid);<br \/>\n            <font color=blue>if (1 == 1) {<br \/>\n             inelems[iplj].onclick = makeDelayedHandler(checkds, 1000);<br \/>\n            } else {<\/font><br \/>\n             inelems[iplj].onclick = function(evt) { if (('' + evt.target.getAttribute('open')).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '').replace(\/^false$\/g, '') != '') { location.href='#' + evt.target.getAttribute('data-preid'); location.href='#' + evt.target.getAttribute('data-lastid'); } }<br \/>\n            <font color=blue>}<\/font><br \/>\n            \/\/inelems[iplj].onclick = function(evt) { location.href='#' + evt.target.getAttribute('data-preid'); location.href='#' + evt.target.getAttribute('data-lastid'); }<br \/>\n        <font color=blue>lastdetid=('' + inelems[iplj].id);<br \/>\n        lasteis=null;<br \/>\n        lastid='';<\/font><br \/>\n          }<br \/>\n        } else {<br \/>\n        if (bihis.indexOf(('' + inelems[iplj].outerHTML).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '')) != -1) {<br \/>\n          ebefore=bihis.split(('' + inelems[iplj].outerHTML).replace(\/^null$\/g, '').replace(\/^undefined$\/g, ''))[0].replace(\/\\&nbsp\\;\/g,'');<br \/>\n          if ((ebefore.trim() + '~').indexOf('&lt;\/a&gt;~') != -1) {<br \/>\n          fbefore='&lt;a ' + ebefore.split('&lt;a ')[eval(-1 + ebefore.split('&lt;a ').length)];<br \/>\n          if (fbefore.indexOf(' id=\"') != -1) {<br \/>\n          lastid=fbefore.split(' id=\"')[1].split('\"')[0];<br \/>\n          lasteis=document.getElementById(lastid);<br \/>\n          console.log(lastid);<br \/>\n          console.log(lasteis.outerHTML);<br \/>\n          console.log(lasteis.href);<br \/>\n          <font color=blue>if (('' + lasteis.href).indexOf('#') &gt;= 0) {<br \/>\n            hashtop='#' + lasteis.href.split('#')[1];<br \/>\n            \/\/alert('4:' + hashtop);<br \/>\n          }<\/font><br \/>\n          if (('' + inelems[iplj].onclick).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '') == '') {<br \/>\n            lastdet1=hashtop.replace('#','');<br \/>\n            inelems[iplj].setAttribute('data-preid', '' + hashtop.replace('#',''));<br \/>\n            lastdet2=lastid;<br \/>\n            inelems[iplj].setAttribute('data-lastid', '' + lastid);<br \/>\n            \/\/document.getElementById('myh1').innerHTML+=('details:' + lastid);<br \/>\n            <font color=blue>if (1 == 1) {<br \/>\n             inelems[iplj].onclick = makeDelayedHandler(checkds, 1000);<br \/>\n            } else {<\/font><br \/>\n             inelems[iplj].onclick = function(evt) { if (('' + evt.target.getAttribute('open')).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '').replace(\/^false$\/g, '') != '') { location.href='#' + evt.target.getAttribute('data-preid'); location.href='#' + evt.target.getAttribute('data-lastid'); } }<br \/>\n            <font color=blue>}<\/font><br \/>\n        <font color=blue>lastdetid=('' + inelems[iplj].id);<br \/>\n        lasteis=null;<br \/>\n        lastid='';<\/font><br \/>\n          }<br \/>\n          }<br \/>\n        \/\/alert('Not Here ');<br \/>\n          }<br \/>\n        }<br \/>\n        }<br \/>\n      } else {<br \/>\n        if (('' + inelems[iplj].type).toLowerCase() == 'a') {<br \/>\n          if (('' + inelems[iplj].id) != '') {<br \/>\n           if (('' + inelems[iplj].href).indexOf('#') <font color=blue>&gt;=<\/font> 0) {<br \/>\n            <font color=blue>hashtop='#' + inelems[iplj].href.split('#')[1];<\/font><br \/>\n            \/\/alert('7:' + hashtop);<br \/>\n            lasteis=inelems[iplj];<br \/>\n            lastid=inelems[iplj].id;<br \/>\n           } else {<br \/>\n            lasteis=null;<br \/>\n            lastid='';<br \/>\n           }<br \/>\n          }<br \/>\n        } else if (('' + inelems[iplj].outerHTML).replace(\/^null$\/g, '').replace(\/^undefined$\/g, '').replace(\/\\&nbsp\\;\/g, '').trim() != '') {<br \/>\n          \/\/if (lasteis) { alert('lastid=' + lastid + ' and this.outerHTML=' +  inelems[iplj].outerHTML); }<br \/>\n          lasteis=null;<br \/>\n          lastid='';<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    if (nodetails) { initiallynone=true;  setTimeout(lookfordsa, 3000);   } else if (initiallynone) { initiallynone=false; setTimeout(lookfordsa, 3000);    }<br \/>\n  }<br \/>\n<br \/>\n  setTimeout(lookfordsa, 3000);<br \/>\n<\/code> <\/p>\n<p> &#8230; involved in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/PHP\/details_hash.js--GETME\" title=\"details_hash.js\">the changed external Javascript<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/details_hash.js--GETME\" title=\"details_hash.js\">details_hash.js<\/a> that you can test with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">our inhouse chat web application<\/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\/details-summary-button-onclick-primer-tutorial\/'>Details Summary Button Delayed Onclick Tutorial<\/a>.<\/p-->\n<hr>\n<p id='dsbopt'>Previous relevant <a target=_blank title='Details Summary Button Onclick Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/details-summary-button-onclick-primer-tutorial\/'>Details Summary Button Onclick Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Details Summary Button Onclick Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_detailsbutton.jpg\" title=\"Details Summary Button Onclick Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Details Summary Button Onclick Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve written an external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/details_hash.js-GETME\" title=\"details_hash.js\">details_hash.js<\/a> that &#8230;<\/p>\n<ul>\n<li>adds button like qualities (ie. onclick logic) to  <a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a>\/summary element combinations that are &#8230;<\/li>\n<li>preceeded by an &#8220;a&#8221; tag with # hashtag navigation &#8220;href&#8221; attribute &#8230; and a &#8230;<\/p>\n<li>real &#8220;id&#8221; attribute (that, in turn, can be hashtag navigated to) &#8230; in which case &#8230;<\/li>\n<li>dynamic &#8220;onclick&#8221; logic is added (to details or summary), if none defined already, to hashtag navigate to a good view of this details\/summary content (to top of screen, but allowing for &#8220;Back to Chat&#8221; hashtag navigation, already there, as well)<\/li>\n<\/ul>\n<p> &#8230; uses logic we had yesterday&#8217;s <a title='Chat No Sockets Chrome Hear It Tutorial' href='#cnschit'>Chat No Sockets Chrome Hear It Tutorial<\/a> web architecture to work from, with testing and which you can try yourself via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php------------GETME\" title=\"php_listener.php\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php------------GETME\" title=\"php_listener.php\">php_listener.php<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a>.<\/p>\n<p>You&#8217;ll see in that changed code above, the biggest changes being the call of this external Javascript, <font color=blue>as per<\/font> (within document.head) &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n b:hover { border: 1px solid red; }<br \/>\n <font color=blue>a[href=\\\"#myh1\\\"] { font-size: 32px; }<br \/>\n summary { background-color:#f0f0f0; border: 1px solid olive; }<\/font><br \/>\n&lt;\/style&gt;<br \/>\n<font color=blue>&lt;script type='text\/javascript' src='<font size=1>HTTP:\/\/www.rjmprogramming.com.au\/PHP\/<\/font>details_hash.js?x=\" . rand(0,23456) . \"' defer&gt;&lt;\/script&gt;<\/font><br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/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\/details-summary-button-onclick-primer-tutorial\/'>Details Summary Button Onclick Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cnschit'>Previous relevant <a target=_blank title='Chat No Sockets Chrome Hear It Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chat-no-sockets-chrome-hear-it-tutorial\/'>Chat No Sockets Chrome Hear It Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Chat No Sockets Chrome Hear It Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_hearit.jpg\" title=\"Chat No Sockets Chrome Hear It Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Chat No Sockets Chrome Hear It Tutorial<\/p><\/div>\n<p>Back at the inhouse Chat web application today we combine &#8230;<\/p>\n<ul>\n<li>the progress up to <a title='Chat No Sockets Chrome Hands Free Tutorial' href='#cnschft'>Chat No Sockets Chrome Hands Free Tutorial<\/a> &#8230;<\/li>\n<li>augmented by the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/voiceover-ideas-google-translate-tutorial\/' title='Voiceover Ideas Google Translate Tutorial'>Voiceover Ideas Google Translate Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; to get helped out by the excellent <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a>&#8216;s translation and Text to Speech capabilities, to add a &#8220;hear it&#8221; layer of functionality to this Chat web application.<\/p>\n<p>As well, we establish &#8230;<\/p>\n<ul>\n<li><b>bold<\/b> text styling of the latest chat line from a chat collaborator &#8230; that has &#8230;\n<li>HTML &#8230;<br \/>\n<code><br \/>\n&lt;b onclick=\"gtit(this);\" onmouseover=\"gtit(this);\"&gt;Chat Line&lt;\/b&gt;<br \/>\n<\/code><br \/>\n &#8230; combining with &#8230;\n<\/li>\n<li>Javascript &#8230;<br \/>\n<code><br \/>\nvar gtw=null, gtwurl='';<br \/>\n<br \/>\nfunction windowopen(gtu, gtb, gtx) {<br \/>\n  if (gtu == gtwurl) {<br \/>\n    if (gtw) {<br \/>\n      if (gtw.closed) {<br \/>\n       return window.open(gtu, gtb, gtx);<br \/>\n      }<br \/>\n    } else {<br \/>\n      return window.open(gtu, gtb, gtx);<br \/>\n    }<br \/>\n  } else {<br \/>\n    gtwurl=gtu;<br \/>\n    if (gtw) {<br \/>\n      if (!gtw.closed) {<br \/>\n        gtw.close();<br \/>\n      }<br \/>\n    }<br \/>\n    return window.open(gtu, gtb, gtx);<br \/>\n  }<br \/>\n  return gtw;<br \/>\n}<br \/>\n<br \/>\nfunction gtit(ihis) {<br \/>\n   var instuff=(ihis.innerHTML.split('&lt;')[0]);<br \/>\n   gtw=windowopen('https:\/\/translate.google.com\/#view=home&op=translate&sl=' + top.document.getElementById('ootw').value.substring(0,2).replace(top.document.getElementById('ootw').value.substring(2),'auto') + '&tl=' + top.document.getElementById('ootw').value.substring(2) + '&text=' + encodeURIComponent(instuff.split('&lt;br&gt;')[0]), '_blank', 'left=100,top=100,width=500,height=500');<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/li>\n<li>for the non-Microsoft web browsers we establish our favourite <a target=_blank title='Reveal tutorials at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> stylers, the <a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a>\/summary element combination that can programmatically &#8220;scrunch up&#8221; and allow user interactive flexibility via &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function detsum(viaoid, thisoid, ems) {<br \/>\n   var eparts=ems.split('.'), ipre=0;<br \/>\n   var eprefix=\\\"&lt;p title='Animated Emoji' style='opacity: 0.4; font-size: 32px;'&gt;&#\\\" + eparts[0] + \\\";&lt;\/p&gt;\\\";<br \/>\n   eprefix=\\\"&#\\\" + eparts[0] + \\\";\\\";<br \/>\n   var esuffix='';<br \/>\n   if (navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == 'Netscape' && navigator.appVersion.indexOf('Edge') &gt; -1)) {<br \/>\n    return '';<br \/>\n   }<br \/>\n   var noif=thisoid.replace('if','');<br \/>\n   if (viaoid.indexOf(noif) != -1) {<br \/>\n     if (eparts.length &gt; 1) {<br \/>\n       eprefix=\\\"&lt;span title='Animated Emoji' style='opacity: 0.4; font-size: 32px;'&gt;&#\\\" + eparts[0] + \\\";&lt;\/span&gt;\\\";<br \/>\n       for (ipre=1; ipre&lt;eparts.length; ipre++) {<br \/>\n        esuffix+=\\\"&lt;span title='Animated Emoji' style='opacity: 0.4; font-size: 32px;'&gt;&#\\\" + eparts[ipre] + \\\";&lt;\/span&gt;\\\";<br \/>\n       }<br \/>\n     }<br \/>\n     eprefix=eprefix.replace('&lt;\/p&gt;','&lt;\/span&gt;').replace('&lt;p','&lt;span');<br \/>\n     return '&nbsp;&nbsp;&lt;details id=det' + noif + ' style=display:inline-block;width:95%; open&gt;&lt;summary style=display:inline;font-size:32px;&gt;' + eprefix + esuffix + '&lt;\/summary&gt;';<br \/>\n   } else {<br \/>\n     if (eparts.length &gt; 1) {<br \/>\n       eprefix=\\\"&lt;span title='Animated Emoji' style='opacity: 0.4; font-size: 32px;'&gt;&#\\\" + eparts[0] + \\\";&lt;\/span&gt;\\\";<br \/>\n       for (ipre=1; ipre&lt;eparts.length; ipre++) {<br \/>\n        esuffix+=\\\"&lt;span title='Animated Emoji' style='opacity: 0.4; font-size: 32px;'&gt;&#\\\" + eparts[ipre] + \\\";&lt;\/span&gt;\\\";<br \/>\n       }<br \/>\n     }<br \/>\n     eprefix=eprefix.replace('&lt;\/p&gt;','&lt;\/span&gt;').replace('&lt;p','&lt;span');<br \/>\n     return '&nbsp;&nbsp;&lt;details id=det' + noif + ' style=display:inline-block;width:95%;&gt;&lt;summary style=display:inline;font-size:32px;&gt;' + eprefix + esuffix + '&lt;\/summary&gt;';<br \/>\n   }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function sumdet(viaoid, thisoid) {<br \/>\n   if (navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == 'Netscape' && navigator.appVersion.indexOf('Edge') &gt; -1)) {<br \/>\n    return '';<br \/>\n   }<br \/>\n   return '&lt;\/details&gt;';<br \/>\n  }<br \/>\n<br \/>\n  function ddivfbit(ioi) {<br \/>\n    var detlist=document.getElementsByTagName('details'), idetlist=1;<br \/>\n    if (document.getElementById('dfeedback').innerHTML == '') {<br \/>\n      document.getElementById('dfeedback').innerHTML=\\\"&lt;a id=ifdict href=#myh1 style=vertical-align:top; title=Top&gt;^&lt;\/a&gt;\\\" + detsum(ioi.id,'ifdict','128483') + \\\"&lt;br&gt;&lt;iframe id=idict style='width:100%;height:800px;' src='https:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php?topchat=\" . $enduring . \"'&gt;&lt;\/iframe&gt;\\\" + sumdet(ioi.id,'ifdict') + \\\"&lt;br&gt;&lt;a id=ifimg href=#myh1 style=vertical-align:top; title=Top&gt;^&lt;\/a&gt;\\\" + detsum(ioi.id,'ifimg','128444.127912') + \\\"&lt;br&gt;&lt;iframe id=iimg style='width:100%;height:800px;' src='..\/HTMLCSS\/feedback.htm?sid=\" . $enduring . \"'&gt;&lt;\/iframe&gt;\\\" + sumdet(ioi.id,'ifimg') + \\\"&lt;br&gt;&lt;a id=ifav href=#myh1 style=vertical-align:top; title=Top&gt;^&lt;\/a&gt;\\\" + detsum(ioi.id,'ifav','128452.128250') + \\\"&lt;br&gt;&lt;iframe id=iav style='width:100%;height:800px;' src='..\/macos_say_record.php?topchat=\" . $enduring . \"'&gt;&lt;\/iframe&gt;\\\" + sumdet(ioi.id,'ifav') + \\\"\\\";<br \/>\n    } else if (ioi.id.indexOf('dict') != -1 && document.getElementById('idict').src.indexOf('topchat=') == -1) {<br \/>\n      if (document.getElementById('detdict')) { document.getElementById('detdict').setAttribute('open',true); for (idetlist=1; idetlist&lt;detlist.length; idetlist++) { detlist[idetlist].removeAttribute('open');  }   }<br \/>\n      document.getElementById('idict').src=document.getElementById('idict').src.split('?')[0].split('#')[0] + '?topchat=\" . $enduring . \"';<br \/>\n    } else if (detlist.length &gt; 0) {<br \/>\n      for (idetlist=0; idetlist&lt;detlist.length; idetlist++) {<br \/>\n       if (detlist[idetlist].id.indexOf(ioi.id.replace('if','').replace('aa','')) != -1) {<br \/>\n        detlist[idetlist].setAttribute('open',true);<br \/>\n       } else {<br \/>\n        detlist[idetlist].removeAttribute('open');<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function divfbit(ioi) {<br \/>\n    var detlist=document.getElementsByTagName('details'), idetlist=1;<br \/>\n    if (document.getElementById('dfeedback').innerHTML == '') {<br \/>\n      document.getElementById('dfeedback').innerHTML=\\\"&lt;a id=ifdict href=#myh1 style=vertical-align:top; title=Top&gt;^&lt;\/a&gt;\\\" + detsum(ioi.id,'ifdict','128483') + \\\"&lt;br&gt;&lt;iframe id=idict style='width:100%;height:800px;' src='https:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php'&gt;&lt;\/iframe&gt;\\\" + sumdet(ioi.id,'ifdict') + \\\"&lt;br&gt;&lt;a id=ifimg href=#myh1 style=vertical-align:top; title=Top&gt;^&lt;\/a&gt;\\\" + detsum(ioi.id,'ifimg','128444.127912') + \\\"&lt;br&gt;&lt;iframe id=iimg style='width:100%;height:800px;' src='..\/HTMLCSS\/feedback.htm?sid=\" . $enduring . \"'&gt;&lt;\/iframe&gt;\\\" + sumdet(ioi.id,'ifimg') + \\\"&lt;br&gt;&lt;a id=ifav href=#myh1 style=vertical-align:top; title=Top&gt;^&lt;\/a&gt;\\\" + detsum(ioi.id,'ifav','128452.128250') + \\\"&lt;br&gt;&lt;iframe id=iav style='width:100%;height:800px;' src='..\/macos_say_record.php?topchat=\" . $enduring . \"'&gt;&lt;\/iframe&gt;\\\" + sumdet(ioi.id,'ifav') + \\\"\\\";<br \/>\n    } else if (ioi.id.indexOf('dict') != -1 && document.getElementById('idict').src.indexOf('topchat=') != -1) {<br \/>\n      if (document.getElementById('detdict')) { document.getElementById('detdict').setAttribute('open',true); for (idetlist=1; idetlist&lt;detlist.length; idetlist++) { detlist[idetlist].removeAttribute('open');  }   }<br \/>\n      document.getElementById('idict').src=document.getElementById('idict').src.split('?')[0].split('#')[0];<br \/>\n    } else if (detlist.length &gt; 0) {<br \/>\n      for (idetlist=0; idetlist&lt;detlist.length; idetlist++) {<br \/>\n       if (detlist[idetlist].id.indexOf(ioi.id.replace('if','').replace('aa','')) != -1) {<br \/>\n        detlist[idetlist].setAttribute('open',true);<br \/>\n       } else {<br \/>\n        detlist[idetlist].removeAttribute('open');<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<\/ul>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php-----------GETME\" title=\"php_listener.php\">Today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php-----------GETME\" title=\"php_listener.php\">php_listener.php<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a> is worth your while (re)trying, we reckon.<\/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\/chat-no-sockets-chrome-hear-it-tutorial\/'>Chat No Sockets Chrome Hear It Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cnschft'>Previous relevant <a target=_blank title='Chat No Sockets Chrome Hands Free Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chat-no-sockets-chrome-hands-free-tutorial\/'>Chat No Sockets Chrome Hands Free Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Chat No Sockets Chrome Hands Free Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_handsfree.jpg\" title=\"Chat No Sockets Chrome Hands Free Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Chat No Sockets Chrome Hands Free Tutorial<\/p><\/div>\n<p>Continuing on with yesterday&#8217;s <a title='Chat No Sockets Dictation Tutorial' href='#cnsdt'>Chat No Sockets Dictation Tutorial<\/a> start to our &#8230;<\/p>\n<blockquote><p>\nGoogle Chrome &#8220;Hands Free&#8221; Chat dream\n<\/p><\/blockquote>\n<p> &#8230; we&#8217;ve progressed a little via &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> recall of last email or SMS into respective textbox &#8220;placeholder&#8221; attributes (ie. not all the way to &#8220;value&#8221; attribute yet) &#8230; ready for &#8230;<\/li>\n<li>new &#8220;email&#8221; or &#8220;sms&#8221; Dictation word logic to try to focus to respective (Email &#8220;iemail&#8221; or SMS &#8220;isms&#8221;) textbox &#8230; triggering ..,.<\/li>\n<li>respective (Email &#8220;iemail&#8221; or SMS &#8220;isms&#8221;) textbox &#8220;placeholder&#8221; attribute sets &#8220;value&#8221; attribute to that localStorage derived setting &#8230;<\/li>\n<li>dictated &#8220;email invite&#8221; will send an email invitation via PHP mail rather than the extra interactions of using an &#8220;a&#8221; &#8220;mailto:&#8221; email client application link (as you can see with today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/chat_handsfree.jpg\">tutorial picture<\/a>)<\/li>\n<\/ul>\n<p>Of course there&#8217;s more &#8220;hands free&#8221; (logic) to go, but consider &#8220;Hey Siri&#8221; or other ways to get to the webpage&#8217;s web application, and the dream is gradually becoming a reality.<\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php--------GETME\" title=\"php_listener.php\">Today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php--------GETME\" title=\"php_listener.php\">php_listener.php<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a> now also interfaces to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php-------------------GETME\" title=\"speech_supervisor.php\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php-------------------GETME\" title=\"speech_supervisor.php\">speech_supervisor.php<\/a> PHP code for &#8220;Dictation&#8221; functionalities.<\/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\/chat-no-sockets-chrome-hands-free-tutorial\/'>Chat No Sockets Chrome Hands Free Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cnsdt'>Previous relevant <a target=_blank title='Chat No Sockets Dictation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chat-no-sockets-dictation-tutorial\/'>Chat No Sockets Dictation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Chat No Sockets Dictation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_dictation.jpg\" title=\"Chat No Sockets Dictation Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Chat No Sockets Dictation Tutorial<\/p><\/div>\n<p>We&#8217;ve got a couple of concepts onto yesterday&#8217;s <a title='Chat No Sockets Media Tutorial' href='#cnsmt'>Chat No Sockets Media Tutorial<\/a> progress, those being &#8230;<\/p>\n<ul>\n<li>allow, at least for Google Chrome web browsing, &#8220;Dictation&#8221; Speech to Text functionality thanks to <a target=_blank title='Google Speech to Text' href='https:\/\/www.google.com\/intl\/en\/chrome\/demos\/speech.html'>Google Speech to Text<\/a> functionality we last would have referenced with <a target=_blank title='Looks Nice Nearby Speech to Text Game Video Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/looks-nice-nearby-speech-to-text-game-share-tutorial\/'>Looks Nice Nearby Speech to Text Game Video Tutorial<\/a> &#8230; and associated with an overall aim for &#8220;hands free&#8221; (as well) &#8230;<\/li>\n<li>on some browsers we&#8217;ve succeeded playing a B<strike>ee<\/strike>oop sound when your Chat collaborator &#8220;chat line&#8221; has arrived, and we&#8217;d like to thank <a target=_blank title='Beep advice, thanks' href='https:\/\/odino.org\/emit-a-beeping-sound-with-javascript\/'>this excellent link<\/a> for the methodology used &#8230; Javascript &#8230;<br \/>\n<code><br \/>\nvar a=null;<br \/>\nif (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\na=new AudioContext(); \/\/ browsers limit the number of concurrent audio contexts, so you better re-use'em<br \/>\n}<br \/>\n<br \/>\nfunction beep(vol, freq, duration) {  \/\/ thanks to https:\/\/odino.org\/emit-a-beeping-sound-with-javascript\/<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  navigator.vibrate(200);<br \/>\n  } else if (a) {<br \/>\n  v=a.createOscillator();<br \/>\n  u=a.createGain();<br \/>\n  v.connect(u);<br \/>\n  v.frequency.value=freq;<br \/>\n  v.type=\"square\";<br \/>\n  u.connect(a.destination);<br \/>\n  u.gain.value=vol*0.01;<br \/>\n  v.start(a.currentTime);<br \/>\n  v.stop(a.currentTime+duration*0.001);<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\n  function mosay(instuff) {<br \/>\n    document.getElementById('bboop').click(); \/\/beep(999, 220, 300);<br \/>\n    return instuff;<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; to work with HTML &#8230;<br \/>\n<code><br \/>\n&lt;button style='display:none;' id=bboop onclick='beep(999, 220, 300);'&gt;Boop&lt;\/button&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php-------GETME\" title=\"php_listener.php\">Today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php-------GETME\" title=\"php_listener.php\">php_listener.php<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a> now also interfaces to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php------------------GETME\" title=\"speech_supervisor.php\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php------------------GETME\" title=\"speech_supervisor.php\">speech_supervisor.php<\/a> PHP code for &#8220;Dictation&#8221; functionalities.<\/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\/chat-no-sockets-dictation-tutorial\/'>Chat No Sockets Dictation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cnsmt'>Previous relevant <a target=_blank title='Chat No Sockets Media Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chat-no-sockets-media-tutorial\/'>Chat No Sockets Media Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Chat No Sockets Media Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_media.jpg\" title=\"Chat No Sockets Media Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Chat No Sockets Media Tutorial<\/p><\/div>\n<p>Adding to yesterday&#8217;s <a title='Chat No Sockets Imagery Tutorial' href='#cnsit'>Chat No Sockets Imagery Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>image functionality &#8230; there&#8217;s more to &#8220;media&#8221; in the online wooooorrrrrlllllldddd than just images, and so today &#8230; we add the possibility for &#8230;<\/li>\n<li>audio<\/li>\n<li>video<\/li>\n<\/ul>\n<p> &#8230; sharing capabilities with our inhouse Chat web application.  We need to turn to a &#8220;helper&#8221; that uses the HTML5 <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>File API<\/a>, and the recent one we almost immediately thought of <font size=1>(after some small room ruminations)<\/font> that recent <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/macos_say_record.php\" title=\"macos_say_record.php\">&#8220;Voiceover&#8221;<\/a> ideas web application (which became a helper, in turn, to the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/haiku_animated_gif.html\"title=\"Haiku creator\">&#8220;Haiku&#8221;<\/a> creator web application <font size=1>(connected <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=cLi55MV04a8'>to the knee bone<\/a>)<\/font>).<\/p>\n<p>An awkward single &#8220;a&#8221; link seemed a bit forlorn in view of these Chat data functionality extensions, and so we constructed two Animated Emoji Button &#8220;a&#8221;\/&#8221;span&#8221; sets utilizing the Javascript &#8220;throbbingspans()&#8221; function as per &#8230;<\/p>\n<p><code><br \/>\n var tgsps=[], tgspsop=[], newres='', preurl='', tgspsopwhat=[];<br \/>\n \/\/ Eg. of html &lt;a style='text-decoration:underline;cursor:pointer;' onclick=\\\"divfbit(); location.href='#ifimg'; \\\" title='Image Canvas'&gt;&lt;span title='Animated Emoji' style='opacity: 0.4; font-size: 32px;'&gt;&amp;#128444;&lt;\/span&gt;&lt;span style='margin-left: -32px; opacity: 0.4; font-size: 32px;'&gt;&amp;#127912;&lt;\/span&gt;&lt;\/a&gt;<br \/>\n<br \/>\n function throbbingspans() {<br \/>\n   var isps, jsps;<br \/>\n   if (tgsps.length == 0) {<br \/>\n     var sps=document.getElementsByTagName('span');<br \/>\n     for (isps=0; isps&lt;sps.length; isps++) {<br \/>\n        if (('' + sps[isps].style.opacity) != '') {<br \/>\n          if (eval('' + sps[isps].style.opacity) &lt; 1.0) {<br \/>\n            tgsps.push(sps[isps]);<br \/>\n            tgspsop.push(eval('' + sps[isps].style.opacity));<br \/>\n            tgspsopwhat.push(eval('0.10'));<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n   }<br \/>\n   if (tgsps.length != 0) {<br \/>\n     for (jsps=0; jsps&lt;tgsps.length; jsps+=2) {<br \/>\n       if (tgspsop[jsps] &gt; 0.12 && tgspsop[jsps] &lt; 0.88 && tgspsop[1 + jsps] &gt; 0.12 && tgspsop[1 + jsps] &lt; 0.88) { \/\/ && tgspsop[jsps] &gt;= tgspsop[1 + jsps]) {<br \/>\n         tgspsop[jsps]+=tgspsopwhat[jsps];<br \/>\n         tgspsop[1 + jsps]-=tgspsopwhat[1 + jsps];<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n       } else if (tgspsop[jsps] &gt; 0.12 && tgspsop[jsps] &lt; 0.88 && tgspsop[1 + jsps] &gt; 0.12 && tgspsop[1 + jsps] &lt; 0.88) { \/\/ && tgspsop[jsps] &lt;= tgspsop[1 + jsps]) {<br \/>\n         tgspsop[jsps]-=tgspsopwhat[jsps];<br \/>\n         tgspsop[1 + jsps]+=tgspsopwhat[1 + jsps];<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n       } else if (tgspsop[jsps] &gt; 0.88) {<br \/>\n         tgspsop[jsps]-=0.1;<br \/>\n         tgspsop[1 + jsps]+=0.1;<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n         tgspsopwhat[jsps]=-tgspsopwhat[jsps];<br \/>\n         tgspsopwhat[1 + jsps]=-tgspsopwhat[1 + jsps];<br \/>\n       } else if (tgspsop[1 + jsps] &gt; 0.88) {<br \/>\n         tgspsop[jsps]+=0.1;<br \/>\n         tgspsop[1 + jsps]-=0.1;<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n         tgspsopwhat[jsps]=-tgspsopwhat[jsps];<br \/>\n         tgspsopwhat[1 + jsps]=-tgspsopwhat[1 + jsps];<br \/>\n       } else if (tgspsop[1 + jsps] &lt; 0.12) {<br \/>\n         tgspsop[jsps]-=0.1;<br \/>\n         tgspsop[1 + jsps]+=0.1;<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n         tgspsopwhat[jsps]=-tgspsopwhat[jsps];<br \/>\n         tgspsopwhat[1 + jsps]=-tgspsopwhat[1 + jsps];<br \/>\n       } else if (tgspsop[jsps] &lt; 0.12) {<br \/>\n         tgspsop[jsps]+=0.1;<br \/>\n         tgspsop[1 + jsps]-=0.1;<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n         tgspsopwhat[jsps]=-tgspsopwhat[jsps];<br \/>\n         tgspsopwhat[1 + jsps]=-tgspsopwhat[1 + jsps];<br \/>\n      }<br \/>\n     }<br \/>\n     setTimeout(throbbingspans, 900);<br \/>\n   }<br \/>\n }<br \/>\n<\/code> <\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php----GETME\" title=\"php_listener.php\">Today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php----GETME\" title=\"php_listener.php\">php_listener.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a> now also interfaces to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/macos_say_record.php---------------GETME\" title=\"macos_say_record.php\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/macos_say_record.php---------------GETME\" title=\"macos_say_record.php\">macos_say_record.php<\/a> PHP code for &#8220;Voiceover&#8221; audio and video creation functionalities.<\/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\/chat-no-sockets-imagery-tutorial\/'>New Chat No Sockets Media Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cnsit'>Previous relevant <a target=_blank title='Chat No Sockets Imagery Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chat-no-sockets-imagery-tutorial\/'>Chat No Sockets Imagery Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Chat No Sockets Imagery Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_imagery.jpg\" title=\"Chat No Sockets Imagery Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Chat No Sockets Imagery Tutorial<\/p><\/div>\n<p>SMS moved on many years ago from a text based content system onto one that these days allows media sharing, as well, so we should allow for this too, adding onto the functionality of yesterday&#8217;s <a title='Chat No Sockets SMS Invitation Tutorial' href='#cnssmsit'>Chat No Sockets SMS Invitation Tutorial<\/a>.<\/p>\n<p>We wanted to do this by interfacing to an inhouse web application that allows for <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> graphical data creation, and then onto the Chat invitee as imagery (via the [canvas].<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a> method).  For this we decided to interface to the inhouse <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Feedback\">&#8220;Feedback&#8221;<\/a> web application.<\/p>\n<p>At regular intervals we call the &#8220;Feedback&#8221; web application, flagging it to regularly check for changed canvas data conditions, in which case our parent &#8220;Chat&#8221; web application table cell like &#8230;<\/p>\n<p><code><br \/>\n&lt;td id=thi style='background-size:contain;background-repeat:no-repeat;background-color:white;'&gt;&lt;\/td&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; is given a background image (later passed onto your Chat collaborator) via Javascript DOM (that is the onload event logic of a child iframe to the parent Chat (PHP) web application) <font color=blue>such as<\/font> &#8230;<\/p>\n<p><code><br \/>\n  function zcheckitagain(iois) {<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n     if (aconto.body != null) {<br \/>\n       if (aconto.body.innerHTML != '') {<br \/>\n       if (aconto.body.innerHTML.indexOf('\"da' + 'ta:') != -1) {<br \/>\n       parent.otherimgdatauri='data:' + aconto.body.innerHTML.split('\"da' + 'ta:')[1].split('\"')[0];<br \/>\n       <font color=blue>parent.document.getElementById('thi').style.backgroundImage='URL(' + parent.otherimgdatauri + ')';<\/font><br \/>\n       } else if (aconto.body.innerHTML.indexOf(\"'da\" + 'ta:') != -1) {<br \/>\n       parent.otherimgdatauri='data:' + aconto.body.innerHTML.split(\"'da\" + 'ta:')[1].split(\"'\")[0];<br \/>\n       parent.document.getElementById('thi').style.backgroundImage='URL(' + parent.otherimgdatauri + ')';<br \/>\n       }<br \/>\n       }<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php---GETME\" title=\"php_listener.php\">The changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php---GETME\" title=\"php_listener.php\">php_listener.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a> &#8220;fourth draft&#8221; interfacing to the canvas functionality of the &#8220;Feedback&#8221; web application, and helped out by <a target=_blank title='world.js' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js-----------------------------------GETME' title='world.js'>the changed external Javascript<\/a> <a target=_blank title='world.js' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js-----------------------------------GETME' title='world.js'>world.js<\/a> 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\/chat-no-sockets-sms-invitation-tutorial\/'>New Chat No Sockets Imagery Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cnssmsit'>Previous relevant <a target=_blank title='Chat No Sockets SMS Invitation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chat-no-sockets-sms-invitation-tutorial\/'>Chat No Sockets SMS Invitation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Chat No Sockets SMS Invitation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_sms_invitation.jpg\" title=\"Chat No Sockets SMS Invitation Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Chat No Sockets SMS Invitation Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Chat No Sockets Session Tutorial' href='#cnsst'>Chat No Sockets Session Tutorial<\/a> gives us an opportunity to become more &#8220;granular&#8221; with our examination of nuances to &#8230;<\/p>\n<ul>\n<li>the web application&#8217;s &#8220;surfing the web&#8221; look and aesthetics (first look) and usage practicalities (involving button disabling\/enabling at appropriate places in the PHP code (writing Javascript logic)) &#8230; and &#8230; a bit gobsmacking to us &#8230;<\/li>\n<li>the need to place a two step logic &#8220;tidy up&#8221; of obsolete files when dealing with SMS Invitations (to Chat)<\/li>\n<\/ul>\n<p> &#8230; the latter being that we discovered that &#8230;<\/p>\n<ul>\n<li>between the point an inviter opens their SMS Messaging app with a populated message that is the URL our Chat web application wants the inviter to send &#8230; and &#8230;<\/li>\n<li>that inviter typing the carriage return character that &#8220;renders&#8221; that SMS that is sent to the invitee &#8230; but &#8230;<\/li>\n<li>before the invitee even sees the SMS<\/li>\n<\/ul>\n<p> &#8230; that URL &#8220;render&#8221; causes an (unexpected to us) real visit of our web server code, and we need to just let the &#8220;look of&#8221; the &#8220;resultant SMS webpage&#8221; through at this point, but leave &#8220;the implications&#8221; for the next time this &#8220;SMS webpage&#8221; is asked for when the invitee clicks\/taps the SMS link they receive from the inviter.  The timing of all this is controlled in the logic by the existence of a (what used to be exclusively) &#8220;chat_*.line&#8221; file, <font color=blue>but we now need (to allow for &#8220;chat_*.lin2&#8221; then &#8220;chat_*.line&#8221;)<\/font> as per &#8230;<\/p>\n<table style='width:100%;font-size:8px;'>\n<tr>\n<th>On clicking the &#8220;Invite&#8221; button, having filled out the &#8220;SMS number&#8221; field (rather than the Email one)<\/th>\n<\/tr>\n<tr>\n<td>\n  function butlogic() {<br \/>\n    if (document.getElementById(&#8216;isms&#8217;).value.trim() != &#8221;) {<br \/>\n     document.getElementById(&#8216;jchild&#8217;).src=document.URL.split(&#8216;#&#8217;)[0].split(&#8216;?&#8217;)[0] + &#8216;?sid=&#8221; . $enduring . &#8220;&#038;address=&#8217; + encodeURIComponent(document.getElementById(&#8216;isms&#8217;).value<font color=blue> + &#8216;#&#8217;<\/font>) + &#8216;&#038;ipaddress=&#8217; + encodeURIComponent(&#8216;&#8221; . $sra . &#8220;&#8216;) + &#8216;&#038;ichat=&#8217; + encodeURIComponent(document.getElementById(&#8216;ichat&#8217;).value);<br \/>\n     var wasasms=document.getElementById(&#8216;asms&#8217;).href;<br \/>\n     if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     document.getElementById(&#8216;asms&#8217;).href=(document.getElementById(&#8216;asms&#8217;).href.replace(&#8216;:&#038;&#8217;,&#8217;:&#8217; + document.getElementById(&#8216;isms&#8217;).value + &#8216;&#038;&#8217;) + encodeURIComponent(document.URL.split(&#8216;#&#8217;)[0].split(&#8216;?&#8217;)[0]) + encodeURIComponent(&#8216;?address=&#8217; + dummyencodeURIComponent(encodeURIComponent(document.getElementById(&#8216;isms&#8217;).value))<font color=blue> + &#8216;#&#8217;<\/font>));<br \/>\n     } else {<br \/>\n     document.getElementById(&#8216;asms&#8217;).href=(document.getElementById(&#8216;asms&#8217;).href.replace(&#8216;:&#038;&#8217;,&#8217;:&#8217; + document.getElementById(&#8216;isms&#8217;).value + &#8216;&#038;&#8217;) + encodeURIComponent(document.URL.split(&#8216;#&#8217;)[0].split(&#8216;?&#8217;)[0]) + encodeURIComponent(&#8216;?address=&#8217; + encodeURIComponent(encodeURIComponent(document.getElementById(&#8216;isms&#8217;).value))<font color=blue> + &#8216;#&#8217;<\/font>));<br \/>\n     }<br \/>\n     document.getElementById(&#8216;asms&#8217;).click();<br \/>\n     document.getElementById(&#8216;asms&#8217;).href=wasasms;<br \/>\n    } else if (document.getElementById(&#8216;iemail&#8217;).value.indexOf(&#8216;@&#8217;) != -1) {<br \/>\n     document.getElementById(&#8216;jchild&#8217;).src=document.URL.split(&#8216;#&#8217;)[0].split(&#8216;?&#8217;)[0] + &#8216;?sid=&#8221; . $enduring . &#8220;&#038;address=&#8217; + encodeURIComponent(document.getElementById(&#8216;iemail&#8217;).value) + &#8216;&#038;ipaddress=&#8217; + encodeURIComponent(&#8216;&#8221; . $sra . &#8220;&#8216;) + &#8216;&#038;ichat=&#8217; + encodeURIComponent(document.getElementById(&#8216;ichat&#8217;).value);<br \/>\n     document.getElementById(&#8216;aemail&#8217;).href=(document.getElementById(&#8216;aemail&#8217;).href.replace(&#8216;:?&#8217;,&#8217;:&#8217; + document.getElementById(&#8216;iemail&#8217;).value + &#8216;?&#8217;) + encodeURIComponent(document.URL.split(&#8216;#&#8217;)[0].split(&#8216;?&#8217;)[0]) + encodeURIComponent(&#8216;?address=&#8217; + encodeURIComponent(document.getElementById(&#8216;iemail&#8217;).value)));<br \/>\n     document.getElementById(&#8216;aemail&#8217;).click();<br \/>\n     document.getElementById(&#8216;aemail&#8217;).href=wasaemail;<br \/>\n    }<br \/>\n  }\n<\/td>\n<\/tr>\n<tr>\n<th>Where the child iframe call above lobs onto in order to create an interim file<\/th>\n<\/tr>\n<tr>\n<td>\n} else if (isset($_GET[&#8216;address&#8217;]) &#038;&#038; isset($_GET[&#8216;ipaddress&#8217;])) {<br \/>\n   <font color=blue>if (strpos(str_replace(&#8220;@&#8221;,&#8221;&#8221;,str_replace(&#8220;+&#8221;,&#8221; &#8220;,urldecode($_GET[&#8216;address&#8217;]))), &#8220;#&#8221;) !== false) {<br \/>\n   file_put_contents(&#8220;chat_&#8221; . explode(&#8220;#&#8221;, str_replace(&#8220;@&#8221;,&#8221;&#8221;,str_replace(&#8220;+&#8221;,&#8221; &#8220;,urldecode($_GET[&#8216;address&#8217;]))))[0] . &#8220;__&#8221; . str_replace(&#8220;+&#8221;,&#8221; &#8220;,urldecode($_GET[&#8216;ipaddress&#8217;])) . &#8220;.RLS&#8221;, str_replace(&#8220;+&#8221;,&#8221; &#8220;,urldecode($_GET[&#8216;ichat&#8217;])));<br \/>\n   } else {<\/font><br \/>\n   file_put_contents(&#8220;chat_&#8221; . <font color=blue>explode(&#8220;#&#8221;, <\/font>str_replace(&#8220;@&#8221;,&#8221;&#8221;,str_replace(&#8220;+&#8221;,&#8221; &#8220;,urldecode($_GET[&#8216;address&#8217;])))<font color=blue>)[0]<\/font> . &#8220;__&#8221; . str_replace(&#8220;+&#8221;,&#8221; &#8220;,urldecode($_GET[&#8216;ipaddress&#8217;])) . &#8220;.rls&#8221;, str_replace(&#8220;+&#8221;,&#8221; &#8220;,urldecode($_GET[&#8216;ichat&#8217;])));<br \/>\n   <font color=blue>}<\/font><br \/>\n   exit;\n<\/td>\n<\/tr>\n<tr>\n<th>Where the &#8220;command line&#8221; usage part does its bit to appropriately rename those interim files<\/th>\n<\/tr>\n<tr>\n<td>\nif ($argv) {  \/\/ command line &#8230;<br \/>\n    $cfindings=&#8221;&#8221;;<br \/>\n    $goes=0;<br \/>\n    $howmanygoes=&#8221;-1&#8243;;<br \/>\n    $par=getenv(&#8220;TERM&#8221;); \/\/ thanks to https:\/\/stackoverflow.com\/questions\/3214935\/can-a-bash-script-tell-if-its-being-run-via-cron<br \/>\n    if (&#8220;$par&#8221; == &#8220;&#8221; || &#8220;$par&#8221; == &#8220;dummy&#8221;) {  \/\/ via cron<br \/>\n      $cfindings1=exec(&#8220;crontab -l | grep &#8216;php_listener&#8217; | grep -v &#8216;grep&#8217; | cut -d &#8216; &#8216; -f 1&#8221;);<br \/>\n      $cfindings2=exec(&#8220;crontab -l | grep &#8216;php_listener&#8217; | grep -v &#8216;grep&#8217; | cut -d &#8216; &#8216; -f 2&#8221;);<br \/>\n      $cfindings3=exec(&#8220;crontab -l | grep &#8216;php_listener&#8217; | grep -v &#8216;grep&#8217; | cut -d &#8216; &#8216; -f 3&#8221;);<br \/>\n      $cfindings4=exec(&#8220;crontab -l | grep &#8216;php_listener&#8217; | grep -v &#8216;grep&#8217; | cut -d &#8216; &#8216; -f 4&#8221;);<br \/>\n      $cfindings5=exec(&#8220;crontab -l | grep &#8216;php_listener&#8217; | grep -v &#8216;grep&#8217; | cut -d &#8216; &#8216; -f 5&#8221;);<br \/>\n      if (strpos($cfindings1, &#8220;*\/&#8221;) !== false) {<br \/>\n        $howmanygoes=12 * explode(&#8220;*\/&#8221;, $cfindings1)[1];<br \/>\n      } else if (strpos($cfindings2, &#8220;*\/&#8221;) !== false) {<br \/>\n        $howmanygoes=720 * explode(&#8220;*\/&#8221;, $cfindings2)[1];<br \/>\n      } else if (strpos($cfindings3, &#8220;*\/&#8221;) !== false) {<br \/>\n        $howmanygoes=17280 * explode(&#8220;*\/&#8221;, $cfindings3)[1];<br \/>\n      }<br \/>\n    }<br \/>\n    while (1) {<br \/>\n    foreach (glob(dirname(__FILE__) . &#8220;\/chat_*.rls&#8221;) as $ourfilename) {<br \/>\n      rename($ourfilename, explode(&#8220;.rls&#8221;, $ourfilename)[0] . &#8220;.line&#8221;);<br \/>\n    }<br \/>\n    <font color=blue>foreach (glob(dirname(__FILE__) . &#8220;\/chat_*.RLS&#8221;) as $ourfilename) {<br \/>\n      rename($ourfilename, explode(&#8220;.RLS&#8221;, $ourfilename)[0] . &#8220;.lin2&#8221;);<br \/>\n    }<\/font><br \/>\n    if ($howmanygoes &gt;= 0) { $goes++; if ($goes &gt;= $howmanygoes) {  exit; } }<br \/>\n    sleep(5);<br \/>\n    }<br \/>\n    exit;<br \/>\n}\n<\/td>\n<\/tr>\n<tr>\n<th>Where the &#8220;command line&#8221; usage part&#8217;s renamed file is found by the web application and the two step deletion is needed<\/th>\n<\/tr>\n<tr>\n<td>\n  } else {  \/\/ here from email or SMS link<br \/>\n    $sra=&#8221;&#8221;;<br \/>\n    $cont=&#8221;&#8221;;<br \/>\n    foreach (glob(&#8220;chat_&#8221; . str_replace(&#8220;@&#8221;,&#8221;&#8221;,str_replace(&#8220;+&#8221;,&#8221; &#8220;,urldecode($_GET[&#8216;address&#8217;]))) . &#8220;__*.lin<font color=blue>*<\/font>&#8220;) as $ourfilename) {<br \/>\n      $sra=explode(&#8220;.&#8221;,explode(&#8220;chat_&#8221; . str_replace(&#8220;@&#8221;,&#8221;&#8221;,str_replace(&#8220;+&#8221;,&#8221; &#8220;,urldecode($_GET[&#8216;address&#8217;]))) . &#8220;__&#8221;, $ourfilename)[1])[0];<br \/>\n      $scont=file_get_contents($ourfilename);<br \/>\n      $cont=$scont . &#8220;&lt;br&gt;&#8221;;<br \/>\n      if (trim($scont) != &#8220;&#8221;) { $scont=&#8217; &#8230; starting with &#8220;&#8216; . file_get_contents($ourfilename) . &#8216;&#8221;&#8216;; }<br \/>\n      <font color=blue>if (strpos($ourfilename, &#8220;.lin2&#8221;) !== false) {<br \/>\n      rename($ourfilename, explode(&#8220;.lin2&#8221;, $ourfilename)[0] . &#8220;.line&#8221;);<br \/>\n      $datait=&#8221; data-&#8220;;<br \/>\n      } else {<\/font><br \/>\n      unlink($ourfilename);<br \/>\n      <font color=blue>}<\/font><br \/>\n    }<br \/>\n   echo &#8220;&lt;!doctype html&gt;<br \/>\n   \/\/ etcetera etcetera etcetera<br \/>\n   &lt;body <font color=blue>&#8221; . $datait . &#8220;<\/font>onload=&#8217;onlis();&#8217;&gt;<br \/>\n   \/\/ etcetera etcetera etcetera<br \/>\n   &#8220;;\n<\/td>\n<\/tr>\n<\/table>\n<p>So yet again, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php--GETME\" title=\"php_listener.php\">the changed (including &#8220;session&#8221; logic)<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php--GETME\" title=\"php_listener.php\">php_listener.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a> &#8220;third draft&#8221;.<\/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\/chat-no-sockets-sms-invitation-tutorial\/'>Chat No Sockets SMS Invitation Tutorial<\/a>.<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='cnsst'>Previous relevant <a target=_blank title='Chat No Sockets Session Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chat-no-sockets-session-tutorial\/'>Chat No Sockets Session Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Chat No Sockets Session Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Chat No Sockets Session Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_session.jpg\" title=\"Chat No Sockets Session Tutorial\"  \/><\/a>[\/caption]\n\n\n\n<p>Back from the \"command line\" PHP usage of yesterday's <a title='Chat No Sockets Cron Tutorial' href='#cnsct'>Chat No Sockets Cron Tutorial<\/a> that day's thinking about how to improve the \"surfing the net\" parts of the Chat web application we're developing got us starting to involve PHP ...<\/p>\n\n\n\n<code>\n<a target=_blank title='PHP sessions' href='https:\/\/www.php.net\/manual\/en\/reserved.variables.session.php'>Sessions<\/a>\n<\/code>\n\n\n\n<p> ... and can't they just be really useful as the <font color=blue>identifying methodology<\/font> to hone in on a webpage session of interest, and exclude all irrelevant others ...<\/p>\n\n\n\n&lt;?php\n<code>\n<font color=blue>session_start();\n$enduring='' . session_id();\nif (isset($_GET['sid'])) {\n  $enduring=str_replace(\"+\",\" \",urldecode($_GET['sid']));\n} else if (isset($_POST['sid'])) {\n  $enduring=str_replace(\"+\",\" \",urldecode($_POST['sid']));\n}\n$dbit=' data-oe=\"\" ';<\/font>\n<br \/>\nfunction server_remote_addr() {\n    <font color=blue>global $enduring;<\/font>\n    $rma = $_SERVER['REMOTE_ADDR'];\n    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);\n    \/\/ you can add different browsers with the same way ..\n    if(preg_match('\/(opr)[ \\\/]([\\w.]+)\/', $ua))\n            $rma = '000'.$rma;\n    elseif(preg_match('\/(chromium)[ \\\/]([\\w.]+)\/', $ua))\n            $rma = '000000'.$rma;\n    elseif(preg_match('\/(chrome)[ \\\/]([\\w.]+)\/', $ua))\n            $rma = '00000'.$rma;\n    elseif(preg_match('\/(safari)[ \\\/]([\\w.]+)\/', $ua))\n            $rma = '0000'.$rma;\n    elseif(preg_match('\/(opera)[ \\\/]([\\w.]+)\/', $ua))\n            $rma = '000'.$rma;\n    elseif(preg_match('\/(msie)[ \\\/]([\\w.]+)\/', $ua))\n            $rma = '00'.$rma;\n    elseif(preg_match('\/(mozilla)[ \\\/]([\\w.]+)\/', $ua))\n            $rma = '0'.$rma;\n    return str_replace(\".\", \"x\", str_replace(\":\", \"x\", $rma<font color=blue> . $enduring<\/font>));\n}\n<\/code>\n?&gt;\n\n\n\n<p> ... the only nuance being that iframe children get their session IDs mapped to that of the parent via that \"sid\" argument above.<\/p>\n\n\n\n\n\n<p>And so today's work represents a \"shoring up\" day for the basis for a Chat, and a relief that this \"better honing\" also meant that we no longer needed to tweak those pesky $_SERVER['HTTP_USER_AGENT'] combinations (a dark art indeed).<\/p>\n\n\n\n\n\n<p>So again, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php--GETME\" title=\"php_listener.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php--GETME\" title=\"php_listener.php\">php_listener.php<\/a>'s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a> \"third draft\".<\/p>\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\/chat-no-sockets-session-tutorial\/'>Chat No Sockets Session Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cnsst'>Previous relevant <a target=_blank title='Chat No Sockets Session Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chat-no-sockets-session-tutorial\/'>Chat No Sockets Session Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Chat No Sockets Session Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_session.jpg\" title=\"Chat No Sockets Session Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Chat No Sockets Session Tutorial<\/p><\/div>\n<p>Back from the &#8220;command line&#8221; PHP usage of yesterday&#8217;s <a title='Chat No Sockets Cron Tutorial' href='#cnsct'>Chat No Sockets Cron Tutorial<\/a> that day&#8217;s thinking about how to improve the &#8220;surfing the net&#8221; parts of the Chat web application we&#8217;re developing got us starting to involve PHP &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='PHP sessions' href='https:\/\/www.php.net\/manual\/en\/reserved.variables.session.php'>Sessions<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; and can&#8217;t they just be really useful as the <font color=blue>identifying methodology<\/font> to hone in on a webpage session of interest, and exclude all irrelevant others &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n<font color=blue>session_start();<br \/>\n$enduring='' . session_id();<br \/>\nif (isset($_GET['sid'])) {<br \/>\n  $enduring=str_replace(\"+\",\" \",urldecode($_GET['sid']));<br \/>\n} else if (isset($_POST['sid'])) {<br \/>\n  $enduring=str_replace(\"+\",\" \",urldecode($_POST['sid']));<br \/>\n}<br \/>\n$dbit=' data-oe=\"\" ';<\/font><br \/>\n<br \/>\nfunction server_remote_addr() {<br \/>\n    <font color=blue>global $enduring;<\/font><br \/>\n    $rma = $_SERVER['REMOTE_ADDR'];<br \/>\n    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);<br \/>\n    \/\/ you can add different browsers with the same way ..<br \/>\n    if(preg_match('\/(opr)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000'.$rma;<br \/>\n    elseif(preg_match('\/(chromium)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000000'.$rma;<br \/>\n    elseif(preg_match('\/(chrome)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '00000'.$rma;<br \/>\n    elseif(preg_match('\/(safari)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '0000'.$rma;<br \/>\n    elseif(preg_match('\/(opera)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000'.$rma;<br \/>\n    elseif(preg_match('\/(msie)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '00'.$rma;<br \/>\n    elseif(preg_match('\/(mozilla)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '0'.$rma;<br \/>\n    return str_replace(\".\", \"x\", str_replace(\":\", \"x\", $rma<font color=blue> . $enduring<\/font>));<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; the only nuance being that iframe children get their session IDs mapped to that of the parent via that &#8220;sid&#8221; argument above.<\/p>\n<p>And so today&#8217;s work represents a &#8220;shoring up&#8221; day for the basis for a Chat, and a relief that this &#8220;better honing&#8221; also meant that we no longer needed to tweak those pesky $_SERVER[&#8216;HTTP_USER_AGENT&#8217;] combinations (a dark art indeed).<\/p>\n<p>So again, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php--GETME\" title=\"php_listener.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php--GETME\" title=\"php_listener.php\">php_listener.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a> &#8220;third draft&#8221;.<\/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\/chat-no-sockets-session-tutorial\/'>Chat No Sockets Session Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cnsct'>Previous relevant <a target=_blank title='Chat No Sockets Cron Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chat-no-sockets-cron-tutorial\/'>Chat No Sockets Cron Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Chat No Sockets Cron Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_cron.gif\" title=\"Chat No Sockets Cron Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Chat No Sockets Cron Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Chat No Sockets Primer Tutorial' href='#cnspt'>Chat No Sockets Primer Tutorial<\/a> had a &#8220;command line&#8221; PHP usage component, we wonder whether you noticed?   We intend to keep this arrangement for our &#8220;no sockets&#8221; Chat web application.  It will not function as that &#8220;Chat&#8221; without the command line part of the &#8220;equation&#8221; being activated.  You might think of it as the &#8220;traffic cop&#8221; of the web application.<\/p>\n<p>As far as that &#8220;command line&#8221; PHP usage goes &#8230;<\/p>\n<ul>\n<li>Isn&#8217;t it great to have the one code source for all this?<\/li>\n<li>How are we going to manage this command line usage, out of &#8230;\n<ol>\n<li>interactive in an interactive command line session<\/li>\n<li>set off a background process run of it via the &#8220;&#038;&#8221; suffix<\/li>\n<li>cron<font size=1>tab<\/font> it (on our Linux web server)<\/li>\n<\/ol>\n<p>?<\/li>\n<\/ul>\n<p>Suggestion 1 is kludgy, over the top and awkward to arrange for any long period of time, though useful if non-continuous &#8220;process coverage&#8221; is the go.<\/p>\n<p>Suggestion 2 and 3 are great for &#8220;continuous process coverage&#8221; (we privately think of as &#8220;jigsaw coverage&#8221;), but in our books <font size=2>(and the pamphlettes have scarpered it to <a target=_blank title='?' href='https:\/\/www.google.com\/maps\/search\/pamphlette+island\/@-33.9112506,151.1139931,12z\/data=!3m1!4b1'>Pamphlette Island<\/a><\/font><font size=1> &#8230; which they must intend on &#8220;founding&#8221;?!<\/font><font size=2>)<\/font> cron<font size=1>tab<\/font> is a better option to take for at least two reasons &#8230;<\/p>\n<ul>\n<li>cron<font size=1>tab<\/font> resurrects itself on a system reboot<\/li>\n<li>cron<font size=1>tab<\/font> is self documenting (an important advantage regarding command line processing usage)<\/li>\n<\/ul>\n<p> &#8230; but if we are to use cron<font size=1>tab<\/font> &#8220;jigsaw coverage&#8221;, to avoid &#8220;jigsaw overlap&#8221; we&#8217;re going to have to change &#8230; regarding &#8230;<\/p>\n<blockquote style='width:90%;' cite='https:\/\/stackoverflow.com\/questions\/18919151\/crontab-day-of-the-week-syntax'><p>\n&nbsp;&nbsp;\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 minute (0 &#8211; 59)<br \/>\n&nbsp;&nbsp; \u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 hour (0 &#8211; 23)<br \/>\n&nbsp;&nbsp; \u2502 \u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500 day of month (1 &#8211; 31)<br \/>\n&nbsp;&nbsp; \u2502 \u2502 \u2502 \u250c\u2500\u2500\u2500\u2500 month (1 &#8211; 12)<br \/>\n&nbsp;&nbsp; \u2502 \u2502 \u2502 \u2502 \u250c\u2500\u2500 day of week (0 &#8211; 6 => Sunday &#8211; Saturday, or<br \/>\n&nbsp;&nbsp; \u2502 \u2502 \u2502 \u2502 \u2502                1 &#8211; 7 => Monday &#8211; Sunday)<br \/>\n&nbsp;&nbsp; \u2193 \u2193 \u2193 \u2193 \u2193<br \/>\n&nbsp;&nbsp; * * * * * command to be executed\n <\/p><\/blockquote>\n<p> &#8230; thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/18919151\/crontab-day-of-the-week-syntax' href='https:\/\/stackoverflow.com\/questions\/18919151\/crontab-day-of-the-week-syntax'>https:\/\/stackoverflow.com\/questions\/18919151\/crontab-day-of-the-week-syntax<\/a> for above cron<font size=1>tab<\/font> syntax &#8230; as per ( our assumption being that the user will use one of the &#8220;every ? units&#8221; syntax such as <br \/><i>*\/6 * * * * php this_php_happens_every_six_minutes.php<\/i><br \/> ) &#8230;<\/p>\n<table style='width:100%;'>\n<tr>\n<th>To <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php-GETME\" title=\"php_listener.php\">&lt;&#8212;<\/a><\/th>\n<th><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_cron.gif\">&lt;&#8212;<\/a> From<\/th>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nif ($argv) {  \/\/ command line ...<br \/>\n    $cfindings=\"\";<br \/>\n    $goes=0;<br \/>\n    $howmanygoes=\"-1\";<br \/>\n    $par=getenv(\"TERM\"); \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/3214935\/can-a-bash-script-tell-if-its-being-run-via-cron' href='https:\/\/stackoverflow.com\/questions\/3214935\/can-a-bash-script-tell-if-its-being-run-via-cron'>https:\/\/stackoverflow.com\/questions\/3214935\/can-a-bash-script-tell-if-its-being-run-via-cron<\/a><br \/>\n    if (\"$par\" == \"$TERM\") {  \/\/ via cron<br \/>\n      $cfindings1=exec(\"crontab -l | grep 'php_listener' | grep -v 'grep' | cut -d ' ' -f 1\");<br \/>\n      $cfindings2=exec(\"crontab -l | grep 'php_listener' | grep -v 'grep' | cut -d ' ' -f 2\");<br \/>\n      $cfindings3=exec(\"crontab -l | grep 'php_listener' | grep -v 'grep' | cut -d ' ' -f 3\");<br \/>\n      $cfindings4=exec(\"crontab -l | grep 'php_listener' | grep -v 'grep' | cut -d ' ' -f 4\");<br \/>\n      $cfindings5=exec(\"crontab -l | grep 'php_listener' | grep -v 'grep' | cut -d ' ' -f 5\");<br \/>\n      if (strpos($cfindings1, \"*\/\") !== false) {<br \/>\n        $howmanygoes=12 * explode(\"*\/\", $cfindings1)[1];<br \/>\n      } else if (strpos($cfindings2, \"*\/\") !== false) {<br \/>\n        $howmanygoes=720 * explode(\"*\/\", $cfindings2)[1];<br \/>\n      } else if (strpos($cfindings3, \"*\/\") !== false) {<br \/>\n        $howmanygoes=17280 * explode(\"*\/\", $cfindings3)[1];<br \/>\n      }<br \/>\n    }<br \/>\n    while (1) {<br \/>\n    foreach (glob(\"chat_*.rls\") as $ourfilename) {<br \/>\n      rename($ourfilename, explode(\".rls\", $ourfilename)[0] . \".line\");<br \/>\n    }<br \/>\n    if ($howmanygoes >= 0) { $goes++; if ($goes &gt;= $howmanygoes) {  exit; } }<br \/>\n    sleep(5);<br \/>\n    }<br \/>\n    exit;<br \/>\n}<br \/>\n<\/code>\n<\/td>\n<td style='vertical-align:top;'>\n<code><br \/>\nif ($argv) {  \/\/ command line ...<br \/>\n    while (1) {<br \/>\n    foreach (glob(\"chat_*.rls\") as $ourfilename) {<br \/>\n      rename($ourfilename, explode(\".rls\", $ourfilename)[0] . \".line\");<br \/>\n    }<br \/>\n    sleep(5);<br \/>\n    }<br \/>\n    exit;<br \/>\n}<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p>Again, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php-GETME\" title=\"php_listener.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php-GETME\" title=\"php_listener.php\">php_listener.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a> &#8220;second draft&#8221;.<\/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\/chat-no-sockets-crontab-tutorial\/'>Chat No Sockets Crontab Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cnspt'>Previous relevant <a target=_blank title='Chat No Sockets Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chat-no-sockets-primer-tutorial\/'>Chat No Sockets 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\/PHP\/php_listener.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Chat No Sockets Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/chat_no_sockets.jpg\" title=\"Chat No Sockets Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Chat No Sockets Primer Tutorial<\/p><\/div>\n<p>We&#8217;re starting on a new PHP web application project.  We&#8217;ve got a &#8220;first draft&#8221; of a chat web application that does not use sockets, but rather &#8230;<\/p>\n<ol>\n<li>invites somebody else (via &#8220;Invite&#8221; button) via email or SMS<\/li>\n<li>that &#8220;somebody else&#8221; opens the web application via email or SMS links<\/li>\n<li>from then on keep the chat going via &#8220;Send&#8221; buttons in the two chat incarnations<\/li>\n<\/ol>\n<p>It needs more work, that is for sure, but perhaps you want to see <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php_GETME\" title=\"php_listener.php\">php_listener.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_listener.php\" title=\"Click picture\">chat web application<\/a> &#8220;first draft&#8221;.<\/p>\n<p>As with good learning between two parties, each listens, takes it in, and replies, as required.<\/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='#d50101' onclick='var dv=document.getElementById(\"d50101\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/chat\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50101' 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='#d50106' onclick='var dv=document.getElementById(\"d50106\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cron\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50106' 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='#d50122' onclick='var dv=document.getElementById(\"d50122\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/session\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50122' 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='#d50127' onclick='var dv=document.getElementById(\"d50127\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sms\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50127' 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='#d50135' onclick='var dv=document.getElementById(\"d50135\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50135' 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='#d50148' onclick='var dv=document.getElementById(\"d50148\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/media\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50148' 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='#d50159' onclick='var dv=document.getElementById(\"d50159\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dictation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50159' 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='#d50167' onclick='var dv=document.getElementById(\"d50167\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-chrome\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50167' 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='#d50243' onclick='var dv=document.getElementById(\"d50243\"); 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='d50243' 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='#d50259' onclick='var dv=document.getElementById(\"d50259\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/button\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50259' 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='#d50266' onclick='var dv=document.getElementById(\"d50266\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/settimeout\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50266' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You might have noticed with yesterday&#8217;s Details Summary Button Onclick Primer Tutorial&#8216;s &#8230;. details or summary element onclick logic that it relied on an assumption that &#8230; the onclick event occurs after a details element attribute &#8220;open&#8221; is finalized &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/details-summary-button-delayed-onclick-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2767,3282,3270,84,113,126,141,174,184,200,207,234,272,274,2380,2310,325,380,3405,400,3414,419,513,520,532,3406,2555,3407,590,707,2114,2415,760,2732,861,932,991,997,1063,2024,1126,1159,2553,2311,1282,1319,1333,1369,3348,1402],"class_list":["post-50266","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-_session","tag-animated-emoji","tag-animated-emojis","tag-animation-2","tag-audio","tag-background","tag-beep","tag-button","tag-canvas","tag-chat","tag-chrome","tag-command-line","tag-cron","tag-crontab","tag-delay","tag-details","tag-dictation","tag-email","tag-emoji-html-entity","tag-event","tag-event-logic","tag-file-api","tag-google","tag-google-chrome","tag-google-translate","tag-hands-free","tag-hear","tag-hey-siri","tag-image","tag-linux","tag-listener","tag-localstorage","tag-media","tag-mimetype","tag-onclick","tag-php","tag-process","tag-programming","tag-reveal","tag-session","tag-settimeout","tag-sms","tag-speech-to-text","tag-summary","tag-timer","tag-tutorial","tag-unicode","tag-video","tag-voiceover","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50266"}],"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=50266"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50266\/revisions"}],"predecessor-version":[{"id":62393,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50266\/revisions\/62393"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=50266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=50266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=50266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}