Tag Archives: thread

WordPress Previous Relevant Published Date Tutorial

Posted on by

Meanwhile, back at “this blog posting’s WordPress Blog Twenty Ten theme header.php land”, like with the recent WordPress Same Action Item Tutorial we wanted to add some intelligence to those … <p id=wpimbyrmt>Previous relevant <a href=’//www.rjmprogramming.com.au/ITblog/wordpress-is-mentioned-by-less-recently-modified-tutorial’ target=”_blank” rel=”noopener”>WordPress Is Mentioned By Less Recently Modified Tutorial</a> is shown below.</p> … style of links we have going “stringing along” components of our more complex “blog posting threads”. We wanted to add into the title attribute … WordPress Is Mentioned By Less Recently Modified Tutorial published on May 12, 2026 … to add some more context into these “blog posting thread” stories, via … <php if (isset($post->post_content)) { // publication date $monam=[‘January’,’February’,’March’,’April’,’May’,’June’,’July’,’August’,’September’,’October’,’November’,’December’,’January’,’February’,’March’,’April’,’May’,’June’,’July’,’August’,’September’]; $mnin=[’01’,’02’,’03’,’04’,’05’,’06’,’07’,’08’,’09’,’10’,’11’,’12’,’1′,’2′,’3′,’4′,’5′,’6′,’7′,’8′,’9′]; $pras=explode(‘>Previous relevant <a ‘, $post->post_content); if (sizeof($pras) > 1) { $selxbitsare=file_get_contents(“../tutorial_options.html”); for ($inbc=1; $inbc<sizeof($pras); $inbc++) { $titsofar=explode(‘>’, explode(‘</a>’, $pras[$inbc])[0])[-1 + sizeof(explode(‘>’, explode(‘</a>’, $pras[$inbc])[0]))]; if (strpos($selxbitsare, ‘>’ . $titsofar . ‘ (‘) !== false && strpos(explode(‘</a>’, $pras[$inbc])[0], ‘ title=”‘ . $titsofar . ‘”‘) !== false) { $eightis=explode(‘)’,explode(‘>’ . $titsofar . ‘ (‘,$selxbitsare)[1])[0]; if (strlen($eightis) == 8) { $post->post_content=str_replace(‘ title=”‘ . $titsofar . ‘”‘, ‘ title=”‘ . $titsofar . ‘ published on ‘ . $monam[array_search(substr($eightis,-4,2),$mnin)] . ‘ ‘ . substr($eightis,-2,2) . ‘, ‘ . substr($eightis,0,4) . ‘”‘, $post->post_content); } else { $post->post_content=str_replace(‘ title=”‘ . $titsofar . ‘”‘, ‘ title=”‘ . $titsofar . ‘ published on ‘ . $eightis . ‘”‘, $post->post_content); } } else if (strpos($selxbitsare, ‘>’ . $titsofar . ‘ (‘) !== false && strpos(explode(‘</a>’, $pras[$inbc])[0], ” title='” . $titsofar . “‘”) !== false) { $eightis=explode(‘)’,explode(‘>’ . $titsofar . ‘ (‘,$selxbitsare)[1])[0]; if (strlen($eightis) == 8) { $post->post_content=str_replace(” title='” . $titsofar . “‘”, ” title='” . $titsofar . ” published on ” . $monam[array_search(substr($eightis,-4,2),$mnin)] . ‘ ‘ . substr($eightis,-2,2) . ‘, ‘ . substr($eightis,0,4) . “‘”, $post->post_content); } else { $post->post_content=str_replace(” title='” . $titsofar . “‘”, ” title='” . $titsofar . ” published on ” . $eightis . “‘”, $post->post_content); } } } } } ?> … new to good ol’ header.php of the TwentyTen Theme of this WordPress blog, and using our crontab/curl based overnight processing help here. Previous relevant WordPress Same Action Item Tutorial is shown below. Today, we’re extending our WordPress TwentyTen themed blog posting inhouse feature … Is Mentioned By … talked about within WordPress Is Mentioned By Less Recently Modified Tutorial to also include, via right click or touch move event … Same Cut to the Chase Action Item … PHP changed logic within is_mentioned_by.php controlled via … Continue reading →

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , | Leave a comment

WordPress Blog Thread Story Mobile Chapter Number Progress Events Tutorial

Posted on by

