{"id":65057,"date":"2024-10-16T03:01:00","date_gmt":"2024-10-15T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=65057"},"modified":"2024-10-15T10:13:11","modified_gmt":"2024-10-15T00:13:11","slug":"wordpress-hosted-iframe-jitteriness-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-hosted-iframe-jitteriness-primer-tutorial\/","title":{"rendered":"WordPress Hosted Iframe Jitteriness Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress Hosted Iframe Jitteriness Primer Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/fixing_jittery_look_regarding_iframe.gif\" title=\"WordPress Hosted Iframe Jitteriness Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">WordPress Hosted Iframe Jitteriness Primer Tutorial<\/p><\/div>\n<p>We came across <i>it<\/i> again the other day re-reading <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/colour-wheel-canvas-analogue-clock-background-blend-mode-tutorial\/' title='Colour Wheel Canvas Analogue Clock Background Blend Mode Tutorial' rel=\"noopener\">Colour Wheel Canvas Analogue Clock Background Blend Mode Tutorial<\/a>.  We&#8217;re sure we&#8217;ve remedied <i>it<\/i>, in <i>various ways<\/i> on various occasions.<\/p>\n<p>What&#8217;s <i>it<\/i>?  Glad you asked.<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Information_technology'><p>\nInformation technology (IT) is a set of related fields that encompass computer systems, software, programming languages, and data and information processing, and storage.[1] IT forms part of information and communications technology (ICT).\n<\/p><\/blockquote>\n<p>Sorry, wrong cue card &#8230; transmission will resume shortly.<\/p>\n<p><i>It<\/i><sup>&#8216;s<\/sup> the scenario where &#8230;<\/p>\n<ul>\n<li>an iframe HTML element is placed down a ways into a webpage hosted by, in our case &#8230;<\/li>\n<li>a WordPress blog webpage &#8230; and &#8230;<\/li>\n<li>that iframe&#8217;s Javascript or HTML causes a scrolling action to happen within it on or after it&#8217;s <i>onload<\/i> event logic via, off the top of our head, one of &#8230;\n<ol>\n<li>[HTMLelement].focus(); \/\/ to textarea or input textbox element (on non-mobile &#8230; on mobile, this would be ignored)<\/li>\n<li>[HTMLelement].scrollIntoView();<\/li>\n<li>window.scrollTo([leftpx], [toppx]);<\/li>\n<li>location.href=&#8217;#[HTMLid]&#8217;;<\/li>\n<li>location.hash=&#8217;#[HTMLid]&#8217;; \/\/ might be something to worry about<\/li>\n<li>iframe <i>src<\/i> attribute&#8217;s URL has a #[HTMLid] hashtag repositioning down a ways &#8230; might also be something to worry about<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; causing a jittery effect for a user in all probability wanting to read the blog posting content from the top rather than being forced to have the iframe &#8220;in the fold&#8221; as they open the blog posting, and them having to manually scroll up to get to what they intended to read, first.<\/p>\n<p>In amongst <i>various ways<\/i> we&#8217;ve used in the past to remedy, off the top of our head, in the past &#8230;<\/p>\n<ul>\n<li><font color=blue>we&#8217;ve added<\/font> into the iframe&#8217;s Javascript code like (where the example tries to remedy a <i>[HTMLelement].focus();<\/i> type scenario, but could just as easily be applied to other types of scenarios detected on or after the document.body <i>onload<\/i> event) &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;&lt;body onload=\" <font color=blue>if (window.self != window.parent) { document.getElementById('textbox_to_focus').value=document.getElementById('textbox_to_focus').value; } else {<\/font> document.getElementById('textbox_to_focus').focus(); <font color=blue>}<\/font> \"&gt;[ ... webpage content ... ]&lt;\/body&gt;&lt;\/html&gt;<br \/>\n<\/code><br \/>\n &#8230; with maybe an 80% success rate &#8230; but then we remember another circumventory approach as per the previous  <a title='Image Filter Display Tutorial' href='#ifdt'>Image Filter Display Tutorial<\/a> &#8230;\n<\/li>\n<li>an approach within the remit of the hoster&#8217;s Content Management System (ie. a blog posting&#8217;s HTML content) that within the iframe&#8217;s call&#8217;s blog posting content we add <font color=purple>a fix<\/font> like &#8230;<br \/>\n<code><br \/>\n&lt;iframe <font color=purple>onload=\"setTimeout(function(){ location.href='#content'; }, 7000);\"<\/font> style='width:100%;height:1500px;' src='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php?image=.\/street_art_katoomba.gif'&gt;&lt;\/iframe&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; so that the jitteriness becomes <i>short lived<\/i>.  You want better than <i>short lived<\/i>?  Use some version of the first methodology sets of the two sets above.<\/p>\n<p>What remedy did we apply to <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/colour-wheel-canvas-analogue-clock-background-blend-mode-tutorial\/' title='Colour Wheel Canvas Analogue Clock Background Blend Mode Tutorial' rel=\"noopener\">Colour Wheel Canvas Analogue Clock Background Blend Mode Tutorial<\/a>, featuring in <a target=\"_blank\" rel=\"noopener\">today&#8217;s animated GIF presentation<\/a>, and it&#8217;s ilk (ie. other blog postings in a thread will suffer as well)?<\/p>\n<p><code><br \/>\n&lt;iframe scrolling=no <font color=purple>onload=\"setTimeout(function(){ top.location.href='#content'; }, 5000);\"<\/font>  style='width:100%;height:900px;' src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=320.360&text=1%3Cspan%3E2%3C%2Fspan%3E1234567891%3Cspan%3E0%3C%2Fspan%3E1%3Cspan%3E1%3C%2Fspan%3E%3Ciframe%20frameborder%3D0%20style%3D%27z-index%3A23%3Bmargin-left%3A127px%3Bmargin-top%3A130px%3Bheight%3A400px%3B%27%20src%3Danalogue_clock.htm%23xbody%3E%3C%2Fiframe%3E'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-image-filter-display-tutorial\/' rel=\"noopener\">New Image Filter Display Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ifdt'>Previous relevant <a target=\"_blank\" title='Image Filter Display Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image-filter-display-tutorial\/' rel=\"noopener\">Image Filter Display Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_css_filter_display.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image Filter Display Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_css_filter_display.jpg\" title=\"Image Filter Display Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Image Filter Display Tutorial<\/p><\/div>\n<p>We&#8217;re glad today&#8217;s &#8220;Image Filter Display Tutorial&#8221; blog posting title is shorter than yesterday&#8217;s &#8220;Animated GIF Duration Calculation Filter Browsing Tutorial&#8221; because the main task today was &#8230;<\/p>\n<ul>\n<li>to take all our &#8220;proof of concept&#8221; web applications and distil them down to an &#8220;Image Filter Display&#8221; web application of far greater simplicity &#8230; and along that way &#8230;<\/li>\n<li>we had to play around with one more &#8220;proof of concept&#8221; idea, that of allowing the user to control the content of the CSS filters dropdown, and our first &#8220;out there&#8221; thought that <i>contenteditable=true<\/i> could be applied to all the dropdown&#8217;s option elements to achieve this needed to be disproved (as it took two hours to be sure of &#8230; to be sure) &#8230; in favour of a new dropdown &#8220;Change&#8221; option solution &#8230;<br \/>\n<code><br \/>\n  function callresell() {<br \/>\n    var oselo=document.getElementById('simgag');<br \/>\n    var svalis='';<br \/>\n    var sc=';';<br \/>\n    var changefound=false;<br \/>\n    if (document.getElementById('imgag')) {<br \/>\n    oselo.value=document.getElementById('imgag').title;<br \/>\n    }<br \/>\n    var reselit=prompt('Please change the semicolon separated options list.  Optionally hash # separate a CSS filter refresh interval in seconds (currently ' + eval(Math.abs(ingifint) \/ 1000.000) + ' seconds).', oselo.innerText);<br \/>\n    if (reselit != null) {<br \/>\n      if (reselit.indexOf('#') != -1) {<br \/>\n         if (ingifint &lt; 0) {<br \/>\n         ingifint=Math.round(eval(-1000.0 * eval('' + reselit.split('#')[1].split(';')[0])));<br \/>\n         } else {<br \/>\n         ingifint=Math.round(eval(1000.0 * eval('' + reselit.split('#')[1].split(';')[0])));<br \/>\n         }<br \/>\n         reselit=reselit.replace('#' + reselit.split('#')[1].split(';')[0], '');<br \/>\n      }<br \/>\n    }<br \/>\n    if (reselit == null) {<br \/>\n      return '';<br \/>\n    } else if (reselit != oselo.innerText) {<br \/>\n      var sih=oselo.innerHTML;<br \/>\n      var vsl=reselit.split(';');<br \/>\n      var shi=sih.split('&lt;\/option&gt;');<br \/>\n      var ssize='' + oselo.size;<br \/>\n      var vssize=0;<br \/>\n      var newih='';<br \/>\n      for (var ihi=0; ihi&lt;vsl.length; ihi++) {<br \/>\n       if (vsl[ihi].trim() != '') {<br \/>\n        if (vsl[ihi].trim() == 'Change') { changefound=true; sc='';  } else { sc=';';  }<br \/>\n        if (eval('' + shi.length) &gt; ihi) {<br \/>\n          if (eval('' + (shi[ihi] + '&lt;\/option&gt;').split(vsl[ihi].trim() + sc).length) == 3) {<br \/>\n            newih+=shi[ihi] + '&lt;\/option&gt;';<br \/>\n            vssize++;<br \/>\n          } else {<br \/>\n            svalis=shi[ihi].split(' value=\"')[1].split('\"')[0];<br \/>\n            newih+=shi[ihi].split('&gt;')[0].replace(svalis, vsl[ihi].trim() + sc) + '&gt;' + vsl[ihi].trim() + sc + '&lt;\/option&gt;';<br \/>\n            vssize++;<br \/>\n          }<br \/>\n        } else if (vsl[ihi].trim().indexOf('filter:') == 0) {<br \/>\n          newih+='&lt;option contenteditable=true value=\"' + vsl[ihi].trim() + sc + '\"&gt;' + vsl[ihi].trim() + sc + '&lt;\/option&gt;';<br \/>\n            vssize++;<br \/>\n        } else {<br \/>\n          newih+='&lt;option contenteditable=true value=\"' + vsl[ihi].trim() + '\"&gt;' + vsl[ihi].trim() + '' + '&lt;\/option&gt;';<br \/>\n            vssize++;<br \/>\n        }<br \/>\n       }<br \/>\n      }<br \/>\n      if (!changefound) {<br \/>\n          newih+='&lt;option contenteditable=true value=\"Change\"&gt;Change&lt;\/option&gt;';<br \/>\n            vssize++;<br \/>\n      }<br \/>\n      oselo.innerHTML=newih;<br \/>\n      if (eval('' + ssize) != eval('' + vssize)) {<br \/>\n        oselo.size='' + eval('' + vssize);<br \/>\n      }<br \/>\n    }<br \/>\n    return '';<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; and &#8230;<\/li>\n<li>in the image browsing helper we needed to allow for non animated GIF images, as we did for our new <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_css_filter_display.html_GETME\" rel=\"noopener\">image_css_filter_display.html<\/a> &#8220;first draft&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_css_filter_display.html\" rel=\"noopener\">&#8220;Image Filter Display&#8221; web application&#8221;<\/a><\/li>\n<\/ul>\n<p>And so, onto yesterday&#8217;s <a title='Animated GIF Duration Calculation Filter Browsing Tutorial' href='#agifdcfbt'>Animated GIF Duration Calculation Filter Browsing Tutorial<\/a> we developed, today, <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html----------------------------------GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html----------------------------------GETME\" rel=\"noopener\">client_browsing.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\" rel=\"noopener\">helper web application<\/a> you can try for yourself as a standalone arrangement or have it get called via <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php----------GETME' rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php----------GETME' rel=\"noopener\">read_exif_off_image_rotate.php<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php' rel=\"noopener\">PHP image exif reporter web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-animated-gif-duration-calculation-filter-browsing-tutorial\/' rel=\"noopener\">New Animated GIF Duration Calculation Filter Browsing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifdcfbt'>Previous relevant <a target=\"_blank\" title='Animated GIF Duration Calculation Filter Browsing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-duration-calculation-filter-browsing-tutorial\/' rel=\"noopener\">Animated GIF Duration Calculation Filter Browsing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF CSS Filter Browsing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ag_filter_browsing.gif\" title=\"Animated GIF Duration Calculation Filter Browsing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Duration Calculation Filter Browsing Tutorial<\/p><\/div>\n<p>Can a &#8220;proof of concept&#8221; arrangement last three blog postings?  If there&#8217;s more you want to prove, ahead of committing to the final product that might hone in on the specificity of the idea<font color=olive>, and another iframe hosted web application joins in on &#8220;proof of concept&#8221; goings on and will be useful into the future<\/font>, we&#8217;d say it&#8217;s possible, yes.  But we <i>would<\/i> say that, <font color=olive>wouldn&#8217;t we<\/font>?!<\/p>\n<p>In our defence, it is easier to prove all solutions to all the contentious issues, and then hone in and reduce to make a specific new web application, rather than extending and still needing to prove as you go along, not knowing whether an issue will cause you insurmountable issues in the future.<\/p>\n<blockquote><p>\nBut they <i>would<\/i> say that, <font color=olive>wouldn&#8217;t they<\/font>?!\n<\/p><\/blockquote>\n<p>And so, continuing on from the recent <a title='Animated GIF Duration Calculation Filter Tutorial' href='#agifdcft'>Animated GIF Duration Calculation Filter Tutorial<\/a> we considered another mode that a user might use on top of &#8230;<\/p>\n<ul>\n<li>entering an image (animated GIF) URL into a textbox &#8230; that being to &#8230;<\/li>\n<li>browse for a local system (animated GIF) file (via <a target=\"_blank\" title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/' rel=\"noopener\">File API<\/a>)<\/li>\n<\/ul>\n<p> &#8230; getting us to call on changes to our &#8220;via File API&#8221; specialist with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html---------------------------------GETME\" rel=\"noopener\">a changed<\/a> (with new data URI supporting Javascript) &#8230;<\/p>\n<p><code><br \/>\nvar ingif='', ingifstyle='filter: none;', ingifint=0, ingifchosen=false, isag=-1, isagname='';<br \/>\n<br \/>\nfunction prefetch(whatgifmaybe) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-duration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,duration%20of%20a%20GIF%20image.<br \/>\nif ((whatgifmaybe.toLowerCase().trim().split('#')[0] + '?').indexOf('.gif?') != -1 || whatgifmaybe.indexOf('data:image\/gif') == 0) {<br \/>\ningif=whatgifmaybe;<br \/>\ndocument.body.style.cursor='progress';<br \/>\nfetch(whatgifmaybe)<br \/>\n  .then(res =&gt; res.arrayBuffer())<br \/>\n  .then(ab =&gt; isGifAnimated(new Uint8Array(ab)))<br \/>\n  .then(console.log);<br \/>\n}<br \/>\n}<br \/>\n<br \/>\nfunction clooktv(intv) {<br \/>\n  var finds=[];<br \/>\n  document.getElementById('imgag').title=intv;<br \/>\n  if (ingifchosen) {<br \/>\n  finds=document.getElementById('simgag').outerHTML.split('&gt;' + intv + '&lt;\/option&gt;');<br \/>\n  if (eval('' + finds.length) &gt; 1) {<br \/>\n    document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('&gt;' + ingifstyle + '&lt;\/option&gt;', ' selected&gt;' + ingifstyle + '&lt;\/option&gt;');<br \/>\n  }<br \/>\n  }<br \/>\n  document.body.innerHTML+='&lt;style&gt; #imgag { ' + intv + ' } &lt;\/style&gt;';<br \/>\n  return intv;<br \/>\n}<br \/>\n<br \/>\nfunction changelook() {<br \/>\n var finds=[];<br \/>\n if (ingifint &gt; 0) {<br \/>\n  setTimeout(changelook, ingifint);<br \/>\n  if (ingifchosen) {<br \/>\n  ingifchosen=false;<br \/>\n  } else {<br \/>\n  finds=document.getElementById('simgag').outerHTML.split('&gt;' + ingifstyle + '&lt;\/option&gt;');<br \/>\n  if (eval('' + finds.length) &gt; 1) {<br \/>\n    if (finds[1].indexOf('&lt;\/select&gt;') == 0) {<br \/>\n      ingifstyle='filter: none;';<br \/>\n      document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('&gt;' + ingifstyle + '&lt;\/option&gt;', ' selected&gt;' + ingifstyle + '&lt;\/option&gt;');<br \/>\n    } else {<br \/>\n      ingifstyle=finds[1].split('&gt;')[1].split('&lt;')[0];<br \/>\n      document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('&gt;' + ingifstyle + '&lt;\/option&gt;', ' selected&gt;' + ingifstyle + '&lt;\/option&gt;');<br \/>\n    }<br \/>\n    document.getElementById('simgag').value=clooktv(ingifstyle);<br \/>\n  }<br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<br \/>\n\/** @param {Uint8Array} uint8 *\/<br \/>\nfunction isGifAnimated (uint8) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-duration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,duration%20of%20a%20GIF%20image.<br \/>\n  let duration = 0;<br \/>\n  for (let i = 0, len = uint8.length; i &lt; len; i++) {<br \/>\n    if (uint8[i] == 0x21<br \/>\n      && uint8[i + 1] == 0xF9<br \/>\n      && uint8[i + 2] == 0x04<br \/>\n      && uint8[i + 7] == 0x00)<br \/>\n    {<br \/>\n      const delay = (uint8[i + 5] &lt;&lt; 8) | (uint8[i + 4] & 0xFF);<br \/>\n      duration += delay &lt; 2 ? 10 : delay;<br \/>\n    }<br \/>\n  }<br \/>\n  \/\/alert('' + eval(duration \/ 100));<br \/>\n  if (eval(duration \/ 100) &gt; 0.11) {<br \/>\n    \/\/alert('' + duration);<br \/>\n    var damore='', wpthere=false;<br \/>\n    if (document.getElementById('aside')) {<br \/>\n     if (document.getElementById('aside').outerHTML.toLowerCase().indexOf('&lt;div') == 0) {<br \/>\n     damore=' showing &lt;select onchange=\\\"ingifchosen=true; ingifstyle=clooktv(this.value);\\\" id=simgag size=13&gt;&lt;option value=\\\"filter: none;\\\" selected&gt;filter: none;&lt;\/option&gt;&lt;option value=\\\"filter: blur(5px);\\\"&gt;filter: blur(5px);&lt;\/option&gt;&lt;option value=\\\"filter: brightness(0.4);\\\"&gt;filter: brightness(0.4);&lt;\/option&gt;&lt;option value=\\\"filter: contrast(200%);\\\"&gt;filter: contrast(200%);&lt;\/option&gt;&lt;option value=\\\"filter: drop-shadow(16px 16px 20px blue);\\\"&gt;filter: drop-shadow(16px 16px 20px blue);&lt;\/option&gt;&lt;option value=\\\"filter: grayscale(50%);\\\"&gt;filter: grayscale(50%);&lt;\/option&gt;&lt;option value=\\\"filter: hue-rotate(90deg);\\\"&gt;filter: hue-rotate(90deg);&lt;\/option&gt;&lt;option value=\\\"filter: invert(75%);\\\"&gt;filter: invert(75%);&lt;\/option&gt;&lt;option value=\\\"filter: opacity(25%);\\\"&gt;filter: opacity(25%);&lt;\/option&gt;&lt;option value=\\\"filter: saturate(30%);\\\"&gt;filter: saturate(30%);&lt;\/option&gt;&lt;option value=\\\"filter: sepia(60%);\\\"&gt;filter: sepia(60%);&lt;\/option&gt;&lt;option value=\\\"filter: contrast(175%) brightness(33%);\\\"&gt;filter: contrast(175%) brightness(33%);&lt;\/option&gt;&lt;option value=\\\"filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);\\\"&gt;filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);&lt;\/option&gt;&lt;\/select&gt;&lt;br&gt;&lt;br&gt;&lt;img onload=\\\"if (ingifint == 0) {  ingifint=' + eval(duration * 10) + '; setTimeout(changelook, eval(800 + ingifint)); }\\\" title=\\\"filter: none;\\\" src=\\\"' + ingif + '\\\" id=imgag&gt;&lt;\/img&gt;&lt;br&gt;';<br \/>\n     \/\/ingifint=eval(duration * 10);<br \/>\n     \/\/setTimeout(changelook, eval(duration * 10));<br \/>\n     if (window.parent) {<br \/>\n       if (window.self !== window.parent && parent.document.getElementById('aside')) {<br \/>\n         wpthere=true;<br \/>\n         parent.document.getElementById('aside').innerHTML='Animated GIF ' + isagname + ' duration is ' + eval(duration \/ 100) + ' seconds ' + damore;<br \/>\n         parent.document.getElementById('aside').scrollIntoView();<br \/>\n     parent.document.getElementById('image').style.opacity='0.5';<br \/>\n     parent.document.getElementById('image').style.width='5%';<br \/>\n     parent.document.getElementById('isub').style.opacity='0.5';<br \/>\n      } else {<br \/>\n     document.getElementById('aside').style.display='block';<br \/>\n     document.getElementById('aside').innerHTML='Animated GIF ' + isagname + ' duration is ' + eval(duration \/ 100) + ' seconds ' + damore;<br \/>\n       }<br \/>\n     } else {<br \/>\n     document.getElementById('aside').style.display='block';<br \/>\n     document.getElementById('aside').innerHTML='Animated GIF ' + isagname + ' duration is ' + eval(duration \/ 100) + ' seconds ' + damore;<br \/>\n     }<br \/>\n     if (!wpthere) { document.getElementById('aside').scrollIntoView(); }<br \/>\n     } else {<br \/>\n     document.getElementById('aside').innerHTML='  (&lt;?php echo $image; ?&gt; animated GIF ' + isagname + ' duration is ' + eval(duration \/ 100) + ' seconds)' + damore;<br \/>\n     }<br \/>\n    }<br \/>\n  \/\/} else {<br \/>\n    \/\/alert('duration=' + duration);<br \/>\n  }<br \/>\n  document.body.style.cursor='pointer';<br \/>\n  return duration \/ 100; \/\/ if 0.1 is not an animated GIF<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html---------------------------------GETME\" rel=\"noopener\">client_browsing.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\" rel=\"noopener\">helper web application<\/a> you can try for yourself as a standalone arrangement or have it get called via <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php---------GETME' rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php---------GETME' rel=\"noopener\">read_exif_off_image_rotate.php<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php' rel=\"noopener\">PHP image exif reporter web application<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>A quirk with our new HTML button element within an HTML form had us, initially, before realizing &#8230;<\/p>\n<ul>\n<li>onmousedown event event.<a target=\"_blank\" title='Javascript event.stopPropagation() method information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_stoppropagation.asp' rel=\"noopener\">stopPropagation<\/a>() usage can be used to cancel a following onclick event on non-mobile &#8230; and &#8230;<\/li>\n<li>ontouchdown <font size=6>(yay!!!)<\/font> event event.<a target=\"_blank\" title='Javascript event.stopPropagation() method information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_stoppropagation.asp' rel=\"noopener\">stopPropagation<\/a>() usage can be used to cancel a following onclick event on mobile<\/li>\n<\/ul>\n<p> &#8230; as in &#8230;<\/p>\n<p><code><br \/>\n&lt;button title='Click or touch here, as required, for chance to browse for Animated GIF' ontouchdown='event.stopPropagation(); spagif();' onmousedown='event.stopPropagation(); spagif();'>&lt;sup&gt;Animated&lt;\/sup&gt;&lt;sub&gt;GIF&lt;\/sub&gt;&lt;\/button&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and could overcome the adverse &#8220;onclick&#8221; based coding we had prior to the discovery.  Thanks to <a target=\"_blank\" href='https:\/\/stackoverflow.com\/questions\/21900470\/does-using-event-preventdefault-in-mousedown-prevent-click-or-mouseup-ev' title='javascript - Does using event.preventDefault() in \"mousedown\" prevent \"click\" or \"mouseup\" event in jquery? - Stack Overflow' rel=\"noopener\">javascript &#8211; Does using event.preventDefault() in &#8220;mousedown&#8221; prevent &#8220;click&#8221; or &#8220;mouseup&#8221; event in jquery? &#8211; Stack Overflow<\/a> for the heads up about this.<\/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-animated-gif-duration-calculation-filter-tutorial\/' rel=\"noopener\">New Animated GIF Duration Calculation Filter Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifdcft'>Previous relevant <a target=\"_blank\" title='Animated GIF Duration Calculation Filter Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-duration-calculation-filter-tutorial\/' rel=\"noopener\">Animated GIF Duration Calculation Filter Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF CSS Filter Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ag_filter.gif\" title=\"Animated GIF Duration Calculation Filter Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Duration Calculation Filter Tutorial<\/p><\/div>\n<p>Can a &#8220;proof of concept&#8221; arrangement last two blog postings?  If there&#8217;s more you want to prove, ahead of committing to the final product that might hone in on the specificity of the idea, we&#8217;d say it&#8217;s possible, yes.  And so, continuing on from the recent <a title='Animated GIF Duration Calculation Primer Tutorial' href='#agifdcpt'>Animated GIF Duration Calculation Primer Tutorial<\/a> we tweak its PHP hosting &#8220;proof of concept&#8221; parent web application to try out our second point we&#8217;re out to prove &#8230;<\/p>\n<blockquote><p>\nWe want to prove that CSS <a target=\"_blank\" title='CSS filters' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/filter' rel=\"noopener\">filter<\/a> works for animated GIFs as well as it appears to work with other image types of elements.\n<\/p><\/blockquote>\n<p>Conservative worry, we grant you, but we did want to make sure this all worked, and happily, it was all fine &#8230;<\/p>\n<p><code><br \/>\n  var ingif='', ingifstyle='filter: none;', ingifint=0, ingifchosen=false;<br \/>\n<br \/>\nfunction prefetch(whatgifmaybe) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-duration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,duration%20of%20a%20GIF%20image.<br \/>\nif ((whatgifmaybe.toLowerCase().trim().split('#')[0] + '?').indexOf('.gif?') != -1) {<br \/>\ningif=whatgifmaybe;<br \/>\ndocument.body.style.cursor='progress';<br \/>\nfetch(whatgifmaybe)<br \/>\n  .then(res =&gt; res.arrayBuffer())<br \/>\n  .then(ab =&gt; isGifAnimated(new Uint8Array(ab)))<br \/>\n  .then(console.log);<br \/>\n}<br \/>\n}<br \/>\n<br \/>\nfunction clooktv(intv) {<br \/>\n  var finds=[];<br \/>\n  document.getElementById('imgag').title=intv;<br \/>\n  if (ingifchosen) {<br \/>\n  finds=document.getElementById('simgag').outerHTML.split('&gt;' + intv + '&lt;\/option&gt;');<br \/>\n  if (eval('' + finds.length) &gt; 1) {<br \/>\n    document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('&gt;' + ingifstyle + '&lt;\/option&gt;', ' selected&gt;' + ingifstyle + '&lt;\/option&gt;');<br \/>\n  }<br \/>\n  }<br \/>\n  document.body.innerHTML+='&lt;style&gt; #imgag { ' + intv + ' } &lt;\/style&gt;';<br \/>\n  return intv;<br \/>\n}<br \/>\n<br \/>\nfunction changelook() {<br \/>\n var finds=[];<br \/>\n if (ingifint &gt; 0) {<br \/>\n  setTimeout(changelook, ingifint);<br \/>\n  if (ingifchosen) {<br \/>\n  ingifchosen=false;<br \/>\n  } else {<br \/>\n  finds=document.getElementById('simgag').outerHTML.split('&gt;' + ingifstyle + '&lt;\/option&gt;');<br \/>\n  if (eval('' + finds.length) &gt; 1) {<br \/>\n    if (finds[1].indexOf('&lt;\/select&gt;') == 0) {<br \/>\n      ingifstyle='filter: none;';<br \/>\n      document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('&gt;' + ingifstyle + '&lt;\/option&gt;', ' selected&gt;' + ingifstyle + '&lt;\/option&gt;');<br \/>\n    } else {<br \/>\n      ingifstyle=finds[1].split('&gt;')[1].split('&lt;')[0];<br \/>\n      document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('&gt;' + ingifstyle + '&lt;\/option&gt;', ' selected&gt;' + ingifstyle + '&lt;\/option&gt;');<br \/>\n    }<br \/>\n    document.getElementById('simgag').value=clooktv(ingifstyle);<br \/>\n  }<br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<br \/>\n\/** @param {Uint8Array} uint8 *\/<br \/>\nfunction isGifAnimated (uint8) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-duration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,duration%20of%20a%20GIF%20image.<br \/>\n  let duration = 0;<br \/>\n  for (let i = 0, len = uint8.length; i &lt; len; i++) {<br \/>\n    if (uint8[i] == 0x21<br \/>\n      && uint8[i + 1] == 0xF9<br \/>\n      && uint8[i + 2] == 0x04<br \/>\n      && uint8[i + 7] == 0x00)<br \/>\n    {<br \/>\n      const delay = (uint8[i + 5] &lt;&lt; 8) | (uint8[i + 4] & 0xFF);<br \/>\n      duration += delay &lt; 2 ? 10 : delay;<br \/>\n    }<br \/>\n  }<br \/>\n  \/\/alert('' + eval(duration \/ 100));<br \/>\n  if (eval(duration \/ 100) &gt; 0.11) {<br \/>\n    var damore='';<br \/>\n    if (document.getElementById('aside')) {<br \/>\n     if (document.getElementById('aside').outerHTML.toLowerCase().indexOf('&lt;div') == 0) {<br \/>\n     damore=' showing &lt;select onchange=\\\"ingifchosen=true; ingifstyle=clooktv(this.value);\\\" id=simgag size=13&gt;&lt;option value=\\\"filter: none;\\\" selected&gt;filter: none;&lt;\/option&gt;&lt;option value=\\\"filter: blur(5px);\\\"&gt;filter: blur(5px);&lt;\/option&gt;&lt;option value=\\\"filter: brightness(0.4);\\\"&gt;filter: brightness(0.4);&lt;\/option&gt;&lt;option value=\\\"filter: contrast(200%);\\\"&gt;filter: contrast(200%);&lt;\/option&gt;&lt;option value=\\\"filter: drop-shadow(16px 16px 20px blue);\\\"&gt;filter: drop-shadow(16px 16px 20px blue);&lt;\/option&gt;&lt;option value=\\\"filter: grayscale(50%);\\\"&gt;filter: grayscale(50%);&lt;\/option&gt;&lt;option value=\\\"filter: hue-rotate(90deg);\\\"&gt;filter: hue-rotate(90deg);&lt;\/option&gt;&lt;option value=\\\"filter: invert(75%);\\\"&gt;filter: invert(75%);&lt;\/option&gt;&lt;option value=\\\"filter: opacity(25%);\\\"&gt;filter: opacity(25%);&lt;\/option&gt;&lt;option value=\\\"filter: saturate(30%);\\\"&gt;filter: saturate(30%);&lt;\/option&gt;&lt;option value=\\\"filter: sepia(60%);\\\"&gt;filter: sepia(60%);&lt;\/option&gt;&lt;option value=\\\"filter: contrast(175%) brightness(33%);\\\"&gt;filter: contrast(175%) brightness(33%);&lt;\/option&gt;&lt;option value=\\\"filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);\\\"&gt;filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);&lt;\/option&gt;&lt;\/select&gt;&lt;br&gt;&lt;br&gt;&lt;img onload=\\\"if (ingifint == 0) {  ingifint=' + eval(duration * 10) + '; setTimeout(changelook, eval(800 + ingifint)); }\\\" title=\\\"filter: none;\\\" src=\\\"' + ingif + '\\\" id=imgag&gt;&lt;\/img&gt;&lt;br&gt;';<br \/>\n     document.getElementById('aside').innerHTML='&lt;?php echo $image; ?&gt; Animated GIF ' + ingif.split('#')[0].split('?')[0] + ' duration is ' + eval(duration \/ 100) + ' seconds ' + damore;<br \/>\n     \/\/ingifint=eval(duration * 10);<br \/>\n     \/\/setTimeout(changelook, eval(duration * 10));<br \/>\n     document.getElementById('aside').scrollIntoView();<br \/>\n     } else {<br \/>\n     document.getElementById('aside').innerHTML='  (&lt;?php echo $image; ?&gt; animated GIF ' + ingif.split('#')[0].split('?')[0] + ' duration is ' + eval(duration \/ 100) + ' seconds)' + damore;<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n  document.body.style.cursor='pointer';<br \/>\n  return duration \/ 100; \/\/ if 0.1 is not an animated GIF<br \/>\n}<br \/>\n<\/code><\/p>\n<p>And so, especially because GIF images cannot be useful for exif information, it helps us isolate our &#8220;proof of concept&#8221; feel to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php--------GETME' rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php--------GETME' rel=\"noopener\">read_exif_off_image_rotate.php<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php' rel=\"noopener\">PHP image exif reporter web application<\/a> which we can supply an argument to such as the <a target=\"_blank\" title='Katoomba Street Art Walk' href='https:\/\/www.visitnsw.com\/destinations\/blue-mountains\/katoomba-area\/katoomba\/attractions\/street-art-walk' rel=\"noopener\">Katoomba Street Art Walk<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php?image=.\/street_art_katoomba.gif' rel=\"noopener\">inspired one<\/a> also shown below &#8230;<\/p>\n<p><iframe onload=\"setTimeout(function(){ location.href='#content'; }, 7000);\" style='width:100%;height:1500px;' src='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php?image=.\/street_art_katoomba.gif'><\/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\/animated-gif-css-filter-tutorial\/' rel=\"noopener\">Animated GIF CSS Filter Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifdcpt'>Previous relevant <a target=\"_blank\" title='Animated GIF Duration Calculation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-duration-calculation-primer-tutorial\/' rel=\"noopener\">Animated GIF Duration Calculation Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Duration Calculation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/oneoftwo_agif_dur.jpg\" title=\"Animated GIF Duration Calculation Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Duration Calculation Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got a new (mini-<sub>?<\/sub>)project developing.  No, it doesn&#8217;t hurt in the &#8220;you know what&#8221;!  But thanks for your concern?!<\/p>\n<p>It&#8217;s a project that reminds us about an adage regarding projects, that might seem pretty obvious, but is worth mentioning &#8230;<\/p>\n<blockquote><p>\nMany projects being 90% perspiration, 10% inspiration, there might be the &#8220;not sure we can do&#8221; items that should be tackled first.\n<\/p><\/blockquote>\n<p>That truism is all well and good, but not always possible, of course, when you have to set up the difficult environment ahead of testing this unknown.  Not so, with the &#8220;unknown&#8221; of our new project &#8230;<\/p>\n<blockquote><p>\nWe want to know whether we can detect an animated GIF media file playing duration, ideally in client side Javascript, and if not possible there, we would settle for a server side PHP solution.\n<\/p><\/blockquote>\n<p>Happily <font size=1>(via our <a target=\"_blank\" title='Google search for duration of animated GIF using Javascript' href='https:\/\/www.google.com\/search?q=duration+of+animated+GIF+using+Javascript&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=duration+of+animated+GIF+using+Javascript&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigAdIBCTExODE5ajFqNKgCALACAA&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">duration of animated GIF using Javascript<\/a> Google search)<\/font>, <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">yet again<\/a>, the online wooooorrrrlllldd has come to our rescue via <a target=\"_blank\" href='https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-duration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,duration%20of%20a%20GIF%20image.' rel=\"noopener\">this excellent webpage<\/a>&#8216;s Javascript ideas, so many thanks!<\/p>\n<p>We slotted its thinking <font size=1>(and Javascript (via PHP) &#8230;<\/p>\n<p><code><br \/>\nfunction prefetch(whatgifmaybe) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-duration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,duration%20of%20a%20GIF%20image.<br \/>\nif ((whatgifmaybe.toLowerCase().trim().split('#')[0] + '?').indexOf('.gif?') != -1) {<br \/>\ndocument.body.style.cursor='progress';<br \/>\nfetch(whatgifmaybe)<br \/>\n  .then(res => res.arrayBuffer())<br \/>\n  .then(ab => isGifAnimated(new Uint8Array(ab)))<br \/>\n  .then(console.log);<br \/>\n}<br \/>\n}<br \/>\n<br \/>\n\/** @param {Uint8Array} uint8 *\/<br \/>\nfunction isGifAnimated (uint8) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-duration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,duration%20of%20a%20GIF%20image.<br \/>\n  let duration = 0;<br \/>\n  for (let i = 0, len = uint8.length; i &lt; len; i++) {<br \/>\n    if (uint8[i] == 0x21<br \/>\n      && uint8[i + 1] == 0xF9<br \/>\n      && uint8[i + 2] == 0x04<br \/>\n      && uint8[i + 7] == 0x00)<br \/>\n    {<br \/>\n      const delay = (uint8[i + 5] << 8) | (uint8[i + 4] &#038; 0xFF);\n      duration += delay < 2 ? 10 : delay;\n    }\n  }\n  \/\/alert('' + eval(duration \/ 100));\n  if (eval(duration \/ 100) &gt; 0.11) {\n    if (document.getElementById('aside')) {\n     document.getElementById('aside').innerHTML='  (&lt;?php echo $image; ?&gt; animated GIF duration is ' + eval(duration \/ 100) + ' seconds)';\n    }\n  }\n  document.body.style.cursor='pointer';\n  return duration \/ 100; \/\/ if 0.1 is not an animated GIF\n}\n<\/code><\/p>\n<p> ... logic)<\/font>, you might say in a \"kludgy\" way (but, for us, serving a \"proof of concept\" purpose), that allows us to proceed on other aims of our project that will become apparent into the near future.  No, we are not totally \"out of the woods\" yet regarding \"unknowns\" but <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php-------GETME' rel=\"noopener\">today's changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php-------GETME' rel=\"noopener\">read_exif_off_image_rotate.php<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php' rel=\"noopener\">PHP image exif reporter web application<\/a>) into the \"onblur\" logic of an image URL textbox HTML element, that web application talked about when we presented <a target=\"_blank\" title='Gimp Guillotine Image File Browse Media Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-image-file-browse-media-tutorial' rel=\"noopener\">Gimp Guillotine Image File Browse Media Tutorial<\/a>.  You might try it yourself, but not sure \"animated GIF and exif\" mix, if you get my meaning, but if your image is an animated GIF you should be informed of its duration, in seconds, up the top of the webpage <font size=1>(given permissions and all, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>)<\/font>?<\/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='#d60185' onclick='var dv=document.getElementById(\"d60185\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/promise\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60185' 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='#d60206' onclick='var dv=document.getElementById(\"d60206\"); 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='d60206' 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='#d60230' onclick='var dv=document.getElementById(\"d60230\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ontouchdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60230' 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='#d60244' onclick='var dv=document.getElementById(\"d60244\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60244' 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='#d65057' onclick='var dv=document.getElementById(\"d65057\"); 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='d65057' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We came across it again the other day re-reading Colour Wheel Canvas Analogue Clock Background Blend Mode Tutorial. We&#8217;re sure we&#8217;ve remedied it, in various ways on various occasions. What&#8217;s it? Glad you asked. Information technology (IT) is a set &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-hosted-iframe-jitteriness-primer-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":[51,151,216,218,257,2014,4959,448,449,4842,572,587,652,4958,4957,870,4260,997,1917,1107,1319,1418,1456,3276],"class_list":["post-65057","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-above-the-fold","tag-blog","tag-cms","tag-code","tag-content","tag-content-management-system","tag-eyeline","tag-focus","tag-fold","tag-hoster","tag-hosting","tag-iframe","tag-javascript","tag-jitteriness","tag-jittery","tag-onload","tag-positioning","tag-programming","tag-scroll","tag-scrolling","tag-tutorial","tag-webpage","tag-wordpress","tag-wordpress-blog"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65057"}],"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=65057"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65057\/revisions"}],"predecessor-version":[{"id":65068,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65057\/revisions\/65068"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=65057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=65057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=65057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}