{"id":67426,"date":"2025-03-12T03:01:00","date_gmt":"2025-03-11T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=67426"},"modified":"2025-03-13T09:10:08","modified_gmt":"2025-03-12T23:10:08","slug":"wordpress-blog-posting-feature-image-editing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-posting-feature-image-editing-tutorial\/","title":{"rendered":"WordPress Blog Posting Feature Image Editing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/some_egs_image_editing.gif\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Blog Posting Feature Image Editing Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/some_egs_image_editing.gif\" title=\"WordPress Blog Posting Feature Image Editing Tutorial\"  \/><\/a><p class=\"wp-caption-text\">WordPress Blog Posting Feature Image Editing Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s &#8230;<\/p>\n<ul>\n<li><a title='One Image Website Image Snapshot Editing Tutorial' href='#oiwiset'>One Image Website Image Snapshot Editing Tutorial<\/a> used web browser new tab webpages to allow for image editing and annotating &#8230; but with today&#8217;s &#8230;<\/li>\n<li>WordPress Blog Posting Feature Image Editing Tutorial we&#8217;re using a hosted HTML iframe window within the blog posting webpage of interest<\/li>\n<\/ul>\n<p>And that should be a lot easier to handle, yes?!  Well, yes, maybe, but not that much easier.  A little bit &#8220;easier&#8221; because the logic is largely funnelled into code that is common to both modus operandi.<\/p>\n<p>In amongst the commonalities, thankfully, the means to get to the &#8220;image editing and annotating&#8221; and\/or &#8220;image styling&#8221; functionality <font color=blue>remains<\/font> &#8230;<\/p>\n<blockquote><p>\nNon-mobile <font color=blue>right click<\/font> or <font color=blue>spread\/pinch<\/font> mobile gesture on most blog posting images can lead to image editing and annotating functionality, where for animated GIFs first slide is chosen.\n<\/p><\/blockquote>\n<p>We learnt a bit making the mobile <i>ontouchend<\/i> spread\/pinch detection <font color=purple>more bulletproof<\/font> &#8230;<\/p>\n<p><code><br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     setTimeout(function(){<br \/>\n     document.ontouchend=function(e){<br \/>\n       if (document.URL.replace('\/wordpress','\/ITblog').indexOf('\/ITblog') != -1) {<br \/>\n        lastsp=eval(e.touches.length);<br \/>\n       }<br \/>\n       if (eval('' + e.touches.length) &gt;= 1) {<br \/>\n        if (document.URL.replace('\/wordpress','\/ITblog').indexOf('\/ITblog') == -1) {<br \/>\n        onrightclickask();<br \/>\n        } <font color=purple>else if (e.touches[0].target.outerHTML.split('&gt;')[0].indexOf('&lt;img ') == 0 && e.touches[0].target.outerHTML.split('&gt;')[0].indexOf(' tabindex=') != -1) {<br \/>\n        onrightclickask(); \/\/document.title=':' + e.touches[0].target.outerHTML.split('&gt;')[0].substring(1);<br \/>\n        }<\/font><br \/>\n       }<br \/>\n     };<br \/>\n     }, 4000);<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; but ahead of this, for the TwentyTen theme changes to codex webpage structure we predominantly do with a <font size=1>good ol&#8217;<\/font> tailored header.php the most effective modified <font size=1>(which is new)<\/font> codeline <font color=blue>now goes<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    <font color=blue>$post-&gt;post_content=str_replace('&lt;i' . 'mg' . ' i' . 'd=', '&lt;i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); i' . 'd=', str_replace('&lt;i' . 'mg' . ' s' . 'rc=', '&lt;i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); s' . 'rc=', str_replace('&lt;i' . 'mg' . ' st' . 'yle=\"border', '&lt;i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); st' . 'yle=\"border', str_replace('&lt;i' . 'mg' . ' st' . 'yle=\"float', '&lt;i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); st' . 'yle=\"float', str_replace('&lt;i' . 'mg' . ' deco' . 'ding=', '&lt;i' . 'mg' . ' tabindex=0 onconte' . 'xtmenu=imgedit(event);  ontou' . 'chend=imgedit(event); deco' . 'ding=', $post-&gt;post_content)))));<\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; calling new Javascript function &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction imgedit(evt) {<br \/>\n  if (('' + evt.target.outerHTML.split('&gt;')[0]).indexOf(' class=\"iiconlist') == -1) {<br \/>\n   preonrightclickask(evt);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p>Other than header.php WordPress PHP code we changed &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/onrightclick.js--GETME\" rel=\"noopener\">a third draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/onrightclick.js--GETME\" rel=\"noopener\">onrightclick.js<\/a> external Javascript &#8230; and &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html-------------------------------GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html-------------------------------GETME\" rel=\"noopener\">user_of_signature_signature.htm<\/a> inhouse image data fed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" rel=\"noopener\">canvas editor web application<\/a><\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-posting-feature-image-editing-tutorial\/' rel=\"noopener\">WordPress Blog Posting Feature Image Editing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oiwiset'>Previous relevant <a target=\"_blank\" title='One Image Website Image Snapshot Editing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-image-snapshot-editing-tutorial\/' rel=\"noopener\">One Image Website Image Snapshot Editing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\/index.htm?rand=76587\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"One Image Website Image Snapshot Editing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\/some_egs_filter_editing.gif\" title=\"One Image Website Image Snapshot Editing Tutorial\"  \/><\/a><p class=\"wp-caption-text\">One Image Website Image Snapshot Editing Tutorial<\/p><\/div>\n<p>Augmenting yesterday&#8217;s <a title='One Image Website SessionStorage Image Filtering Tutorial' href='#oiwssift'>One Image Website SessionStorage Image Filtering Tutorial<\/a> adding cropped image editing functionality, we see it as &#8230;<\/p>\n<table>\n<tr>\n<th>Running against us regarding One Image Website design ..<\/th>\n<th>Running for us regarding One Image Website design &#8230;<\/th>\n<\/tr>\n<tr>\n<td>the programmatical scrolling means embedded iframe hosting will not work<\/td>\n<td>way window.prompt freezes all Javascript at a snapshot of time &#8230;<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>hashtag navigation can be the conduit to pass data onto inhouse <a target=\"_blank\" title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp' rel=\"noopener\">Canvas<\/a> Editor of Image Data<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>[canvasContext].drawImage has a variety of useful calls (in that OOP method feel) allowing for dynamic cropping<\/td>\n<\/tr>\n<\/table>\n<p>That &#8220;one against&#8221; stopped how we envisaged the work at the start of the day.  We thought we&#8217;d use window.<a target=\"_blank\" title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp' rel=\"noopener\">sessionStorage<\/a> (or maybe window.<a target=\"_blank\" title='Window object localStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a>) as the only data conduit needed, and we&#8217;ll be continuing that idea with another approach into the future, but back to today, hashtagging provided that conduit means, even if we were using data URIs (though all we need today are image absolute URLs).<\/p>\n<p>And then there was &#8220;the unknown factor&#8221; &#8230; <\/p>\n<blockquote><p>\nCan [canvasContext].<a target=\"_blank\" title='HTML canvas element drawImage() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp' rel=\"noopener\">drawImage<\/a> draw that image with CSS filter styling applied?\n<\/p><\/blockquote>\n<p>Well, we found using Javascript DOM ahead of the <i>new Image()<\/i> call &#8230;<\/p>\n<p><code><br \/>\n   xcelem=document.getElementById('topcanvas');<br \/>\n   xccontext = xcelem.getContext(\"2d\");<br \/>\n   xcimg=new Image;<br \/>\n   xcimg.onload = function(){<br \/>\n var mysx=('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') : ''; \/\/\tOptional. The x coordinate where to start clipping<br \/>\n var mysy=('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') : ''; \/\/\tOptional. The y coordinate where to start clipping<br \/>\n var myswidth=('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') : ''; \/\/\tOptional. The width of the clipped image<br \/>\n var mysheight=('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') : ''; \/\/\tOptional. The height of the clipped image<br \/>\n var myx=('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') : ''; \/\/\tThe x coordinate where to place the image on the canvas<br \/>\n var myy=('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') : ''; \/\/\tThe y coordinate where to place the image on the canvas<br \/>\n var mywidth=('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') : ''; \/\/\tOptional. The width of the image to use (stretch or reduce the image)<br \/>\n var myheight=('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') : ''; \/\/\tOptional. The height of the image to use (stretch or reduce the image)<br \/>\n     if (mywidth != '' && myheight != '') {<br \/>\n     xcelem.width=eval('' + mywidth);<br \/>\n     xcelem.height=eval('' + myheight);<br \/>\n   if (('' + xcimg.style.filter).replace(\/^undefined\/g,'').replace(\/^null\/g,'').trim() != '') {<br \/>\n     xccontext.filter=xcimg.style.filter;<br \/>\n   }<br \/>\n     if (myx != '' && myy != '' && myswidth == '' && mysheight == '') {<br \/>\n     xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));<br \/>\n     setTimeout(function(){  xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));    }, 3000);<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_x');<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_y');<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_width');<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_height');<br \/>\n     } else {<br \/>\n     xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));<br \/>\n     setTimeout(function(){  xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));    }, 3000);<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_sx');<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_sy');<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_swidth');<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_sheight');<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_x');<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_y');<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_width');<br \/>\n   window.sessionStorage.removeItem('user_of_signature_signature_height');<br \/>\n     }<br \/>\n     } else {<br \/>\n     xcelem.width=xcimg.width;<br \/>\n     xcelem.height=xcimg.height;<br \/>\n   if (('' + xcimg.style.filter).replace(\/^undefined\/g,'').replace(\/^null\/g,'').trim() != '') {<br \/>\n     xccontext.filter=xcimg.style.filter;<br \/>\n   }<br \/>\n     xccontext.drawImage(xcimg,0,0);<br \/>\n     setTimeout(function(){  xccontext.drawImage(xcimg,0,0);   }, 3000);<br \/>\n     }<br \/>\n     if (window.parent) {<br \/>\n        if (parent.document.getElementById('if_image_canvas')) {<br \/>\n          if (('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim() != '') {<br \/>\n            if (eval('' + ('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim()) &lt; eval(200 + eval('' + xcelem.height))) {<br \/>\n              parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';<br \/>\n            }<br \/>\n          } else {<br \/>\n            parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';<br \/>\n          }<br \/>\n          parent.document.getElementById('if_image_canvas').style.display='block';<br \/>\n          if (parent.document.URL.replace('\/wordpress','\/ITblog').indexOf('\/ITblog') != -1) {<br \/>\n             parent.document.getElementById('if_image_canvas').scrollIntoView();<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n   };<br \/>\n   var incomings=('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') : ''; \/\/\tOptional. The image filter CSS styling to apply<br \/>\n   if ((incomings.indexOf('%20') != -1 || 7 == 7) && incomings.replace(':',')').indexOf(')') != -1 && incomings.indexOf('style=') != -1) {<br \/>\n      incomings='style=' + encodeURIComponent((incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(\/\\%20\/g,' ').replace(\/\\+\/g,' '));<br \/>\n   }<br \/>\n   var relincomings=incomings.split('style=')[1] ? decodeURIComponent(incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(\/\\%20\/g,' ').replace(\/\\+\/g,' ') : '';<br \/>\n   if (relincomings.indexOf('filter:') != -1) {<br \/>\n     xcimg.style.filter=relincomings.split('filter:')[1].split(';')[0].split('}')[0];<br \/>\n   }<br \/>\n   xcimg.src=xcont;<br \/>\n<\/code><\/p>\n<p> &#8230; didn&#8217;t help, and then we asked the online woooorrrrrllllddd to come across <a target=\"_blank\" title='Useful link' href='https:\/\/stackoverflow.com\/questions\/42842451\/drawimage-doesnt-show-css-styles' rel=\"noopener\">this very useful link, thanks<\/a>  to teach us &#8230;<\/p>\n<blockquote><p>\nThat <a target=\"_blank\" title='[canvasContext].filter information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\/filter' rel=\"noopener\">[canvasContext].filter<\/a> is a th<strike>a<\/strike>ing &#8230; yay!!!\n<\/p><\/blockquote>\n<p>Luckily we didn&#8217;t need to change One Image Website base HTML to make this happen, but, rather &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/onrightclick.js-GETME\" rel=\"noopener\">a second draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/onrightclick.js-GETME\" rel=\"noopener\">onrightclick.js<\/a> external Javascript &#8230; and &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html------------------------------GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html------------------------------GETME\" rel=\"noopener\">user_of_signature_signature.htm<\/a> inhouse image data fed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" rel=\"noopener\">canvas editor web application<\/a><\/li>\n<\/ul>\n<p> &#8230; with the user able to make this happen with those right click (non-mobile) or pinch or swipe gesture (mobile) actions <font size=1>(talked about with yesterday&#8217;s <a title='One Image Website SessionStorage Image Filtering Tutorial' href='#oiwssift'>One Image Website SessionStorage Image Filtering Tutorial<\/a>)<\/font> getting the user to a prompt window with <font color=blue>the modified &#8220;blurb&#8221;<\/font> &#8230;<\/p>\n<blockquote><p>\nOptionally, please, any CSS for images<font color=blue> &#8230; append three spaces to be able to edit this screenshot in a canvas<\/font> &#8230; ref. https:\/\/www.w3schools.com\/cssref\/css3_pr_filter.php &#8230; eg.               filter: grayscale(100%);\n<\/p><\/blockquote>\n<p> &#8230; talking about the three appended spaces needed.<\/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-image-snapshot-editing-tutorial\/' rel=\"noopener\">One Image Website Image Snapshot Editing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oiwssift'>Previous relevant <a target=\"_blank\" title='One Image Website SessionStorage Image Filtering Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-sessionstorage-image-filtering-tutorial\/' rel=\"noopener\">One Image Website SessionStorage Image Filtering Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\/index.htm?rand=76587\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"One Image Website SessionStorage Image Filtering Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\/some_egs_filter.gif\" title=\"One Image Website SessionStorage Image Filtering Tutorial\"  \/><\/a><p class=\"wp-caption-text\">One Image Website SessionStorage Image Filtering Tutorial<\/p><\/div>\n<p>Further to the long ago <a title='One Image Website Scrolling Position Fix Tutorial' href='#oiwspft'>One Image Website Scrolling Position Fix Tutorial<\/a> last mention of our inhouse <i>One Image Website<\/i> series, today we have &#8230;<\/p>\n<ul>\n<li>clientside image filtering functionality to offer &#8230;<\/li>\n<li>almost exclusively using window.<a target=\"_blank\" title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp' rel=\"noopener\">sessionStorage<\/a> ideas (rather than our usual window.<a target=\"_blank\" title='Window object localStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a> (ie. like Cookies) usage)<\/li>\n<\/ul>\n<p>Why is that last point any big deal?  Well, programmers will tell you, often the tidy up of a new arrangement involves as much, or more, coding to do than the instigation.  And a lot of programmers, am sure, will agree that that is a pain in the neck, often.  But the use of window.sessionStorage at the expense of window.localStorage allows the programmer to go &#8230;<\/p>\n<blockquote><p>\nAaaaaahhhhh\n<\/p><\/blockquote>\n<p>There is so much less to tidy up.  Using window.sessionStorage it is only data on that web browser tab that comes into play, and as soon as that web browser tab no longer exists, nor does the window.sessionStorage data you stored.   Yayyyyyyy!<\/p>\n<p>We found we couldn&#8217;t quite make it exclusively with window.sessionStorage because in the <i>One Image Website<\/i> paradigm of offering music playing we lost window.sessionStorage data for one of the two web browser tabs that become involved to start the music rolling.  So sad.  Nevertheless, we transferred some controllable temporary window.localStorage data storage over to window.sessionStorage data storage at the opportune time &#8230;<\/p>\n<p><code><br \/>\n    if (('' + window.localStorage.getItem(prefss + '_filter')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {<br \/>\n      if (('' + window.sessionStorage.getItem(prefss + '_filter')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') == '') {<br \/>\n        window.sessionStorage.setItem(prefss + '_filter', window.localStorage.getItem(prefss + '_filter'));<br \/>\n        window.localStorage.removeItem(prefss + '_filter');<br \/>\n      } else {<br \/>\n        window.localStorage.removeItem(prefss + '_filter');<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; (we figured after a day of tinkering &#8230; so sad).<\/p>\n<p>How can the non-mobile user access these new aesthetic settings?  Via a right click, as our <i>new unfettered layer of functionality<\/i> option, encapsulated by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/onrightclick.js_GETME\" rel=\"noopener\">onrightclick.js<\/a> external Javascript &#8220;proof of concept&#8221; effort, on the way to a Javascript prompt window, is the way we&#8217;ve gone about it.  From there, the user can enter CSS non-selector actions such as the use of CSS <a target=\"_blank\" href='https:\/\/www.w3schools.com\/cssref\/css3_pr_filter.php' title='CSS filter property information from W3schools' rel=\"noopener\"><i>filter<\/i><\/a> property.<\/p>\n<p>And as such, it&#8217;s worth a revisit of one or all of our reworked <i>One Image Website<\/i> web applications &#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\/?rand=76587965876\" title=\"Ephemeral\" rel=\"noopener\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\/?rand=76587965876\" title=\"Street Art\" rel=\"noopener\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\/?rand=76587965876\" title=\"The Commute\" rel=\"noopener\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\/?rand=76587965876\" title=\"The Inner 'Burbs\" rel=\"noopener\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/bygone\/?rand=76587965876\" title=\"Bygone\" rel=\"noopener\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thewest\/?rand=76587965876\" title=\"West\" rel=\"noopener\">&#8220;West&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip\/?rand=76587965876\" title=\"Walking Trip\" rel=\"noopener\">&#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&#038;rand=76587965876\" title=\"Ephemeral\" rel=\"noopener\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart?audio=y&#038;rand=76587965876\" title=\"Street Art\" rel=\"noopener\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thecommute?audio=y&#038;rand=76587965876\" title=\"The Commute\" rel=\"noopener\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo?audio=y&#038;rand=76587965876\" title=\"The Inner 'Burbs\" rel=\"noopener\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/bygone?audio=y&#038;rand=76587965876\" title=\"Bygone\" rel=\"noopener\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thewest?audio=y&#038;rand=76587965876\" title=\"West\" rel=\"noopener\">&#8220;West&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip?audio=y&#038;rand=76587965876\" title=\"Walking Trip\" rel=\"noopener\">&#8220;Walking Trip&#8221;<\/a><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; or you can start them off yourself up at the address bar with <font size=2>(typed in <\/font><font size=1> &#8230; or just click<\/font><font size=2>)<\/font> URLs such as &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/thecommute\/?style=filter:invert(100%);' href='https:\/\/www.rjmprogramming.com.au\/thecommute\/?style=filter:invert(100%);' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/thecommute\/?style=filter:invert(100%);<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; or &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/ephemeral\/?style=filter:blur(5px);' href='https:\/\/www.rjmprogramming.com.au\/ephemeral\/?style=filter:blur(5px);' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/ephemeral\/?style=filter:blur(5px);<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; or &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/streetart\/?style=filter:hue-rotate(90deg);' href='https:\/\/www.rjmprogramming.com.au\/streetart\/?style=filter:hue-rotate(90deg);' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/streetart\/?style=filter:hue-rotate(90deg);<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; or &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/pyrmontultimo\/?style=filter:sepia(100%);' href='https:\/\/www.rjmprogramming.com.au\/pyrmontultimo\/?style=filter:sepia(100%);' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/pyrmontultimo\/?style=filter:sepia(100%);<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; or &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/walkingtrip\/?style=filter:saturate(200%);' href='https:\/\/www.rjmprogramming.com.au\/walkingtrip\/?style=filter:saturate(200%);' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/walkingtrip\/?style=filter:saturate(200%);<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; or &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/bygone\/?style=filter:contrast(200%);' href='https:\/\/www.rjmprogramming.com.au\/bygone\/?style=filter:contrast(200%);' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/bygone\/?style=filter:contrast(200%);<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; or &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/thewest\/?style=filter:brightness(240%);' href='https:\/\/www.rjmprogramming.com.au\/thewest\/?style=filter:brightness(240%);' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/thewest\/?style=filter:brightness(240%);<\/a><br \/>\n<\/code><\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>All this begs the question &#8230;<\/p>\n<blockquote><p>\nWhat about mobile?\n<\/p><\/blockquote>\n<p>Well, at least for iOS we think &#8230;<\/p>\n<p><code><br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     setTimeout(function(){<br \/>\n     document.ontouchend=function(e){<br \/>\n       if (eval('' + e.touches.length) >= 1) {<br \/>\n        onrightclickask();<br \/>\n       }<br \/>\n     };<br \/>\n     }, 4000);<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; did the job, with a pinch or swipe gesture, of getting us to that Javascript prompt window place, and then the rest is the same!<\/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-sessionstorage-image-filtering-tutorial\/' rel=\"noopener\">One Image Website SessionStorage Image Filtering Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oiwspft'>Previous relevant <a target=\"_blank\" title='One Image Website Scrolling Position Fix Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-scrolling-position-fix-tutorial\/' rel=\"noopener\">One Image Website Scrolling Position Fix Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"One Image Website Scrolling Position Fix Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\/some_egs.gif\" title=\"One Image Website Scrolling Position Fix Tutorial\"  \/><\/a><p class=\"wp-caption-text\">One Image Website Scrolling Position Fix Tutorial<\/p><\/div>\n<p>Today, we&#8217;ve bitten the bullet, and decided to shore up the webpage scrolling issues that could occur in yesterday&#8217;s <a title='One Image Website VTT Tracks Tutorial' href='#oiwvtttt'>One Image Website VTT Tracks Tutorial<\/a>, and before, with our set of One Image Websites.  They represent, perhaps, a slightly unusual scenario whereby the image data is allowed to be itself, and being bigger than the dimensions of the webpage <font size=1>(straight from its digital source)<\/font>, in all probability.  Hence, the randomized document.body scrolling that occurs.<\/p>\n<p>But up until today our randomized range of <a target=\"_blank\" title='HTML DOM Element scrollLeft information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_element_scrollleft.asp' rel=\"noopener\">scrollLeft<\/a> and <a target=\"_blank\" title='HTML DOM Element scrollTop information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_element_scrolltop.asp' rel=\"noopener\">scrollTop<\/a> positioning that could occur ranged over the entire width and height of the underlying image, while we think we should only be scrolling over the range ([imageWidth] &#8211; <a target=\"_blank\" title='Window innerWidth\n information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_innerwidth.asp' rel=\"noopener\">window.innerWidth<\/a> (screen width)) x ([imageHeight] &#8211; <a target=\"_blank\" title='Window innerHeight\n information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_innerheight.asp' rel=\"noopener\">window.innerHeight<\/a> (screen height)).  This could lead to white bands to the right and\/or bottom of the webpage, in its presentation.  And so we&#8217;ve fixed all the Javascript code to replace <font color=orange>the old<\/font> with <font color=blue>the new<\/font> in all the One Image Website codesets &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var recti=document.getElementById(place).getBoundingClientRect();<br \/>\n\/\/<\/font><font color=orange>document.getElementById(\"body\").scrollTop = Math.floor(Math.random() * document.getElementById(\"body\").scrollHeight);<\/font><br \/>\n<font color=blue>\/\/<\/font><font color=orange>document.getElementById(\"body\").scrollLeft = Math.floor(Math.random() * document.getElementById(\"body\").scrollWidth);<br \/>\n<\/font><font color=blue>document.getElementById(\"body\").scrollTop = Math.max(0,Math.floor(Math.random() * eval(eval('' + recti.height) - eval('' + window.innerHeight))));<br \/>\ndocument.getElementById(\"body\").scrollLeft = Math.max(0,Math.floor(Math.random() * eval(eval('' + recti.width) - eval('' + window.innerWidth))));<\/font><br \/>\n<\/code><\/p>\n<p>Any white bands you still see now will be caused by that being on the original photograph data stock <font size=1>(we&#8217;re hoping)<\/font>, in &#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\" rel=\"noopener\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\" title=\"Street Art\" rel=\"noopener\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\" title=\"The Commute\" rel=\"noopener\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\" title=\"The Inner 'Burbs\" rel=\"noopener\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/bygone\" title=\"Bygone\" rel=\"noopener\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thewest\" title=\"West\" rel=\"noopener\">&#8220;West&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip\" title=\"Walking Trip\" rel=\"noopener\">&#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\" rel=\"noopener\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart?audio=y\" title=\"Street Art\" rel=\"noopener\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thecommute?audio=y\" title=\"The Commute\" rel=\"noopener\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo?audio=y\" title=\"The Inner 'Burbs\" rel=\"noopener\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/bygone?audio=y\" title=\"Bygone\" rel=\"noopener\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thewest?audio=y\" title=\"West\" rel=\"noopener\">&#8220;West&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip?audio=y\" title=\"Walking Trip\" rel=\"noopener\">&#8220;Walking Trip&#8221;<\/a><\/li>\n<\/ul>\n<\/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-scrolling-position-fix-tutorial\/' rel=\"noopener\">One Image Website Scrolling Position Fix Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oiwvtttt'>Previous relevant <a target=\"_blank\" title='One Image Website VTT Tracks Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-vtt-tracks-tutorial\/' rel=\"noopener\">One Image Website VTT Tracks Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral?audio=yes\" rel=\"noopener\"><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' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">currentTime<\/a> and <a target=\"_blank\" title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\"><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\" rel=\"noopener\">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\" rel=\"noopener\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\" title=\"Street Art\" rel=\"noopener\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\" title=\"The Commute\" rel=\"noopener\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\" title=\"The Inner 'Burbs\" rel=\"noopener\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/bygone\" title=\"Bygone\" rel=\"noopener\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thewest\" title=\"West\" rel=\"noopener\">&#8220;West&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip\" title=\"Walking Trip\" rel=\"noopener\">&#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\" rel=\"noopener\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart?audio=y\" title=\"Street Art\" rel=\"noopener\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thecommute?audio=y\" title=\"The Commute\" rel=\"noopener\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo?audio=y\" title=\"The Inner 'Burbs\" rel=\"noopener\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/bygone?audio=y\" title=\"Bygone\" rel=\"noopener\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thewest?audio=y\" title=\"West\" rel=\"noopener\">&#8220;West&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip?audio=y\" title=\"Walking Trip\" rel=\"noopener\">&#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' rel=\"noopener\">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\/' rel=\"noopener\">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\/' rel=\"noopener\">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\" rel=\"noopener\"><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\/' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\"><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' rel=\"noopener\">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\" rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">download PHP code<\/a> <font size=1>(perhaps to a <a target=\"_blank\" title='MAMP' href='http:\/\/www.mamp.info' rel=\"noopener\">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\/' rel=\"noopener\">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\/' rel=\"noopener\">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\" rel=\"noopener\"><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' rel=\"noopener\"><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\" rel=\"noopener\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\" title=\"Street Art\" rel=\"noopener\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\" title=\"The Commute\" rel=\"noopener\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\" title=\"The Inner 'Burbs\" rel=\"noopener\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/bygone\" title=\"Bygone\" rel=\"noopener\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thewest\" title=\"West\" rel=\"noopener\">&#8220;West&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip\" title=\"Walking Trip\" rel=\"noopener\">&#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' rel=\"noopener\">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\/' rel=\"noopener\">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\/' rel=\"noopener\">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\" rel=\"noopener\"><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\" rel=\"noopener\">\"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' rel=\"noopener\">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\/' rel=\"noopener\">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' rel=\"noopener\"><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.' rel=\"noopener\"><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' rel=\"noopener\">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-' rel=\"noopener\">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\" rel=\"noopener\">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\" rel=\"noopener\">&#8220;The Commute&#8221;<\/a>, with music courtesy of the generous <a target=\"_blank\" title='Free Soundtrack Music' href='http:\/\/www.freesoundtrackmusic.com' rel=\"noopener\">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\/' rel=\"noopener\">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\/' rel=\"noopener\">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\" rel=\"noopener\"><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' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/index.php-GETME\" title=\"index.php\" rel=\"noopener\">index.php<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/index.php\" title=\"Click picture\" rel=\"noopener\">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\" rel=\"noopener\">&#8220;Ephemeral&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\" title=\"Street Art\" rel=\"noopener\">&#8220;Street Art&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\" title=\"The Commute\" rel=\"noopener\">&#8220;The Commute&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\" title=\"The Inner 'Burbs\" rel=\"noopener\">&#8220;The Inner &#8216;Burbs&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/bygone\" title=\"Bygone\" rel=\"noopener\">&#8220;Bygone&#8221;<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/thewest\" title=\"West\" rel=\"noopener\">&#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\/' rel=\"noopener\">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\/' rel=\"noopener\">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\" rel=\"noopener\"><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' rel=\"noopener\">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\" rel=\"noopener\">index.php<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\" rel=\"noopener\">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\/' rel=\"noopener\">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\/' rel=\"noopener\">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\" rel=\"noopener\"><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' rel=\"noopener\">&#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' rel=\"noopener\">&#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' rel=\"noopener\">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\" rel=\"noopener\">caller.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/responsive\/caller.html\" rel=\"noopener\">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<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='#d57477' onclick='var dv=document.getElementById(\"d57477\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scroll\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57477' 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='#d67371' onclick='var dv=document.getElementById(\"d67371\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/filter\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67371' 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='#d67402' onclick='var dv=document.getElementById(\"d67402\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67402' 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='#d67426' onclick='var dv=document.getElementById(\"d67426\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gesture\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67426' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s &#8230; One Image Website Image Snapshot Editing Tutorial used web browser new tab webpages to allow for image editing and annotating &#8230; but with today&#8217;s &#8230; WordPress Blog Posting Feature Image Editing Tutorial we&#8217;re using a hosted HTML iframe &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-posting-feature-image-editing-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[151,3959,327,2518,409,431,485,557,3961,576,578,587,590,3137,599,652,3987,2717,864,872,1738,929,931,997,1761,1069,1917,1107,2024,3169,1161,1209,5134,1212,1230,2001,3945,1319,3214,1404,4382,3551,1433,4401,1456],"class_list":["post-67426","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-blog","tag-blog-posting","tag-did-you-know","tag-drawimage","tag-external-javascript","tag-filter","tag-gesture","tag-hashtag","tag-hashtagging","tag-html","tag-html5","tag-iframe","tag-image","tag-image-editor","tag-img","tag-javascript","tag-oncontextmenu","tag-one-image","tag-one-image-website","tag-ontouchend","tag-photo","tag-photograph","tag-photography","tag-programming","tag-prompt","tag-right-click","tag-scroll","tag-scrolling","tag-session","tag-sessionstorage","tag-snapshot","tag-style","tag-style-aesthetics","tag-styling","tag-swipe-gesture","tag-tab","tag-tidy","tag-tutorial","tag-user-interaction","tag-web-browser","tag-web-browser-tab","tag-window-localstorage","tag-window-open","tag-window-sessionstorage","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67426"}],"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=67426"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67426\/revisions"}],"predecessor-version":[{"id":67475,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67426\/revisions\/67475"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=67426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=67426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=67426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}