{"id":59785,"date":"2023-06-19T03:01:46","date_gmt":"2023-06-18T17:01:46","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59785"},"modified":"2023-06-18T18:25:36","modified_gmt":"2023-06-18T08:25:36","slug":"youtube-music-video-external-javascript-drag-genericization-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-music-video-external-javascript-drag-genericization-tutorial\/","title":{"rendered":"YouTube Music Video External Javascript Drag Genericization Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yacht_rock.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Music Video External Javascript Drag Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dragbit.gif\" title=\"YouTube Music Video External Javascript Drag Genericization Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube Music Video External Javascript Drag Genericization Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='YouTube Music Video External Javascript More Genericization Tutorial' href='#ytmvejmgt'>YouTube Music Video External Javascript More Genericization Tutorial<\/a>&#8216;s progress, today, we&#8217;ve &#8230;<\/p>\n<ul>\n<li>added recent GET argument functionalities &#8230;<br \/>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-music-video-external-javascript-more-genericization-tutorial\/'>\n<ul>\n<li>Mr Smith Goes To Washington &#8230; and, today, our newly compiled &#8230;<\/li>\n<li>Slow Classical Movements<\/li>\n<li>Movie Soundtracks<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; into the top dropdown, and as they go to window.<a target=_blank title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> also, the options to clear window.localStorage as requested by the user &#8230;<\/li>\n<li>non-mobile only <i>drag<\/i> like functionality to swap &#8220;Brady Bunch&#8221; roles <font size=1>(we all knew Alice was young at heart)<\/font> &#8230;<br \/>\n<code><br \/>\nvar curvalis=0;<br \/>\nvar neednine=0;<br \/>\nvar fromidis='', toidis='', lbd=false, latestidis='', trectis=null, prelatestidis='', tdvw=0, tdvh=0, tdoff=0, swapdone=false, tryfrom=9, preind=-1, lastind=-1;<br \/>\nvar nogocnt=0;<br \/>\nvar ouriframes=[], ouriftds=[];<br \/>\n<br \/>\nfunction getsquare(e) {<br \/>\n       var pos3=0, pos4=0, xoff=0, yoff=0;<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos3 = e.touches[0].pageX;<br \/>\n       pos4 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = e.touches[0].clientX;<br \/>\n       pos4 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos3 = e.clientX;<br \/>\n        pos4 = e.clientY;<br \/>\n       } else {<br \/>\n        pos3 = e.pageX;<br \/>\n        pos4 = e.pageY;<br \/>\n       }<br \/>\n       if (eval(pos3 - trectis.left) &gt;= eval('' + tdvw)) {<br \/>\n         xoff++;<br \/>\n         if (eval(pos3 - trectis.left) &gt;= eval(2 * eval('' + tdvw))) {<br \/>\n           xoff++;<br \/>\n         }<br \/>\n       }<br \/>\n       if (eval(pos4 - trectis.top) &gt;= eval('' + tdvh)) {<br \/>\n         yoff++;<br \/>\n         if (eval(pos4 - trectis.top) &gt;= eval(2 * eval('' + tdvh))) {<br \/>\n           yoff++;<br \/>\n         }<br \/>\n       }<br \/>\n       \/\/alert('xoff=' + xoff + ' and yoff=' + yoff);<br \/>\n       if (prelatestidis != ouriframes[eval(tdoff + yoff * 3 + xoff)].id && lbd) {<br \/>\n          if (prelatestidis != '') { fromidis=prelatestidis; }<br \/>\n          \/\/alert('Here in ' + ouriframes[eval(tdoff + yoff * 3 + xoff)].id + ' with button down=' + lbd + ' from ' + fromidis);<br \/>\n       }<br \/>\n       return ouriframes[eval(tdoff + yoff * 3 + xoff)].id;<br \/>\n}<br \/>\n<br \/>\nfunction iflaterdo() {<br \/>\n  ouriframes=document.getElementsByTagName('iframe');<br \/>\n  ouriftds=document.getElementsByTagName('td');<br \/>\n  trectis=document.getElementById('vplayer1').getBoundingClientRect();<br \/>\n  tdvw=trectis.width;<br \/>\n  tdvh=trectis.height;<br \/>\n  trectis=document.getElementsByTagName('table')[0].getBoundingClientRect();<br \/>\n  document.getElementsByTagName('table')[0].onmouseup=function(event) { if (event.which === 1) { lbd = false; fromidis=''; toidis='';  }  };<br \/>\n  document.getElementsByTagName('table')[0].onmousedown=function(event) {  if (event.which === 1) { lbd = true; if (fromidis == '') { fromidis=' '; } }  };<br \/>\n  document.getElementsByTagName('table')[0].onmousemove=function(event) {  if (event.which === 1) { lbd = true; if (fromidis == '') { fromidis=' '; }  } else {  lbd=false; } latestidis=getsquare(event); if (prelatestidis != latestidis) { prelatestidis=latestidis;   if (lbd) {  if (fromidis.trim() == '') { if (fromidis == ' ') { fromidis=latestidis; } } else if (lbd) { toidis=latestidis; swappos(fromidis, toidis); } } } };<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>make textbox placeholder and dropdown (ie. select) element advice stand out more via CSS property <a target=_blank title='CSS text-shadow property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_text-shadow.php'><i>text-shadow<\/i><\/a> &#8230;<br \/>\n<code><br \/>\n       if (document.getElementById('dshuffle')) {<br \/>\n        document.getElementById('dshuffle').innerHTML+='&lt;style&gt; select { text-shadow: -1px 1px 1px #e52dff; }  #rshuffle::placeholder { text-shadow: -1px 1px 1px #e52dff; }  #rshuffle:-ms-input-placeholder { text-shadow: -1px 1px 1px #e52dff; }  #rshuffle::-ms-input-placeholder { text-shadow: -1px 1px 1px #e52dff; }  &lt;\/style&gt;';<br \/>\n       }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_brady_bunch.js----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_brady_bunch.js----GETME\">youtube_brady_bunch.js<\/a> external Javascript featuring in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yacht_rock.html\">Yacht Rock<\/a>, for example.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-youtube-music-video-external-javascript-drag-genericization-tutorial\/'>YouTube Music Video External Javascript Drag Genericization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytmvejmgt'>Previous relevant <a target=_blank title='YouTube Music Video External Javascript More Genericization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-music-video-external-javascript-more-genericization-tutorial\/'>YouTube Music Video External Javascript More Genericization 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\/yacht_rock.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Music Video External Javascript More Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/msgtwinmore.jpg\" title=\"YouTube Music Video External Javascript More Genericization Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube Music Video External Javascript More Genericization Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='YouTube Music Video External Javascript Genericization Tutorial' href='#ytmvejgt'>YouTube Music Video External Javascript Genericization Tutorial<\/a> started our external Javascript genericizations with our Peer to Peer YouTube Web Application.  Some may find it irritating, but we even use <font color=blue>code like<\/font> &#8230;<\/p>\n<p><code><br \/>\n  if (document.getElementById('sshuffle')) {<br \/>\n    var ssos=document.getElementById('sshuffle').innerHTML.split('&lt;\/option&gt;');<br \/>\n    console.log('sshuffle option numbers=' + eval(-1 + ssos.length));<br \/>\n    if (eval(-1 + ssos.length) &lt;= 1) {<br \/>\n         <font color=blue>if (<a target=_blank title='Javascript typeof information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_typeof.asp'>typeof<\/a> process == \"function\") {<br \/>\n           nogocnt++;<br \/>\n           if (nogocnt &gt;= 3) { process(document.getElementById('sshuffle')); }<br \/>\n         }<\/font><br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; to have external Javascript look back at its hosting webpage&#8217;s code, rather than duplicating effort, especially for optional workflow functionality.  We don&#8217;t think it&#8217;s <i>so<\/i> bad, as we&#8217;d resiled ourselves to HTML iframe logic that looks back at its parent for clientside help, in the past.<\/p>\n<p>With us, it&#8217;s in large part Javascript <a target=_blank title='Javascript DOM' href='https:\/\/www.w3schools.com\/js\/js_htmldom.asp'>DOM<\/a> here, and DOM has that &#8230;<\/p>\n<p><code><br \/>\n \/\/ document.getElementById([elementId]).style.[CSSpropertyLessMinusBecomesCapital] = [value]; \/\/ eg .<br \/>\n document.getElementById('rshuffle').style.backgroundColor='#f9f9f9';<br \/>\n<\/code><\/p>\n<p> &#8230; ability to change the look of the webpage CSS styling.<\/p>\n<p>And external Javascript can be the &#8220;backup&#8221; system, as it checks to see whether it needs to help populate that shuffle functionality dropdown at the bottom of the webpage, in that code snippet above.<\/p>\n<p>The &#8220;right click&#8221; ideas of yesterday were okay for non-mobile, but not so much for mobile (where we now offer double click event functionality), and so <font color=blue>we recoded<\/font> &#8230;<\/p>\n<p><code><br \/>\n  if (document.getElementById('rshuffle')) {<br \/>\n    if (('' + document.getElementById('rshuffle').placeholder).indexOf(' click ') == -1) {<br \/>\n       betterhc=capitfl(document.URL.split('.htm')[0].split('\/')[eval(-1 + document.URL.split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' '));<br \/>\n       <font color=blue>if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n       document.getElementById('rshuffle').placeholder+=' ... double click for ' + decodeURIComponent(inpttls[curvalis]);<br \/>\n       document.getElementById('rshuffle').ondblclick=function(event) {  if (event.target.value == '') { event.target.value=inpvals[curvalis] + ',' + inpttls[curvalis]; event.target.blur(); }  };<br \/>\n       } else {<\/font><br \/>\n       document.getElementById('rshuffle').placeholder+=' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);<br \/>\n       document.getElementById('rshuffle').oncontextmenu=function(event) {  if (event.target.value == '') { event.target.value=inpvals[curvalis] + ',' + inpttls[curvalis]; event.target.blur(); }  };<br \/>\n       <font color=blue>}<\/font><br \/>\n       document.getElementById('rshuffle').style.backgroundColor='#f9f9f9';<br \/>\n    } else {<br \/>\n       var wascur=curvalis;<br \/>\n       curvalis++;<br \/>\n       if (curvalis &gt;= eval('' + inpvals.length)) { curvalis=0; }<br \/>\n       <font color=blue>if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n       if (curvalis != wascur && document.getElementById('rshuffle').placeholder.indexOf(' ... double click for ') != -1) {<br \/>\n        document.getElementById('rshuffle').placeholder=document.getElementById('rshuffle').placeholder.split(' ... double click for ')[0] + ' ... double click for ' + decodeURIComponent(inpttls[curvalis]);<br \/>\n       }<br \/>\n       } else {<\/font><br \/>\n       if (curvalis != wascur && document.getElementById('rshuffle').placeholder.indexOf(' ... right click (or two finger gesture) for ') != -1) {<br \/>\n        document.getElementById('rshuffle').placeholder=document.getElementById('rshuffle').placeholder.split(' ... right click (or two finger gesture) for ')[0] + ' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);<br \/>\n       }<br \/>\n       <font color=blue>}<\/font><br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p>Yesterday&#8217;s code had a curiosity, we were curious to know whether you were curious about <font size=1> &#8230; <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=truHqdF50Hg'>curiouser and curiouser<\/a><\/font> &#8230;<\/p>\n<blockquote><p>\nvar inpvals=[&#8216;zPv0S1-ETdI,qYf35nBq8Oo,Se3kxManWUY,i7hk-TupE5g,LnK0tnaNUag,dbH4Amzn-Rk,BL-Jg7CyqLQ,0v7Ea7kg2gA,NRjWEE0hmjQ&#8217;];<br \/>\nvar inpttls=[encodeURIComponent(&#8216;Mr Smith Goes To Washington&#8217;)];\n<\/p><\/blockquote>\n<p>Why use arrays for what is ostensibly scalar data?  Well, arrays are not much more bother to work with (ie. just {scalarName}[0] really), and they give scope to &#8230;<\/p>\n<ul>\n<li>remind the programmer of a future intention &#8230; and, in our case, today &#8230;<\/li>\n<li>immmediately start to use array data (ie. with [index] above [0] perhaps) &#8230;<br \/>\n<code><br \/>\nvar inpvals=['gZXKl36YS9k,HWqKPWO5T4o,AFa1-kciCb4,F2RnxZnubCM,3JWTaaS7LdU,U5zbcTxxz6M,hDaQF-LNrug,eFHdRkeEnpM,YnzgdBAKyJo,-p6OH7FoWoQ,057A1RdssoU,DhlPAj38rHc,yyV_eb3p3Zw,dfe8tCcHnKY,K69tbUo3vGs,_D0ZQPqeJkk,jA9NbU_R-y4,8XDB7GMnbUQ,z9_S411e9RI,X6ymVaq3Fqk,JYMySrHL0Fo,RuxHLzwlDY4,Wkr8iZlKaRk,4Yd2PzoF1y8,-9012SGz-yY,oXY5UWBmIFs,gCTeh8avZQI,78N2SP6JFaI,ntXJJwEk1NA','FtE3hoR_Nvo,W5IKT_xue4o,IfaGhyK78E8,BuN3yCmHb_U,TdiAwCPb_As,euZcUku9XiE,aMs0rNtBZJk,sUgoBb8m1eE,Pppexz-KKig,s-CpJpWm9Vs,2WfaotSK3mI,GKkeDqJBlK8,CvFH_6DNRCY,u-_hosF7TpI,IOWN5fQnzGk,YqVRcFQagtI', 'zPv0S1-ETdI,qYf35nBq8Oo,Se3kxManWUY,i7hk-TupE5g,LnK0tnaNUag,dbH4Amzn-Rk,BL-Jg7CyqLQ,0v7Ea7kg2gA,NRjWEE0hmjQ'];<br \/>\nvar inpttls=[encodeURIComponent('Movie Soundtracks'),encodeURIComponent('Slow Classical Movements'), encodeURIComponent('Mr Smith Goes To Washington')];<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>This teams with <i>time<\/i> as a dimension when you involve the <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout<\/a> and <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'>setInterval<\/a> delayed code Javascript functionalities, that can change that top textbox&#8217;s <i>placeholder<\/i> over time, and navigate accordingly, should the user decide to right click (or two finger gesture) that textbox among <font size=1>(so far)<\/font> &#8230;<\/p>\n<ul>\n<li>Mr Smith Goes To Washington &#8230; and, today, our newly compiled &#8230;<\/li>\n<li>Slow Classical Movements<\/li>\n<li>Movie Soundtracks<\/li>\n<\/ul>\n<p> &#8230; functionality options which use URL ? and &#038; GET argument methodologies to look up different YouTube video ID data sets, for content purposes via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_brady_bunch.js---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_brady_bunch.js---GETME\">youtube_brady_bunch.js<\/a> external Javascript featuring in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yacht_rock.html\">Yacht Rock<\/a>, for example.<\/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-music-video-external-javascript-more-genericization-tutorial\/'>YouTube Music Video External Javascript More Genericization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytmvejgt'>Previous relevant <a target=_blank title='YouTube Music Video External Javascript Genericization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-music-video-external-javascript-genericization-tutorial\/'>YouTube Music Video External Javascript Genericization 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\/yacht_rock.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Music Video External Javascript Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/msgtwin.jpg\" title=\"YouTube Music Video External Javascript Genericization Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube Music Video External Javascript Genericization Tutorial<\/p><\/div>\n<p>In yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-peering-disco-tutorial' title='The Wrecking Crew Peering Disco Tutorial'>The Wrecking Crew Peering Disco Tutorial<\/a> we praised the role of external Javascript in the current <a target=_blank title='YouTube IFrame Player API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube Music Video Peer to Peer web applications<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-peering-disco-tutorial'>\n<ul>\n<li>more twinning possibilities, easily applied, as per today\u2019s Stop Press<\/li>\n<li>generic <a target=\"_blank\" title=\"YouTube IFrame Player API\" href=\"https:\/\/developers.google.com\/youtube\/iframe_api_reference\">YouTube IFrame Player API<\/a> based music web application changes<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and it is that second more involved advantage we want to chase down today, and into the future.<\/p>\n<p>Today, we&#8217;ve made our first <i>only to external Javascript<\/i> generic changes, which flow through to the three parent web applications by &#8230;<\/p>\n<ul>\n<li>honing in on top textbox &#8230;<\/li>\n<li>improving its <i>placeholder<\/i> information &#8230; thereby &#8230;<\/li>\n<li>informing the user that a right click (or two finger gesture) will lead to <i>a list of comma separated YouTube video IDs<\/i>,<i>Title<\/i> <font size=1>(our first cab off the rank being title &#8220;Mr Smith Goes To Washington&#8221;)<\/font> being mapped onto the textbox&#8217;s value &#8230; then &#8230;<\/li>\n<li>[textboxObject].blur(); <font size=1>(ie. the <i>onblur<\/i> event logic is called)<\/font><\/li>\n<\/ul>\n<p> &#8230; via &#8230;<\/p>\n<p><code><br \/>\n\/\/ youtube_brady_bunch.js<br \/>\n\/\/ RJM Programming<br \/>\n\/\/ June, 2023<br \/>\n\/\/ Help out (eg. peer to peer twinning) ...<br \/>\nvar ptplisturls=['.\/the_wrecking_crew.html','.\/disco_version.html','.\/yacht_rock.html'];<br \/>\nvar newoptideas=[];<br \/>\nvar betterhc='', ourhc='';<br \/>\nvar ourhashis='';<br \/>\nvar curvalis=0;<br \/>\nvar inpvals=['zPv0S1-ETdI,qYf35nBq8Oo,Se3kxManWUY,i7hk-TupE5g,LnK0tnaNUag,dbH4Amzn-Rk,BL-Jg7CyqLQ,0v7Ea7kg2gA,NRjWEE0hmjQ'];<br \/>\nvar inpttls=[encodeURIComponent('Mr Smith Goes To Washington')];<br \/>\n<br \/>\nfunction newdecodeURIComponent(inbx) {<br \/>\n  if (ourhashis == '') {<br \/>\n  var inbxa=decodeURIComponent(inbx).split(',');<br \/>\n  \/\/alert(inbxa[eval(-1 + inbxa.length)]);<br \/>\n  if (inbxa[eval(-1 + inbxa.length)].length != 11 || inbxa[eval(-1 + inbxa.length)].indexOf(' ') != -1) {<br \/>\n    ourhashis=inbxa[eval(-1 + inbxa.length)];<br \/>\n    \/\/alert(ourhashis);<br \/>\n    if (typeof shuffle == \"function\") {<br \/>\n    return shuffle(decodeURIComponent(inbx).replace(',' + ourhashis,'').replace(ourhashis,''));<br \/>\n    } else {<br \/>\n    return decodeURIComponent(inbx).replace(',' + ourhashis,'').replace(ourhashis,'');<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n  return decodeURIComponent(inbx);<br \/>\n}<br \/>\n<br \/>\nvar ejcbl=location.search.split('videolist=')[1] ? newdecodeURIComponent(location.search.split('videolist=')[1].split('&')[0]) : '';<br \/>\nif (ejcbl == '') { ejcbl=location.search.split('alist=')[1] ? newdecodeURIComponent(location.search.split('alist=')[1].split('&')[0]) : '';  }<br \/>\n<br \/>\nfunction capitfl(intl) {<br \/>\n  var intwords=intl.split(' ');<br \/>\n  var outwords=intl;<br \/>\n  for (var mn=0; mn&lt;intwords.length; mn++) {<br \/>\n    outwords=outwords.replace(intwords[mn], intwords[mn].replace(intwords[mn].substring(0,1),intwords[mn].substring(0,1).toUpperCase()));<br \/>\n  }<br \/>\n  \/\/alert(outwords.replace(\/\\ Version$\/g, ''));<br \/>\n  return outwords.replace(\/\\ Version$\/g, '');<br \/>\n}<br \/>\n<br \/>\nfunction checksytitle() {<br \/>\n  var ols='';<br \/>\n  var vsbn=document.URL.split('.htm')[0].split('\/')[eval(-1 + document.URL.split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ');<br \/>\n  if (ourhc == '') {<br \/>\n  if (ejcbl.indexOf('|') != -1) {<br \/>\n    ourhc=ejcbl.split('|')[1];<br \/>\n  } else if (ourhashis != '') {<br \/>\n    ourhc=ourhashis.trim();<br \/>\n  } else if (('' + location.hash).replace('#','').replace('null','').replace('undefined','').trim() != '') {<br \/>\n    ourhc=decodeURIComponent(('' + location.hash).replace('#','').replace('null','').replace('undefined','').trim());<br \/>\n  }<br \/>\n  }<br \/>\n  if (document.getElementById('rshuffle')) {<br \/>\n    if (('' + document.getElementById('rshuffle').placeholder).indexOf(' click ') == -1) {<br \/>\n       betterhc=capitfl(document.URL.split('.htm')[0].split('\/')[eval(-1 + document.URL.split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' '));<br \/>\n       document.getElementById('rshuffle').placeholder+=' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);<br \/>\n       document.getElementById('rshuffle').oncontextmenu=function(event) {  if (event.target.value == '') { event.target.value=inpvals[curvalis] + ',' + inpttls[curvalis]; event.target.blur(); }  };<br \/>\n    } else {<br \/>\n       var wascur=curvalis;<br \/>\n       curvalis++;<br \/>\n       if (curvalis &gt;= eval('' + inpvals.length)) { curvalis=0; }<br \/>\n       if (curvalis != wascur && document.getElementById('rshuffle').placeholder.indexOf('') != -1) {<br \/>\n        document.getElementById('rshuffle').placeholder=document.getElementById('rshuffle').placeholder.split(' ... right click (or two finger gesture) for ')[0] + ' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n  if (!document.getElementById('selsytitle')) {<br \/>\n  if (document.getElementById('sytitle')) {<br \/>\n    var hc=document.getElementById('sytitle').innerHTML.replace(\/\\&nbsp\\;\/g,' ');<br \/>\n    ols='&lt;option value=\"' + document.URL + '\"&gt;' + (ourhc != '' ? ourhc : hc) + '&lt;\/option&gt;';<br \/>\n    \/\/alert(45);<br \/>\n    if (hc.toLowerCase().indexOf('&lt;select') == -1 || document.getElementById('syztitle')) {<br \/>\n    \/\/alert(145);<br \/>\n      for (var inb=0; inb&lt;ptplisturls.length; inb++) {<br \/>\n        if (ptplisturls[inb].toLowerCase().indexOf(hc.toLowerCase()) != -1) {<br \/>\n    console.log(ptplisturls[inb] + ' vs ' + hc);<br \/>\n          if (ols.indexOf('&gt;' + hc + '&lt;') == -1) {<br \/>\n          \/\/alert('why?');<br \/>\n          newoptideas.unshift('&lt;option value=\"' + ptplisturls[inb] + '\"&gt;' + (betterhc != '' ? betterhc : hc) + '&lt;\/option&gt;');<br \/>\n          }<br \/>\n        } else {<br \/>\n    console.log(ptplisturls[inb] + ' Vs ' + hc);<br \/>\n          if (ols.indexOf('&gt;' + capitfl(ptplisturls[inb].split('.htm')[0].split('\/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ')) + '&lt;') == -1) {<br \/>\n     console.log(ptplisturls[inb] + ' Vs1 ' + hc);<br \/>\n         if (ourhc != '' && (capitfl(ptplisturls[inb].split('.htm')[0].split('\/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ')).trim() + '&lt;').indexOf(ourhc + '&lt;') != -1) {<br \/>\n         ourhc=ourhc;<br \/>\n         } else {<br \/>\n  console.log('\"&gt;' + capitfl(ptplisturls[inb].split('.htm')[0].split('\/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ')) + '&lt;\/option&gt; versus ' + ourhc);<br \/>\n          newoptideas.push('&lt;option value=\"' + ptplisturls[inb] + '\"&gt;' + capitfl(ptplisturls[inb].split('.htm')[0].split('\/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ')) + '&lt;\/option&gt;');<br \/>\n    console.log(ptplisturls[inb] + ' Vs2 ' + hc + ' for ' + capitfl(ptplisturls[inb].split('.htm')[0].split('\/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ')));<br \/>\n          }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    if (eval('' + newoptideas.length) != 0) {<br \/>\n      for (var jnb=0; jnb&lt;newoptideas.length; jnb++) {<br \/>\n        ols+=newoptideas[jnb];<br \/>\n      }<br \/>\n      if (document.getElementById('syztitle')) {<br \/>\n      document.getElementById('syztitle').innerHTML+=ols;<br \/>\n      document.getElementById('sytitle').innerHTML+='&lt;span id=selsytitle&gt;&lt;\/span&gt;';<br \/>\n      setInterval(prunesyztitle, 4000);<br \/>\n      } else {<br \/>\n      document.getElementById('sytitle').innerHTML='&lt;select id=selsytitle onchange=\"location.href=this.value;\"&gt;' + ols + '&lt;\/select&gt;';<br \/>\n      }<br \/>\n      newoptideas=[];<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction prunesyztitle() {<br \/>\n      var lsc='', wasoptih='', newoptih='', opta=[], ynftl='youwillneverfindthis&lt;', ynfti=1, git='', ipn=0, lastw='';<br \/>\n            git='list' + ('000' + ynfti).slice(-3);<br \/>\n            lsc=('' + window.localStorage.getItem('list' + ('000' + ynfti).slice(-3))).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'');<br \/>\n            if (lsc == '') {<br \/>\n            git=('000' + ynfti).slice(-3) + 'list';<br \/>\n            lsc=('' + window.localStorage.getItem(('000' + ynfti).slice(-3) + 'list')).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'');<br \/>\n            \/\/alert('LSC=' + lsc);<br \/>\n            } \/\/else {<br \/>\n            \/\/alert('Lsc=' + lsc);<br \/>\n            \/\/<br \/>\n            \/\/alert('lsc=' + lsc);<br \/>\n      if (document.getElementById('syztitle')) {<br \/>\n        wasoptih=document.getElementById('syztitle').innerHTML;<br \/>\n        optsa=wasoptih.split('&lt;\/option&gt;');<br \/>\n        for (var iouy=0; iouy&lt;optsa.length; iouy++) {<br \/>\n          if (optsa[iouy].trim() != '') {<br \/>\n            if (newoptih.indexOf(optsa[iouy].trim().split('&gt;')[eval(-1 + optsa[iouy].trim().split('&gt;').length)]) == -1) {<br \/>\n              if (optsa[iouy].trim().indexOf('%20') == -1) { newoptih+=optsa[iouy].trim() + '&lt;\/option&gt;'; }<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        if ((newoptih != '' && wasoptih != '') || ourhashis != '') {<br \/>\n          if (eval('' + newoptih.length) &lt;= eval('' + wasoptih.length)) {<br \/>\n        \/\/alert(ourhashis + ' ... ' + eval('' + newoptih.length) + ' ... ' + eval('' + wasoptih.length));<br \/>\n            if (ourhashis != '') {<br \/>\n        \/\/alert('HeRe ' + ourhashis);<br \/>\n            while (lsc.trim() != '') {<br \/>\n              if (lsc.indexOf(encodeURIComponent(',' + ourhashis)) != -1 || lsc.indexOf(encodeURIComponent(encodeURIComponent(',' + ourhashis))) != -1 || lsc.indexOf(encodeURIComponent(encodeURIComponent(encodeURIComponent(',' + ourhashis)))) != -1) {<br \/>\n              ynftl=('000' + ynfti).slice(-3) + '&lt;';<br \/>\n              newoptih=newoptih.replace(ynftl,  ourhashis + '&lt;').replace(ynftl,  decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '&lt;');<br \/>\n              if (ynfti &gt; 1) {<br \/>\n          lastw='';<br \/>\n         for (ipn=0; ipn&lt;inpttls.length; ipn++) {<br \/>\n           lastw=decodeURIComponent(inpttls[ipn]).split(' ')[eval(-1 + decodeURIComponent(inpttls[ipn]).split(' ').length)];<br \/>\n           if ((lsc + '~!@') != lsc.replace((lastw + '~!@'),'')) {<br \/>\n            while (document.getElementById('syztitle').innerHTML.indexOf(git.replace('list','') + '&lt;') != -1) {<br \/>\n             ynfti=eval(0 - Math.abs(ynfti));<br \/>\n             document.getElementById('syztitle').innerHTML=document.getElementById('syztitle').innerHTML.replace(git.replace('list','') + '&lt;', decodeURIComponent(inpttls[ipn]) + '&lt;');<br \/>\n            }<br \/>\n           }<br \/>\n         }<br \/>\n              if (ynfti &gt;= 0) {<br \/>\n              window.localStorage.removeItem(git);<br \/>\n              if (git.indexOf('list') == 0) {<br \/>\n              window.localStorage.removeItem(git.replace('list','') + 'list');<br \/>\n              }<br \/>\n              }<br \/>\n              ynfti=Math.abs(ynfti);<br \/>\n<br \/> <br \/>\n              }<br \/>\n              \/\/alert(ynftl);<br \/>\n              } \/\/else {<br \/>\n              \/\/alert(ourhashis + ' ... ' + lsc);<br \/>\n              \/\/}<br \/>\n              ynfti++;<br \/>\n            git='list' + ('000' + ynfti).slice(-3);<br \/>\n              lsc=('' + window.localStorage.getItem('list' + ('000' + ynfti).slice(-3))).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'');<br \/>\n              if (lsc == '') {<br \/>\n            git=('000' + ynfti).slice(-3) + 'list';<br \/>\n              lsc=('' + window.localStorage.getItem(('000' + ynfti).slice(-3) + 'list')).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'');<br \/>\n              }<br \/>\n            }<br \/>\n            document.getElementById('syztitle').innerHTML=newoptih.replace(\/Your\\ List\\&lt;\/g, decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '&lt;').replace(ynftl,  decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '&lt;').replace(ynftl,  decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '&lt;');<br \/>\n            } else {<br \/>\n            document.getElementById('syztitle').innerHTML=newoptih;<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n<br \/> <br \/>\n        if (lsc != '') {<br \/>\n         lastw='';<br \/>\n         for (ipn=0; ipn&lt;inpttls.length; ipn++) {<br \/>\n           lastw=decodeURIComponent(inpttls[ipn]).split(' ')[eval(-1 + decodeURIComponent(inpttls[ipn]).split(' ').length)];<br \/>\n           if ((lsc + '~!@') != lsc.replace((lastw + '~!@'),'')) {<br \/>\n             document.getElementById('syztitle').innerHTML=document.getElementById('syztitle').innerHTML.replace(\/001\\&lt;\/g, decodeURIComponent(inpttls[ipn]) + '&lt;');<br \/>\n           }<br \/>\n         }<br \/>\n        }<br \/>\n        \/\/alert('LsC=' + lsc);<br \/>\n<br \/> <br \/>\n      }<br \/>\n}<br \/>\n<br \/>\nsetInterval(checksytitle, 8000);<br \/>\n<\/code><\/p>\n<p> &#8230; via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_brady_bunch.js--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_brady_bunch.js--GETME\">youtube_brady_bunch.js<\/a> external Javascript featuring in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yacht_rock.html\">Yacht Rock<\/a>, for example.<\/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='#d59762' onclick='var dv=document.getElementById(\"d59762\"); 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='d59762' 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='#d59767' onclick='var dv=document.getElementById(\"d59767\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59767' 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='#d59785' onclick='var dv=document.getElementById(\"d59785\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onmousemove\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59785' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Onto yesterday&#8217;s YouTube Music Video External Javascript More Genericization Tutorial&#8216;s progress, today, we&#8217;ve &#8230; added recent GET argument functionalities &#8230; Mr Smith Goes To Washington &#8230; and, today, our newly compiled &#8230; Slow Classical Movements Movie Soundtracks &#8230; into the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-music-video-external-javascript-drag-genericization-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":[49,88,1835,103,168,4363,4367,281,4139,290,4366,2170,354,2237,367,1683,380,400,409,471,4368,1533,3362,576,587,652,714,739,764,1830,795,2010,3987,1666,1922,2219,875,2411,3735,3440,914,2643,2362,1898,997,998,1866,1125,1126,2263,1200,1209,1212,1253,2567,1675,3435,1279,1282,3758,3739,1345,1369,1431,4365,1493,2017],"class_list":["post-59785","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-abc-702","tag-api","tag-arguments","tag-array","tag-buffer","tag-buffering","tag-comma-separated-list","tag-css","tag-cue","tag-data","tag-disco","tag-document-url","tag-dom","tag-drag","tag-dropdown","tag-dynamic","tag-email","tag-event","tag-external-javascript","tag-function","tag-gernericization","tag-get","tag-hardcoding","tag-html","tag-iframe","tag-javascript","tag-local-web-server","tag-mailto","tag-member","tag-method","tag-mobile","tag-object-oriented-programming","tag-oncontextmenu","tag-ondblclick","tag-onerror","tag-onmousemove","tag-oop","tag-parent","tag-pause","tag-peer","tag-peer-to-peer","tag-placeholder","tag-play","tag-playlist","tag-programming","tag-programming-tutorial","tag-select","tag-setinterval","tag-settimeout","tag-span","tag-stop-press","tag-style","tag-styling","tag-testing","tag-text-shadow","tag-textbox","tag-the-wrecking-crew","tag-time","tag-timer","tag-twin","tag-typeof","tag-url","tag-video","tag-wikipedia","tag-yacht-rock","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59785"}],"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=59785"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59785\/revisions"}],"predecessor-version":[{"id":59793,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59785\/revisions\/59793"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=59785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=59785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=59785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}