{"id":57459,"date":"2022-11-13T03:01:36","date_gmt":"2022-11-12T17:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=57459"},"modified":"2023-01-02T08:17:09","modified_gmt":"2023-01-01T22:17:09","slug":"one-image-website-vtt-tracks-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-vtt-tracks-tutorial\/","title":{"rendered":"One Image Website VTT Tracks Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral?audio=yes\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"One Image Website VTT Tracks Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/vtt_applied.jpg\" title=\"One Image Website VTT Tracks Tutorial\"  \/><\/a><p class=\"wp-caption-text\">One Image Website VTT Tracks Tutorial<\/p><\/div>\n<p>Using yesterday&#8217;s <a title='Ffmpeg Log Helper Towards VTT File Primer Tutorial' href='#flhtvttfpt'>Ffmpeg Log Helper Towards VTT File Primer Tutorial<\/a> VTT files we could choose to use &#8230;<\/p>\n<ul>\n<li>Audio and Video HTML element track cue functionality <a target=_blank title='VTT file information' href='https:\/\/www.google.com\/search?q=vtt+file&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=vtt+file&#038;aqs=chrome..69i57j0i512l4j69i60l3.1927j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>VTT<\/a> file interface <font size=1>&#8230; you can read more about at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-track-element-primer-tutorial\/' title='HTML5 Track Element Primer Tutorial'>HTML5 Track Element Primer Tutorial<\/a><\/font> &#8230; or &#8230;<\/li>\n<li>Develop a home grown [audioElement].<a target=_blank title='Media currentTime information from W3schools' href='https:\/\/www.w3schools.com\/tags\/av_prop_currenttime.asp'>currentTime<\/a> and <a target=_blank title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'>setInterval<\/a> arrangement<\/li>\n<\/ul>\n<p> &#8230; and, am sorry, but cannot award any points to those who chose the former, because &#8230; well &#8230; it&#8217;s doubtful we&#8217;d mention the second unless we&#8217;d done it.  And so the answer is &#8230; <strike>the former<\/strike> <font size=1>&#8230; down <a target=_blank title='?' href='http:\/\/www.rjmprogramming.com.au\/PHP\/nala.php' title='Nala'>Nala<\/a> &#8230;<\/font> the latter!<\/p>\n<p>Today&#8217;s blog posting is also a little story about the benefits of what we like to call <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/client-pre-emptive-iframe' title='Client pre-emptive iframe blog postings'><i>client pre-emptive iframe<\/i><\/a> logic, whereby we open an HTML iframe element, blazing away with its <i>src<\/i> attribute pointing at a URL that may or may not exist, and if it does, we do something about its content, usually, in the HTML iframe <i>onload<\/i> event logic.  In our case the URL is a VTT file suiting the One Image Website of relevance given the upload and renaming of the VTTs created using yesterday&#8217;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ffmpeg\/ffmpeg_log_to_vtt.php\">ffmpeg log to VTT file creator<\/a> web application.<\/p>\n<p>As a programmer who would like to pursue true track cue Javascript coding, develop the <i>function tracks<\/i> in the One Image Website index-ssmhalf.html you could View -&gt; Page Source from your favourite web browser, for any of &#8230;<\/p>\n<table>\n<tr>\n<th>Normal Run &#8230;<\/th>\n<th>Run for All Platforms that Presents an Audio Element You Can Play Immmediately<\/th>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\" title=\"Ephemeral\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/streetart\" title=\"Street Art\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\" title=\"The Commute\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\" title=\"The Inner 'Burbs\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/bygone\" title=\"Bygone\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thewest\" title=\"West\">&#8220;West&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip\" title=\"Walking Trip\">&#8220;Walking Trip&#8221;<\/a><\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral?audio=y\" title=\"Ephemeral\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/streetart?audio=y\" title=\"Street Art\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thecommute?audio=y\" title=\"The Commute\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo?audio=y\" title=\"The Inner 'Burbs\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/bygone?audio=y\" title=\"Bygone\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thewest?audio=y\" title=\"West\">&#8220;West&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip?audio=y\" title=\"Walking Trip\">&#8220;Walking Trip&#8221;<\/a><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; where, now, where the user plays music, perhaps continuously <font size=1>(like a radio)<\/font> with an HTML audio element play button press, the currently playing song, thanks to <a target=_blank href='http:\/\/www.freesoundtrackmusic.com' title='Royalty Free Music For Video'>Royalty Free Music For Video<\/a>, help you keep in touch with the song playing up at the web browser tab and the image title.<\/p>\n<p>This amounted to Javascript changes, <font color=blue>as per<\/font> &#8230;<\/p>\n<table>\n<tr>\n<th>index.htm &#8230;<\/th>\n<\/tr>\n<tr>\n<td><code style=font-size:8px;><br \/>\n<br \/>\n<font color=blue>var foreground=null; \/\/ and get rid of var in var foreground below<br \/>\nvar plusstuff='';<br \/>\n<br \/>\nfunction ftchange(tob) {<br \/>\n         plusstuff=' Playing ' + tob + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         if (document.getElementById('place').title.indexOf(' Playing ') == -1) {<br \/>\n           document.getElementById('place').title+=' Playing ' + tob + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         } else {<br \/>\n           document.getElementById('place').title=document.getElementById('place').title.split(' Playing ')[0] + ' Playing ' + tob + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         }<br \/>\n}<\/font><br \/>\n<br \/>\nfunction xonl() {<br \/>\n  if (!navigator.userAgent.match(\/iPhone|iPod|iPad\/i)<font color=blue> && document.URL.indexOf('?audio=') == -1<\/font>) {<br \/>\n    document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');<br \/>\n  } else {<br \/>\n    document.body.innerHTML+='&lt;iframe id=ifmusicone title=\"Play http:\/\/www.freesoundtrackmusic.com (thanks) Music Set on Loop Here\" src=\".\/index-ssmhalf.html?justmusic=00\" style=\"opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;\"&gt;&lt;\/iframe&gt;';<br \/>\n    document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';<br \/>\n    document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href;   };<br \/>\n    document.getElementById('thedivlink').target='_blank';<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction FadeInImage()<br \/>\n{<br \/>\n  <font color=blue><strike>var <\/strike><\/font> foreground=document.getElementById(\"place\");<br \/>\n  window.clearTimeout(\"FadeInImage('\" + \"place\" + \"')\");<br \/>\n  rotateImage(\"place\");<br \/>\n}<br \/>\n<br \/>\nfunction rotateImage(place) {<br \/>\n<br \/>\nwhile (number_of_image == 0)<br \/>\n{<br \/>\nplace = place;<br \/>\n}<br \/>\nxplace=place;<br \/>\n\/\/alert('yay2');<br \/>\n<br \/>\n  anotherNew();<br \/>\n<br \/>\n  <font color=blue><strike>var <\/strike><\/font> foreground=document.getElementById(place);<br \/>\n\/\/alert(place);<br \/>\n<br \/>\n  var thedivlink=document.getElementById(\"thedivlink\");<br \/>\n  var thediv=document.getElementById(\"thediv\");<br \/>\n<br \/>\n  if (foreground.width &gt; 0) {<br \/>\n  thedivlink.style.display = \"none\";<br \/>\n  thediv.style.display = \"none\";<br \/>\n  if (document.getElementById('ifmusicone')) {<br \/>\n    document.getElementById('ifmusicone').style.display='none';<br \/>\n  }<br \/>\n<br \/>\n\/\/alert('yay2a');<br \/>\n  var alink=document.getElementById(\"alink\");<br \/>\n  var xxxx=alink.href;<br \/>\n  if (xxxx.indexOf(\"mp3\") != -1)<br \/>\n  {<br \/>\n    \/\/alink.href=\"index-ssm.html\";<br \/>\n    \/\/alink.onclick=\"javascript:void(0);\";<br \/>\n<br \/>\n    alink.href=\"filewrite.php?id=session&name=\"+bigrandnumber+\"&ext=txt&rand=\"+bigrandnumber;<br \/>\n    alink.onclick=\"javascript:void(0);\";<br \/>\n    foreground.onclick=\"javascript:hasBeenClicked();\";<br \/>\n    foreground.title=\"Click for Bamboozled provided by http:\/\/www.freesoundtrackmusic.com\"<font color=blue> + plusstuff<\/font>;<br \/>\n<br \/>\n  }<br \/>\n  else<br \/>\n  {<br \/>\n  if (bigrandnumber &gt;= 0) {<br \/>\n  if (hasbeenclicked == 1 || NumOpen &gt; 0 || does_file_exist(\"session\",bigrandnumber,\"txt\"))<br \/>\n  {<br \/>\n    bigrandnumber = -1;<br \/>\n    alink.href=\"upload.php\";<br \/>\n    \/\/alink.onclick=\"javascript: window.open('index-ssm.html','Pyrmont, Ultimo - Inner Burbs - Soul Tracker Mechanism (via http:\/\/www.freesoundtrackmusic.com) - RJM Programming - http:\/\/www.rjmprogramming.com.au (Copyright &copy; 2011 rjmprogramming.com.au all rights reserved.)');\";<br \/>\n    alink.onclick = \"javascript:void(0);\";<br \/>\n    \/\/alink.ondblclick = \"javascript:void(0);\";<br \/>\n    foreground.title=\"Click for Upload functionality.\";<br \/>\n    alink.target = \"_blank\";<br \/>\n  }<br \/>\n  }<br \/>\n  }<br \/>\n  alink.target = \"_blank\";<br \/>\n  }<br \/>\n  else<br \/>\n  {<br \/>\n  thedivlink.style.display = \"block\";<br \/>\n  thediv.style.display = \"block\";<br \/>\n  }<br \/>\n<br \/>\n  SetOpacity(foreground,0.3);<br \/>\n\/\/ more rotateImage code follows<br \/>\n}<br \/>\n<\/code><\/td>\n<\/tr>\n<tr>\n<th>index-ssmhalf.html &#8230;<\/th>\n<\/tr>\n<tr>\n<td><code style=font-size:8px;><br \/>\n<font color=blue>var mycurt=-1;<br \/>\nvar vttcont='';<br \/>\nvar vtttitles=[];<br \/>\nvar vttstartsecs=[];<br \/>\nvar vttendsecs=[];<br \/>\nvar vttlastt='';<br \/>\n<br \/>\nfunction getct() {<br \/>\n   if (document.getElementById('myaudio')) {<br \/>\n     mycurt=document.getElementById('myaudio').currentTime;<br \/>\n     console.log('ct=' + mycurt);<br \/>\n     \/\/top.document.title='Current time = ' + mycurt;<br \/>\n     for (var jjk=0; jjk&lt;vtttitles.length; jjk++) {<br \/>\n       if (eval('' + mycurt) &gt;= eval(-0.0001 + eval('' + vttstartsecs[jjk])) && eval('' + mycurt) &lt;= eval(0.0001 + eval('' + vttendsecs[jjk]))) {<br \/>\n         if ((vttlastt != vtttitles[jjk] || vttlastt.trim() != vttlastt) || vttlastt.trim() != vtttitles[jjk] || vttlastt == '') {<br \/>\n         if (vttlastt.trim() != vtttitles[jjk]) { vttlastt=vtttitles[jjk]; } else {  vttlastt+=' ';  }<br \/>\n         console.log('ct title=' + vtttitles[jjk]);<br \/>\n         if (parent.document.title.indexOf(' - ') != -1) {<br \/>\n         var huhsare=parent.document.title.split(' - ');<br \/>\n         if (eval('' + huhsare.length) &gt;= 3) {<br \/>\n         parent.document.title=(parent.document.title.replace(' - ','`').split(' - ')[0] + ' - ' + 'Playing ' + vtttitles[jjk] + ' thanks to http:\/\/www.freesoundtrackmusic.com ').replace('`', ' - ');<br \/>\n         } else {<br \/>\n         parent.document.title=parent.document.title.split(' - ')[0] + ' - ' + 'Playing ' + vtttitles[jjk] + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         }<br \/>\n         if (parent.document.getElementById('place').title.indexOf(' Playing ') == -1) {<br \/>\n           parent.document.getElementById('place').title+=' Playing ' + vtttitles[jjk] + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         } else {<br \/>\n           parent.document.getElementById('place').title=parent.document.getElementById('place').title.split(' Playing ')[0] + ' Playing ' + vtttitles[jjk] + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         }<br \/>\n         parent.ftchange(vtttitles[jjk]);<br \/>\n         if (parent.document.getElementById('alink').title.indexOf(' Playing ') == -1) {<br \/>\n           parent.document.getElementById('alink').title+=' Playing ' + vtttitles[jjk] + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         } else {<br \/>\n           parent.document.getElementById('alink').title=parent.document.getElementById('alink').title.split(' Playing ')[0] + ' Playing ' + vtttitles[jjk] + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         }<br \/>\n         if (document.getElementById('myaudio').title.indexOf(' Playing ') == -1) {<br \/>\n           document.getElementById('myaudio').title+=' Playing ' + vtttitles[jjk] + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         } else {<br \/>\n           document.getElementById('myaudio').title=document.getElementById('myaudio').title.split(' Playing ')[0] + ' Playing ' + vtttitles[jjk] + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         }<br \/>\n         } else {<br \/>\n         parent.document.getElementById('place').title='Playing ' + vtttitles[jjk] + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         parent.document.getElementById('myaudio').title='Playing ' + vtttitles[jjk] + ' thanks to http:\/\/www.freesoundtrackmusic.com ';<br \/>\n         }<br \/>\n         }<br \/>\n      }<br \/>\n     }<br \/>\n   }<br \/>\n}<br \/>\n<br \/>\nfunction pushit() {<br \/>\n  var timings=vttcont.split(' --&gt; ');<br \/>\n  console.log('timings length=' + timings.length);<br \/>\n  if (eval('' + timings.length) == 1) {<br \/>\n  \/\/console.log('vttcont=' + vttcont);<br \/>\n    timings=vttcont.split(' --&gt; ');<br \/>\n  console.log('Timings length=' + timings.length);<br \/>\n  }<br \/>\n  var spares='',sparesa=[], jspare=0.0;<br \/>\n  var sparee='',spareea=[];<br \/>\n  var ispare=0, iifg=0, ifactor=1.0;<br \/>\n  var thistt='';<br \/>\n  if (eval('' + timings.length) &gt; 1) {<br \/>\n    for (var kkll=1; kkll&lt;timings.length; kkll++) {<br \/>\n      spares='';<br \/>\n      sparee=''<br \/>\n      ispare=0;<br \/>\n      while ((timings[kkll].substring(ispare).substring(0,1) &gt;= '0' && timings[kkll].substring(ispare).substring(0,1) &lt;= '9') || timings[kkll].substring(ispare).substring(0,1) == '.' || timings[kkll].substring(ispare).substring(0,1) == ':') {<br \/>\n        sparee+=timings[kkll].substring(ispare).substring(0,1);<br \/>\n        ispare++;<br \/>\n      }<br \/>\n      console.log('sparee=' + sparee + ' and ispare=' + ispare);<br \/>\n      while (timings[kkll].substring(ispare).substring(0,1) &lt;= String.fromCharCode(32)) {<br \/>\n        ispare++;<br \/>\n      }<br \/>\n      console.log('ispare=' + ispare);<br \/>\n      vtttitles.push(timings[kkll].substring(ispare).split(String.fromCharCode(10))[0].split('{')[0]);<br \/>\n      console.log('title=' + vtttitles[-1 + eval('' + vtttitles.length)]);<br \/>\n      spareea=sparee.split(':');<br \/>\n      ifactor=1.0;<br \/>\n      jspare=0.0;<br \/>\n      for (iifg=eval(-1 + eval('' + spareea.length)); iifg&gt;=0; iifg--) {<br \/>\n     console.log('iifg=' + iifg + ' via ' + spareea[iifg] + '!');<br \/>\n         jspare+=eval(ifactor * eval('' + spareea[iifg].replace(\/^0\/g,'')));<br \/>\n     console.log('Jspare=' + jspare);<br \/>\n       ifactor*=60;<br \/>\n      }<br \/>\n      vttendsecs.push(jspare);<br \/>\n      ispare=-1;<br \/>\n      console.log('jspare=' + jspare);<br \/>\n      while ((timings[-1 + kkll].slice(ispare).substring(0,1) &gt;= '0' && timings[-1 + kkll].slice(ispare).substring(0,1) &lt;= '9') || timings[-1 + kkll].slice(ispare).substring(0,1) == '.' || timings[-1 + kkll].slice(ispare).substring(0,1) == ':') {<br \/>\n        spares=timings[-1 + kkll].slice(ispare).substring(0,1) + spares;<br \/>\n        ispare--;<br \/>\n      }<br \/>\n      console.log('spares=' + spares);<br \/>\n      sparesa=spares.split(':');<br \/>\n      ifactor=1.0;<br \/>\n      jspare=0.0;<br \/>\n      for (iifg=eval(-1 + eval('' + sparesa.length)); iifg&gt;=0; iifg--) {<br \/>\n        jspare+=eval(ifactor * eval('' + sparesa[iifg].replace(\/^0\/g,'')));<br \/>\n        ifactor*=60;<br \/>\n      }<br \/>\n      vttstartsecs.push(jspare);<br \/>\n    }<br \/>\n<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction gotback(iois) {<br \/>\n  if (iois != null) {<br \/>\n    \/\/if (iois.src.indexOf('?placegeo=') != -1) {<br \/>\n    \/\/alert(1);<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    \/\/alert(11);<br \/>\n    if (aconto != null) {<br \/>\n    \/\/alert(111);<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n    \/\/alert(1111);<br \/>\n      if (aconto.body != null) {<br \/>\n        vttcont=aconto.body.innerHTML.replace('&lt;pre&gt;','').replace('&lt;\/pre&gt;','');<br \/>\n        pushit();<br \/>\n      }<br \/>\n    }<br \/>\n    \/\/}<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction tracks(iois) {<br \/>\n}<\/font><br \/>\n<br \/>\nfunction showScroll() {<br \/>\n  if (<font color=blue>(<\/font>navigator.userAgent.match(\/iPhone|iPod|iPad\/i)<font color=blue> || top.document.URL.indexOf('?audio=') != -1)<\/font> && ('' + document.referer).indexOf('index-') == -1 && document.URL.indexOf('justmusic') != -1) {<br \/>\n   document.getElementById('next').onclick=function() { image_index=image_index;  }<br \/>\n   document.getElementById('next').href='#' + document.getElementById('next').href.replace('Playing_with_Filters-Mike_Vekris', 'all');<br \/>\n   \/\/alert(document.getElementById('next').href);<br \/>\n   if (document.URL.indexOf('justmusic=0') != -1) {<br \/>\n   document.getElementById('next').innerHTML+='&lt;audio <font color=blue>onloadedmetadata=tracks(this); id=myaudio <\/font>title=\"Play http:\/\/www.freesoundtrackmusic.com (thanks) Music Set on Loop Here\" onclick=\" document.getElementById(' + \"'place'\" + ').style.visibility=' + \"'visible'\" + '; parent.document.body.setAttribute(' + \"'data-music','yes'\" + ');\" style=position:absolute;top:0px;left:0px; type=audio\/mp3 controls loop&gt;&lt;source type=audio\/mp3 src=sound\/all.mp3&gt;&lt;\/source&gt;<font color=blue>&lt;track kind=\"subtitles\" src=\"sound\/all.vtt\" srclang=\"en\"&gt;&lt;\/track&gt;<\/font>&lt;\/audio&gt;<font color=blue>&lt;iframe onload=gotback(this) src=sound\/all.vtt style=display:none;&gt;&lt;\/iframe&gt;<\/font>';<br \/>\n   } else {<br \/>\n   document.getElementById('next').innerHTML+='&lt;audio<font color=blue> onloadedmetadata=tracks(this); id=myaudio<\/font> onclick=\" document.getElementById(' + \"'place'\" + ').style.visibility=' + \"'visible'\" + ';\" style=position:absolute;top:50%;left:50%; type=audio\/mp3 controls loop data-ideanogo=autostart&gt;&lt;source type=audio\/mp3 src=sound\/all.mp3&gt;&lt;\/source&gt;<font color=blue>&lt;track kind=\"subtitles\" src=\"sound\/all.vtt\" srclang=\"en\"&gt;&lt;\/track&gt;<\/font>&lt;\/audio&gt;<font color=blue>&lt;iframe onload=gotback(this) src=sound\/all.vtt style=display:none;&gt;&lt;\/iframe&gt;<\/font>';<br \/>\n   }<br \/>\n   \/\/alert(document.getElementById('next').innerHTML);<br \/>\n   console.log(\"1\");<br \/>\n   \/\/var textTrackElem = document.getElementById(\"myaudio\");<br \/>\n   <font color=blue>mycurt=0;<br \/>\n   setInterval(getct, 2000);<\/font><br \/>\n   setTimeout(setvv, 30000);<br \/>\n  } else {<br \/>\n   document.getElementById('place').style.visibility='visible';<br \/>\n  }<br \/>\n  if (document.URL.indexOf('yesscroll' + 'check=') != -1 || document.head.innerHTML.indexOf('yesscr' + 'ollcheck=') != -1) {<br \/>\n  var oif=document.getElementById('iframeshowscrollxy');<br \/>\n  if (oif == null) {<br \/>\n   if (document.URL.indexOf('noscroll' + 'check=') == -1 && document.head.innerHTML.indexOf('noscr' + 'ollcheck=') == -1) {<br \/>\n    document.body.innerHTML+=\"&lt;iframe id='iframeshowscrollxy' style='display:none;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.html'&gt;&lt;\/iframe&gt;\";<br \/>\n   }<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/td>\n<\/tr>\n<\/table>\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\/one-image-website-vtt-tracks-tutorial\/'>One Image Website VTT Tracks Tutorial<\/a>.<\/p-->\n<hr>\n<p id='flhtvttfpt'>Previous relevant <a target=_blank title='Ffmpeg Log Helper Towards VTT File Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-log-helper-towards-vtt-file-primer-tutorial\/'>Ffmpeg Log Helper Towards VTT File 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\/ffmpeg\/ffmpeg_log_to_vtt.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ffmpeg Log Helper Towards VTT File Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ffmpeg\/ffmpeg_log_to_vtt.jpg\" title=\"Ffmpeg Log Helper Towards VTT File Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg Log Helper Towards VTT File Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='One Image Website iOS Radio Music One Less Tutorial' href='#oiwosrmolt'>One Image Website iOS Radio Music One Less Tutorial<\/a> set us on an &#8220;off to the side, but eventually forward&#8221; project that intertwines &#8230;<\/p>\n<ul>\n<li><a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a> <font size=1>&#8230; with its great logging and media concatenation talents, thanks &#8230;<\/font><\/li>\n<li>macOS <a target=_blank title='MacOS Terminal desktop app' href='https:\/\/www.google.com\/search?q=macos+terminal+apple&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=macos+terminal+apple&#038;aqs=chrome..69i57j0i512l4j0i22i30l5.8834j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>Terminal<\/a> desktop app <font size=1>&#8230; regarding its great GUI design feature allowing you to gather up actions of the past into a copy buffer via its <i>Edit -&gt; Find<\/i> functionality, thanks<\/font><\/li>\n<li>Audio and Video HTML element track cue functionality <a target=_blank title='VTT file information' href='https:\/\/www.google.com\/search?q=vtt+file&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=vtt+file&#038;aqs=chrome..69i57j0i512l4j69i60l3.1927j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>VTT<\/a> file interface <font size=1>&#8230; you can read more about at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-track-element-primer-tutorial\/' title='HTML5 Track Element Primer Tutorial'>HTML5 Track Element Primer Tutorial<\/a><\/font><\/li>\n<\/ul>\n<p>Don&#8217;t know about you, but have always found the creation of track data VTT files (and their predecessor SRT files) one of the most tedious jobs in programming?<\/p>\n<p>But the work of the day before yesterday&#8217;s <a title='One Image Website iOS Radio Music Tutorial' href='#oiwosrmt'>One Image Website iOS Radio Music Tutorial<\/a> and its <i>audio concatenation via ffmpeg<\/i> themes had us looking back, wistfully, back up our (macOS) Terminal (desktop apps) logging of a few days past, hoping for an escape from VTT file manual text editing for our wish to enhance our One Image Website work of recent days.  Wow, the ffmpeg logging was brilliant!<\/p>\n<p>There was enough there to program the creation of VTT files from the ffmpeg, and our &#8220;cd&#8221;<sub>ing<\/sub> and &#8220;ls&#8221;<sub>ing<\/sub> and other stuff, in the (let&#8217;s more accurately say, Terminal) logging.  Yayyyyy!<\/p>\n<p>And so we have an albeit <i>defaults very particular to my situation<\/i> in its HTML form textarea and input type=text textbox defaults (shown via <a target=_blank href='https:\/\/www.w3schools.com\/tags\/att_input_placeholder.asp#:~:text=Definition%20and%20Usage,the%20user%20enters%20a%20value.' title='HTML placeholder attribute'><i>placeholder<\/i><\/a> attributes), but we think it could be a tweakable basis for your own ffmpeg media concatenation work, perhaps, with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ffmpeg\/ffmpeg_log_to_vtt.php_GETME\" title='ffmpeg_log_to_vtt.php'>our first draft proof of concept<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ffmpeg\/ffmpeg_log_to_vtt.php\" title=\"Click picture\">ffmpeg logging, via Terminal, PHP helper towards VTT file creation<\/a>.<\/p>\n<p>If you click the light green form submit button, in the iframe way below, yourself, it will reveal, in details\/summary <font size=1>(<a target=_blank title='Reveal postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>reveal<\/a><sub>ing<\/sub>)<\/font> tags, both the input and output (VTT files) for you to see this more clearly, or to have it clicked for you in a new window, click this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/ffmpeg\/ffmpeg_log_to_vtt.php?submit=y'>button clicker incarnation<\/a>.  In the works of the HTML form below, for the first time we can remember, and because the defaults are so arcane, we developed <font color=blue>HTML form onsubmit logic<\/font> as per &#8230;<\/p>\n<p><code><br \/>\n&lt;form id=myform <font color=blue>onsubmit=\" var ins=document.getElementsByTagName('textarea'); if (document.getElementById(ins[0].id).value == '') { document.getElementById(ins[0].id).value=('' + document.getElementById(ins[0].id).placeholder); }   ins=document.getElementsByTagName('input'); for (var ii=0; ii&lt;ins.length; ii++) { if (document.getElementById(ins[ii].id).value == '' && document.getElementById(ins[ii].id).type == 'text') { document.getElementById(ins[ii].id).value=('' + document.getElementById(ins[ii].id).placeholder); } } return true;\"<\/font> action=.\/ffmpeg_log_to_vtt.php method=POST&gt;<br \/>\n&lt;textarea name=infile id=infile title='Or paste in your ffmpeg log file data' placeholder='all_bar_thecommute.txt' value='' style=\"background-color:yellow;\"&gt;&lt;\/textarea&gt;&lt;br&gt;&lt;br&gt;<br \/>\n&lt;table border=2 cellpadding=10 cellspacing=10&gt;<br \/>\n&lt;tr&gt;&lt;th&gt;Output Basename Prefixing Delimiter&lt;\/th&gt;&lt;th&gt;Output Basename Suffixing Delimiter&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td&gt;&lt;input name=inbasenameprefix id=inbasenameprefix type=text placeholder='user@Users-Air' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;td&gt;&lt;input name=inbasenamesuffix id=inbasenamesuffix type=text placeholder='% cd' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;table border=2 cellpadding=10 cellspacing=10&gt;<br \/>\n&lt;tr&gt;&lt;th&gt;Metadata Prefixing String&lt;\/th&gt;&lt;th&gt;Metadata Name Value Delimiter&lt;\/th&gt;&lt;th&gt;Metadata Title Value Case Insensitive Start String&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td&gt;&lt;input name=metaprefix id=metaprefix type=text placeholder='Metadata:' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;td&gt;&lt;input name=metadelimiter id=metadelimiter type=text placeholder=':' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;td&gt;&lt;input name=metatitleprefix id=metatitleprefix type=text placeholder='tit' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;table border=2 cellpadding=10 cellspacing=10&gt;<br \/>\n&lt;tr&gt;&lt;th&gt;Duration Prefixing String&lt;\/th&gt;&lt;th&gt;Duration Time Part Delimiter&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td&gt;&lt;input name=durationprefix id=durationprefix type=text placeholder='Duration:' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;td&gt;&lt;input name=durationdelimiter id=durationdelimiter type=text placeholder=':' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;br&gt;&lt;br&gt;&lt;br&gt;<br \/>\n&lt;input id=mysub type=submit value=\"Create VTTs\" style=\"background-color:lightgreen;\"&gt;&lt;\/input&gt;<br \/>\n&lt;\/form&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; as a way to deal with <i>arcane defaults<\/i>, where the encouragement is there for an interested programmer to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ffmpeg\/ffmpeg_log_to_vtt.php_GETME\" title='ffmpeg_log_to_vtt.php'>download PHP code<\/a> <font size=1>(perhaps to a <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> local Apache\/PHP\/mySql web server environment)<\/font> and tweak to their purposes.  Note that you can paste your own logging into the textarea as a way this PHP application can be useful even up at the RJM Programming domain &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/ffmpeg\/ffmpeg_log_to_vtt.php' style='width:100%;height:900px;'><\/iframe><\/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\/ffmpeg-log-helper-towards-vtt-file-primer-tutorial\/'>Ffmpeg Log Helper Towards VTT File Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oiwosrmolt'>Previous relevant <a target=_blank title='One Image Website iOS Radio Music One Less Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-ios-radio-music-one-less-tutorial\/'>One Image Website iOS Radio Music One Less Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/bygone\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"One Image Website iOS Radio Music One Less Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/bygone\/bygone_ios_music.jpg\" title=\"One Image Website iOS Radio Music One Less Tutorial\"  \/><\/a><p class=\"wp-caption-text\">One Image Website iOS Radio Music One Less Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='One Image Website iOS Radio Music Tutorial' href='#oiwosrmt'>One Image Website iOS Radio Music Tutorial<\/a> <a href='#dsp'>&#8220;Stop Press&#8221;<\/a> promised &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-ios-radio-music-tutorial\/'><p>\nFor tomorrow, we offer an optional <i>&#8220;one less click&#8221;<\/i>, <i>&#8220;one less window&#8221;<\/i> methodology improvement on the work above, as we transition the other &#8220;One Image Websites&#8221; over to the new iOS music paradigm.\n<\/p><\/blockquote>\n<p> &#8230; and so, it being <i>tomorrow<\/i> we&#8217;re here starting our discussion starting with the &#8220;one less window&#8221; thought.  Have a look at this table outlining some <font size=1>(off the top of the head)<\/font> clientside navigation techniques in two categories &#8230;<\/p>\n<table>\n<tr>\n<th>No new window created &#8230;<\/th>\n<th>New window created &#8230;<\/th>\n<\/tr>\n<tr>\n<td>window.open([URL],&#8217;_self&#8217;)<\/td>\n<td>window.open([URL],&#8217;_blank&#8217;)<\/td>\n<\/tr>\n<tr>\n<td>location.href=[URL]<\/td>\n<td>window.open([URL],&#8217;_top&#8217;)<\/td>\n<\/tr>\n<tr>\n<td>window.location=[URL]<\/td>\n<td>top.window.location=[URL];  \/\/ if in an iframe<\/td>\n<\/tr>\n<tr>\n<td>Ajax (with or without new FormData()) whether &#8216;GET&#8217; or &#8216;POST&#8217;<\/td>\n<td>form target=_blank action=[URL]<\/td>\n<\/tr>\n<tr>\n<td>form target=_self action=[URL]<\/td>\n<td>form target=_top action=[URL] \/\/ if in an iframe<\/td>\n<\/tr>\n<tr>\n<td>iframe srcdoc=[webpageHTML]<\/td>\n<td>form target=_parent action=[URL] \/\/ if in an iframe<\/td>\n<\/tr>\n<tr>\n<td>iframe src=[URL]<\/td>\n<td>parent.window.location=[URL];  \/\/ if in an iframe<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; and it&#8217;s that last left hand column <i>iframe src=[URL]<\/i> we like for the purposes of these changes today.  That new HTML iframe in the &#8220;One Image Website&#8221; index.htm supervisories <font color=purple>is now worked via<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction rotateImage(place) {<br \/>\n<br \/>\nwhile (number_of_image == 0)<br \/>\n{<br \/>\nplace = place;<br \/>\n}<br \/>\nxplace=place;<br \/>\n<br \/>\n  anotherNew();<br \/>\n<br \/>\n  var foreground=document.getElementById(place);<br \/>\n<br \/> <br \/>\n  var thedivlink=document.getElementById(\"thedivlink\");<br \/>\n  var thediv=document.getElementById(\"thediv\");<br \/>\n<br \/> <br \/>\n  if (foreground.width &gt; 0) {<br \/>\n  thedivlink.style.display = \"none\";<br \/>\n  thediv.style.display = \"none\";<br \/>\n  <font color=purple>if (document.getElementById('ifmusicone')) {<br \/>\n    document.getElementById('ifmusicone').style.display='none';<br \/>\n  }<\/font><br \/>\n\/\/<br \/>\n\/\/ more rotateImage code follows ...<br \/>\n\/\/<br \/>\n  }<br \/>\n\/\/<br \/>\n\/\/ more rotateImage code follows ...<br \/>\n\/\/<br \/>\n}<br \/>\n<br \/>\n<font color=blue>function xonl() {<br \/>\n  if (!navigator.userAgent.match(\/iPhone|iPod|iPad\/i)) {<br \/>\n    document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');<br \/>\n  } else {<br \/>\n    <font color=purple>document.body.innerHTML+='&lt;iframe id=ifmusicone title=\"Play http:\/\/www.freesoundtrackmusic.com (thanks) Music Set on Loop Here\" src=\".\/index-ssmhalf.html?justmusic=0\" style=\"opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;\"&gt;&lt;\/iframe&gt;';<\/font><br \/>\n    document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';<br \/>\n    document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href;   };<br \/>\n    document.getElementById('thedivlink').target='_blank';<br \/>\n  }<br \/>\n}<\/font><br \/>\n<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body id=\"body\" onload=' <font color=blue>xonl();<\/font> if (document.URL.indexOf(\"exif=\") != -1) { dexifit();  }  showScroll(); window.setTimeout(\"FadeInImage()\", 4000); '&gt;<br \/>\n&lt;div id=\"thediv\" style=\"display:block;\" &gt;<br \/>\n&lt;span&gt;&lt;a id=\"thedivlink\" style=\"display:inline-block;\" title=\"Click for Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com\" alt=\"The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" onclick=\"javascript: window.open('index-ssmhalf.html<font color=blue>?justmusic=<\/font>','The Commute  -  Soul Tracker Mechanism (via http:\/\/www.freesoundtrackmusic.com) - RJM Programming - http:\/\/www.rjmprogramming.com.au (Copyright &copy; 2011 rjmprogramming.com.au all rights reserved.)');\" alt=\"The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" title=\"Click for Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com\" <font color=blue>href=\"#\" data-<\/font>href=\"sound\/Prelude_Melody-Mike_Vekris.mp3\" &gt;The Commute - RJM Programming ... you might see this while loading ... <font color=blue>&amp;#127926;<\/font> click here now to just play music (Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery <font color=blue>&amp;#127926;<\/font> ... else please wait for full functionality ...&lt;\/a&gt; versus &lt;a onclick=huhit(); onmousedown=huhittwo(); style=display:inline-block;cursor:pointer;text-decoration:underline;&gt;Exif Run&lt;\/a&gt;&lt;\/span&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;a id=\"alink\" style=\"font-size:28px;background-color:yellow;\" onclick=\"javascript: window.open('index-ssmhalf.html','The Commute  -  Soul Tracker Mechanism (via http:\/\/www.freesoundtrackmusic.com) - RJM Programming - http:\/\/www.rjmprogramming.com.au (Copyright &copy; 2011 rjmprogramming.com.au all rights reserved.)'); disableHref();\" alt=\"The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" title=\"Click for Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com\" href=\"sound\/Prelude_Melody-Mike_Vekris.mp3\" &gt;<br \/>\n&lt;!--img border=0 id=\"place\" style=\"width: 2816px; height: 2120px;\" title=\"Click for Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com\" alt=\"The Commute - RJM Programming\" src=\"siteimage.jpg\" \/--&gt;<br \/>\n&lt;img border=0 id=\"place\" title=\"Click for Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com\" alt=\"The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" src=\"siteimage.jpg\" \/&gt;<br \/>\n&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; now, with the iOS platforms, presenting a new HTML <a target=_blank title='HTML audio element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_audio.asp'><i>audio<\/i><\/a> (<i>loop<\/i> attribute set) <font color=purple>in a slightly different incarnation<\/font> as per index-ssmhalf.html &#8230;<\/p>\n<p><code><br \/>\n<br \/>\nfunction nextPage()<br \/>\n{<br \/>\n  <font color=blue>if (navigator.userAgent.match(\/iPhone|iPod|iPad\/i) && ('' + document.referer).indexOf('index-') == -1 && document.URL.indexOf('justmusic') != -1) {<br \/>\n  image_index=image_index;<br \/>\n  } else {<\/font><br \/>\n  window.location = \"index-saf.html\";<br \/>\n  <font color=blue>}<\/font><br \/>\n}<br \/>\n<br \/>\n<font color=blue>function setvv() {<br \/>\n  document.getElementById('place').style.visibility='visible';<br \/>\n}<\/font><br \/>\n<br \/>\nfunction showScroll() {<br \/>\n  <font color=blue>if (navigator.userAgent.match(\/iPhone|iPod|iPad\/i) && ('' + document.referer).indexOf('index-') == -1 && document.URL.indexOf('justmusic') != -1) {<br \/>\n   document.getElementById('next').onclick=function() { image_index=image_index;  }<br \/>\n   document.getElementById('next').href='#' + document.getElementById('next').href.replace('Playing_with_Filters-Mike_Vekris', 'all');<br \/>\n   \/\/alert(document.getElementById('next').href);<br \/>\n   <font color=purple>if (document.URL.indexOf('justmusic=0') != -1) {<br \/>\n   document.getElementById('next').innerHTML+='&lt;audio title=\"Play http:\/\/www.freesoundtrackmusic.com (thanks) Music Set on Loop Here\" onclick=\" document.getElementById(' + \"'place'\" + ').style.visibility=' + \"'visible'\" + '; parent.document.body.setAttribute(' + \"'data-music','yes'\" + ');\" style=position:absolute;top:0px;left:0px; type=audio\/mp3 controls loop&gt;&lt;source type=audio\/mp3 src=sound\/all.mp3&gt;&lt;\/source&gt;&lt;\/audio&gt;';<br \/>\n   } else {<\/font><br \/>\n   document.getElementById('next').innerHTML+='&lt;audio onclick=\" document.getElementById(' + \"'place'\" + ').style.visibility=' + \"'visible'\" + ';\" style=position:absolute;top:50%;left:50%; type=audio\/mp3 controls loop&gt;&lt;source type=audio\/mp3 src=sound\/all.mp3&gt;&lt;\/source&gt;&lt;\/audio&gt;';<br \/>\n   <font color=purple>}<\/font><br \/>\n   \/\/alert(document.getElementById('next').innerHTML);<br \/>\n   setTimeout(setvv, 30000);<br \/>\n  } else {<br \/>\n  document.getElementById('place').style.visibility='visible';<br \/>\n  }<\/font><br \/>\n  if (document.URL.indexOf('yesscroll' + 'check=') != -1 || document.head.innerHTML.indexOf('yesscr' + 'ollcheck=') != -1) {<br \/>\n  var oif=document.getElementById('iframeshowscrollxy');<br \/>\n  if (oif == null) {<br \/>\n   if (document.URL.indexOf('noscroll' + 'check=') == -1 && document.head.innerHTML.indexOf('noscr' + 'ollcheck=') == -1) {<br \/>\n    document.body.innerHTML+=\"&lt;iframe id='iframeshowscrollxy' style='display:none;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.html'&gt;&lt;\/iframe&gt;\";<br \/>\n   }<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body id=\"body\" onload='showScroll(); window.setTimeout(\"rotateImage()\", 4000); '&gt;<br \/>\n&lt;a id=\"next\" onclick=\"javascript: window.open('index-safhalf.html','The Commute  -  Playing With Filters (via http:\/\/www.freesoundtrackmusic.com) - RJM Programming - http:\/\/www.rjmprogramming.com.au (Copyright &copy; 2011 rjmprogramming.com.au all rights reserved.)');\" title=\"\" href=\"sound\/Playing_with_Filters-Mike_Vekris.mp3\" &gt;<br \/>\n&lt;!--img border=0 id=\"place\" style=\"width: 2816px; height: 2120px;\" alt=\"DSCF1486\" src=\"DSCF1486.jpg\" \/--&gt;<br \/>\n&lt;img border=0 id=\"place\" alt=\"\" src=\"DSCF1486.jpg\" <font color=blue>style=visibility:hidden;<\/font> \/&gt;<br \/>\n&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; up towards the top right of the index.htm webpage when using an iOS platform.  It is optional whether the user &#8230;<\/p>\n<ul>\n<li>clicks Play button of that new top right <i>audio<\/i> element for continuous &#8220;looped audio track sets&#8221; mode of use with no new second window required <font size=1>(and so, no window focus changes and no second click required either)<\/font><\/li>\n<li>clicks blue link for continuous &#8220;looped audio track sets&#8221; mode of use with a new second window&#8217;s <i>audio<\/i> element that the user clicks the Play button of<\/li>\n<li>clicks none of those modes of use above that are offered for a short time to then click appropriately to start up music, optionally, as required, at a later date as possible<\/li>\n<\/ul>\n<p>So feel free to try a One Image Website in the list below &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\" title=\"Ephemeral\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/streetart\" title=\"Street Art\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\" title=\"The Commute\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\" title=\"The Inner 'Burbs\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/bygone\" title=\"Bygone\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thewest\" title=\"West\">&#8220;West&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip\" title=\"Walking Trip\">&#8220;Walking Trip&#8221;<\/a><\/li>\n<\/ul>\n<p> &#8230; where this new iOS music arrangement logic has been incorporated.<\/p>\n<p><i><b>Stop Press<\/b><\/i><\/p>\n<p>The <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/webpage-meta-refresh-primer-tutorial\/' title='Webpage Meta Refresh Primer Tutorial'>Webpage Meta Refresh Primer Tutorial<\/a> has reminded us of another left hand &#8220;No new window created&#8221; navigation methodology using the HTML meta &#8220;refresh&#8221; tag.<\/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\/one-image-website-ios-radio-music-one-less-tutorial\/'>One Image Website iOS Radio Music One Less Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oiwosrmt'>Previous relevant <a target=_blank title='One Image Website iOS Radio Music Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-ios-radio-music-tutorial\/'>One Image Website iOS Radio Music Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"One Image Website iOS Radio Music Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/thecommute\/thecommute_ios_music.jpg\" title=\"One Image Website iOS Radio Music Tutorial\"  \/><\/a><p class=\"wp-caption-text\">One Image Website iOS Radio Music Tutorial<\/p><\/div>\n<p>Did you read the recent <a title='Responsive Web Design Landing Page Image Map Tutorial' href='#rwdlpimt'>Responsive Web Design Landing Page Image Map Tutorial<\/a>?  Its core takeaway was the linking of One Image Website functionalities.   In these One Image Websites we&#8217;ve picked out a guinea pig &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\" title=\"The Commute\">\"The Commute\"<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; to have a day&#8217;s worth of experimenting trialling a solution to the &#8220;chestnut of a&#8221; problem getting iOS music to play continuously without supervision, like a radio program, albeit on a cycle of repeated content (set <font size=1>(such as the oneoffive.mp3 twooffive.mp3 threeoffive.mp3 fouroffive.mp3 fiveoffive.mp3 set of 5 tracks in example below)<\/font>).  Years ago <a target=_blank title='Apple' href='http:\/\/apple.com'>Apple<\/a>&#8216;s iOS started requiring a user click to validate the playing of media, hence the interest in today&#8217;s topic.<\/p>\n<p>The ingredients for the solution, and testing thereof, are &#8230;<\/p>\n<ul>\n<li>macOS <font size=1>command line<\/font> <a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a> &#8230; capable of &#8230;<\/li>\n<li>concatenating audio files &#8230; with command like &#8230;<br \/>\n<code><br \/>\n<br \/>&nbsp;<br \/>\nffmpeg -i oneoffive.mp3 -i twooffive.mp3 -i threeoffive.mp3 -i fouroffive.mp3 -i fiveoffive.mp3 -filter_complex \"[0:a][1:a]concat=n=5:v=0:a=1\" all.mp3<br \/>\n<br \/>&nbsp;<br \/>\n<\/code><br \/>\n &#8230; into &#8230;<\/li>\n<li>compilation audio &#8230; all.mp3 &#8230; uploaded to RJM Programming domain &#8230; is now called on &#8230;<\/li>\n<li>within an <a target=_blank title='HTML audio element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_audio.asp'><i>audio<\/i><\/a> tagged HTML element &#8230; with &#8230;<\/li>\n<li><a target=_blank title='Audio loop attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_audio_loop.asp#:~:text=Definition%20and%20Usage,every%20time%20it%20is%20finished.'><i>loop<\/i><\/a> attribute set &#8230; using as a device &#8230;<\/li>\n<li>an iPhone &#8230; teamed &#8230;<\/li>\n<li>optionally, <font size=1>(we&#8217;re just suggesting this headphone idea if you want to keep the music to yourself)<\/font> via <a target=_blank title='iOS bluetooth info' href='https:\/\/www.google.com\/search?q=ios+bluetooth&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=ios+bluetooth&#038;aqs=chrome..69i57j0i512l9.4956j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>Bluetooth<\/a>, with a set up involving a connection to a set of <a target=_blank title='AirPod by Apple' href='https:\/\/www.apple.com\/au\/airpods\/?afid=p238%7CsnPWWOZ70-dc_mtid_18707vxu38484_pcrid_630340112626_pgrid_46238741439_pntwk_g_pchan__pexid__&#038;cid=aos-au-kwgo-btb--slid---product-'>AirPod<\/a>s <font size=1>(and connected to your ears)<\/font> &#8230; are chosen as &#8230;<\/li>\n<li>the default speakers for sound &#8230; then use &#8230;<\/li>\n<li>web browser app such as Safari &#8230;<\/li>\n<li>into the address bar type\n<p><code><br \/>\n<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\" title=\"The Commute\">https:\/\/www.rjmprogramming.com.au\/thecommute<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; to arrive at the <i>calling window<\/i> &#8230;<\/li>\n<li>click the blue link up the top that appears for a short time &#8230; then &#8230;<\/li>\n<li>in the resultant new <i>music window<\/i> click the Audio play button presented <font size=1>(the point of interest being that this could be the last click required for continuous music playing, in that audio <i>loop<\/i>)<\/font> &#8230; music should play continuously and &#8230;<\/li>\n<li>if more interesting visuals are also required focus back to <i>calling window<\/i><\/li>\n<\/ul>\n<p>And given that the iPhone and AirPods are charged, and you don&#8217;t <i>charge<\/i> out of Bluetooth range with the iPhone, you could get that &#8220;radio feeling&#8221; out of an iOS user experience!<\/p>\n<p>Code changes, all just clientside HTML and Javascript, went &#8230;<\/p>\n<table>\n<tr>\n<th><i>calling window<i>&#8216;s index.htm <font color=blue>changes<\/font> around the document.body onload event area of interest &#127926; &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n<br \/>\n<font color=blue>function xonl() {<br \/>\n  if (!navigator.userAgent.match(\/iPhone|iPod|iPad\/i)) {<br \/>\n    document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');<br \/>\n  } else {<br \/>\n    document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';<br \/>\n    document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href;   };<br \/>\n    document.getElementById('thedivlink').target='_blank';<br \/>\n  }<br \/>\n}<\/font><br \/>\n<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body id=\"body\" onload=' <font color=blue>xonl();<\/font> if (document.URL.indexOf(\"exif=\") != -1) { dexifit();  }  showScroll(); window.setTimeout(\"FadeInImage()\", 4000); '&gt;<br \/>\n&lt;div id=\"thediv\" style=\"display:block;\" &gt;<br \/>\n&lt;span&gt;&lt;a id=\"thedivlink\" style=\"display:inline-block;\" title=\"Click for Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com\" alt=\"The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" onclick=\"javascript: window.open('index-ssmhalf.html<font color=blue>?justmusic=<\/font>','The Commute  -  Soul Tracker Mechanism (via http:\/\/www.freesoundtrackmusic.com) - RJM Programming - http:\/\/www.rjmprogramming.com.au (Copyright &copy; 2011 rjmprogramming.com.au all rights reserved.)');\" alt=\"The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" title=\"Click for Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com\" <font color=blue>href=\"#\" data-<\/font>href=\"sound\/Prelude_Melody-Mike_Vekris.mp3\" &gt;The Commute - RJM Programming ... you might see this while loading ... <font color=blue>&amp;#127926;<\/font> click here now to just play music (Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery <font color=blue>&amp;#127926;<\/font> ... else please wait for full functionality ...&lt;\/a&gt; versus &lt;a onclick=huhit(); onmousedown=huhittwo(); style=display:inline-block;cursor:pointer;text-decoration:underline;&gt;Exif Run&lt;\/a&gt;&lt;\/span&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;a id=\"alink\" style=\"font-size:28px;background-color:yellow;\" onclick=\"javascript: window.open('index-ssmhalf.html','The Commute  -  Soul Tracker Mechanism (via http:\/\/www.freesoundtrackmusic.com) - RJM Programming - http:\/\/www.rjmprogramming.com.au (Copyright &copy; 2011 rjmprogramming.com.au all rights reserved.)'); disableHref();\" alt=\"The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" title=\"Click for Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com\" href=\"sound\/Prelude_Melody-Mike_Vekris.mp3\" &gt;<br \/>\n&lt;!--img border=0 id=\"place\" style=\"width: 2816px; height: 2120px;\" title=\"Click for Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com\" alt=\"The Commute - RJM Programming\" src=\"siteimage.jpg\" \/--&gt;<br \/>\n&lt;img border=0 id=\"place\" title=\"Click for Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com\" alt=\"The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" src=\"siteimage.jpg\" \/&gt;<br \/>\n&lt;\/a&gt;<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th><i>music window<i>&#8216;s index-ssmhalf.html <font color=blue>changes<\/font> around the document.body onload event area of interest &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n<br \/>\nfunction nextPage()<br \/>\n{<br \/>\n  <font color=blue>if (navigator.userAgent.match(\/iPhone|iPod|iPad\/i) && ('' + document.referer).indexOf('index-') == -1 && document.URL.indexOf('justmusic') != -1) {<br \/>\n  image_index=image_index;<br \/>\n  } else {<\/font><br \/>\n  window.location = \"index-saf.html\";<br \/>\n  <font color=blue>}<\/font><br \/>\n}<br \/>\n<br \/>\n<font color=blue>function setvv() {<br \/>\n  document.getElementById('place').style.visibility='visible';<br \/>\n}<\/font><br \/>\n<br \/>\nfunction showScroll() {<br \/>\n  <font color=blue>if (navigator.userAgent.match(\/iPhone|iPod|iPad\/i) && ('' + document.referer).indexOf('index-') == -1 && document.URL.indexOf('justmusic') != -1) {<br \/>\n   document.getElementById('next').onclick=function() { image_index=image_index;  }<br \/>\n   document.getElementById('next').href='#' + document.getElementById('next').href.replace('Playing_with_Filters-Mike_Vekris', 'all');<br \/>\n   \/\/alert(document.getElementById('next').href);<br \/>\n   document.getElementById('next').innerHTML+='&lt;audio onclick=\" document.getElementById(' + \"'place'\" + ').style.visibility=' + \"'visible'\" + ';\" style=position:absolute;top:50%;left:50%; type=audio\/mp3 controls loop&gt;&lt;source type=audio\/mp3 src=sound\/all.mp3&gt;&lt;\/source&gt;&lt;\/audio&gt;';<br \/>\n   \/\/alert(document.getElementById('next').innerHTML);<br \/>\n   setTimeout(setvv, 30000);<br \/>\n  } else {<br \/>\n  document.getElementById('place').style.visibility='visible';<br \/>\n  }<\/font><br \/>\n  if (document.URL.indexOf('yesscroll' + 'check=') != -1 || document.head.innerHTML.indexOf('yesscr' + 'ollcheck=') != -1) {<br \/>\n  var oif=document.getElementById('iframeshowscrollxy');<br \/>\n  if (oif == null) {<br \/>\n   if (document.URL.indexOf('noscroll' + 'check=') == -1 && document.head.innerHTML.indexOf('noscr' + 'ollcheck=') == -1) {<br \/>\n    document.body.innerHTML+=\"&lt;iframe id='iframeshowscrollxy' style='display:none;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.html'&gt;&lt;\/iframe&gt;\";<br \/>\n   }<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body id=\"body\" onload='showScroll(); window.setTimeout(\"rotateImage()\", 4000); '&gt;<br \/>\n&lt;a id=\"next\" onclick=\"javascript: window.open('index-safhalf.html','The Commute  -  Playing With Filters (via http:\/\/www.freesoundtrackmusic.com) - RJM Programming - http:\/\/www.rjmprogramming.com.au (Copyright &copy; 2011 rjmprogramming.com.au all rights reserved.)');\" title=\"\" href=\"sound\/Playing_with_Filters-Mike_Vekris.mp3\" &gt;<br \/>\n&lt;!--img border=0 id=\"place\" style=\"width: 2816px; height: 2120px;\" alt=\"DSCF1486\" src=\"DSCF1486.jpg\" \/--&gt;<br \/>\n&lt;img border=0 id=\"place\" alt=\"\" src=\"DSCF1486.jpg\" <font color=blue>style=visibility:hidden;<\/font> \/&gt;<br \/>\n&lt;\/a&gt;<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; and off up to the RJM Programming domain as <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\" title=\"The Commute\">&#8220;The Commute&#8221;<\/a>, with music courtesy of the generous <a target=_blank title='Free Soundtrack Music' href='http:\/\/www.freesoundtrackmusic.com'>Royalty Free Music For Video<\/a>, thanks.<\/p>\n<div id=dsp><\/div>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>For tomorrow, we offer an optional <i>&#8220;one less click&#8221;<\/i>, <i>&#8220;one less window&#8221;<\/i> methodology improvement on the work above, as we transition the other &#8220;One Image Websites&#8221; over to the new iOS music paradigm.<\/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-responsive-web-design-landing-page-image-map-tutorial\/'>One Image Website iOS Radio Music Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rwdlpimt'>Previous relevant <a target=_blank title='Responsive Web Design Landing Page Image Map Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-image-map-tutorial\/'>Responsive Web Design Landing Page Image Map Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Responsive Web Design Landing Page Image Map Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/responsive_more_image_map.jpg\" title=\"Responsive Web Design Landing Page Image Map Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Web Design Landing Page Image Map Tutorial<\/p><\/div>\n<p>The recent <a title='Responsive Web Design Landing Page Incarnation Tutorial' href='#rwdlpit'>Responsive Web Design Landing Page Incarnation Tutorial<\/a> said &#8230;<\/p>\n<blockquote cite=''><p>\nSo, why keep the old way?  Well, we packed the &#8220;old way&#8221; with content rich functionality, and do not want to ditch that yet, but maybe over time?!\n<\/p><\/blockquote>\n<p>We&#8217;re just <i>over<\/i> time, aren&#8217;t you?!  And so, we arrive at a <i>long planned for<\/i> tilt at <a target=_blank title='Image Map information from W3schools' href='https:\/\/www.w3schools.com\/html\/html_images_imagemap.asp'>Image Map<\/a> functionality that we often turn to <a target=_blank title='Mobilefish.Com and its excellent Image Map Creation' href='https:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>Mobilefish.Com and its excellent Image Map Creation<\/a> to help us out &#8230; but not today?!  Why not?  We have a funny set of needs, they being &#8230;<\/p>\n<ul>\n<li>our Image Map&#8217;s image will have a variable set of width x height dimensions &#8230;<\/li>\n<li>our Image Map&#8217;s image will be transparent<\/li>\n<li>our Image Map needs to have a hole left aside inside it where the functionality that originally existed <font size=1>(and pointed to WordPress Blog content like you are reading)<\/font>, is still working<\/li>\n<\/ul>\n<p> &#8230; the last condition of which we realized, down the track, required us to create four Image Maps.   But &#8230; but &#8230; <a target=_blank title='?' href='http:\/\/www.rjmprogramming.com.au\/PHP\/nala.php' title='Nala'>Nala<\/a> hears you say?!<\/p>\n<p>Yes, we can reference the one image, in its data URL guise, as a smaller, or not, version of itself, by specifying CSS properties &#8230;<\/p>\n<ul>\n<li>position:absolute; <font size=1>(our usual for overlay scenarios)<\/font><\/li>\n<li>z-index:56; <font size=1>(for both transparent image and its associated Image Map &#8230; more on this later)<\/font><\/li>\n<li>left <font size=1>(to appropriately position in X to be in the relevant section of dark green Image Map overlaying in the Landing Page)<\/font><\/li>\n<li>top <font size=1>(to appropriately position in Y to be in the relevant section of dark green Image Map overlaying in the Landing Page)<\/font><\/li>\n<li><i>width<\/i> <font size=1>(which will be up to the transparent image width)<\/font><\/li>\n<li><i>height<\/i> <font size=1>(which will be up to the transparent image height)<\/font><\/li>\n<\/ul>\n<p> &#8230; and no concern about <i>opacity<\/i> given the transparent image and <i>z-index<\/i> considerations, here.<\/p>\n<p>So, how can we involve a transparent image here?   Well, that is where the new <i>Responsive Web Design Landing Page<\/i> being PHP, though up to today it had contained no PHP, is in our favour.  We can use PHP&#8217;s <a target=_blank title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php'>GD<\/a> <font color=blue>to create one<\/font>, <font color=purple>grab its associated data URL<\/font> and <font color=brown>tidy up<\/font>, and constructing the four image and associated Image Map HTML elements populated, in its &#8220;child iframe&#8221;, and <font color=red>sending back up<\/font> into the &#8220;parent webpage&#8217;s&#8221; new &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;div id=divimif&gt;&lt;\/div&gt;<br \/>\n&lt;iframe style='display:none;' id=myimif src=&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt; <\/p>\n<p> &#8230; placed at the bottom of the Landing Page body element, and used <font color=darkgreen>in the changed<\/font> document.body <i>onload<\/i> event Javascript function &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function onl() {<br \/>\n    if (eval('' + screen.width) &lt;= 420) {<br \/>\n       \/\/alert(screen.width);<br \/>\n       document.getElementById('topspan').innerHTML=document.getElementById('topspan').innerHTML.replace('RJM Programming', 'RJM&lt;\/h1&gt;&lt;h1&gt;Programming').replace(\/\\&lt;\\\/hJUNK1\/g, '&lt;\/h2');<br \/>\n    } \/\/else if (eval('' + screen.width) &lt;= 480) {<br \/>\n       \/\/alert('0' + screen.width);<br \/>\n    \/\/}<br \/>\n    <font color=darkgreen>var myiz=document.getElementById('ifzero').getBoundingClientRect();<br \/>\n    var myhr=document.getElementById('myheader').getBoundingClientRect();<br \/>\n    var myh=eval('' + myhr.height);<br \/>\n    var myt=eval('' + myhr.top);<br \/>\n    var widthleft=eval(eval('' + myiz.left) - eval('' + myhr.left));<br \/>\n    var widthmiddle=eval('' + myiz.width);<br \/>\n    var widthright=eval(eval('' + myhr.width) - eval('' + myiz.width) - eval('' + myiz.left));<br \/>\n    if (document.getElementById('navTop')) {<br \/>\n      var myalthr=document.getElementById('navTop').getBoundingClientRect();<br \/>\n      myh-=eval('' + myalthr.height);<br \/>\n      myt=eval('' + myalthr.height);<br \/>\n    }<br \/>\n    var heighttop=eval(eval('' + myiz.top) - eval('' + myt));<br \/>\n    var heightmiddle=eval('' + myiz.height);<br \/>\n    var heightbottom=eval(eval('' + myh) - eval('' + myiz.height)); \/\/ - eval('' + myiz.top));<br \/>\n    if (window.parent != window) {<br \/>\n    myh=myh;<br \/>\n    } else if (('' + window.opener).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) {<br \/>\n    myh=myh;<br \/>\n    } else if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPaJUNKd|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    myh=myh;<br \/>\n    } else {<br \/>\n    document.getElementById('myimif').src=document.URL.split('?')[0].split('#')[0] + '?left=' + myhr.left + '&top=' + myt + '&width=' + myhr.width + '&height=' + myh + '&ifleft=' + myiz.left + '&iftop=' + myiz.top + '&ifwidth=' + myiz.width + '&ifheight=' + myiz.height + '&widthleft=' + widthleft + '&widthmiddle=' + widthmiddle + '&widthright=' + widthright + '&heighttop=' + heighttop + '&heightmiddle=' + heightmiddle + '&heightbottom=' + heightbottom;<br \/>\n    setTimeout(imbit, 5000);<br \/>\n    }<\/font><br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; to call on that new PHP &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  if (isset($_GET['left']) && isset($_GET['top']) && isset($_GET['width']) && isset($_GET['height'])) {<br \/>\n    $uw=\"\";<br \/>\n    $postuw=\"\";<br \/>\n    $uw1=\"\";<br \/>\n    $postuw1=\"\";<br \/>\n    $uw2=\"\";<br \/>\n    $postuw2=\"\";<br \/>\n    $uw3=\"\";<br \/>\n    $postuw3=\"\";<br \/>\n    if (isset($_GET['widthleft']) && isset($_GET['widthmiddle']) && isset($_GET['widthright']) && isset($_GET['heighttop']) && isset($_GET['heightmiddle']) && isset($_GET['heightbottom'])) {<br \/>\n      $uw=\" usemap=#workmap\";<br \/>\n      $uw1=\" usemap=#workmap1\";<br \/>\n      $uw2=\" usemap=#workmap2\";<br \/>\n      $uw3=\" usemap=#workmap3\";<br \/>\n<br \/>\n      $postuw=\"&lt;map name=workmap style=z-index:56;&gt;\";<br \/>\n      $postuw1=\"&lt;map name=workmap1 style=z-index:56;&gt;\";<br \/>\n      $postuw2=\"&lt;map name=workmap2 style=z-index:56;&gt;\";<br \/>\n      $postuw3=\"&lt;map name=workmap3 style=z-index:56;&gt;\";<br \/>\n<br \/>\n      $postuw.=\"&lt;area shape=rect title=Ephemeral onmouseover=omoiset(1); onmouseout=omoiset(-2); coords=0,0,\" . explode('.',$_GET['widthleft'])[0] . \",\" . explode('.',$_GET['heighttop'])[0] . \" alt=LeftTop onclick=ouralert(1); target=_blank href=\/\/www.rjmprogramming.com.au\/ephemeral \/&gt;\";<br \/>\n      $postuw.=\"&lt;area shape=rect title=StreetArt onmouseover=omoiset(2); onmouseout=omoiset(-2); coords=\" . explode('.',$_GET['widthleft'])[0] . \",0,\" . explode('.',($_GET['widthleft'] + $_GET['widthmiddle']))[0] . \",\" . explode('.',$_GET['heighttop'])[0] . \" alt=CenterTop onclick=ouralert(2); target=_blank href=\/\/www.rjmprogramming.com.au\/streetart \/&gt;\";<br \/>\n      $postuw.=\"&lt;area shape=rect title=TheCommute onmouseover=omoiset(3); onmouseout=omoiset(-2); coords=\" . explode('.',($_GET['widthleft'] + $_GET['widthmiddle']))[0] . \",0,\" . explode('.',$_GET['width'])[0] . \",\" . explode('.',$_GET['heighttop'])[0] . \" alt=RightTop onclick=ouralert(3);  target=_blank href=\/\/www.rjmprogramming.com.au\/thecommute \/&gt;\";<br \/>\n<br \/>\n      $postuw1.=\"&lt;area id=area4 title=? onmouseover=omoiset(4); onmouseout=omoiset(-1); shape=rect coords=0,0,\" . explode('.',$_GET['widthleft'])[0] . \",\" . explode('.',(0 + $_GET['heightmiddle']))[0] . \" alt=LeftMiddle onclick=ouralert(4); target=_blank nohref \/&gt;\";<br \/>\n      $postuw2.=\"&lt;area id=area6 title=? onmouseover=omoiset(6); onmouseout=omoiset(-1); shape=rect coords=0,0,\" . explode('.',$_GET['widthright'])[0] . \",\" . explode('.',(0 + $_GET['heightmiddle']))[0] . \" alt=RightMiddle onclick=ouralert(6); target=_blank nohref \/&gt;\";<br \/>\n<br \/>\n      $postuw3.=\"&lt;area shape=rect title=InnerBurbs onmouseover=omoiset(7); onmouseout=omoiset(-2); coords=0,0,\" . explode('.',$_GET['widthleft'])[0] . \",\" . explode('.',$_GET['heightbottom'])[0] . \" alt=LeftBottom onclick=ouralert(7);  target=_blank href=\/\/www.rjmprogramming.com.au\/pyrmontultimo \/&gt;\";<br \/>\n      $postuw3.=\"&lt;area shape=rect title=Bygone onmouseover=omoiset(8); onmouseout=omoiset(-2); coords=\" . explode('.',$_GET['widthleft'])[0] . \",0,\" . explode('.',($_GET['widthleft'] + $_GET['widthmiddle']))[0] . \",\" . explode('.',$_GET['heightbottom'])[0] . \" alt=CenterBottom onclick=ouralert(8);  target=_blank href=\/\/www.rjmprogramming.com.au\/bygone \/&gt;\";<br \/>\n      $postuw3.=\"&lt;area shape=rect title=West onmouseover=omoiset(9); onmouseout=omoiset(-2); coords=\" . explode('.',($_GET['widthleft'] + $_GET['widthmiddle']))[0] . \",0,\" . explode('.',$_GET['width'])[0] . \",\" . explode('.',$_GET['heightbottom'])[0] . \" alt=RightBottom onclick=ouralert(9);  target=_blank href=\/\/www.rjmprogramming.com.au\/thewest \/&gt;\";<br \/>\n<br \/>\n      $postuw.=\"&lt;\/map&gt;\";<br \/>\n      $postuw1.=\"&lt;\/map&gt;\";<br \/>\n      $postuw2.=\"&lt;\/map&gt;\";<br \/>\n      $postuw3.=\"&lt;\/map&gt;\";<br \/>\n    }<br \/>\n<br \/> <br \/>\n    <font color=blue>\/\/ Create a transparent image thanks to https:\/\/www.php.net\/manual\/en\/function.imagecolortransparent.php<br \/>\n    $im = imagecreatetruecolor($_GET['width'], $_GET['height']);<br \/>\n    $red = imagecolorallocate($im, 255, 0, 0);<br \/>\n    $black = imagecolorallocate($im, 0, 0, 0);<br \/>\n<br \/>\n    \/\/ Make the background transparent<br \/>\n    imagecolortransparent($im, $black);<br \/>\n<br \/>\n    \/\/ Save the image<br \/>\n    $udirnameprebimg='\/tmp\/imagecolortransparent.png';<br \/>\n    imagepng($im, $udirnameprebimg);<\/font><br \/>\n    <font color=purple>$duis='data:image\/' . str_replace('jpg','jpeg',strtolower(explode('.',$udirnameprebimg)[-1 + sizeof(explode('.',$udirnameprebimg))])) . ';base64,' . base64_encode(file_get_contents($udirnameprebimg));<\/font><br \/>\n    <font color=brown>imagedestroy($im);<br \/>\n    unlink($udirnameprebimg);<\/font><br \/>\n<br \/> <br \/>\n    <font color=red>echo \"&lt;html&gt;<br \/>\n&lt;body onload=\\\"parent.document.getElementById('divimif').innerHTML='&lt;img id=myimg style=height:\" . $_GET['heighttop'] . \"px;z-index:56;position:absolute;top:\" . $_GET['top'] . \"px;left:\" . $_GET['left'] . \"px;width:\" . $_GET['width'] . \"px; src=\" . $duis . \"\" . $uw . \"&gt;&lt;\/img&gt;\" . $postuw . \"&lt;img id=myimg1 style=height:\" . $_GET['heightmiddle'] . \"px;z-index:56;position:absolute;top:\" . explode('.',($_GET['top'] + $_GET['heighttop']))[0] . \"px;left:\" . $_GET['left'] . \"px;width:\" . $_GET['widthleft'] . \"px; src=\" . $duis . \"\" . $uw1 . \"&lt;&gt;\/img&gt;\" . $postuw1 . \"&lt;img id=myimg2 style=height:\" . $_GET['heightmiddle'] . \"px;z-index:56;position:absolute;top:\" . explode('.',($_GET['top'] + $_GET['heighttop']))[0] . \"px;left:\" . explode('.',($_GET['width'] - $_GET['widthright']))[0] . \"px;width:\" . $_GET['widthright'] . \"px; src=\" . $duis . \"\" . $uw2 . \"&gt;&lt;\/img&gt;\" . $postuw2 . \"&lt;img id=myimg3 style=height:\" . explode('.',($_GET['height'] - $_GET['heighttop'] - $_GET['heightmiddle']))[0] . \"px;z-index:56;position:absolute;top:\" . explode('.',($_GET['top'] + $_GET['heighttop'] + $_GET['heightmiddle']))[0] . \"px;left:\" . $_GET['left'] . \"px;width:\" . $_GET['width'] . \"px; src=\" . $duis . \"\" . $uw3 . \"&gt;&lt;\/img&gt;\" . $postuw3 . \"'; \\\"&gt;&lt;\/body&gt;<br \/>\n&lt;\/html&gt;\";<\/font><br \/>\n    exit;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; and once setup, helped out by new Javascript, as per &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var urls=['', '', '', ' ', '', ' ', '', '', ''];<br \/>\n  var omoi=-1;<br \/>\n  var isrelp=false;<br \/>\n  <br \/>\n  function postomoiset() {<br \/>\n    if (isrelp) {<br \/>\n    isrelp=false;<br \/>\n    if (omoi == 4 || omoi == 6) {<br \/>\n      var wasomoi=omoi;<br \/>\n      omoi=-1;<br \/>\n      ouralert(wasomoi);<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function omoiset(jnnum) {<br \/>\n    if (eval('' + jnnum) == -1) {<br \/>\n    omoi=jnnum;<br \/>\n    \/\/document.title='omoi=' + omoi;<br \/>\n    isrelp=false;<br \/>\n    \/\/setTimeout(postomoiset, 8000);<br \/>\n    } else if (eval('' + jnnum) == -2) {<br \/>\n    if (omoi != 4 && omoi != 6) {<br \/>\n     omoi=jnnum;<br \/>\n     \/\/document.title='omoi=' + omoi;<br \/>\n     isrelp=false;<br \/>\n     \/\/setTimeout(postomoiset, 8000);<br \/>\n    }<br \/>\n    } else {<br \/>\n    omoi=jnnum;<br \/>\n    \/\/document.title='omoi=' + omoi;<br \/>\n    if (omoi != 4 && omoi != 6) {<br \/>\n    isrelp=false;<br \/>\n    } else {<br \/>\n    isrelp=true;<br \/>\n    \/\/document.title='omoi=' + omoi + '|';<br \/>\n    setTimeout(postomoiset, 8000);<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n    <br \/>\n  function ouralert(innum) {<br \/>\n    var ans='';<br \/>\n    switch ('' + innum) {<br \/>\n      case '1':<br \/>\n       if (urls[eval(-1 + eval('' + innum))] != '') {<br \/>\n          ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());<br \/>\n       }<br \/>\n       break;<br \/>\n      case '2':<br \/>\n       if (urls[eval(-1 + eval('' + innum))] != '') {<br \/>\n          ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());<br \/>\n       }<br \/>\n       break;<br \/>\n      case '3':<br \/>\n       if (urls[eval(-1 + eval('' + innum))] != '') {<br \/>\n          ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());<br \/>\n       }<br \/>\n       break;<br \/>\n      case '4':<br \/>\n       if (urls[eval(-1 + eval('' + innum))] != '') {<br \/>\n          ans=prompt('Want to go anywhere? (To save for future append a blank.)  Eg. https:\/\/www.rjmprogramming.com.au\/slideshow.html', urls[eval(-1 + eval('' + innum))].trim());<br \/>\n       }<br \/>\n       break;<br \/>\n      case '5':<br \/>\n       if (urls[eval(-1 + eval('' + innum))] != '') {<br \/>\n          ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());<br \/>\n       }<br \/>\n       break;<br \/>\n      case '6':<br \/>\n       if (urls[eval(-1 + eval('' + innum))] != '') {<br \/>\n          ans=prompt('Want to go anywhere? (To save for future append a blank.)  Eg. https:\/\/www.rjmprogramming.com.au\/plus\/', urls[eval(-1 + eval('' + innum))].trim());<br \/>\n       }<br \/>\n       break;<br \/>\n      case '7':<br \/>\n       if (urls[eval(-1 + eval('' + innum))] != '') {<br \/>\n          ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());<br \/>\n       }<br \/>\n       break;<br \/>\n      case '8':<br \/>\n       if (urls[eval(-1 + eval('' + innum))] != '') {<br \/>\n          ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');<br \/>\n       }<br \/>\n       break;<br \/>\n      case '9':<br \/>\n       if (urls[eval(-1 + eval('' + innum))] != '') {<br \/>\n          ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');<br \/>\n       }<br \/>\n       break;<br \/>\n      default:<br \/>\n       break;<br \/>\n    }<br \/>\n    if (!ans) { ans=''; }<br \/>\n    if (ans != '') {<br \/>\n      window.open(ans.trim(), '_blank');<br \/>\n      if (ans != ans.trim()) {<br \/>\n        window.localStorage.setItem('area' + innum + 'url', encodeURIComponent(ans.trim()));<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n <br \/> <br \/>\n    function imbit() {<br \/>\n    \/\/if (document.getElementById('myimg')) {<br \/>\n    \/\/  document.getElementById('myimg').style.border='5px dashed purple';<br \/>\n    \/\/}<br \/>\n    if (('' + window.localStorage.getItem('area4url')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {<br \/>\n      urls[3]=decodeURIComponent('' + window.localStorage.getItem('area4url'));<br \/>\n      document.getElementById('area4').title=decodeURIComponent('' + window.localStorage.getItem('area4url')) + '# ... long hover of at least 8 seconds for chance to change';<br \/>\n      document.getElementById('area4').href=decodeURIComponent('' + window.localStorage.getItem('area4url'));<br \/>\n      document.getElementById('area4').onclick=function(){ omoiset=-1; urls[3]=urls[3]; }<br \/>\n      \/\/document.getElementById('area4').ondblclick=function(){ ouralert(4); }<br \/>\n    }<br \/>\n    if (('' + window.localStorage.getItem('area6url')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {<br \/>\n      urls[5]=decodeURIComponent('' + window.localStorage.getItem('area6url'));<br \/>\n      document.getElementById('area6').title=decodeURIComponent('' + window.localStorage.getItem('area6url')) + '# ... long hover of at least 8 seconds for chance to change';<br \/>\n      document.getElementById('area6').href=decodeURIComponent('' + window.localStorage.getItem('area6url'));<br \/>\n      document.getElementById('area6').onclick=function(){ omoiset=-1;  urls[5]=urls[5]; }<br \/>\n      \/\/document.getElementById('area6').ondblclick=function(){ ouralert(6); }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/index.php-GETME\" title=\"index.php\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.php-GETME\" title=\"index.php\">index.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.php\" title=\"Click picture\">Landing Page<\/a> whose <i>guises<\/i> as &#8230;<\/p>\n<ul>\n<li>Landing Page in mobile phone devices<\/li>\n<li>Landing Page in an iframe<\/li>\n<li>Landing Page in a popup window<\/li>\n<\/ul>\n<p> &#8230; we all excluded from new functionality Image Map potential &#8220;dark green area clicking&#8221; access to photography themed &#8220;One Image Websites&#8221; &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\" title=\"Ephemeral\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/streetart\" title=\"Street Art\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\" title=\"The Commute\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\" title=\"The Inner 'Burbs\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/bygone\" title=\"Bygone\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/thewest\" title=\"West\">&#8220;West&#8221;<\/a><\/li>\n<\/ul>\n<p> &#8230; accessible from Image Map area elements up above and down below the WordPress Blog posting iframe whose CSS property <i>z-index<\/i> is <font color=darkblue>set to<\/font> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;iframe title='Recent posts' onload='check_if(this);' src='PHP\/zero.html?totalwidth=y' class='zero' id='ifzero'<font color=darkblue> style='z-index:57;'<\/font>&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; <font color=darkblue>57<\/font>.<\/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\/responsive-web-design-landing-page-image-map-tutorial\/'>Responsive Web Design Landing Page Image Map Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rwdlpit'>Previous relevant <a target=_blank title='Responsive Web Design Landing Page Incarnation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-incarnation-tutorial\/'>Responsive Web Design Landing Page Incarnation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Responsive Web Design Landing Page Incarnation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/responsive_more.jpg\" title=\"Responsive Web Design Landing Page Incarnation Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Web Design Landing Page Incarnation Tutorial<\/p><\/div>\n<p>Along the same &#8220;Responsive Design&#8221; themes of <a title='Responsive Web Design Primer Tutorial' href='#rwdpt'>Responsive Web Design Primer Tutorial<\/a>, we stumbled upon the excellent <a target=_blank title='W3schools useful page' href='https:\/\/www.w3schools.com\/w3css\/tryit.asp?filename=tryw3css_templates_start_page&#038;stacked=h'>W3Schools Responsive Design Based Start Page Idea<\/a> which inspired us to retry RJM Programming Landing Page thoughts &#8230;<\/p>\n<ul>\n<li>separating out totally &#8220;uninvolved&#8221; Landing Page calls hooked up with a new index.php (actually just HTML) Landing Page incarnation that has better Responsive Design credentials &#8230; from &#8230;<\/li>\n<li>any other call of any complexity or having a query string etcetera, reverting to the &#8220;old way&#8221;<\/li>\n<\/ul>\n<p> &#8230; new paradigm?   So, why keep the old way?  Well, we packed the &#8220;old way&#8221; with content rich functionality, and do not want to ditch that yet, but maybe over time?!<\/p>\n<p>You&#8217;ll see, though, using the new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.php_GETME\">index.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\">Responsive Design Landing Page incarnation<\/a> &#8230;<\/p>\n<p><iframe style='width:100%;height:2500px;' src='\/\/www.rjmprogramming.com.au\/'><\/iframe><\/p>\n<p> &#8230; how the clutter melts away like a hot knife through <strike>margarine<\/strike>butter!<\/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\/responsive-web-design-landing-page-incarnation-tutorial\/'>Responsive Web Design Landing Page Incarnation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rwdpt'>Previous relevant <a target=_blank title='Responsive Web Design Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-primer-tutorial\/'>Responsive Web Design 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\/?responsive=yes\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Responsive Web Design Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/responsive\/earlydays.gif\" title=\"Responsive Web Design Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Web Design Primer Tutorial<\/p><\/div>\n<p>Today we wanted to tip our toes into the vast subject of <a target=_blank title='' href='https:\/\/en.wikipedia.org\/wiki\/Responsive_web_design'>&#8220;responsive web design&#8221;<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Responsive_web_design'><p>\nResponsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.[2][3][4][5]\n<\/p><\/blockquote>\n<p> &#8230; coming at it from the idea <a target=_blank title='Can a responsive shell webpage host a non-responsive iframe?' href='https:\/\/www.google.com\/search?q=can+a+responsive+shell+webpage+host+a+non-responsive+iframe&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=can+a+responsive+shell+webpage+host+a+non-responsive+iframe&#038;aqs=chrome..69i57.19412j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>&#8220;Can a responsive shell webpage host a non-responsive iframe?&#8221;<\/a><\/p>\n<p>In turn this got us to the <a target=_blank title='Excellent ideas, thanks' href='https:\/\/stackoverflow.com\/questions\/30595948\/is-it-possible-to-load-a-responsive-iframe-within-a-non-responsive-site'>excellent ideas of this webpage<\/a> which we&#8217;ll try out for a while &#8230;<\/p>\n<ul>\n<li>honing in on our &#8220;Landing Page and friends&#8221; set of unresponsively designed webpages &#8230;<\/li>\n<li>honing in on iPhone sized devices (ie. not iPads nor laptops) &#8230;<\/li>\n<li>host web browser address bar calls of &#8220;Landing Page and friends&#8221; set of unresponsively designed webpages within a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/responsive\/caller.html_GETME\" title=\"caller.html\">caller.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/responsive\/caller.html\">responsively web designed shell<\/a> supervisory webpage and start using some of that &#8230;<br \/>\n<table>\n<tr>\n<th>Unresponsive Landing Page<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe style='width:100%;height:800px;' src='\/\/www.rjmprogramming.com.au\/index.htm?yes=yes'><\/iframe>\n<\/td>\n<tr>\n<tr>\n<th>Responsive Shell around Unresponsive Landing Page<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe style='width:100%;height:800px;' src='\/\/www.rjmprogramming.com.au\/?yes=yes'><\/iframe>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; as food for <font size=1>(your)<\/font> thought &#8230;<\/p>\n<p><code><br \/>\n   function bodonl() {<br \/>\n     var wasih=document.body.innerHTML;<br \/>\n     var huhd=document.getElementById('Container').getBoundingClientRect();<br \/>\n     var pb=0;<br \/>\n     if (eval('' + huhd.height) &gt; eval('' + huhd.width)) {<br \/>\n     isportrait=true;<br \/>\n     pb=eval(eval('' + huhd.width) \/ eval('' + huhd.height) * 100.0);<br \/>\n     nowih='&lt;div id=\"Container\" style=\"padding-right:' + pb + '%; position:relative; display:block; height: 100vh;\"&gt;&lt;iframe' + wasih.split('&lt;iframe')[1].split('&lt;\/div&gt;')[0].replace('\" frameborder', fname + '\" style=\"position:absolute; top:0; left: 0;\" frameborder') + '&lt;\/div&gt;';<br \/>\n     \/\/if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     \/\/document.getElementById('myvis').setAttribute('initial-scale','0.5');<br \/>\n     \/\/}<br \/>\n     } else {<br \/>\n     isportrait=false;<br \/>\n     pb=eval(eval('' + huhd.height) \/ eval('' + huhd.width) * 100.0);<br \/>\n     nowih='&lt;div id=\"Container\" style=\"padding-bottom:' + pb + '%; position:relative; display:block; width: 100%;\"&gt;&lt;iframe' + wasih.split('&lt;iframe')[1].split('&lt;\/div&gt;')[0].replace('\" frameborder', fname + '\" style=\"position:absolute; top:0; left: 0;\" frameborder') + '&lt;\/div&gt;';<br \/>\n     }<br \/>\n     document.body.innerHTML=nowih;<br \/>\n   }<br \/>\n<\/code><\/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='#d53069' onclick='var dv=document.getElementById(\"d53069\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/design\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53069' 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='#d56994' onclick='var dv=document.getElementById(\"d56994\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/webpage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56994' 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='#d57364' onclick='var dv=document.getElementById(\"d57364\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image-map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57364' 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='#d57400' onclick='var dv=document.getElementById(\"d57400\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/radio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57400' 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='#d57427' onclick='var dv=document.getElementById(\"d57427\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57427' 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='#d57443' onclick='var dv=document.getElementById(\"d57443\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/terminal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57443' 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='#d57443' onclick='var dv=document.getElementById(\"d57459\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/tracks\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57459' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Using yesterday&#8217;s Ffmpeg Log Helper Towards VTT File Primer Tutorial VTT files we could choose to use &#8230; Audio and Video HTML element track cue functionality VTT file interface &#8230; you can read more about at HTML5 Track Element Primer &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-vtt-tracks-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,29,37],"tags":[113,3349,4139,4140,2310,360,2570,400,415,418,435,452,3983,549,576,587,609,714,2178,744,760,870,1712,932,2643,4141,997,1063,1125,4137,1200,2311,4135,1262,1675,1296,2881,1319,1345,1369,4136,4138],"class_list":["post-57459","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-operating-system","category-tutorials","tag-audio","tag-client-pre-emptive-iframe","tag-cue","tag-currenttime","tag-details","tag-download","tag-edit","tag-event","tag-ffmpeg","tag-file","tag-find","tag-form","tag-getelementsbytagname","tag-gui","tag-html","tag-iframe","tag-input","tag-local-web-server","tag-macos","tag-mamp","tag-media","tag-onload","tag-onsubmit","tag-php","tag-placeholder","tag-pre-emptive","tag-programming","tag-reveal","tag-setinterval","tag-srt","tag-stop-press","tag-summary","tag-teminal","tag-textarea","tag-textbox","tag-track","tag-tracks","tag-tutorial","tag-url","tag-video","tag-vtt","tag-vtt-file"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57459"}],"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=57459"}],"version-history":[{"count":19,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57459\/revisions"}],"predecessor-version":[{"id":57958,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57459\/revisions\/57958"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=57459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=57459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=57459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}