{"id":52849,"date":"2021-07-31T03:01:06","date_gmt":"2021-07-30T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52849"},"modified":"2021-07-30T12:56:27","modified_gmt":"2021-07-30T02:56:27","slug":"youtube-embedded-iframe-api-summary-singular-multiple-dropdown-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-summary-singular-multiple-dropdown-tutorial\/","title":{"rendered":"YouTube Embedded Iframe API Summary Singular Multiple Dropdown Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Embedded Iframe API Summary Singular Multiple Dropdown Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/select_multi_ticking.jpg\" title=\"YouTube Embedded Iframe API Summary Singular Multiple Dropdown Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Embedded Iframe API Summary Singular Multiple Dropdown Tutorial<\/p><\/div>\n<p>The progress on top of yesterday&#8217;s <a title='YouTube Embedded Iframe API Summary Emoji Buttons Tutorial' href='#yteiapisebt'>YouTube Embedded Iframe API Summary Emoji Buttons Tutorial<\/a>&#8216;s progress today can be summarised by &#8230;<\/p>\n<ul>\n<li>select &#8220;multiple&#8221; (ie. dropdown element) size=[fullListShownNumber] mode with (option subelement &#8220;onclick=gmlistit(this);&#8221;) logic (&#10004; based) to consider the order of singular clicks (in order to give the user added control resembling that of a playlist) &#8230;<br \/>\n<code><br \/>\nfunction gmlistit(invlo) {<br \/>\n  var invl=invlo.value;<br \/>\n  if (invl == '') { return ''; }<br \/>\n  var isvalid=false;<br \/>\n  var morethanone=0;<br \/>\n  if (('' + invl).indexOf('|') != -1) {<br \/>\n    if (gmlist.indexOf(invl.split('|')[0]) == -1) {<br \/>\n      isvalid=true;<br \/>\n      if (gmlist == '') {<br \/>\n        gmlist=invl.split('|')[0];<br \/>\n      } else {<br \/>\n        gmlist+=',' + invl.split('|')[0];<br \/>\n      }<br \/>\n    }<br \/>\n    \/\/ alert('gmlist=' + gmlist);<br \/>\n  }<br \/>\n<br \/>\n   var sin=document.getElementById('sshuffle');<br \/>\n   for (var ii=1; ii&lt;sin.options.length; ii++) {<br \/>\n    if (sin.options[ii].selected) {<br \/>\n      morethanone++;<br \/>\n    }<br \/>\n   }<br \/>\n<br \/>\n   if (morethanone &gt; 1) {<br \/>\n    gmlist='';<br \/>\n    isvalid=false;<br \/>\n   }<br \/>\n<br \/>\n   for (var i=1; i&lt;sin.options.length; i++) {<br \/>\n    if (sin.options[i].selected) {<br \/>\n      if (sin.options[i].innerText.indexOf(String.fromCodePoint(10004)) == -1) {<br \/>\n      sin.options[i].innerText+=' ' + String.fromCodePoint(10004);<br \/>\n      } else if (morethanone &gt; 1) {<br \/>\n      sin.options[i].innerText=sin.options[i].innerText.split(String.fromCodePoint(10004))[0] + String.fromCodePoint(10004);<br \/>\n      }<br \/>\n      if (sin.options[i].value.indexOf('|') != -1) {<br \/>\n        if (gmlist.indexOf(sin.options[i].value.split('|')[0]) == -1) {<br \/>\n      if (gmlist == '') {<br \/>\n        gmlist=sin.options[i].value.split('|')[0];<br \/>\n      } else {<br \/>\n        gmlist+=',' + sin.options[i].value.split('|')[0];<br \/>\n      }<br \/>\n        sin.options[i].innerText+=' ' + gmlist.split(',').length;<br \/>\n        }<br \/>\n      }<br \/>\n    } else if (morethanone &gt; 1) {<br \/>\n      if (sin.options[i].innerText.indexOf(String.fromCodePoint(10004)) != -1) {<br \/>\n        sin.options[i].innerText=sin.options[i].innerText.split(String.fromCodePoint(10004))[0];<br \/>\n        sin.options[i].style.backgroundColor='white';<br \/>\n      }<br \/>\n    }<br \/>\n   }<br \/>\n<br \/>\n  if (isvalid) {<br \/>\n  invlo.style.backgroundColor='rgb(230,230,230)';<br \/>\n  invlo.innerText+=' ' + gmlist.split(',').length;<br \/>\n  }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>cookie means (via &#127850; &#8220;emoji buttons&#8221;) by which to save a video list for recall (in an intersessional sense) &#8230;<br \/>\n<code><br \/>\n\/\/ Initializations<br \/>\nvar scoo='disco_yt_list';<br \/>\nvar sbut='&lt;span id=\"sd\"&gt;&lt;a href=\"#dshuffle\" title=\"Shuffle\"&gt;&#128256;&lt;\/a&gt; &lt;a onclick=\"askvs();\" title=Videos&gt;&#10067;&lt;\/a&gt;&lt;\/span&gt; ';<br \/>\nif (cookieAVal(scoo) != '') { sbut=sbut.replace('&lt;\/span&gt;', ' &lt;a onclick=\"recall();\" title=\"Recall ' + cookieAVal(scoo) + '\"&gt;&#127850;&lt;\/a&gt;&lt;\/span&gt;');    }<br \/>\nvar xsbut=sbut;<br \/>\n\/\/ ... then later ...<br \/>\nfunction cookieAVal(cName) {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (cName == tCookie[j].split(\"=\")[0]) {<br \/>\n      return decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<br \/>\nfunction recall() {<br \/>\n var uvbit=cookieAVal(scoo);<br \/>\n if (uvbit != '') {<br \/>\n    location.href=document.URL.split('#')[0].split('?')[0] + '?mustbeone=' + encodeURIComponent(uvbit.split(',')[0]) + '&videolist=' + encodeURIComponent(uvbit);<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction deleteACookie(goodname) {<br \/>\n var expireDate = new Date();<br \/>\n expireDate.setDate(expireDate.getDate()-1);<br \/>\n document.cookie = goodname + \"=; expires=\" + expireDate.toGMTString();<br \/>\n}<br \/>\n<br \/>\nfunction setACookie(gname, qyst) {<br \/>\n   if (cookieAVal(gname) != '') {  deleteACookie(gname);    }<br \/>\n   var expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = gname + \"=\" + encodeURIComponent(qyst) + \"; expires=\" + expireDate.toGMTString();<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>detail element order with most recent at the top and the current relevant entry flagged by an &#128378; emoji &#8230;<br \/>\n<code><br \/>\n\/\/ Example code applied to the new HTML paradigm <font color=blue>part<\/font> &lt;detail id=dprex&gt;&lt;summary id=prex&gt;<font color=blue>&lt;div id=dd&gt;&lt;\/div&gt;<\/font>&lt;\/detail&gt; div nested element ...<br \/>\n            document.getElementById('prex').innerHTML='Enjoy watching and listening to ' + event.target.getVideoData().title + ' ... ' + sbut + d;<br \/>\n            if (document.getElementById('markp' + event.target.id)) {<br \/>\n            markith(d, event.target.id, 'p', 0);<br \/>\n            } else {<br \/>\n            mh=markith(d, event.target.id, 'p', 1);<br \/>\n            if (wasdc != '') {<br \/>\n            document.getElementById('dd').innerHTML='Enjoy watching and listening to ' + event.target.getVideoData().title + ' ... ' + mh + '&lt;br&gt;' + wasdc;<br \/>\n            } else {<br \/>\n            document.getElementById('dd').innerHTML+='Enjoy watching and listening to ' + event.target.getVideoData().title + ' ... ' + mh + '&lt;br&gt;';<br \/>\n            }<br \/>\n            }<br \/>\n\/\/ ... uses ...<br \/>\n    function markith(thed, theid, themid, addmode) {<br \/>\n      var sofar='';<br \/>\n      var ouremoji=String.fromCodePoint(128378);<br \/>\n      var dprexc=document.getElementById('dprex').innerHTML.split('&lt;div id=\"dd\"&gt;')[0].split('&lt;\/div&gt;')[0];<br \/>\n      dprexc=document.getElementById('dd').innerHTML; \/\/.split('&lt;div id=\"dd\"&gt;')[0].split('&lt;\/div&gt;')[0];<br \/>\n      var idp=false;<br \/>\n      wasdc='';<br \/>\n      while (dprexc.indexOf(ouremoji) != -1) {<br \/>\n        dprexc=dprexc.replace(ouremoji,'');<br \/>\n        idp=true;<br \/>\n      }<br \/>\n      if (idp) {<br \/>\n        var blines=dprexc.split('&lt;br&gt;');<br \/>\n        var newdc=blines[0] + '&lt;br&gt;';<br \/>\n        sofar+=blines[0].split(' ... ')[0];<br \/>\n        for (var inew=1; inew&lt;blines.length; inew++) {<br \/>\n          if (blines[inew].split(' ... ')[0] != blines[eval(-1 + inew)].split(' ... ')[0] && sofar.indexOf(blines[inew].split(' ... ')[0]) == -1) {<br \/>\n            newdc+=blines[inew] + '&lt;br&gt;';<br \/>\n            sofar+=blines[inew].split(' ... ')[0];<br \/>\n          }<br \/>\n        }<br \/>\n        if (newdc != dprexc) {<br \/>\n          dprexc=newdc;<br \/>\n        }<br \/>\n        wasdc=dprexc;<br \/>\n        document.getElementById('dd').innerHTML=dprexc;<br \/>\n      }<br \/>\n      var mks=document.getElementsByTagName('span');<br \/>\n      for (var imks=0; imks&lt;mks.length; imks++) {<br \/>\n       if (('' + mks[imks].id) == ('mark' + themid + theid)) {<br \/>\n         mks[imks].className=\"curmark\";<br \/>\n         if (mks[imks].innerHTML.length != ('' + thed).length) { mks[imks].innerHTML=mks[imks].innerHTML.slice(eval('-' + ('' + thed).length));  }<br \/>\n       } else if (('' + mks[imks].id).indexOf('mark') == 0) {<br \/>\n         mks[imks].className=\"oldmark\";<br \/>\n         if (mks[imks].innerHTML.length != ('' + thed).length) { mks[imks].innerHTML=mks[imks].innerHTML.slice(eval('-' + ('' + thed).length));  }<br \/>\n       }<br \/>\n      }<br \/>\n      if (document.getElementById('mark' + themid + theid) && addmode == 0) {<br \/>\n       document.getElementById('mark' + themid + theid).innerHTML=ouremoji + thed;<br \/>\n       return '';<br \/>\n      }<br \/>\n      if (addmode == 2) {<br \/>\n      document.getElementById('dd').innerHTML=prexc + '&lt;span class=curmask id=mark' + themid + theid + '&gt;' + ouremoji + thed + '&lt;\/span&gt;';<br \/>\n      return '';<br \/>\n      } else if (addmode == 1) {<br \/>\n      return ouremoji + thed;<br \/>\n      } else if (addmode == 0) {<br \/>\n      return '&lt;span class=curmask id=mark' + themid + theid + '&gt;' + ouremoji + thed + '&lt;\/span&gt;';<br \/>\n      }<br \/>\n    }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>And so, yet again, please try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\" title=\"Click picture\">the YouTube disco web application<\/a> (via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html-----GETME\" title=\"dynamic_js.html\">dynamic_js.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html-----GETME\" title=\"dynamic_js.html\">this way<\/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\/youtube-embedded-iframe-api-summary-singular-multiple-dropdown-tutorial\/'>YouTube Embedded Iframe API Summary Singular Multiple Dropdown Tutorial<\/a>.<\/p-->\n<hr>\n<p id='yteiapisebt'>Previous relevant <a target=_blank title='YouTube Embedded Iframe API Summary Emoji Buttons Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-summary-emoji-buttons-tutorial\/'>YouTube Embedded Iframe API Summary Emoji Buttons Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Embedded Iframe API Summary Emoji Buttons Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/summary_emojis.jpg\" title=\"YouTube Embedded Iframe API Summary Emoji Buttons Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Embedded Iframe API Summary Emoji Buttons Tutorial<\/p><\/div>\n<p>We weren&#8217;t sure if today&#8217;s idea, on top of the progress of yesterday&#8217;s <a title='YouTube Embedded Iframe API Video Unavailable Moderation Tutorial' href='#yteiapivumt'>YouTube Embedded Iframe API Video Unavailable Moderation Tutorial<\/a> of adding intelligence to &#8230;<\/p>\n<ul>\n<li>detail&#8217;s summary (sub)element &#8230;<\/li>\n<li>style=position:fixed;<\/li>\n<li>big z-index value (for overlaying purposes) &#8230; by &#8230;<\/li>\n<li>embedding into its innerHTL content &#8220;a&#8221; link emojis (what we like to think of as &#8220;emoji buttons&#8221;)<\/li>\n<\/ul>\n<p> &#8230; would work, because we hadn&#8217;t tried this before, and we knew you couldn&#8217;t do anything like this for &#8220;select&#8217;s option (sub)element&#8221;.   But it does!  Yayyyyy!<\/p>\n<p>And we think it could be really useful, in order to display <font color=blue>action items<\/font> &#8220;within the fold&#8221; at all times (which is what &#8220;style=position:fixed;&#8221; is helping with &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>var sbut='&lt;a href=#dshuffle title=Shuffle&gt;&#128256;&lt;\/a&gt; &lt;a onclick=askvs(); title=Videos&gt;&#10067;&lt;\/a&gt; ';<\/font><br \/>\n\/\/ used later on ...<br \/>\n            document.getElementById('prex').innerHTML='Enjoy watching and listening to ' + event.target.getVideoData().title + ' ... '<font color=blue> + sbut<\/font> + d;<br \/>\n            document.getElementById('dprex').innerHTML+='Enjoy watching and listening to ' + event.target.getVideoData().title + ' ... ' + d + '&lt;br&gt;';<br \/>\n\/\/ ... and ...<br \/>\nfunction askvs() {<br \/>\n  var newlist=prompt('Please enter comma separated YouTube video ID list.', 'h2r59-Xmge4,yT1iDKkZNYU,S-u6qdeaPoE,Nm-ISatLDG0,Gs069dndIYk,dwxjpIJm9JM,8iwBM_YB1sE,CS9OO0S5w2k,I_izvAbhExY,xFrGuyw1V8s,piIJk0CFjUo,gQ8O9SidZbs,_QNEf9oGw8o,1ff29VSvP_s,4-Vz6tNfV1Y,Zi_XLOBDo_Y,xfmZRiePkEM,iPUmE-tne5U,m5y2GaW0MZA,yioNn7XS-bw,XKuJUxGntRI,vsBak0oCgdY,eBpYgpF1bqQ,DVDCNmdi7QI');<br \/>\n  if (newlist != null) {<br \/>\n   location.href=document.URL.split('#')[0].split('?')[0] + '?videolist=' + encodeURIComponent(newlist.replace(\/\\'\/g,'').replace(\/\\\"\/g,'').replace(\/\\;\/g,','));<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>And so, again, please try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\" title=\"Click picture\">the YouTube disco web application<\/a> (via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html----GETME\" title=\"dynamic_js.html\">dynamic_js.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html----GETME\" title=\"dynamic_js.html\">this way<\/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\/youtube-embedded-iframe-api-summary-emoji-buttons-tutorial\/'>New YouTube Embedded Iframe API Summary Emoji Buttons Tutorial<\/a>.<\/p-->\n<hr>\n<p id='yteiapivumt'>Previous relevant <a target=_blank title='YouTube Embedded Iframe API Video Unavailable Moderation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-video-unavailable-moderation-tutorial\/'>YouTube Embedded Iframe API Video Unavailable Moderation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Embedded Iframe API Video Unavailable Moderation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/self_moderation_disco.gif\" title=\"YouTube Embedded Iframe API Video Unavailable Moderation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Embedded Iframe API Video Unavailable Moderation Tutorial<\/p><\/div>\n<p>When doing the work for yesterday&#8217;s <a title='YouTube Embedded Iframe API and the Promise Object Tutorial' href='#yteiapipot'>YouTube Embedded Iframe API and the Promise Object Tutorial<\/a> we found some &#8230;<\/p>\n<p><code><br \/>\nVideo unavailable<br \/>\n<\/code><\/p>\n<p> &#8230; videos <font size=1>(that happen regarding some broken privilege on those videos)<\/font>.  In trying to skip over these, we were unsuccessful using any <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> <a target=_blank title='Useful API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>Embedded Iframe API<\/a> &#8220;onError&#8221; event scenario to identify this.  What <font color=blue>did work<\/font> was &#8230;<\/p>\n<p><code><br \/>\n      \/\/ 4. The API will call this function when the video player is ready.<br \/>\n      function onPlayerReady(event) {<br \/>\n        var dis, cti, gvd, uri, jis, prv='', iyi=0, huht='';<br \/>\n        uri=event.target.getVideoUrl();<br \/>\n        jis=yid.indexOf(uri.split('=')[1].split('&')[0]);<br \/>\n        <font color=blue>dis=event.target.getDuration();<\/font><br \/>\n        cti=event.target.getCurrentTime();<br \/>\n        gvd=event.target.getVideoData().title;<br \/>\n        yid[jis]+='|' + dis + '|' + cti + '|' + gvd;<br \/>\n  \/\/ etcetera etcetera etcetera<br \/>\n        if (('' + dis) != '0') { isoks[eval(-1 + eval('' + event.target.id))]=true; } <font color=blue>else if (1 == 1) { if (document.getElementById('bshuffle').value == 'Shuffle') { document.getElementById('bshuffle').value='Help Moderate Unavailable Videos or Shuffle';    } ajaxits.push(\"ajaxit('\" + uri + \"', '\" + gvd + \"', '');\"); }<\/font> else if (1 == 3) { alert('video ' + eval(-1 + eval('' + event.target.id)) + ' isunavailable');  }<br \/>\n  \/\/ etcetera etcetera etcetera<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=blue>dis returns zero<\/font>.<\/p>\n<p>So, today, we wanted to set up an email driven Self Moderation regime for these &#8220;Video unavailable&#8221; category of YouTube videos.  Here is <font color=blue>some Javascript code<\/font> &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>var lastallok='';<br \/>\nvar noclick=false;<br \/>\nvar cfrom=location.search.split('from=')[1] ?  decodeURIComponent(location.search.split('from=')[1].split('&')[0]) : ' ';<br \/>\nvar cto=location.search.split('to=')[1] ?  decodeURIComponent(location.search.split('to=')[1].split('&')[0]).replace(cfrom,'') : ' ';<br \/>\nvar ctitle=location.search.split('title=')[1] ?  decodeURIComponent(location.search.split('title=')[1].split('&')[0]) : '';<br \/>\nvar ajaxits=[];<br \/>\n<br \/>\nfunction ajaxit(badurl, badtitle, ccit) {<br \/>\n  var zhr = new XMLHttpRequest();<br \/>\n  var zform=new FormData();<br \/>\n  var pbl='';<br \/>\n  zform.append('inline', '');<br \/>\n  zform.append('to', 'rmetcalfe@rjmprogramming.com.au');<br \/>\n  if (('' + ccit).indexOf('@') != -1) {<br \/>\n  zform.append('cc', ccit);<br \/>\n  pbl='public ';<br \/>\n  }<br \/>\n  zform.append('bcc', 'rmetcalfe15@gmail.com');<br \/>\n  zform.append('subj', ('Video ' + badurl + ' unavailable ... ').replace('   ','') + pbl + ' disco moderation ... ' + badtitle);<br \/>\n  var bigstr='';<br \/>\n  var aform='';<br \/>\n  if (cfrom.trim() != '' && cto.trim() != cfrom.trim() && ctitle != '') {<br \/>\n  aform='&lt;br&gt;&lt;br&gt;&lt;p&gt;YouTube Video unavailable URL: &lt;a target=_blank href=' + badurl + '&gt;' + badurl + '&lt;\/a&gt;&lt;\/p&gt;&lt;br&gt;&lt;p&gt;Video title (as known): ' + ctitle + '&lt;\/p&gt;&lt;br&gt;&lt;p&gt;Proposed Better YouTube URL: &lt;a target=_blank href=' + cto + '&gt;' + cto + '&lt;\/a&gt;&lt;\/p&gt;';<br \/>\n  bigstr='&lt;bo' + 'dy&gt;&lt;h1&gt;Video ' + badurl + ' unavailable ... ' + pbl + ' disco moderation ... ' + badtitle + '&lt;\/h1&gt;&lt;a target=_blank title=\"?\" href=\"\/\/www.youtube.com\/results?search_query=' + encodeURIComponent(badtitle) + '\"&gt;Try this YouTube search&lt;\/a&gt;' + aform + '&lt;\/body&gt;';<br \/>\n  } else if (cfrom.trim() != '' && cto.trim() != cfrom.trim()) {<br \/>\n  aform='&lt;br&gt;&lt;br&gt;&lt;p&gt;YouTube Video unavailable URL: &lt;a target=_blank href=' + badurl + '&gt;' + badurl + '&lt;\/a&gt;&lt;\/p&gt;&lt;br&gt;&lt;p&gt;Video title (as known): ' + badtitle + '&lt;\/p&gt;&lt;br&gt;&lt;p&gt;Proposed Better YouTube URL: &lt;a target=_blank href=' + cto + '&gt;' + cto + '&lt;\/a&gt;&lt;\/p&gt;';<br \/>\n  bigstr='&lt;bo' + 'dy&gt;&lt;h1&gt;Video ' + badurl + ' unavailable ... ' + pbl + ' disco moderation ... ' + badtitle + '&lt;\/h1&gt;&lt;a target=_blank title=\"?\" href=\"\/\/www.youtube.com\/results?search_query=' + encodeURIComponent(badtitle) + '\"&gt;Try this YouTube search&lt;\/a&gt;' + aform + '&lt;\/body&gt;';<br \/>\n  } else {<br \/>\n  aform='&lt;br&gt;&lt;br&gt;&lt;form target=_blank action=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.htm method=GET&gt;&lt;input type=hidden name=from value=\"' + badurl + '\"&gt;&lt;\/input&gt;&lt;input type=hidden name=title value=\"' + badtitle + '\"&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;New YouTube URL: &lt;input style=width:350px; name=to type=text value=\"' + badurl + '\"&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;&lt;input type=submit value=Moderate&gt;&lt;\/input&gt;&lt;\/form&gt;';<br \/>\n  bigstr='&lt;bo' + 'dy&gt;&lt;h1&gt;Video ' + badurl + ' unavailable ... ' + pbl + ' disco moderation ... ' + badtitle + '&lt;\/h1&gt;&lt;a target=_blank title=\"?\" href=\"\/\/www.youtube.com\/results?search_query=' + encodeURIComponent(badtitle) + '\"&gt;Try this YouTube search&lt;\/a&gt;' + aform + '&lt;\/body&gt;';<br \/>\n  }<br \/>\n  zform.append('tdhuhta', bigstr);<br \/>\n  zhr.open('post', '\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php', true);<br \/>\n  console.log('badtitle=' + badtitle + ' and badurl='+ badurl);<br \/>\n  zhr.send(zform);<br \/>\n}<br \/>\n<br \/>\nfunction ajaxitcheck() {<br \/>\n    if (ajaxits.length &gt; 0) {<br \/>\n    for (var iep=0; iep&lt;ajaxits.length; iep++) {<br \/>\n    eval(ajaxits[iep]);<br \/>\n    }<br \/>\n    ajaxits=[];<br \/>\n    }<br \/>\n}<br \/>\n<br \/><\/font><br \/>\nfunction process(bsin) {<br \/>\n  var jj=0, mbo='', mlist='', mdelim='';<br \/>\n  var ajx=0;<br \/>\n  var sin=document.getElementById(bsin.id.replace('b','s'));<br \/>\n  for (var i=0; i&lt;sin.options.length; i++) {<br \/>\n    if (sin.options[i].selected) {<br \/>\n      if (sin.options[i].value != '') {<br \/>\n       ajx=1;<br \/>\n       jj++;<br \/>\n       mbo=sin.options[i].value.split('|')[0];<br \/>\n       mlist+=mdelim + sin.options[i].value.split('|')[0];<br \/>\n       mdelim=',';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  if (jj == 1) {<br \/>\n    location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=') + '&mustbeone=' + encodeURIComponent(mbo)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('\/&','\/?');<br \/>\n  } else if (jj &gt; 1) {<br \/>\n    location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=').replace('videolist=','videoxxxlist=') + '&videolist=' + encodeURIComponent(mlist)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('\/&','\/?');<br \/>\n  }<br \/>\n  <font color=blue>if (jj == 0 && ajx == 0) {<br \/>\n    if (ajaxits.length &gt; 0) {<br \/>\n    var ep=prompt('Email moderation form to?', '');<br \/>\n    if (ep != null) { \/\/ep=''; }<br \/>\n    for (var iep=0; iep&lt;ajaxits.length; iep++) {<br \/>\n    \/\/alert(ajaxits[iep].replace(\"'')\", \"'\" + ep + \"')\"));<br \/>\n    eval(ajaxits[iep].replace(\"'')\", \"'\" + ep + \"')\"));<br \/>\n    }<br \/>\n    ajaxits=[];<br \/>\n    }<br \/>\n    } else {<br \/>\n    ajaxit(cfrom, cto, prompt('Email moderation form to?', ''));<br \/>\n    }<br \/>\n  }<\/font><br \/>\n}<br \/>\n\/\/ ... and then down at the bottom of the Javascript ...<br \/>\n<font color=blue><br \/>\n<br \/> <br \/>\n      if (cfrom.trim() != '' && cto.trim() != cfrom.trim()) {<br \/>\n        ajaxit(cfrom, ctitle, '');<br \/>\n      }<br \/>\n<br \/> <br \/>\n      setTimeout(ajaxitcheck, 120000);<br \/>\n<\/font><br \/>\n<\/code><\/p>\n<p>So, again, please try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\" title=\"Click picture\">the YouTube disco web application<\/a> (via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html---GETME\" title=\"dynamic_js.html\">dynamic_js.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html---GETME\" title=\"dynamic_js.htm\">this way<\/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\/youtube-embedded-iframe-api-video-unavailable-moderation-tutorial\/'>YouTube Embedded Iframe API Video Unavailable Moderation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='yteiapipot'>Previous relevant <a target=_blank title='YouTube Embedded Iframe API and the Promise Object Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-and-the-promise-object-tutorial\/'>YouTube Embedded Iframe API and the Promise Object Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Embedded Iframe API and the Promise Object Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dj_youtube_embed.jpg\" title=\"YouTube Embedded Iframe API and the Promise Object Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Embedded Iframe API and the Promise Object Tutorial<\/p><\/div>\n<p>There&#8217;s another environment in which we want to involve use of the <a target=_blank title='Promise object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_promise.asp'>promise object<\/a> following on from yesterday&#8217;s <a title='Promise Object Sleeping and Doing Primer Tutorial' href='#posdpt'>Promise Object Sleeping and Doing Primer Tutorial<\/a>, and that is with an inhouse web application using the <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> <a target=_blank title='Useful API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>Embedded Iframe API<\/a>.<\/p>\n<p>Today&#8217;s web application progress does not have to use the promise object, but we wanted to see if a layer of multitasking can work in the very event driven YouTube Vide Iframe Embedded API environment, and the verdict is &#8230;<\/p>\n<blockquote><p>\nYes\n<\/p><\/blockquote>\n<p>Today, though, the main extra functionality feature onto the Disco themed 3&#215;3 set of &#8220;active&#8221; YouTube video based table cells is &#8230;<\/p>\n<ul>\n<li>details\/summary element (set) &#8230;<\/li>\n<li>initially at top\/left but becoming &#8230;<br \/>\n<code><br \/>\n              document.getElementById('dprex').style.position='fixed';<br \/>\n              document.getElementById('dprex').style.backgroundColor='yellow';<br \/>\n              document.getElementById('dprex').style.border='1px dotted red';<br \/>\n              document.getElementById('dprex').style.opacity='0.8';<br \/>\n              document.getElementById('dprex').style.fontColor='blue';<br \/>\n              document.getElementById('dprex').style.fontSize='18px';<br \/>\n              document.getElementById('dprex').style.top='41%';<br \/>\n              document.getElementById('dprex').style.left='0px';<br \/>\n              document.getElementById('dprex').style.zIndex='20';<br \/>\n<\/code>\n<\/li>\n<li>containing content as per &#8230;\n<ol>\n<li>summary element contains latest timestamped play\/pause event information<\/li>\n<li>details element (user revealed) contains accumulated information (minus timestamp) above &#8230;<br \/>\n<code><br \/>\n&lt;details style=\"display: inline-block; position: fixed; background-color: yellow; border: 1px dotted red; opacity: 0.8; font-size: 18px; top: 41%; left: 0px; z-index: 20;\" id=\"dprex\"&gt;&lt;summary id=\"prex\"&gt;So long Michael Jackson - Billie Jean (Official Video) ... Mon Jul 26 2021 20:28:14 GMT+1000 (Australian Eastern Standard Time)..&lt;\/summary&gt;Enjoy watching and listening to Boney M. - Sunny (Official Video) [HD 1080p]&lt;br&gt;So long Boney M. - Sunny (Official Video) [HD 1080p]&lt;br&gt;Enjoy watching and listening to Boney M. - Sunny (Official Video) [HD 1080p]&lt;br&gt;So long Boney M. - Sunny (Official Video) [HD 1080p]&lt;br&gt;Enjoy watching and listening to Boney M. - Sunny (Official Video) [HD 1080p]&lt;br&gt;So long sweet Boney M. - Sunny (Official Video) [HD 1080p]&lt;br&gt;Enjoy watching and listening to Hot Chocolate - It Started With A Kiss (HD Live)&lt;br&gt;So long Hot Chocolate - It Started With A Kiss (HD Live)&lt;br&gt;Enjoy watching and listening to Hot Chocolate - It Started With A Kiss (HD Live)&lt;br&gt;So long sweet Hot Chocolate - It Started With A Kiss (HD Live)&lt;br&gt;Enjoy watching and listening to Bee Gees - Stayin' Alive (Official Video)&lt;br&gt;So long sweet Bee Gees - Stayin' Alive (Official Video)&lt;br&gt;Enjoy watching and listening to Earth, Wind &amp; Fire - September (Official Video)&lt;br&gt;So long sweet Earth, Wind &amp; Fire - September (Official Video)&lt;br&gt;Enjoy watching and listening to Michael Jackson - Billie Jean (Official Video)&lt;br&gt;So long sweet Michael Jackson - Billie Jean (Official Video)&lt;br&gt;Enjoy watching and listening to Yvonne Elliman If I can't have you 1977 16:9&lt;br&gt;So long sweet Yvonne Elliman If I can't have you 1977 16:9&lt;br&gt;Enjoy watching and listening to Anita Ward - \"Ring My Bell\" 1979&lt;br&gt;So long sweet Anita Ward - \"Ring My Bell\" 1979&lt;br&gt;Enjoy watching and listening to Boney M. - Sunny (Official Video) [HD 1080p]&lt;br&gt;Enjoy watching and listening to Boney M. - Sunny (Official Video) [HD 1080p]&lt;br&gt;So long sweet Boney M. - Sunny (Official Video) [HD 1080p]&lt;br&gt;So long Michael Jackson - Billie Jean (Official Video)&lt;br&gt;&lt;\/details&gt;<br \/>\n<\/code><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Also, after a first &#8220;play&#8221; click by the user, on non-mobile platforms, if the user keeps up a &#8220;one video playing at a time&#8221; paradigm, and the web application is in focus, the disco music videos can follow each other programmatically (as if you were listening to a playlist, or radio).<\/p>\n<p>So please try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\" title=\"Click picture\">the YouTube disco web application<\/a> (via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html---GETME\" title=\"dynamic_js.html\">dynamic_js.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html---GETME\" title=\"dynamic_js.html\">this way<\/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\/youtube-embedded-iframe-api-and-the-promise-object-tutorial\/'>YouTube Embedded Iframe API and the Promise Object Tutorial<\/a>.<\/p-->\n<hr>\n<p id='posdpt'>Previous relevant <a target=_blank title='Promise Object Sleeping and Doing Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/promise-object-sleeping-and-doing-primer-tutorial\/'>Promise Object Sleeping and Doing Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/await.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Promise Object Sleeping and Doing Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/full_of_promise.jpg\" title=\"Promise Object Sleeping and Doing Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Promise Object Sleeping and Doing Primer Tutorial<\/p><\/div>\n<p>We&#8217;re here today to fulfil yesterday&#8217;s <a title='Web Application Controlled Progress Cursor Primer Tutorial' href='#wacpcpt'>Web Application Controlled Progress Cursor Primer Tutorial<\/a>&#8216;s pledge &#8230;<\/p>\n<blockquote cite=''><p>\n &#8230; which reminded me that we need to learn some more about the <a target=_blank title='Promise object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_promise.asp'>promise object<\/a>\n<\/p><\/blockquote>\n<p> &#8230; and were happy to discover the Promise object talents of &#8230;<\/p>\n<ul>\n<li>sleeping &#8230; allowing for &#8230;<\/li>\n<li>multitasking<\/li>\n<li>doing &#8230; all using clientside Javascript<\/li>\n<\/ul>\n<p> &#8230; very interesting.  The serverside languages such as PHP make it a doddle to multitask (via sleep) but Javascript sleep has not always been a straightforward proposition, until we could <a target=_blank title='Promise object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_promise.asp'>promise<\/a>, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg'>that is<\/a>!<\/p>\n<p>Today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/await.html\">await.html<\/a>&#8216;s use of it to sleep and in between show &#8230;<\/p>\n<ol>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.htm\">analogue clock<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html\" title=\"Click picture\">Dams of the USA<\/a> (via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html-------GETME\" title=\"dams_usa.html\">dams_usa.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html-------GETME\" title=\"dams_usa.html\">this way<\/a>)<\/li>\n<\/ol>\n<p> &#8230; asynchronously both doing their own thing while the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/await.html\">await.html<\/a> works away in the background too, feeding off &#8220;child 2&#8221; clicks of &#8220;child 1&#8221; above to know when to say how long the dams took to load.  Yes, the &#8220;child 2&#8221; &#8220;onload&#8221; event, alone, cannot help determine this, but more &#8220;drilling into&#8221; the inner workings of the code behind &#8220;child 2&#8243;&#8216;s progress element, via &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nvar numsleeps=700000;<br \/>\nvar ix=0;<br \/>\nvar d=new Date();<br \/>\nvar marks=[new Date(), new Date()];<br \/>\nvar imark=0;<br \/>\n<br \/>\nfunction sleep(ms) {  \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/951021\/what-is-the-javascript-version-of-sleep' href='https:\/\/stackoverflow.com\/questions\/951021\/what-is-the-javascript-version-of-sleep'>https:\/\/stackoverflow.com\/questions\/951021\/what-is-the-javascript-version-of-sleep<\/a><br \/>\n  return new Promise(resolve =&gt; setTimeout(resolve, ms));<br \/>\n}<br \/>\n<br \/>\nasync function demo() {<br \/>\n  console.log(numsleeps + ' Taking a break...' + d);<br \/>\n  await sleep(2000);<br \/>\n  d=new Date();<br \/>\n  console.log(numsleeps + ' Two seconds later, showing sleep in a loop...' + d);<br \/>\n<br \/>\n  \/\/ Sleep in loop<br \/>\n  for (let i = 0; i &lt; 5; i++) {<br \/>\n    if (i === 3) {<br \/>\n      await sleep(2000);<br \/>\n  d=new Date();<br \/>\n    console.log(numsleeps + ' ' + d);<br \/>\n<br \/> <br \/>\n    }<br \/>\n  }<br \/>\n  numsleeps--;<br \/>\n  if (('' + numsleeps) != '0' && ('' + numsleeps).indexOf('-') == -1) { setTimeout(demo, 1); }<br \/>\n}<br \/>\n<br \/>\nfunction betw() {<br \/>\n  var seconds = (marks[1].getTime() - marks[0].getTime()) \/ 1000;<br \/>\n  document.getElementById('sh1').innerHTML='It took ' + seconds + ' seconds (from ' + marks[0] + ' to ' + marks[1] + ') to load the dams.';<br \/>\n  numsleeps=0;<br \/>\n}<br \/>\n<br \/>\nfunction markit() {<br \/>\n  marks[imark]=d;<br \/>\n  imark++;<br \/>\n  console.log('mark ' + imark + ': ' + d);<br \/>\n  if (imark == 2) { setTimeout(betw, 800);  imark=0;  }<br \/>\n}<br \/>\n<br \/>\ndemo();<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h1&gt;Sleeping and Doing via Promise Object - RJM Programming - July, 2021 &lt;span id=sh1&gt;&lt;\/span&gt;&lt;\/h1&gt;<br \/>\n&lt;table style=width:100%;height:90%;&gt;&lt;tr&gt;&lt;td&gt;&lt;iframe onclick=\"markit();\" id=lif src=.\/analogue_clock.htm style=width:100%;height:100%;&gt;&lt;\/iframe&gt;&lt;\/td&gt;&lt;td&gt;&lt;iframe id=rif src=.\/dams_usa.html?rand=7564675 style=width:100%;height:100%;&gt;&lt;\/iframe&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/promise-object-sleeping-and-doing-primer-tutorial\/'>Promise Object Sleeping and Doing Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wacpcpt'>Previous relevant <a target=_blank title='Web Application Controlled Progress Cursor Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/web-application-controlled-progress-cursor-primer-tutorial\/'>Web Application Controlled Progress Cursor Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Application Controlled Progress Cursor Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cursor_progress_between_a_first_and_second_javascript_prompt_popup_window.gif\" title=\"Web Application Controlled Progress Cursor Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Web Application Controlled Progress Cursor Primer Tutorial<\/p><\/div>\n<p>We had occasion to revisit the card game (and more) recent web application exploits highlighted in the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-card-game-cursor-tutorial\/' title='Just Javascript Card Game Cursor Tutorial'>Just Javascript Card Game Cursor Tutorial<\/a> thread of blog postings and shaped to play Bridge via &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara'>https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; and was &#8220;personally relatively&#8221; happy up to the first Javascript prompt popup window.   Huh?!  What&#8217;s with &#8220;personally relatively&#8221;?   Can I be serious?  Well, I&#8217;m insulted!<\/p>\n<p>The thing is, I don&#8217;t mind, when I&#8217;m writing the code <font size=1>(funny about that?!)<\/font> very complex and convoluted prompt window instructions and options. But &#8230;<\/p>\n<ul>\n<li>not everybody is willing to read such long diatribes<\/li>\n<li>actions can speak louder than words, so we figure between those first two prompt windows in a Bridge or 500 card game, it would be beneficial to show a &#8220;progress cursor&#8221; (ie. usually associated with the user waiting for a process to finish) between the first and second prompt windows to help show the players there could be waiting and irrelevant players turning away should all four players want to play fairly in their game<\/li>\n<\/ul>\n<p>It was an interesting Javascript coding exercise &#8230;<\/p>\n<ol>\n<li>(sort of) overload the &#8220;prompt&#8221; function with our inhouse &#8220;superprompt&#8221; function via &#8230;\n<ul>\n<li>globally replace &#8221; prompt(&#8221; with &#8221; superprompt(&#8220;<\/li>\n<li>globally replace &#8220;=prompt(&#8221; with &#8220;=superprompt(&#8220;<\/li>\n<\/ul>\n<\/li>\n<li>add the following Javascript code &#8230;<br \/>\n<code><br \/>\n  var aheadoffirst=(('' + document.URL.replace('?', '&').indexOf('&card_') != -1) ? trueize() : 0);<br \/>\n<br \/>\n  function dbcpp() {<br \/>\n    if (aheadoffirst == 2) {<br \/>\n      document.body.style.cursor='progress';  \/\/ between first and second prompt windows<br \/>\n      setTimeout(dbcpp, 1000);<br \/>\n    } else if (aheadoffirst == 0) {<br \/>\n      document.body.style.cursor='pointer';<br \/>\n    } else {<br \/>\n      document.body.style.cursor='pointer';<br \/>\n      setTimeout(dbcpp, 1000);<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function trueize() {  \/\/ bit like a promise<br \/>\n    setTimeout(dbcpp, 1000);<br \/>\n    return 1;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function superprompt(opone, optwo) {<br \/>\n    if (aheadoffirst == 3) {<br \/>\n      document.body.style.cursor='pointer';<br \/>\n      aheadoffirst=0;<br \/>\n    } else if (aheadoffirst != 0) {<br \/>\n      aheadoffirst++;<br \/>\n      if (aheadoffirst == 3) {<br \/>\n        document.body.style.cursor='progress'; \/\/ between first and second prompt windows<br \/>\n      }<br \/>\n    }<br \/>\n    return prompt(opone, optwo);<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; which reminded me that we need to learn some more about the <a target=_blank title='Promise object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_promise.asp'>promise object<\/a>.<\/p>\n<p>See this in action with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html-------------------------------------------------------GETME\" title=\"cards_usefocus.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html-------------------------------------------------------GETME\" title=\"cards_usefocus.html\">cards_usefocus.html<\/a> code behind the &#8220;Just Javascript&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=y\" title=\"Click picture\">Memories Card Game<\/a> or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?onewindow=y\" title=\"Click picture\">live run with single window (good for mobile)<\/a> or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html\" title=\"Click picture\">default live run<\/a> (for your platform, and if non-mobile it will try child popup windows).<\/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='#d52808' onclick='var dv=document.getElementById(\"d52808\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/prompt\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52808' 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='#d52815' onclick='var dv=document.getElementById(\"d52815\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/promise\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52815' 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='#d52822' onclick='var dv=document.getElementById(\"d52822\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52822' 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='#d52829' onclick='var dv=document.getElementById(\"d52829\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/moderation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52829' 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='#d52836' onclick='var dv=document.getElementById(\"d52836\"); 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='d52836' 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='#d52849' onclick='var dv=document.getElementById(\"d52849\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52849' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The progress on top of yesterday&#8217;s YouTube Embedded Iframe API Summary Emoji Buttons Tutorial&#8216;s progress today can be summarised by &#8230; select &#8220;multiple&#8221; (ie. dropdown element) size=[fullListShownNumber] mode with (option subelement &#8220;onclick=gmlistit(this);&#8221;) logic (&#10004; based) to consider the order of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-summary-singular-multiple-dropdown-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,37],"tags":[69,88,1614,174,257,2310,367,380,385,3606,2730,587,3351,652,2122,3025,849,1922,894,991,997,1915,1521,2357,3719,1893,1866,2359,2311,1319,1369,1493,2017],"class_list":["post-52849","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-api","tag-asynchronous","tag-button","tag-content","tag-details","tag-dropdown","tag-email","tag-emoji","tag-emoji-button","tag-formdata","tag-iframe","tag-inline-html-email","tag-javascript","tag-moderation","tag-multitasking","tag-object","tag-onerror","tag-overlay","tag-process","tag-programming","tag-progress","tag-progress-bar","tag-promise","tag-promise-object","tag-schedule","tag-select","tag-sleep","tag-summary","tag-tutorial","tag-video","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52849"}],"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=52849"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52849\/revisions"}],"predecessor-version":[{"id":52857,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52849\/revisions\/52857"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=52849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=52849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=52849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}