Make that … Mobile … to cater for mobile platform smaller widths we show a shorter “Table of Contents” display … Chapter … honing in on the idea of a Blog Posting equating to a “Story” book “Chapter” … Number … and a suitable way to give a Chapter a nickname, for display, is its “Number” … and to tie all of this together for the user contextually and dynamically … Progress … element is now displayed helping with how far the user has read into the “Story” compared to that “Story” total (“Chapter” count) length … supporting … Event … “onclick” event and non-mobile long hover “onmouseover” logic … … to add “date of publication” into the informational flow, further to yesterday’s WordPress Blog Thread Story Mobile Chapter Number Progress Tutorial. Meanswise (if that’s a word) we use Ajax Javascript ways to extract a “publication date” with today’s new arrangements, as below … <?php echo ” var threaddivs=[], threaddivstwo=[], thisthre=”, thisthrei=-1, thisthrerecttop=-1, xelms=[], lastthre=null; var zhr=null, thisbpt=”; function storyhrcheck(inhroid) { var inhro=document.getElementById(inhroid); var vsi=-1, thisvsi=-2, arrangedprefix=”, derivedtitle=”; if (lastthre != null) { vsi=eval(” + (” + lastthre.id).split(‘bloghr’)[1]); } thisvsi=eval(” + (” + inhroid).split(‘bloghr’)[1]); if (eval(” + inhro.getBoundingClientRect().top) < eval(” + thisthrerecttop)) { // && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { //document.URL.indexOf(‘scrollcheck=’) != -1) { if (lastthre == null) { lastthre=inhro; //alert(” + thisthrerecttop + ‘ vs ‘ + inhro.getBoundingClientRect().top + ‘ 0:’ + inhro.outerHTML); if (document.getElementById(‘myrprogress’)) { document.getElementById(‘myrprogress’).value=” + eval(1 + eval(” + document.getElementById(‘myrprogress’).value)); } if (document.getElementById(threaddivstwo[thisthrei]).innerHTML.split(inhro.outerHTML)[1].split(‘<hr’)[0].indexOf(‘>Previous relevant <a ‘) == -1 && document.getElementById(threaddivstwo[thisthrei]).innerHTML.split(inhro.outerHTML)[1].split(‘<hr’)[0].indexOf(‘=”entry-title”‘) != -1) { derivedtitle=document.getElementById(threaddivstwo[thisthrei]).innerHTML.split(inhro.outerHTML)[1].split(‘<hr’)[0].split(‘=”entry-title”‘)[1].split(‘>’)[1].split(‘<‘)[0].trim(); //alert(derivedtitle); arrangedprefix=inhro.outerHTML + ‘<p>Previous relevant <a target=”_blank” title=”‘ + derivedtitle + ‘” href=”//www.rjmprogramming.com.au/ITblog/’ + derivedtitle.toLowerCase().replace(“+”,””).replace(“/”,””).replace(” “,”-“).replace(“/”,””).replace(” “,”-“).replace(“/”,””).replace(” “,”-“).replace(“/”,””).replace(” “,”-“).replace(“/”,””).replace(” “,”-“).replace(” “,”-“).replace(” “,”-“).replace(” “,”-“).replace(” “,”-“).replace(” “,”-“).replace(/—/g,”-“).replace(/–/g,”-“) + ‘/”>’ + derivedtitle + ‘</a> is shown below …</p>’; if (document.getElementById(‘myrprogress’)) { document.getElementById(‘myrprogress’).value=” + document.getElementById(‘myrprogress’).max; } } //else if (document.getElementById(threaddivstwo[thisthrei]).innerHTML.split(inhro.outerHTML)[1].split(‘<hr’)[0].indexOf(‘>Previous relevant <a ‘) == -1) { //alert(‘huh ‘ + document.getElementById(threaddivstwo[thisthrei]).innerHTML.split(inhro.outerHTML)[1].split(‘<hr’)[0]); //} if (document.getElementById(threaddivstwo[thisthrei]).innerHTML.split(inhro.outerHTML)[1].split(‘<hr’)[0].indexOf(‘>Previous relevant <a ‘) != -1 || document.getElementById(threaddivstwo[thisthrei]).innerHTML.split(inhro.outerHTML)[1].split(‘<hr’)[0].indexOf(‘=”entry-title”‘) != -1) { if (!document.getElementById(‘upto’)) { if (document.getElementById(‘bleft’)) { //alert(‘bleft’); document.getElementById(‘bleft’).innerHTML+='<div style=”display:inline-block;position:fixed;top:50px;left:0px;z-index:99;width:’ + Math.max(80,Math.min(document.getElementById(‘main’).getBoundingClientRect().left, document.getElementById(threaddivstwo[thisthrei]).getBoundingClientRect().left)) + ‘px;” id=upto><a ‘ + storyshortmaybe(thisvsi,(arrangedprefix + document.getElementById(threaddivstwo[thisthrei]).innerHTML).split(inhro.outerHTML)[1].split(‘<hr’)[0].split(‘>Previous relevant <a ‘)[1].split(‘</a>’)[0]) + ‘</a> <progress id=myrprogress title=”Click for more information” data-lastbpt=”” data-lastomo=0 onclick=storycontextualize(event,1); onmouseover=storycontextualize(event,0); style=display:inline-block;opacity:0.4; value=1 min=0 max=’ + eval(-1 + eval(” + document.getElementById(threaddivstwo[thisthrei]).innerHTML.split(‘<hr class=’).length)) + ‘></progress><span id=sprogress></span></div>’; } else { //alert(‘body’); //alert(‘<a style=”position:fixed;top:0px;left:0px;” id=upto ‘ + document.getElementById(threaddivstwo[thisthrei]).innerHTML.split(inhro.outerHTML)[1].split(‘<hr’)[0].split(‘>Previous relevant <a ‘)[1].split(‘</a>’)[0] + ‘</a>’); document.body.innerHTML+='<div style=”display:inline-block;position:fixed;top:50px;left:0px;z-index:99;width:’ + Math.max(80,Math.min(document.getElementById(‘main’).getBoundingClientRect().left, document.getElementById(threaddivstwo[thisthrei]).getBoundingClientRect().left)) + ‘px;” id=upto><a ‘ + storyshortmaybe(thisvsi,(arrangedprefix + … Continue reading →

Posted in Ajax, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

WordPress Blog Thread Story Mobile Chapter Number Progress Tutorial

Posted on by

The four changed words within today’s blog posting title “WordPress Blog Thread Story Mobile Chapter Number Progress Tutorial” pretty much sum up what we attended to today with respect to our “Storybook” feel Blog Posting Thread display at this WordPress.org blog (via changes to it’s good ol’ TwentyTen themed header.php) you are reading … Mobile … to cater for mobile platform smaller widths we show a shorter “Table of Contents” display … Chapter … honing in on the idea of a Blog Posting equating to a “Story” book “Chapter” … Number … and a suitable way to give a Chapter a nickname, for display, is its “Number” … and to tie all of this together for the user contextually and dynamically … Progress … element is now displayed helping with how far the user has read into the “Story” compared to that “Story” total (“Chapter” count) length … as our “tweaked” approach further to yesterday’s WordPress Blog Thread Story Table of Contents Tutorial … <?php echo ” var threaddivs=[], threaddivstwo=[], thisthre=”, thisthrei=-1, thisthrerecttop=-1, xelms=[], lastthre=null; function storyreorder(atofind) { var ivd=0, hrparts=[], hroh=”, reorderedcontent=”, hrih=”, hrdone=false, hrplus=”, hrcnt=0, midbit=”; var atobr=atofind.getBoundingClientRect(); if (document.getElementById(‘upto’)) { document.getElementById(‘upto’).innerHTML=”; thisthre=”; thisthrei=-1; lastthre=null; thisthrerecttop=-1; } thisthre=” + atofind.id; thisthrerecttop=eval(” + atofind.getBoundingClientRect().top); //if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { // alert(” + thisthrerecttop); //} if ((” + atofind.getAttribute(‘data-w’)) == ‘0’) { atofind.setAttribute(‘data-w’,(” + atobr.width)); atofind.setAttribute(‘data-h’,(” + atobr.height)); } atofind.setAttribute(‘data-st’,(” + document.body.scrollTop)); for (ivd=0; ivd<threaddivs.length; ivd++) { if (document.getElementById(threaddivs[ivd])) { if (document.getElementById(threaddivs[ivd]).innerHTML.indexOf(atofind.outerHTML) != -1 && !hrdone) { thisthrei=ivd; threaddivstwo[ivd]=threaddivstwo[ivd].split(‘.’)[0]; atofind.setAttribute(‘data-done’, ‘y’); if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { var pwis=0; if (navigator.userAgent.match(/iPad/i)) { pwis=eval(” + document.getElementById(‘primary’).getBoundingClientRect().width); } atofind.style.width=” + eval(-40 + eval(” + document.getElementById(‘container’).getBoundingClientRect().width) – pwis) + ‘px’; } else { atofind.style.width=” + eval(-40 + eval(” + document.getElementById(‘container’).getBoundingClientRect().width) – eval(” + document.getElementById(‘primary’).getBoundingClientRect().width)) + ‘px’; } atofind.style.color=’rgb(70,70,70)’; atofind.style.textShadow=’-0.5px 0.5px 0.5px #952dff’; atofind.style.overflow=’scroll’; atofind.style.borderLeft=’1px dashed red’; atofind.style.WebkitOverflowScrolling=’touch’; <?php echo $atofind; ?> if (document.getElementById(threaddivs[ivd]).innerHTML.indexOf(‘<hr title=’) != -1) { hrplus=’ title=’; } hrparts=document.getElementById(threaddivs[ivd]).innerHTML.split(‘<hr’ + hrplus); if (eval(” + hrparts.length) > 1) { hrih='<hr’ + hrplus + hrparts[1].split(‘>’)[0] + ‘>’; if (hrih.indexOf(‘/>’) == -1 && document.getElementById(threaddivs[ivd]).innerHTML.indexOf(‘</hr>’) != -1) { hrih+='</hr>’; } hroh='<hr’ + hrplus + hrparts[1].split(‘>’)[0].replace(/\//g,”) + ‘></hr>’; } if (hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”).indexOf(‘If this’ + ‘ was interesting ‘) != -1 && hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”).indexOf(‘If this’ + ‘ was interesting ‘) < 100) { reordercontent='<div style=display:none;>’ + hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”) + ‘</div>’; } else { reordercontent=hrparts[eval(-1 + … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

WordPress Blog Thread Story Table of Contents Tutorial

Posted on by

Today, onto yesterday’s WordPress Blog Thread Story Background Gradients Tutorial‘s progress with our Story Mode Blog Posting Threads here, at least for non-mobile platforms we make use of that whitespace over to the left presenting a … Table of Contents … style of “a” links to what you might like to think of as “chapters” to the blog posting thread “Story”. Why only non-mobile here? Well, we have to think of another non-intrusive strategy for mobile platforms without enough of that left hand side whitespace available. This Table of Contents is built upon as the user is reading and scrolling down the “story”. So what was most useful to making this happen? In brief terms, it is two Javascript techniques … using HTML DOM querySelectorAll() Method … and … using [element].getBoundingClientRect() method … particularly as the latter, when comparing “apples versus apples” does not need any reference to anything like [element].scrollTop … at least on non-mobile … <?php echo ” var threaddivs=[], threaddivstwo=[], thisthre=”, thisthrei=-1, thisthrerecttop=-1, xelms=[], lastthre=null; function storyreorder(atofind) { var ivd=0, hrparts=[], hroh=”, reorderedcontent=”, hrih=”, hrdone=false, hrplus=”, hrcnt=0, midbit=”; var atobr=atofind.getBoundingClientRect(); if (document.getElementById(‘upto’)) { document.getElementById(‘upto’).innerHTML=”; thisthre=”; thisthrei=-1; lastthre=null; thisthrerecttop=-1; } thisthre=” + atofind.id; thisthrerecttop=eval(” + atofind.getBoundingClientRect().top); if ((” + atofind.getAttribute(‘data-w’)) == ‘0’) { atofind.setAttribute(‘data-w’,(” + atobr.width)); atofind.setAttribute(‘data-h’,(” + atobr.height)); } atofind.setAttribute(‘data-st’,(” + document.body.scrollTop)); for (ivd=0; ivd<threaddivs.length; ivd++) { if (document.getElementById(threaddivs[ivd])) { if (document.getElementById(threaddivs[ivd]).innerHTML.indexOf(atofind.outerHTML) != -1 && !hrdone) { thisthrei=ivd; threaddivstwo[ivd]=threaddivstwo[ivd].split(‘.’)[0]; atofind.setAttribute(‘data-done’, ‘y’); if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { var pwis=0; if (navigator.userAgent.match(/iPad/i)) { pwis=eval(” + document.getElementById(‘primary’).getBoundingClientRect().width); } atofind.style.width=” + eval(-40 + eval(” + document.getElementById(‘container’).getBoundingClientRect().width) – pwis) + ‘px’; } else { atofind.style.width=” + eval(-40 + eval(” + document.getElementById(‘container’).getBoundingClientRect().width) – eval(” + document.getElementById(‘primary’).getBoundingClientRect().width)) + ‘px’; } atofind.style.color=’rgb(70,70,70)’; atofind.style.textShadow=’-0.5px 0.5px 0.5px #952dff’; atofind.style.overflow=’scroll’; atofind.style.borderLeft=’1px dashed red’; atofind.style.WebkitOverflowScrolling=’touch’; <?php echo $atofind; ?> if (document.getElementById(threaddivs[ivd]).innerHTML.indexOf(‘<hr title=’) != -1) { hrplus=’ title=’; } hrparts=document.getElementById(threaddivs[ivd]).innerHTML.split(‘<hr’ + hrplus); if (eval(” + hrparts.length) > 1) { hrih='<hr’ + hrplus + hrparts[1].split(‘>’)[0] + ‘>’; if (hrih.indexOf(‘/>’) == -1 && document.getElementById(threaddivs[ivd]).innerHTML.indexOf(‘</hr>’) != -1) { hrih+='</hr>’; } hroh='<hr’ + hrplus + hrparts[1].split(‘>’)[0].replace(/\//g,”) + ‘></hr>’; } if (hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”).indexOf(‘If this’ + ‘ was interesting ‘) != -1 && hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”).indexOf(‘If this’ + ‘ was interesting ‘) < 100) { reordercontent='<div style=display:none;>’ + hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”) + ‘</div>’; } else { reordercontent=hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”); } if (reordercontent.indexOf(‘<hr’) != -1) { reordercontent=reordercontent.replace(‘<hr’, ‘<hr class=hrabove id=bloghr’ + … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

WordPress Blog Thread Story Background Gradients Tutorial

Posted on by

Today we’re nuancing the “storybook” styling we developed in yesterday’s WordPress Blog Thread Story Border SVG Image Tutorial where you may have been wondering about the papers part to codeline … $atofind=”\n atofind.className=’storybook papers’; \n atofind.oncontextmenu=function(event){ event.target.style.zoom=” + eval(0.05 + eval(” + event.target.style.zoom)); }; \n”; ? Well, that was to do with how we wanted to not only make … the left hand border have that “ring binder” feel … but we also wanted … some sort of effect applied to the “storybook” background as some sort of feel whereby we might think “paper” We did not want to involve any images or CSS that was too complicated. We came across this excellent webpage and it gave us the inspiration for new such CSS styling … <style> .storybook { border-image: url(‘data:image/svg+xml,<svg style=”font-size:26px;background-color:rgb(255,255,240,0.8);border-right:1px solid black;” width=”20″ height=”20″ viewBox=”0 0 20 20″ xmlns=”http://www.w3.org/2000/svg”><text style=”opacity:0.5;” x=”15%” y=”80%”>☌</text><rect x=”18.5″ y=”0″ width=”1.5″ height=”20″ stroke-width=”1.5″ stroke=”black” fill=”black”></rect></svg>’); border-image-slice: 0 0 0 100; border-image-width: 20px; border-image-outset: 1px; border-image-repeat: repeat; padding-left: 20px; } <?php if (isset($_GET[‘putpaper’]) || 1 == 1) { // thanks to https://www.30secondsofcode.org/css/s/10-css-background-patterns/ echo ” .papers { background-color: #fefefe; background-image: linear-gradient( 30deg, rgba(83,148,253,0.05) 12%, transparent 12.5%, transparent 87%, rgba(83,148,253,0.05) 87.5%, rgba(83,148,253,0.05) ), linear-gradient( 150deg, rgba(83,148,253,0.05) 12%, transparent 12.5%, transparent 87%, rgba(83,148,253,0.05) 87.5%, rgba(83,148,253,0.05) ), linear-gradient( 30deg, rgba(83,148,253,0.05) 12%, transparent 12.5%, transparent 87%, rgba(83,148,253,0.05) 87.5%, rgba(83,148,253,0.05) ), linear-gradient( 150deg, rgba(83,148,253,0.05) 12%, transparent 12.5%, transparent 87%, rgba(83,148,253,0.05) 87.5%, rgba(83,148,253,0.05) ), linear-gradient( 60deg, rgba(83,148,253,0.05) 25%, transparent 25.5%, transparent 75%, rgba(83,148,253,0.05) 75%, rgba(83,148,253,0.05) ), linear-gradient( 60deg, rgba(83,148,253,0.05) 25%, transparent 25.5%, transparent 75%, rgba(83,148,253,0.05) 75%, rgba(83,148,253,0.05) ); background-size: 48px 84px; background-position: 0 0, 0 0, 24px 42px, 24px 42px, 0 0, 24px 42px; } “; } ?> </style> … helped out by tweaked header.php Javascript code … <?php echo ” function storyizecollect() { var divsall=document.getElementsByTagName(‘div’); for (var ivd=0; ivd<divsall.length; ivd++) { if (divsall[ivd].outerHTML.split(‘>’)[0].indexOf(‘ post type-post ‘) != -1) { threaddivs.push(” + divsall[ivd].id); } } } function storyresize(atoo) { atoo.style.width=” + atoo.getAttribute(‘data-w’) + ‘px’; //atoo.style.height=” + atoo.getAttribute(‘data-h’) + ‘px’; atoo.style.backgroundColor=’rgba(255,155,55,0.3)’; atoo.style.overflow=’hidden’; return atoo; } function storyreorder(atofind) { var hrparts=[], hroh=”, reorderedcontent=”, hrih=”, hrdone=false, hrplus=”; var atobr=atofind.getBoundingClientRect(); if ((” + atofind.getAttribute(‘data-w’)) == ‘0’) { atofind.setAttribute(‘data-w’,(” + atobr.width)); atofind.setAttribute(‘data-h’,(” + atobr.height)); } atofind.setAttribute(‘data-st’,(” + document.body.scrollTop)); for (var ivd=0; ivd<threaddivs.length; ivd++) { if (document.getElementById(threaddivs[ivd])) { if (document.getElementById(threaddivs[ivd]).innerHTML.indexOf(atofind.outerHTML) != -1 && !hrdone) { atofind.setAttribute(‘data-done’, ‘y’); if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { var pwis=0; if (navigator.userAgent.match(/iPad/i)) { pwis=eval(” + document.getElementById(‘primary’).getBoundingClientRect().width); } atofind.style.width=” + eval(-40 + eval(” + document.getElementById(‘container’).getBoundingClientRect().width) – … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

WordPress Blog Thread Story Border SVG Image Tutorial

Posted on by

The border-image CSS property, used well, can be a really powerful web design tool. We decided to show a user they were in, like, “storybook mode” reading our blog, further to yesterday’s WordPress Blog Thread Story Mode Tutorial, by applying a new … border-image … ala “ring binder” (via use of ☌ &#9740; “conjunction” emoji symbol), only on the left … via (header.php, again) … SVG … text … using new CSS styling … <style> .storybook { border-image: url(‘data:image/svg+xml,<svg style=”font-size:20px;” width=”20″ height=”20″ viewBox=”0 0 20 20″ xmlns=”http://www.w3.org/2000/svg”><text x=”10%” y=”80%”>☌</text></svg>’); border-image-slice: 0 0 0 100; border-image-width: 20px; border-image-outset: 2px; border-image-repeat: repeat; padding-left: 20px; } </style> … referenced in a newly introduced PHP variable … <?php $atofind=”\n atofind.className=’storybook papers’; \n atofind.oncontextmenu=function(event){ event.target.style.zoom=” + eval(0.05 + eval(” + event.target.style.zoom)); }; \n”; ?> … used in “storybook” class specific Javascript … <?php echo ” function storyizecollect() { var divsall=document.getElementsByTagName(‘div’); for (var ivd=0; ivd<divsall.length; ivd++) { if (divsall[ivd].outerHTML.split(‘>’)[0].indexOf(‘ post type-post ‘) != -1) { threaddivs.push(” + divsall[ivd].id); } } } function storyresize(atoo) { atoo.style.width=” + atoo.getAttribute(‘data-w’) + ‘px’; //atoo.style.height=” + atoo.getAttribute(‘data-h’) + ‘px’; atoo.style.backgroundColor=’rgba(255,155,55,0.3)’; atoo.style.overflow=’hidden’; return atoo; } function storyreorder(atofind) { var hrparts=[], hroh=”, reorderedcontent=”, hrih=”, hrdone=false, hrplus=”; var atobr=atofind.getBoundingClientRect(); if ((” + atofind.getAttribute(‘data-w’)) == ‘0’) { atofind.setAttribute(‘data-w’,(” + atobr.width)); atofind.setAttribute(‘data-h’,(” + atobr.height)); } atofind.setAttribute(‘data-st’,(” + document.body.scrollTop)); for (var ivd=0; ivd<threaddivs.length; ivd++) { if (document.getElementById(threaddivs[ivd])) { if (document.getElementById(threaddivs[ivd]).innerHTML.indexOf(atofind.outerHTML) != -1 && !hrdone) { atofind.setAttribute(‘data-done’, ‘y’); if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { var pwis=0; if (navigator.userAgent.match(/iPad/i)) { pwis=eval(” + document.getElementById(‘primary’).getBoundingClientRect().width); } atofind.style.width=” + eval(-40 + eval(” + document.getElementById(‘container’).getBoundingClientRect().width) – pwis) + ‘px’; } else { atofind.style.width=” + eval(-40 + eval(” + document.getElementById(‘container’).getBoundingClientRect().width) – eval(” + document.getElementById(‘primary’).getBoundingClientRect().width)) + ‘px’; } atofind.style.overflow=’scroll’; atofind.style.borderLeft=’1px dashed red’; atofind.style.WebkitOverflowScrolling=’touch’; <?php echo $atofind; ?> if (document.getElementById(threaddivs[ivd]).innerHTML.indexOf(‘<hr title=’) != -1) { hrplus=’ title=’; } hrparts=document.getElementById(threaddivs[ivd]).innerHTML.split(‘<hr’ + hrplus); if (eval(” + hrparts.length) > 1) { hrih='<hr’ + hrplus + hrparts[1].split(‘>’)[0] + ‘>’; if (hrih.indexOf(‘/>’) == -1 && document.getElementById(threaddivs[ivd]).innerHTML.indexOf(‘</hr>’) != -1) { hrih+='</hr>’; } hroh='<hr’ + hrplus + hrparts[1].split(‘>’)[0].replace(/\//g,”) + ‘></hr>’; } if (hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”).indexOf(‘If this’ + ‘ was interesting ‘) != -1 && hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”).indexOf(‘If this’ + ‘ was interesting ‘) < 100) { reordercontent='<div style=display:none;>’ + hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”) + ‘</div>’; } else { reordercontent=hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”); } for (var iivd=eval(-2 + eval(” + hrparts.length)); iivd>=0; iivd–) { if (hrparts[iivd].replace(hrih.replace(‘<hr’ + hrplus,”),”).indexOf(‘If this’ + ‘ was interesting … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

WordPress Blog Thread Story Mode Tutorial

Posted on by

We feel a “tweak” coming on. It’s been a while since the last such “tweak”. We’re talking about doing the frequent … good ol’ “tweaking” of header.php … owned by our … wordpress.org based WordPress Blog … theme TwentyTen … means by which we … can “tweak” in the morning, at supper time, and in small cubicles the look and feel and “way it works” aspects to the blog you are reading Yes, it’s mainly header.php we use, though do remember functions.php, footer.php, 404.php and some plugins as well, but the “tweaking” of header.php is the easiest, for most jobs. Picking up from the, largely, document.body onload event interventions we make happen this way, we latch onto a previous intervention, and “retweak” that (past work related to WordPress Is Mentioned By Less Recently Modified Tutorial), today, to add … New “Story Mode” display of a thread of WordPress blog postings … this use of “thread” not being a technical term, rather how we describe how we string together related blog postings (that usually follow each other reverse chronologically (ie. latest blog posting first)) into, what we term, a “blog posting thread”. But yesterday, suddenly, it dawned on us, that this “blog posting thread” can be confusing for readers coming in to the discussion half way through, or near the end, so why not offer them a new 📖 (&#128214; … ie. story) based (adding to a global var threaddivs=[]; statement part) … <?php echo ” function storyizecollect() { var divsall=document.getElementsByTagName(‘div’); for (var ivd=0; ivd<divsall.length; ivd++) { if (divsall[ivd].outerHTML.split(‘>’)[0].indexOf(‘ post type-post ‘) != -1) { threaddivs.push(” + divsall[ivd].id); } } } function storyresize(atoo) { //atoo.style.width=” + atoo.getAttribute(‘data-w’) + ‘px’; //atoo.style.height=” + atoo.getAttribute(‘data-h’) + ‘px’; atoo.style.backgroundColor=’rgba(255,155,55,0.3)’; atoo.style.overflow=’hidden’; return atoo; } function storyreorder(atofind) { var hrparts=[], hroh=”, reorderedcontent=”, hrih=”, hrdone=false, hrplus=”; var atobr=atofind.getBoundingClientRect(); atofind.setAttribute(‘data-w’,(” + atobr.width)); atofind.setAttribute(‘data-h’,(” + atobr.height)); atofind.setAttribute(‘data-st’,(” + document.body.scrollTop)); for (var ivd=0; ivd<threaddivs.length; ivd++) { if (document.getElementById(threaddivs[ivd])) { if (document.getElementById(threaddivs[ivd]).innerHTML.indexOf(atofind.outerHTML) != -1 && !hrdone) { atofind.setAttribute(‘data-done’, ‘y’); atofind.style.overflow=’scroll’; atofind.style.borderLeft=’1px dashed red’; atofind.style.WebkitOverflowScrolling=’touch’; atofind.style.zoom=’0.4′; if (document.getElementById(threaddivs[ivd]).innerHTML.indexOf(‘<hr title=’) != -1) { hrplus=’ title=’; } hrparts=document.getElementById(threaddivs[ivd]).innerHTML.split(‘<hr’ + hrplus); if (eval(” + hrparts.length) > 1) { hrih='<hr’ + hrplus + hrparts[1].split(‘>’)[0] + ‘>’; if (hrih.indexOf(‘/>’) == -1 && document.getElementById(threaddivs[ivd]).innerHTML.indexOf(‘</hr>’) != -1) { hrih+='</hr>’; } hroh='<hr’ + hrplus + hrparts[1].split(‘>’)[0].replace(/\//g,”) + ‘></hr>’; } if (hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ + hrplus,”),”).indexOf(‘If this’ + ‘ was interesting ‘) != -1 && hrparts[eval(-1 + eval(” + hrparts.length))].replace(hrih.replace(‘<hr’ … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , | Leave a comment

WordPress Blog Posting Thread Book Primer Tutorial

Posted on by

What’s with the word “book” in today’s blog posting title? Glad you asked?! The idea of a “thread of blog postings” is a concept we keep up in our blog posting content managed by the posting authors. On a lot of tutorials it is the history before that we string together in this contents, as for a … blog posting tutorial feed that presents from newest (up the top) to oldest (down the bottom) … which is good for “non-bingeing” awaiting “hot off the press content” readers … but what about people who want to “start from scratch”, later, with a big picture view (helped out by seeing the topic, or group of related concepts, progressively)? … so today we present an emoji button 🔀 … <a id=”oeimage-pair-fitting-into-a-given-dimension-sources-tutorial” title=”Change order of blog posts (now newest to oldest) to oldest through to newest (like a book)” target=”_blank” style=”text-decoration:none;cursor:pointer;” onclick=”hrrearrange(this);”>&#128256;</a> … added via PHP … <?php echo ” cps[jiicp].innerHTML+=’ <a id=”oe’ + h1cps[iicp].innerHTML.split(‘ id=”d’)[1].split(‘”‘)[0] + ‘” title=”Change order of blog posts (now newest to oldest) to oldest through to newest (like a book)” target=_blank style=”text-decoration:none;cursor:pointer;” onclick=”hrrearrange(this);”>&#128256;</a<‘; “; ?> … press means by which … blog postings can be reworked into an oldest (up the top) to newest (down the bottom) “book” compilation of the content up to the time of the blog posting you enter in examining This “book” presentation is always chronological, and so for context here, we add a select (dropdown) element with option element members of the form … [Blog Posting Title] (YYYYMMDD) … the click of which hashtag navigates to that part of the “book” (like a chapter, if you will). Code changes for this all appear in our WordPress blog’s TwentyTen theme’s (good ol’) header.php that work with a new … <?php <div style=’display:none’ id=’drefresh’></div> ?> … as per … <?php echo ” var divcih=”, antidivcih=”, hrsa=[], hroh=”, twobits=”, cdivid=’con’ + ‘t’ + ‘ent’, onlok=true; function hrrearrange(ahrro) { var aid=” + ahrro.id; var honetoif=”; var firsttitle=”; var lasttitle=”; var selindex=’&nbsp;<select class=ptpico style=”display:inline-block;vertical-align:top;” size=1 title=”Posting thread posts in chronological order” onchange=”location.href=’ + “‘” + ‘#’ + “‘” + ‘ + this.value + ‘ + “‘” + ‘#andabit=-70’ + “‘” + ‘; var tsels=docgetclass(‘ + “‘” + ‘ptpico’ + “‘” + ‘, ‘ + “‘” + ‘select’ + “‘” + ‘); for (var iij=0; iij<tsels.length; iij++) { tsels[iij].value=this.value; }”><option class=copt value=detrefresh></option></select>’; var appendixnum=0; if (navigator.userAgent.match(/iPad/i)) { //alert(‘here at hrrearrange’); } … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , | Leave a comment