{"id":30716,"date":"2017-06-16T03:01:10","date_gmt":"2017-06-15T17:01:10","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=30716"},"modified":"2022-04-11T17:51:10","modified_gmt":"2022-04-11T07:51:10","slug":"wordpress-code-download-table-interface-linux-diff-css-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-code-download-table-interface-linux-diff-css-tutorial\/","title":{"rendered":"WordPress Code Download Table Interface Linux Diff CSS Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wpcss.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Code Download Table Interface Linux Diff CSS Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wpcss.jpg\" title=\"WordPress Code Download Table Interface Linux Diff CSS Tutorial\"   \/><\/a><p class=\"wp-caption-text\">WordPress Code Download Table Interface Linux Diff CSS Tutorial<\/p><\/div>\n<p>It takes me a long time to get annoyed at a web page (CSS) styling &#8220;annoyance&#8221; for two reasons &#8230;<\/p>\n<ul>\n<li>the same reason the recent <a target=_blank title='War on Waste by ABC' href='HTTP:\/\/www.abc.net.au\/ourfocus\/waronwaste\/'>War on Waste<\/a> series had resonance here in Australia, with so many people, regarding that throwing out of slightly imperfect bananas for instance &#8230; what are the priorities here?!<\/li>\n<li>CSS minor issues can sometimes be just as involved as major ones in terms of fixing, and not ruining other styling features that are working<\/li>\n<\/ul>\n<p>What we find, though, regarding that second point, is that we have much more success with &#8220;laser precision&#8221; CSS fixes when we involve a web inspector such as Google Chrome&#8217;s Three-Dots-Menu -&gt; More Tools -&gt; Developer Tools web inspector.  The web inspector is good for nutting out both Javascript issues, mainly accessing the Console tab we find, and CSS issues, mainly accessing the Inspector icon whose advice goes &#8220;Select an element in the page to inspect it&#8221;.<\/p>\n<p>So what is today&#8217;s CSS bugbear?  When we presented <a title='WordPress Code Download Table Interface Linux Diff Tutorial' href='#wcdtildt'>WordPress Code Download Table Interface Linux Diff Tutorial<\/a> some time back, we got some functional Javascript functionality but left with a CSS bugbear whereby the HTML (dropdown) select elements we introduced took some WordPress TwentyTen theme styling (we&#8217;re guessing) and left some annoying white space beneath them, making it look quite ugly, on viewing.  A &#8220;quite ugly, on viewing&#8221; we can put with just about anytime, but eventually it is good to do something about this, because some users see this as a bug, and may think &#8220;if there&#8217;s a bug here, where else might there be bugs&#8221;, perhaps.  And that is not such a good look.<\/p>\n<p>How do we go about looking into the issue?  Today, as so often for us dealing with a WordPress CSS issue, we, choosing, web browser wise (as you can see with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wpcss.jpg\" title='Click picture'>tutorial picture<\/a>), to use &#8230;<\/p>\n<ol>\n<li>Google Chrome &#8230; set web address to http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=30693 blog posting of interest<\/li>\n<li>Vertically scroll to area with CSS bugbear &#8230;<br \/>\nThe recent pattern of not needing to change the grandparent supervisor continues with today\u2019s changing of the external JavaScript (at the \u201cnuclear family\u201d level) called signature_signature\u26abjs which changed quite a lot regarding Browse Image Standing Orders today as per this link and this live\u2702run link. The additional Browsing Image Standing Order data storage and Undo functionality PHP arrangements for signature_signature\u26abphp changed in this way for today.\n<\/li>\n<li>Open the Google Chrome web inspector via top right Three-Dots-Menu -&gt; More Tools -&gt; Developer Tools<\/li>\n<li>Click the Google Chrome web inspector&#8217;s top left Inspector icon (a pointer) and click on one of the HTML (dropdown) select elements in question (with the annoying white space beneath them) &#8230; then &#8230;<\/li>\n<li>The relevant HTML (dropdown) select element outerHTML property is shown and highlighted in the Elements tab<\/li>\n<li>On this occasion, in that HTML (dropdown) select element we have a <i>style<\/i> property defined as &#8220;width:40px;&#8221; &#8230; now here is the incredible usefulness (and laser precision feel) of a good web inspector product &#8230;<\/li>\n<li>We click to the left of existant &#8220;width:40px;&#8221; (within the <i>style<\/i> property) and add in a new &#8220;margin-bottom:0px;&#8221; additional inline CSS subproperty, clicking elsewhere to see the result of our &#8220;interim change&#8221; (nothing gets committed to change here, so this is a place where you can tinker with pixel level CSS tweaks if you like)<\/li>\n<\/ol>\n<p> &#8230; and this was enough to make the WordPress blog posting webpage, and all others similarly like it, using those Linux diff methods of showing software changes, be better looking if we apply that same change we tinkered with in Google Chrome&#8217;s web inspector, to real (good ol&#8217;) header.php WordPress TwentyTen theme equivalent code changes, which represent the &#8220;permanent change&#8221; aspect to the job.  This works, of course, because ruling out any use of <i>!important<\/i> with the CSS styling, inline CSS via the <i>style<\/i> property of HTML will override any other relevant external CSS and internal CSS (within &lt;style&gt; and &lt;\/style&gt; of the webpage &lt;head&gt; to &lt;\/head&gt; document.head) styling.<\/p>\n<hr>\n<p id='wcdtildt'>Previous relevant <a target=_blank title='WordPress Code Download Table Interface Linux Diff Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-code-download-table-interface-linux-diff-tutorial\/'>WordPress Code Download Table Interface Linux Diff Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wp_cd_ld.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Code Download Table Interface Linux Diff Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wp_cd_ld.jpg\" title=\"WordPress Code Download Table Interface Linux Diff Tutorial\"   \/><\/a><p class=\"wp-caption-text\">WordPress Code Download Table Interface Linux Diff Tutorial<\/p><\/div>\n<p>Referring to <a title='WordPress Code Download Table Interface Primer Tutorial' href='#wcdtipt'>WordPress Code Download Table Interface Primer Tutorial<\/a> way below, up until now with the third of &#8220;<i>three basic concepts floating around the way we present software and share it around, at this blog<\/i>&#8221; of &#8230;<\/p>\n<blockquote>\n<ol>\n<li>the idea of a live run link pointing at an executable piece of software, at least as far as our web server is concerned<\/li>\n<li>a link to downloadable source code of the version of software code pertinent to the version of interest to the current blog posting<\/li>\n<li style='background-color:pink;'>a differences link that compares the software code above to a version more &#8220;junior&#8221; (or older &#8230; huh?) to it<\/li>\n<\/ol>\n<\/blockquote>\n<p> &#8230; we use PHP&#8217;s <a target=_blank title='PHP exec method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'>exec<\/a> method interface to the underlying operating system&#8217;s command line, in our case Linux, and to Linux&#8217;s <a target=_blank title='Linux diff command information' href='http:\/\/www.computerhope.com\/unix\/udiff.htm'><i>diff<\/i><\/a> command (primarily used to compare two ascii text files) to display information for the user.  Up until now we&#8217;ve only allowed comparisons of a version (normally of software code) with one &#8220;below&#8221; (or earlier), but as of the changes today, we are allowing for a mechanism to add to that associated third Emoji of &#8230;<\/p>\n<blockquote>\n<ol>\n<li><span title=\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\">&#9986;<\/span><\/li>\n<li><span title=\" + Code Download Table\">&#9899;<\/span><\/li>\n<li style='background-color:pink;'><span title=\" + Code Download Table\">&#9898;<\/span><\/li>\n<\/ol>\n<\/blockquote>\n<p> &#8230; to just be the default value of a new HTML select element &#8220;dropdown&#8221; we now create, whose other HTML option elements now consist of values that when chosen will give the user the chance to compare any\/all of &#8230;<\/p>\n<ul>\n<li>default <i>current version<\/i> to <i>version below<\/i><\/li>\n<li><i>current version<\/i> to <i>(any of the) versions below the version below<\/i><\/li>\n<li><i>most recent version<\/i> to <i>current version<\/i><\/li>\n<li><i>most recent version<\/i> to <i>oldest version<\/i><\/li>\n<\/ul>\n<p> &#8230; to give a fuller picture to those inquisitive users wanting to delve further into how the coding progressed (to achieve solutions).<\/p>\n<p>For today, we have <font color=blue>included<\/font> new code for more Linux <i>diff<\/i> options (and making those Emoji span element <i>onclick<\/i> event stop propogating through to its parent element, via good advice we read about <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/7056669\/prevent-default-event-in-onclick'>here<\/a>, thanks), that in turn have <font color=red>added to yesterday&#8217;s<\/font> double click logic, and to <b>the day before yesterday&#8217;s<\/b> changes (where <i><b>var cafd=<font color=red>-1; \/\/<\/font>false;<\/b><\/i> starts scripting and body onload code snippet starts <i>&lt;body onload=&#8221;  <b>changeasfordownload(); <font color=red> if (cafd == cafd) { cafd=0; } else { <\/font>cafd=true; <font color=red>}<\/font><\/b> &#8230;<\/i> &#8230;<\/p>\n<p><code><br \/>\n<font color=blue><br \/>\nfunction allthecombos(thisgetisme) {<br \/>\n  var previs=\" (previous ... default)\",ourgetisme=thisgetisme,nextis=thisgetisme.replace('-GETME','GETME'),retselval='', tempbit='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?two=&one=' + thisgetisme;<br \/>\n  var prefixtoreplace=thisgetisme.replace(thisgetisme.split('\/')[eval(-1 + thisgetisme.split('\/').length)],\"\");<br \/>\n  if (nextis == ourgetisme && thisgetisme.indexOf('_GETME') != -1) {<br \/>\n   retselval+=\"&lt;option value='\" + 'http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=' + thisgetisme.replace('_GETME','') + '&two=' + thisgetisme + \"'&gt;\" + thisgetisme.replace('_GETME','').replace(prefixtoreplace,\"\") + \" (latest) versus \" + thisgetisme.replace(prefixtoreplace,\"\") + \"&lt;\/option&gt;\";<br \/>\n  } else {<br \/>\n   while (nextis != ourgetisme) {<br \/>\n    if (nextis.indexOf('_GETME') == -1 && nextis.indexOf('-GETME') == -1) nextis=nextis.replace('GETME','_GETME');<br \/>\n    retselval+=\"&lt;option value='\" + tempbit.replace('?two=', '?two=' + nextis) + \"'&gt;\" + thisgetisme.replace(prefixtoreplace,\"\") + \" (this) versus \" + nextis.replace(prefixtoreplace,\"\") + previs + \"&lt;\/option&gt;\";<br \/>\n    previs=\"\";<br \/>\n    ourgetisme=nextis;<br \/>\n    if (nextis != ourgetisme.replace('-GETME','GETME')) {<br \/>\n      nextis=ourgetisme.replace('-GETME','GETME');<br \/>\n    } else if (ourgetisme.indexOf('-GETME') != -1) {<br \/>\n      nextis=ourgetisme.replace('-GETME','_GETME');<br \/>\n    }<br \/>\n    if (nextis != ourgetisme) {<br \/>\n      if (nextis.indexOf('_GETME') == -1 && nextis.indexOf('-GETME') == -1) nextis=nextis.replace('GETME','_GETME');<br \/>\n    }<br \/>\n   }<br \/>\n   if (retselval != '') return \"&lt;option value='\" + 'http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=' + nextis.replace('_GETME','') + '&two=' + thisgetisme + \"'&gt;\" + nextis.replace('_GETME','').replace(prefixtoreplace,\"\") + \" (latest) versus \" + thisgetisme.replace(prefixtoreplace,\"\") + \" (this)&lt;\/option&gt;\" + retselval + \"&lt;option value='\" + 'http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=' + nextis.replace('_GETME','') + '&two=' + nextis + \"'&gt;\" + nextis.replace('_GETME','').replace(prefixtoreplace,\"\") + \" (latest) versus \" + nextis.replace(prefixtoreplace,\"\") + \" (oldest)&lt;\/option&gt;\";<br \/>\n  }<br \/>\n  return retselval;<br \/>\n}<br \/>\n<\/font><br \/>\nfunction changeasfordownload() {<br \/>\n  var <b><font color=blue>selbitis='',<\/font><font color=red>origcafd=cafd,<\/font>outs<font color=red>=null<\/font>,extis,postprexp,prexp,xp,aorig, <\/b>idmjk=0, newaspare='', big='----------------------GETME', stuffs;<br \/>\n  var admjk = document.getElementsByTagName('a');<br \/>\n<font color=red><br \/>\n  if (cafd &lt; 0) {<br \/>\n    cafd=1000;<br \/>\n  } else if (cafd &gt; 0) {<br \/>\n    outs=document.getElementById('spn' + cafd);<br \/>\n    if (origcafd &gt; 0) {<br \/>\n      if (outs != null) {<br \/>\n       if (outs.style.border == null || outs.style.border == '') {<br \/>\n          xp=outs.getAttribute(\"data-alt\");<br \/>\n          if (outs.innerHTML.indexOf('&lt;iframe ') == -1) {<br \/>\n          if (xp.indexOf(\"slideshow.htm\") != -1) {<br \/>\n          outs.innerHTML+='&lt;br&gt;&lt;iframe src=\"' + xp + '\" title=\"' + xp + '\" style=\"width:100%;height:100px;\"&gt;&lt;\/iframe&gt;&lt;br&gt;';<br \/>\n\t\t  } else {<br \/>\n          outs.innerHTML+='&lt;br&gt;&lt;iframe src=\"' + xp + '\" title=\"' + xp + '\" style=\"width:100%;height:500px;\"&gt;&lt;\/iframe&gt;&lt;br&gt;';<br \/>\n\t\t  }<br \/>\n\t\t  }<br \/>\n\t\t  outs.style.border='2px solid yellow';<br \/>\n\t\t  outs.title+=' (to new window)';<br \/>\n       } else {<br \/>\n          xp=outs.getAttribute(\"data-alt\");<br \/>\n          if (xp.indexOf(\"slideshow.htm\") != -1) {<br \/>\n          window.open(xp,\"_blank\",\"top=100,left=100,width=650,height=100\");<br \/>\n\t\t  } else {<br \/>\n          window.open(xp,\"_blank\",\"top=100,left=100,width=500,height=500\");<br \/>\n\t\t  }<br \/>\n\t\t  outs.style.border='';<br \/>\n\t\t  outs.title=outs.title.replace(' (to new window)','');<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  if (outs == null) {<br \/>\n<\/font><br \/>\n  for (idmjk=0; idmjk&lt;admjk.length; idmjk++) {<br \/>\n    if (admjk[idmjk].href.indexOf('GETME') != -1 && admjk[idmjk].href.indexOf('diff.php') == -1) {<br \/>\n      <b>if (<font color=red>origcafd < 0) { \/\/<\/font>!cafd) {<br \/>\n      xp=admjk[idmjk].href.split(\"GETME\");<br \/>\n      prexp=xp[0].split(\"\/\");<br \/>\n      postprexp=prexp[-1 + prexp.length].split(\".\");<br \/>\n      extis = postprexp[-1 + postprexp.length].replace(\/_\/g,\"\").replace(\/-\/g,\"\").replace(\/GETME\/g,\"\");<br \/>\n      outs=\"http:\/\/www.rjmprogramming.com.au\/getmelist.htm?topoff=150&tsp=\" + (Math.floor(Math.random() * 1999900) + 100) + \"#\" + postprexp[0] + \".\" + postprexp[-1 + postprexp.length].replace(extis,\"\").replace(extis,\"\").replace(extis,\"\") + \"GETME\" + extis;<br \/>\n      aorig=admjk[idmjk].innerHTML;<br \/>\n      admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\".\",\"&lt;span<font color=red> data-alt='\" + outs + \"' id='spn\" + cafd + \"'<\/font> title=\\\" + Code Download Table\\\" onclick=\\\"<font color=red>if (cafd == cafd) { cafd=\" + cafd + \"; changeasfordownload(); } else { <\/font>window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500'); <font color=red>}<\/font><font color=blue> return false; <\/font>\\\"&gt;&amp;#9899;&lt;\/span&gt;\");<br \/>\n      if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\" \",\"&lt;span<font color=red> data-alt='\" + outs + \"' id='spn\" + cafd + \"'<\/font> title=\\\" + Code Download Table\\\" onclick=\\\"<font color=red>if (cafd == cafd) { cafd=\" + cafd + \"; changeasfordownload(); } else { <\/font>window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500'); <font color=red>}<\/font><font color=blue> return false; <\/font>\\\"&gt;&amp;#9898;&lt;\/span&gt;\");<br \/>\n      } else {<\/b><br \/>\n      newaspare = admjk[idmjk].href.replace('_-GETME', '').replace('__GETME', '').replace('_GETME', '').replace(big, '');<br \/>\n      while (big.indexOf('-') != -1) {<br \/>\n        big = big.replace('-', '');<br \/>\n        newaspare = newaspare.replace(big, '');<br \/>\n      }<br \/>\n      big = '----------------------GETME';<br \/>\n      stuffs = newaspare.split('\/');<br \/>\n      admjk[idmjk].download = stuffs[stuffs.length - 1];<br \/>\n      admjk[idmjk].title = \"(Really download) \" + admjk[idmjk].title +  ' ... welcome to the long hover functionality that shows allows for a Download Mode for the blog that can be toggled';<br \/>\n      admjk[idmjk].onmouseover = \" getDownloadMode(); \";<br \/>\n      admjk[idmjk].onmouseout = \" yehBut(); \";<br \/>\n      admjk[idmjk].ontouchstart = \" getDownloadMode(); \";<br \/>\n      admjk[idmjk].ontouchend = \" yehBut(); \";<br \/>\n      <b>}<br \/>\n    } else if (admjk[idmjk].href.indexOf('GETME') != -1 && <font color=red>origcafd < 0) { \/\/<\/font>!cafd) {<br \/>\n      xp=admjk[idmjk].href.split(\"GETME\");<br \/>\n      prexp=xp[0].split(\"\/\");<br \/>\n      postprexp=prexp[-1 + prexp.length].split(\".\");<br \/>\n      extis = postprexp[-1 + postprexp.length].replace(\/_\/g,\"\").replace(\/-\/g,\"\").replace(\/GETME\/g,\"\");<br \/>\n      outs=\"http:\/\/www.rjmprogramming.com.au\/getmelist.htm?topoff=150&tsp=\" + (Math.floor(Math.random() * 1999900) + 100) + \"#\" + postprexp[0] + \".\" + postprexp[-1 + postprexp.length].replace(extis,\"\").replace(extis,\"\").replace(extis,\"\") + \"GETME\" + extis;<br \/>\n      aorig=admjk[idmjk].innerHTML;<br \/>\n      <font color=blue>selbitis=allthecombos((admjk[idmjk].href + '=').split('=')[1].split('&amp;')[0]);<\/font><br \/>\n      admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\".\",\"&lt;span<font color=red> data-alt='\" + outs + \"' id='spn\" + cafd + \"'<\/font> title=\\\" + Code Download Table\\\" onclick=\\\"<font color=red>if (cafd == cafd) { cafd=\" + cafd + \"; changeasfordownload(); } else { <\/font>window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500'); <font color=red>}<\/font><font color=blue> return false; <\/font>\\\"&gt;<font color=blue>&lt;select onchange=\\\" if (this.value.length &gt; 0) { window.open(this.value,'_blank'); }  return false; \\\" style='width:40px;' id='sel\" + cafd + \"'&gt;&lt;option value=&gt;<\/font>&amp;#9899;<font color=blue>&lt;\/option&gt;\" + selbitis + \"&lt;\/select&gt;<\/font>&lt;\/span&gt;\");<br \/>\n      if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\" \",\"&lt;span<font color=red> data-alt='\" + outs + \"' id='spn\" + cafd + \"'<\/font> title=\\\" + Code Download Table\\\" onclick=\\\"<font color=red>if (cafd == cafd) { cafd=\" + cafd + \"; changeasfordownload(); } else { <\/font>window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500'); <font color=red>}<\/font><font color=blue> return false; <\/font>\\\"&gt;<font color=blue>&lt;select onchange=\\\" if (this.value.length &gt; 0) { window.open(this.value,'_blank'); }  return false; \\\" style='width:40px;' id='sel\" + cafd + \"'&gt;&lt;option value=&gt;<\/font>&amp;#9898;<font color=blue>&lt;\/option&gt;\" + selbitis + \"&lt;\/select&gt;<\/font>&lt;\/span&gt;\");<br \/>\n    } else if (<font color=blue>(<\/font>admjk[idmjk].innerHTML.indexOf('live run') != -1<font color=blue> || admjk[idmjk].title.toLowerCase().indexOf('click picture') != -1)<\/font> && <font color=red>origcafd < 0) { \/\/<\/font>!cafd) {<br \/>\n      outs=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html#tuts\";<br \/>\n      admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\" \",\"&lt;span<font color=red> data-alt='\" + outs + \"' id='spn\" + cafd + \"'<\/font> title=\\\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\\\" onclick=\\\"<font color=red>if (cafd == cafd) { cafd=\" + cafd + \"; changeasfordownload(); } else { <\/font>window.open('\" + outs + \"','_blank','top=100,left=100,width=650,height=100'); <font color=red>}<\/font><font color=blue> return false; <\/font>\\\"&gt;&amp;#9986;&lt;\/span&gt;\");<br \/>\n    <\/b>}<br \/>\n  }<br \/>\n  <font color=red>}<\/font><br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; (yet again) for today&#8217;s good ol&#8217; <i>header.php<\/i> (of WordPress theme Twenty Ten) <font color=blue>modified<\/font> and <font color=red>reworked<\/font> (via <a title='WordPress Code Download Table Interface Double Click Tutorial' href='#wcdtidct'>WordPress Code Download Table Interface Double Click Tutorial<\/a>) changes to our WordPress blog PHP coding.<\/p>\n<hr>\n<p id='wcdtidct'>Previous relevant <a target=_blank title='WordPress Code Download Table Interface Double Click Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-code-download-table-interface-double-click-tutorial\/'>WordPress Code Download Table Interface Double Click Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wp_cd_dc.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Code Download Table Interface Double Click Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wp_cd_dc.jpg\" title=\"WordPress Code Download Table Interface Double Click Tutorial\"   \/><\/a><p class=\"wp-caption-text\">WordPress Code Download Table Interface Double Click Tutorial<\/p><\/div>\n<p>If you&#8217;ve been coding Javascript in a web application have you ever pondered the string functions &#8230;<\/p>\n<table>\n<tr>\n<td>\n<code><br \/>\n<a target=_blank title='Javascript includes() function information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_includes.asp'>includes()<\/a><br \/>\n<\/code>\n<\/td>\n<td> &#8230; versus &#8230; <\/td>\n<td>\n<code><br \/>\n<a target=_blank title='Javascript indexOf() function information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_indexof.asp'>indexOf()<\/a><br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p>?   To be honest, I haven&#8217;t much, because am always using <a target=_blank title='Javascript indexOf() function information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_indexof.asp'>indexOf()<\/a>, but to be fair, you might use <a target=_blank title='Javascript includes() function information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_includes.asp'>includes()<\/a> in a code scenario where you are trepidatious as to whether to proceed with something more involved, and are sort of just &#8220;testing the waters&#8221; so to speak, and\/or perhaps if you are doing this several thousand times, and you are not interested in anything other than one string&#8217;s <i>existence<\/i> in another.  So, thinking on it, perhaps I should get around more.<\/p>\n<p>What&#8217;s the relevance of all this?  Well, yesterday, when we presented <a title='WordPress Code Download Table Interface Primer Tutorial' href='#wcdtipt'>WordPress Code Download Table Interface Primer Tutorial<\/a>, as shown below, we showed a code snippet containing what was, for us, a very critical Javascript variable called <b>cafd<\/b> which was used in a <i>binary<\/i> (boolean) way, in that it moved from a value of <i>false<\/i> initially to a value of <i>true<\/i> for the rest, but this <i>binary<\/i> feeling design (reminiscent of an <i><a target=_blank title='Javascript includes() function information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_includes.asp'>includes()<\/a>&#8216;s<\/i> type of approach) is not enough for the more ambitious aims today of adding in an &#8220;on double click&#8221; two layer event logic design where a first click does different things to what the second click does.  To be honest, we get fond of our critical <i>var<\/i>iables and we wanted to just use <i>cafd<\/i> more usefully, so we rearranged its use to be that of an (integer) number, in a similar line of thinking to how <a target=_blank title='Javascript indexOf() function information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_indexof.asp'>indexOf()<\/a> works (by starting with a value of -1 meaning &#8220;not found&#8221;) to having various other useful larger than zero values that are the means by which the web application, via the <i>id<\/i> property, can get back to deriving the <i>span<\/i> element object involved with the user&#8217;s click (or second part of double click).  Read more on this below.<\/p>\n<p>Now, another idea from today&#8217;s work, though not <i>spelt out<\/i> in what we do, is the extension of functionality via <i>event<\/i> thinking.  What we mean by that, is that what we did yesterday with the addition of those Emoji (<i>span<\/i> element) <i>onclick<\/i> event logics was to link the event with <i>window.open()<\/i> popup functionalities, not popular with all, but what if we were to, on that first click, instead, place the URL findings we navigate to into an &#8230;<\/p>\n<ol>\n<li><i>iframe<\/i> element, for the first click &#8230; and then onto those same &#8230;<\/li>\n<li><i>window.open()<\/i> popups on the second click (and then toggle back to the previous again, all this controlled by the existence, or not, for the Emoji <i>span<\/i> element of a <i>2px solid yellow<\/i> border)<\/li>\n<\/ol>\n<p>Notice the numbering above?  Everything is pointing at the use of the <a target=_blank title='Event ondblclick information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/event_ondblclick.asp'>ondblclick<\/a> (on double click) event here, but there are a couple of reasons we do not proceed down that route, and we want to suggest another idea, and those reasons are &#8230;<\/p>\n<ul>\n<li>double click events suited desktop applications, but my web application usage didn&#8217;t satisfy me that they were completely reliable in web application work &#8230; and anyway &#8230;<\/li>\n<li>double click events are of even less relevance for mobile use of web applications where <i>touch<\/i> event logic (where <i>onclick<\/i> is &#8220;tolerated&#8221;) is more the go<\/li>\n<\/ul>\n<p> &#8230; but we would argue the flagging of a double click being &#8220;between the two clicks&#8221; that can be checked or verified by the existence, in our case, of a &#8220;2px solid yellow&#8221; border is not a bad compromise to the real (more your early days Windows concept of) &#8220;on double click&#8221;.  You&#8217;ll see that it doesn&#8217;t even rely on timing, so you could click once &#8230; write that tome on &#8220;Thimbles of the Middle Ages&#8221; you&#8217;ve been meaning to finish, unclot the clotted cream in the fridge, play a bit of <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=oD-LvABxMsY'>golf<\/a>, and come back and do your second click, and the web application would be there waiting for you <font size=1>&#8230; no doubt expecting a tip<\/font>.<\/p>\n<p>For today, we <b>have<\/b> <font color=red>added<\/font> to <b>yesterday&#8217;s<\/b> changes (where <i><b>var cafd=<font color=red>-1; \/\/<\/font>false;<\/b><\/i> starts scripting and body onload code snippet starts <i>&lt;body onload=&#8221;  <b>changeasfordownload(); <font color=red> if (cafd == cafd) { cafd=0; } else { <\/font>cafd=true; <font color=red>}<\/font><\/b> &#8230;<\/i> &#8230;<\/p>\n<p><code><br \/>\nfunction changeasfordownload() {<br \/>\n  var <b><font color=red>origcafd=cafd,<\/font>outs<font color=red>=null<\/font>,extis,postprexp,prexp,xp,aorig, <\/b>idmjk=0, newaspare='', big='----------------------GETME', stuffs;<br \/>\n  var admjk = document.getElementsByTagName('a');<br \/>\n<font color=red><br \/>\n  if (cafd &lt; 0) {<br \/>\n    cafd=1000;<br \/>\n  } else if (cafd &gt; 0) {<br \/>\n    outs=document.getElementById('spn' + cafd);<br \/>\n    if (origcafd &gt; 0) {<br \/>\n      if (outs != null) {<br \/>\n       if (outs.style.border == null || outs.style.border == '') {<br \/>\n          xp=outs.getAttribute(\"data-alt\");<br \/>\n          if (outs.innerHTML.indexOf('&lt;iframe ') == -1) {<br \/>\n          if (xp.indexOf(\"slideshow.htm\") != -1) {<br \/>\n          outs.innerHTML+='&lt;br&gt;&lt;iframe src=\"' + xp + '\" title=\"' + xp + '\" style=\"width:100%;height:100px;\"&gt;&lt;\/iframe&gt;&lt;br&gt;';<br \/>\n\t\t  } else {<br \/>\n          outs.innerHTML+='&lt;br&gt;&lt;iframe src=\"' + xp + '\" title=\"' + xp + '\" style=\"width:100%;height:500px;\"&gt;&lt;\/iframe&gt;&lt;br&gt;';<br \/>\n\t\t  }<br \/>\n\t\t  }<br \/>\n\t\t  outs.style.border='2px solid yellow';<br \/>\n\t\t  outs.title+=' (to new window)';<br \/>\n       } else {<br \/>\n          xp=outs.getAttribute(\"data-alt\");<br \/>\n          if (xp.indexOf(\"slideshow.htm\") != -1) {<br \/>\n          window.open(xp,\"_blank\",\"top=100,left=100,width=650,height=100\");<br \/>\n\t\t  } else {<br \/>\n          window.open(xp,\"_blank\",\"top=100,left=100,width=500,height=500\");<br \/>\n\t\t  }<br \/>\n\t\t  outs.style.border='';<br \/>\n\t\t  outs.title=outs.title.replace(' (to new window)','');<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  if (outs == null) {<br \/>\n<\/font><br \/>\n  for (idmjk=0; idmjk&lt;admjk.length; idmjk++) {<br \/>\n    if (admjk[idmjk].href.indexOf('GETME') != -1 && admjk[idmjk].href.indexOf('diff.php') == -1) {<br \/>\n      <b>if (<font color=red>origcafd < 0) { \/\/<\/font>!cafd) {<br \/>\n      xp=admjk[idmjk].href.split(\"GETME\");<br \/>\n      prexp=xp[0].split(\"\/\");<br \/>\n      postprexp=prexp[-1 + prexp.length].split(\".\");<br \/>\n      extis = postprexp[-1 + postprexp.length].replace(\/_\/g,\"\").replace(\/-\/g,\"\").replace(\/GETME\/g,\"\");<br \/>\n      outs=\"http:\/\/www.rjmprogramming.com.au\/getmelist.htm?topoff=150&tsp=\" + (Math.floor(Math.random() * 1999900) + 100) + \"#\" + postprexp[0] + \".\" + postprexp[-1 + postprexp.length].replace(extis,\"\").replace(extis,\"\").replace(extis,\"\") + \"GETME\" + extis;<br \/>\n      aorig=admjk[idmjk].innerHTML;<br \/>\n      admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\".\",\"&lt;span<font color=red> data-alt='\" + outs + \"' id='spn\" + cafd + \"'<\/font> title=\\\" + Code Download Table\\\" onclick=\\\"<font color=red>if (cafd == cafd) { cafd=\" + cafd + \"; changeasfordownload(); } else { <\/font>window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500'); <font color=red>}<\/font>\\\"&gt;&amp;#9899;&lt;\/span&gt;\");<br \/>\n      if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\" \",\"&lt;span<font color=red> data-alt='\" + outs + \"' id='spn\" + cafd + \"'<\/font> title=\\\" + Code Download Table\\\" onclick=\\\"<font color=red>if (cafd == cafd) { cafd=\" + cafd + \"; changeasfordownload(); } else { <\/font>window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500'); <font color=red>}<\/font>\\\"&gt;&amp;#9898;&lt;\/span&gt;\");<br \/>\n      } else {<\/b><br \/>\n      newaspare = admjk[idmjk].href.replace('_-GETME', '').replace('__GETME', '').replace('_GETME', '').replace(big, '');<br \/>\n      while (big.indexOf('-') != -1) {<br \/>\n        big = big.replace('-', '');<br \/>\n        newaspare = newaspare.replace(big, '');<br \/>\n      }<br \/>\n      big = '----------------------GETME';<br \/>\n      stuffs = newaspare.split('\/');<br \/>\n      admjk[idmjk].download = stuffs[stuffs.length - 1];<br \/>\n      admjk[idmjk].title = \"(Really download) \" + admjk[idmjk].title +  ' ... welcome to the long hover functionality that shows allows for a Download Mode for the blog that can be toggled';<br \/>\n      admjk[idmjk].onmouseover = \" getDownloadMode(); \";<br \/>\n      admjk[idmjk].onmouseout = \" yehBut(); \";<br \/>\n      admjk[idmjk].ontouchstart = \" getDownloadMode(); \";<br \/>\n      admjk[idmjk].ontouchend = \" yehBut(); \";<br \/>\n      <b>}<br \/>\n    } else if (admjk[idmjk].href.indexOf('GETME') != -1 && <font color=red>origcafd < 0) { \/\/<\/font>!cafd) {<br \/>\n      xp=admjk[idmjk].href.split(\"GETME\");<br \/>\n      prexp=xp[0].split(\"\/\");<br \/>\n      postprexp=prexp[-1 + prexp.length].split(\".\");<br \/>\n      extis = postprexp[-1 + postprexp.length].replace(\/_\/g,\"\").replace(\/-\/g,\"\").replace(\/GETME\/g,\"\");<br \/>\n      outs=\"http:\/\/www.rjmprogramming.com.au\/getmelist.htm?topoff=150&tsp=\" + (Math.floor(Math.random() * 1999900) + 100) + \"#\" + postprexp[0] + \".\" + postprexp[-1 + postprexp.length].replace(extis,\"\").replace(extis,\"\").replace(extis,\"\") + \"GETME\" + extis;<br \/>\n      aorig=admjk[idmjk].innerHTML;<br \/>\n      admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\".\",\"&lt;span<font color=red> data-alt='\" + outs + \"' id='spn\" + cafd + \"'<\/font> title=\\\" + Code Download Table\\\" onclick=\\\"<font color=red>if (cafd == cafd) { cafd=\" + cafd + \"; changeasfordownload(); } else { <\/font>window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500'); <font color=red>}<\/font>\\\"&gt;&amp;#9899;&lt;\/span&gt;\");<br \/>\n      if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\" \",\"&lt;span<font color=red> data-alt='\" + outs + \"' id='spn\" + cafd + \"'<\/font> title=\\\" + Code Download Table\\\" onclick=\\\"<font color=red>if (cafd == cafd) { cafd=\" + cafd + \"; changeasfordownload(); } else { <\/font>window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500'); <font color=red>}<\/font>\\\"&gt;&amp;#9898;&lt;\/span&gt;\");<br \/>\n    } else if (admjk[idmjk].innerHTML.indexOf('live run') != -1 && <font color=red>origcafd < 0) { \/\/<\/font>!cafd) {<br \/>\n      outs=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html#tuts\";<br \/>\n      admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\" \",\"&lt;span<font color=red> data-alt='\" + outs + \"' id='spn\" + cafd + \"'<\/font> title=\\\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\\\" onclick=\\\"<font color=red>if (cafd == cafd) { cafd=\" + cafd + \"; changeasfordownload(); } else { <\/font>window.open('\" + outs + \"','_blank','top=100,left=100,width=650,height=100'); <font color=red>}<\/font>\\\"&gt;&amp;#9986;&lt;\/span&gt;\");<br \/>\n    <\/b>}<br \/>\n  }<br \/>\n  <font color=red>}<\/font><br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; (still) for today&#8217;s good ol&#8217; <i>header.php<\/i> <font color=red>reworked<\/font> changes to our WordPress blog PHP coding.   One last thing about this (PHP writing out) Javascript code came about from the fact that, unlike the HTML img element for example, the HTML span element does not recognize the <i>alt<\/i> property, which we tried, but when we failed, we resorted to using the excellent Javascript global data attributes approach (which we have talked about before at this blog) via the use of the Javascript <a target=_blank title='Javascript getAttribute() information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_getattribute.asp'>getAttribute()<\/a> function.<\/p>\n<hr>\n<p id='wcdtipt'>Previous relevant <a target=_blank title='WordPress Code Download Table Interface Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-code-download-table-interface-primer-tutorial\/'>WordPress Code Download Table Interface 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\/wordpress\/wp_cd.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Code Download Table Interface Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wp_cd.jpg\" title=\"WordPress Code Download Table Interface Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">WordPress Code Download Table Interface Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got three basic concepts floating around the way we present software and share it around, at this blog, those being &#8230;<\/p>\n<ol>\n<li>the idea of a live run link pointing at an executable piece of software, at least as far as our web server is concerned<\/li>\n<li>a link to downloadable source code of the version of software code pertinent to the version of interest to the current blog posting<\/li>\n<li>a differences link that compares the software code above to a version more &#8220;junior&#8221; (or older &#8230; huh?) to it<\/li>\n<\/ol>\n<p>We want to add an Emoji driven &#8220;drilling down&#8221; functionality to this for those users who want more information, or more context, or both.<\/p>\n<p>So we&#8217;ve added these Emojis below, respectively, for those purposes &#8230;<\/p>\n<ol>\n<li><span title=\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\">&#9986;<\/span><\/li>\n<li><span title=\" + Code Download Table\">&#9899;<\/span><\/li>\n<li><span title=\" + Code Download Table\">&#9898;<\/span><\/li>\n<\/ol>\n<p>And where (on the blog posting web page) do we add it?  At the first occurrence in the relevant link&#8217;s <i>innerHTML<\/i> (ie. the writing you see for the link) of &#8220;.&#8221; and\/or &#8221; &#8220;.<\/p>\n<p>We&#8217;d already written something quite close to being apt (please read <a target=_blank title='WordPress Is Mentioned By Posting Thread Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-is-mentioned-by-posting-thread-tutorial\/'>WordPress Is Mentioned By Posting Thread Tutorial<\/a> for more here), and so we&#8217;ve based Javascript code on its PHP workings, working that code into a previously written Javascript apt function of code (<i>function changeasfordownload()<\/i>), from <a target=_blank title='WordPress Blog Download Mode Toggler Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-download-mode-toggler-primer-tutorial\/'>WordPress Blog Download Mode Toggler Primer Tutorial<\/a>.<\/p>\n<p>And so we <b>have<\/b> (where <i><b>var cafd=false;<\/b><\/i> starts scripting and body onload code snippet starts <i>&lt;body onload=&#8221;  <b>changeasfordownload(); cafd=true; <\/b> &#8230;<\/i> &#8230;<\/p>\n<p><code><br \/>\nfunction changeasfordownload() {<br \/>\n  var <b>outs,extis,postprexp,prexp,xp,aorig, <\/b>idmjk=0, newaspare='', big='----------------------GETME', stuffs;<br \/>\n  var admjk = document.getElementsByTagName('a');<br \/>\n  for (idmjk=0; idmjk&lt;admjk.length; idmjk++) {<br \/>\n    if (admjk[idmjk].href.indexOf('GETME') != -1 && admjk[idmjk].href.indexOf('diff.php') == -1) {<br \/>\n      <b>if (!cafd) {<br \/>\n      xp=admjk[idmjk].href.split(\"GETME\");<br \/>\n      prexp=xp[0].split(\"\/\");<br \/>\n      postprexp=prexp[-1 + prexp.length].split(\".\");<br \/>\n      extis = postprexp[-1 + postprexp.length].replace(\/_\/g,\"\").replace(\/-\/g,\"\").replace(\/GETME\/g,\"\");<br \/>\n      outs=\"http:\/\/www.rjmprogramming.com.au\/getmelist.htm?topoff=150&tsp=\" + (Math.floor(Math.random() * 1999900) + 100) + \"#\" + postprexp[0] + \".\" + postprexp[-1 + postprexp.length].replace(extis,\"\").replace(extis,\"\").replace(extis,\"\") + \"GETME\" + extis;<br \/>\n      aorig=admjk[idmjk].innerHTML;<br \/>\n      admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\".\",\"&lt;span title=\\\" + Code Download Table\\\" onclick=\\\"window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500');\\\"&gt;&amp;#9899;&lt;\/span&gt;\");<br \/>\n      if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\" \",\"&lt;span title=\\\" + Code Download Table\\\" onclick=\\\"window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500');\\\"&gt;&amp;#9898;&lt;\/span&gt;\");<br \/>\n      } else {<\/b><br \/>\n      newaspare = admjk[idmjk].href.replace('_-GETME', '').replace('__GETME', '').replace('_GETME', '').replace(big, '');<br \/>\n      while (big.indexOf('-') != -1) {<br \/>\n        big = big.replace('-', '');<br \/>\n        newaspare = newaspare.replace(big, '');<br \/>\n      }<br \/>\n      big = '----------------------GETME';<br \/>\n      stuffs = newaspare.split('\/');<br \/>\n      admjk[idmjk].download = stuffs[stuffs.length - 1];<br \/>\n      admjk[idmjk].title = \"(Really download) \" + admjk[idmjk].title +  ' ... welcome to the long hover functionality that shows allows for a Download Mode for the blog that can be toggled';<br \/>\n      admjk[idmjk].onmouseover = \" getDownloadMode(); \";<br \/>\n      admjk[idmjk].onmouseout = \" yehBut(); \";<br \/>\n      admjk[idmjk].ontouchstart = \" getDownloadMode(); \";<br \/>\n      admjk[idmjk].ontouchend = \" yehBut(); \";<br \/>\n      <b>}<br \/>\n    } else if (admjk[idmjk].href.indexOf('GETME') != -1 && !cafd) {<br \/>\n      xp=admjk[idmjk].href.split(\"GETME\");<br \/>\n      prexp=xp[0].split(\"\/\");<br \/>\n      postprexp=prexp[-1 + prexp.length].split(\".\");<br \/>\n      extis = postprexp[-1 + postprexp.length].replace(\/_\/g,\"\").replace(\/-\/g,\"\").replace(\/GETME\/g,\"\");<br \/>\n      outs=\"http:\/\/www.rjmprogramming.com.au\/getmelist.htm?topoff=150&tsp=\" + (Math.floor(Math.random() * 1999900) + 100) + \"#\" + postprexp[0] + \".\" + postprexp[-1 + postprexp.length].replace(extis,\"\").replace(extis,\"\").replace(extis,\"\") + \"GETME\" + extis;<br \/>\n      aorig=admjk[idmjk].innerHTML;<br \/>\n      admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\".\",\"&lt;span title=\\\" + Code Download Table\\\" onclick=\\\"window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500');\\\"&gt;&amp;#9899;&lt;\/span&gt;\");<br \/>\n      if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\" \",\"&lt;span title=\\\" + Code Download Table\\\" onclick=\\\"window.open('\" + outs + \"','_blank','top=100,left=100,width=500,height=500');\\\"&gt;&amp;#9898;&lt;\/span&gt;\");<br \/>\n    } else if (admjk[idmjk].innerHTML.indexOf('live run') != -1 && !cafd) {<br \/>\n      outs=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html#tuts\";<br \/>\n      admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(\" \",\"&lt;span title=\\\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\\\" onclick=\\\"window.open('\" + outs + \"','_blank','top=100,left=100,width=650,height=100');\\\"&gt;&amp;#9986;&lt;\/span&gt;\");<br \/>\n    <\/b>}<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; for today&#8217;s good ol&#8217; <i>header.php<\/i> changes to our WordPress blog PHP coding.<\/p>\n<p>Respectively, you are taken to Javascript <i>window.open<\/i> popups to &#8230;<\/p>\n<ol>\n<li><a target=_blank title='Cut to the Chase' href='http:\/\/www.rjmprogramming.com.au\/slideshow.html#tuts'>http:\/\/www.rjmprogramming.com.au\/slideshow.html#tuts<\/a> &#8230; ie. <i>Cut to the Chase<\/i><\/li>\n<li><a target=_blank title='Code Download Table positioning' href='http:\/\/www.rjmprogramming.com.au\/getmelist.htm?topoff=150&#038;tsp=342421#imb_poc._GETMEhtml'>http:\/\/www.rjmprogramming.com.au\/getmelist.htm?topoff=150&#038;tsp=342421#imb_poc._GETMEhtml<\/a> (example of Code Download Table positioning to imb_poc.html_GETME)<\/li>\n<li><a target=_blank title='Code Download Table positioning' href='http:\/\/www.rjmprogramming.com.au\/getmelist.htm?topoff=150&#038;tsp=342421#imb_poc._GETMEhtml'>http:\/\/www.rjmprogramming.com.au\/getmelist.htm?topoff=150&#038;tsp=342421#imb_poc._GETMEhtml<\/a> (example of Code Download Table positioning to imb_poc.html_GETME)<\/li>\n<\/ol>\n<p> &#8230; but we feel some more changes coming on about this soon.  Must be <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=CBoC12ryaBs'>&#8220;A sly wind from the North&#8221;<\/a> blowing?!<\/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='#d28777' onclick='var dv=document.getElementById(\"d28777\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28777' 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='#d28803' onclick='var dv=document.getElementById(\"d28803\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28803' 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='#d28839' onclick='var dv=document.getElementById(\"d28839\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28839' 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='#d30716' onclick='var dv=document.getElementById(\"d30716\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/web-inspector\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30716' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It takes me a long time to get annoyed at a web page (CSS) styling &#8220;annoyance&#8221; for two reasons &#8230; the same reason the recent War on Waste series had resonance here in Australia, with so many people, regarding that &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-code-download-table-interface-linux-diff-css-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,37],"tags":[151,281,2007,520,576,2233,932,997,2232,1129,1209,1212,1319,2099,1425,1456],"class_list":["post-30716","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-css","tag-filezilla","tag-google-chrome","tag-html","tag-inline-css","tag-php","tag-programming","tag-property","tag-sftp","tag-style","tag-styling","tag-tutorial","tag-web-inspector","tag-whitespace","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30716"}],"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=30716"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30716\/revisions"}],"predecessor-version":[{"id":55372,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30716\/revisions\/55372"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=30716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=30716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=30716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}