Image Found Javascript Animation Reporting Mode Tutorial
Now that yesterday’s Image Found Javascript Animation Sharing Tutorial‘s delving into “sharing functionality” had us carrying along with us, navigation data wise, much more information in amongst the hashtagged data …
Does this mean there is additional functionality we can add to our “Images Found” WordPress Blog related reporting?
You bet there is … but please, gamble responsibly!
We can toggle among four display modes now, the default being the first of …
- Tutorial pictures … presented as Background Images
- Cut to the Chase … blog posting’s associated action item
- Blog Posting … taken from the thread of blog postings we tend to create these days for many topics
- Tutorial pictures … presented as Image img elements using object-fit:contain CSS styling
… and an email subject line will mention the display mode the originator was using as they sent the email. Yes, in the report now, via a double click of the leftmost red square, comprising the progress bar, a Javascript prompt window allows for user changes to all these configurations, much like back at the WordPress Blog a right click of 🎞️ allows for this, from yesterday’s work, as well, in the changed “fourth draft” images_found.php web application.
Previous relevant Image Found Javascript Animation Sharing Tutorial is shown below.
Image Found Javascript Animation Sharing Tutorial
Further to yesterday’s Image Found Javascript Animation Duration Tutorial, today, we look into some sharing functionality to …
- email … or …
- SMS …
<?php echo ”
function emailit(invl, tov, subjid) {
var anchor = document.createElement('a');
anchor.href = 'mailto:' + tov + '?subject=' + encodeURIComponent(subjid) + '&body=' + encodeURIComponent(invl);
anchor.style.display='none';
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();
return invl;
}
function smsit(invl, tov) {
var anchor = document.createElement('a');
anchor.href = 'sms:' + tov + '&body=' + encodeURIComponent(invl);
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
return invl;
}
“; ?>
… for which we write URL links back to the new Image Found reports from the last few days. Clicking off such links represents the chance for a “new start” so that instead of …
- as for the last few days the Image Found reports being children to the WordPress Blog … but now …
- with sharing this way there are two effects, they being …
- the Image Found report sits at the top window level … so if we want reference back to the WordPress Blog we’ll detect the scenario and open a new popup window version of the underlying WordPress Blog posting “the other way around” … but also means …
- we need to supply more hashtag data from the WordPress Blog in order for the Image Found report to effectively “stand by itself” and not rely on any parent window involvement
… and on that last point we pick hashtagging to do this because …
- email link URLs can only handle get arguments and hashtagging data … as well as …
- the data could overflow get argument length limits
… in the changed “third draft” images_found.php web application.
Previous relevant Image Found Javascript Animation Duration Tutorial is shown below.
Image Found Javascript Animation Duration Tutorial
An assumption in yesterday’s Image Found Javascript Animation via PHP Tutorial Images Found Presentations was that …
- a set 8 seconds between WordPress Blog representative Tutorial Pictures would suit …. but today this was nuanced so that …
-
- 30 seconds allows for more “load time” … and …
- for animated GIF presentations … within the WordPress Blog TwentyTen theme’s good ol’ header.php …
<?php echo ”
var durdef=30, iwow=0;
function 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.
if ((whatgifmaybe.toLowerCase().trim().split('#')[0] + '?').indexOf('.gif?') != -1) {
ingif=whatgifmaybe;
document.body.style.cursor='progress';
fetch(whatgifmaybe)
.then(res => res.arrayBuffer())
.then(ab => isGifAnimated(new Uint8Array(ab)))
.then(console.log);
}
}
/** @param {Uint8Array} uint8 */
function 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.
let duration = 0;
for (let i = 0, len = uint8.length; i < len; i++) {
if (uint8[i] == 0x21
&& uint8[i + 1] == 0xF9
&& uint8[i + 2] == 0x04
&& uint8[i + 7] == 0x00)
{
const delay = (uint8[i + 5] << 8) | (uint8[i + 4] & 0xFF);
duration += delay < 2 ? 10 : delay;
}
}
//alert('' + eval(duration / 100));
if (eval(duration / 100) <= 0.11) {
altanimdura[altind]='' + durdef;
return durdef;
}
altanimdura[altind]='' + Math.ceil(eval(duration / 100));
if (Math.ceil(eval(duration / 100)) > eval('' + durdef)) {
iwow+=eval(Math.ceil(eval(duration / 100)) - eval('' + durdef));
}
return duration / 100; // if 0.1 is not an animated GIF
}
“; ?>
… allowing the changed “second draft” images_found.php allow extra time for display as represented by that iwow variable above.
Previous relevant Image Found Javascript Animation via PHP Tutorial is shown below.
Image Found Javascript Animation via PHP Tutorial
Yesterday’s Image Found Javascript Animation Tutorial‘s …
- “first draft” effort at Image Found Javascript Animation was unhinged, in the sense that a popup window open via window.open had a nothing first parameter value … and though we cannot resist using this methodology on occasions …
onewe should expect the worst in the “flaky” stakes … where we found the Javascript DOM sort of “petering out” on occasions … but …
- never mind, some of that “first draft” logic becomes useful to form a PHP coded first parameter to window.open scenario … begging the question …
Why PHP?
… rather than HTML/Javascript/CSS … so please believe us when we say “we’re not being obtuse” and “we’re not just complicating things and would just use HTML/Javascript/CSS if totally apt” but actually allowing for future expansion of the project, because you see, PHP, only (at least at our web server), can handle all three navigation input conduits …
- get arguments on address bar URL via ? and & … and/or …
- location.hash hashtagging data (a lot of which can be handled, more so than the get arguments can handle) … and/or, finally, and only a serverside language like PHP can handle (MAMP anyone?) (but we are not accessing … yet) …
- post arguments via an HTML form method=POST or some Ajax FormData object means (where a lot of data can be handled, a lot more than the get arguments can handle)
Popup windows with a defined first parameter on the same domain should work with …
- window.opener back references … including using window.opener function calls … while if it is HTML iframe elements you’re using (possible with a tailored iframe name window.open second parameter) …
- window.parent back references … including using window.parent function calls
… and the DOM work is definitely less “flaky” using this new architecture to our solution new via a “first draft” images_fpund.php now called by the WordPress Blog TwentyTen theme’s good ol’ header.php …
<?php echo ”
function altan(spano) {
var jsis='', spval='', duris=0;;
var alcont='Future animation work will animate list to follow ... ', coma='';
if (altanima.length > 0) {
for (var ibn=0; ibn<altanima.length; ibn++) {
alcont+=coma + altanima[ibn];
coma=',';
spval+=' ';
duris+=8;
}
// Thanks to https://stackoverflow.com/questions/15945288/animating-progress-bars-with-css
var htbit='<img id=icursl style=object-fit:contain; src=' + altanima[0] + '></img><div class="meter"><span style="width:95%;"><span class="progress"></span></span></div>';
var stbit=" .meter { margin-top:95px; " + String.fromCharCode(10) + " height: 5px; " + String.fromCharCode(10) + " position: relative; " + String.fromCharCode(10) + " background: #f3efe6; " + String.fromCharCode(10) + " overflow: hidden; " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " " + String.fromCharCode(10) + " .meter span { " + String.fromCharCode(10) + " display: block; " + String.fromCharCode(10) + " height: 100%; " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " " + String.fromCharCode(10) + " .progress { " + String.fromCharCode(10) + " background-color: #e4c465; " + String.fromCharCode(10) + " animation: progressBar " + duris + "s ease-in-out infinite; " + String.fromCharCode(10) + " animation-fill-mode:both; " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " " + String.fromCharCode(10) + " @keyframes progressBar { " + String.fromCharCode(10) + " 0% { width: 0; } " + String.fromCharCode(10) + " 100% { width: 100%; } " + String.fromCharCode(10) + "} ";
if (6 == 6) {
jsis=" var initval='" + spval + "'; " + String.fromCharCode(10) + " var ial=1; " + String.fromCharCode(10) + " var alcont='" + alcont.split(' to follow ... ')[1] + "'; " + String.fromCharCode(10) + " var alconta=alcont.split(','); " + String.fromCharCode(10) + " var jal=" + alcont.split(' to follow ... ')[1].split(',').length + '; ' + String.fromCharCode(10);
jsis+=String.fromCharCode(10) + " function animateit() { if (ial < jal) { document.getElementById('icursl').src=alconta[ial]; document.getElementById('xbody').style.background='url(' + alconta[ial] + ')'; } else { ial=0; window.location.reload(); document.getElementById('icursl').src=alconta[ial]; document.getElementById('xbody').style.background='url(' + alconta[ial] + ')'; } ial++; setTimeout(animateit,8000); } ";
if (4 == 4) {
wooow=window.open('/PHP/images_found.php?duration=0&ftitle=' + encodeURIComponent(altanimtitlea[0] + ' ' + altanimdura[0] + ' ' + altanimpida[0] + ' ' + altanimcttca[0]) + '&rand=' + Math.floor(Math.random() * 1989767) + '#' + encodeURIComponent(alcont.split('Future animation work will animate list to follow ... ')[1]),'_blank','top=' + eval(-800 + screen.height) + ',left=' + eval(-900 + screen.width) + ',width=900,height=800');
wooow.document.title='Showing images of ' + altanimtitlea[0] + ' thread ... click for blog, double click for web application ...'; // 1 of ' + alcont.split(' to follow ... ')[1].split(',').length;
} else {
wooow=window.open('','_blank','top=50,left=50,width=800,height=800');
wooow.document.write('<html><head><style> ' + stbit + ' #xbody { background:URL(' + altanima[0] + '); background-repeat:no-repeat; background-size:contain; } </style><scr' + 'ipt type=text/javascript> ' + jsis + ' </scr' + 'ipt></head><body onload=setTimeout(animateit,8000); id=xbody style=width:100%;height:100%>' + htbit + '</body></html>');
wooow.document.title='Showing images of tutorial thread ...'; // 1 of ' + alcont.split(' to follow ... ')[1].split(',').length;
}
} else {
alert(alcont);
}
}
}
“; ?>
It’s not all “moving sideways” here. We now get past “flakiness” enough to start mentioning thread blog posting titles and add onclick (back to blog posting) and ondblclick (back to relevant web application related to blog posting) additional functionalities, as well as better progress bar work.
Previous relevant Image Found Javascript Animation Tutorial is shown below.
Image Found Javascript Animation Tutorial
Huh?! What’s the big deal now finding the relevant WordPress Blog (that you are reading) blog posting tutorial picture?
How about a “glass half full” blast of thinking?
Still not convinced?
How about an intervention point for the loading of all blog posting tutorial pictures?
Still not convinced?
Because we say so.
Still not convinced?
Simon says so. And he’s no Silly Alec. More your Smart Alec … really. Besides Simon and Alec have formed a syndicate that says “yes” … like … definitely.
But the thing is, with the work the other day with it centred around HTML img element onerror event thinking when we presented Image Not Found Crontab Curl Issue Tutorial, while the “other side of the coin” (both showing “Alec”) is to also add to all blog posting tutorial picture HTML elements a new …
onload
… event set of logics, via good ol’ TwentyTen theme’s header.php’s …
<?php
$post->post_content=str_replace(' style="border: 1' . '5px solid pink', ' onload="altanimation(this,this.id,this.src);" onerror="altunzipit(this,this.id,this.src);" style="border: 1' . '5px solid pink', $post->post_content);
?>
… calling into play the new Javascript (via PHP) …
<?php echo ”
var altanima=[];
function altanimation(imgo, imgoid, imgosrc) {
if (altanima.indexOf(imgosrc.replace('https:','').replace('http:','')) == -1) {
altanima.push(imgosrc.replace('https:','').replace('http:',''));
}
function storyimgreorder(spanthis) {
altan(spanthis);
}
function storyimgmember(inoh) {
if (inoh.indexOf('<span data-w=') == 0) { return true; }
if (inoh.indexOf('<details') == 0) { return true; }
if (inoh.indexOf('<div class="entry-content"') == 0) { return true; }
return false;
}
function altan(spano) {
var jsis='', spval='', duris=0;;
var alcont='Future animation work will animate list to follow ... ', coma='';
if (altanima.length > 0) {
for (var ibn=0; ibn<altanima.length; ibn++) {
alcont+=coma + altanima[ibn];
coma=',';
spval+=' ';
duris+=8;
}
// Thanks to https://stackoverflow.com/questions/15945288/animating-progress-bars-with-css
var htbit='<div class="meter"><span style="width:95%;"><span class="progress"></span></span></div>';
var stbit=" .meter { margin-top:95%; " + String.fromCharCode(10) + " height: 5px; " + String.fromCharCode(10) + " position: relative; " + String.fromCharCode(10) + " background: #f3efe6; " + String.fromCharCode(10) + " overflow: hidden; " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " " + String.fromCharCode(10) + " .meter span { " + String.fromCharCode(10) + " display: block; " + String.fromCharCode(10) + " height: 100%; " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " " + String.fromCharCode(10) + " .progress { " + String.fromCharCode(10) + " background-color: #e4c465; " + String.fromCharCode(10) + " animation: progressBar " + duris + "s ease-in-out infinite; " + String.fromCharCode(10) + " animation-fill-mode:both; " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " " + String.fromCharCode(10) + " @keyframes progressBar { " + String.fromCharCode(10) + " 0% { width: 0; } " + String.fromCharCode(10) + " 100% { width: 100%; } " + String.fromCharCode(10) + "} ";
if (6 == 6) {
jsis=" var initval='" + spval + "', ial=1, alcont='" + alcont.split(' to follow ... ')[1] + "', alconta=alcont.split(','), jal=" + alcont.split(' to follow ... ')[1].split(',').length + '; ' + String.fromCharCode(10);
jsis+=" function animateit() { if (ial < jal) { document.getElementById('xbody').style.background='url(' + alconta[ial] + ')'; } else { ial=0; window.location.reload(); document.getElementById('xbody').style.background='url(' + alconta[ial] + ')'; } ial++; setTimeout(animateit,8000); } ";
wooow=window.open('','_blank','top=50,left=50,width=800,height=800');
wooow.document.write('<html><head><style> ' + stbit + ' #xbody { background:URL(' + altanima[0] + '); background-repeat:no-repeat; background-size:contain; } </style><scr' + 'ipt type=text/javascript> ' + jsis + ' </scr' + 'ipt></head><body onload=setTimeout(animateit,8000); id=xbody style=width:100%;height:100%>' + htbit + '</body></html>');
wooow.document.title='Showing images of tutorial thread ...'; // 1 of ' + alcont.split(' to follow ... ')[1].split(',').length;
} else {
alert(alcont);
}
}
}
function is_mentioned_by() {
//rppspana=docgetclass("widget-title", "h3");
var altanm='';
var zspare,xspare,xxspare,ximb,xpspana=docgetclass("entry-title", "h2"); // search URL returns
var mbitis='';
for (ximb=0; ximb<xpspana.length; ximb++) {
xxspare=xpspana[ximb].innerHTML.replace('</a>','').split('>');
xspare=xxspare[eval(-1 + xxspare.length)];
zspare=xspare.toLowerCase().replace(String.fromCharCode(35), "").replace(".", "").replace(".", "").replace(".", "").replace("+", "").replace("+", "").replace("'", "").replace('%27','').replace(/\//g, "-").replace(/,/g, "").replace("---","-").replace("---","-").replace(/--/g,"-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace('-apachephp','-apache-php-');
if (altanima.length > 0) {
mbitis=' data-w="0" data-h="0" data-st="0" data-style="-webkit-overflow-scrolling:touch;overflow:scroll;" data-done="" onclick=" if ((' + "''" + ' + event.target.id) == this.id || 1 == 1) { if (this.getAttribute(' + "'data-done'" + ').length == 0) { storyimgreorder(this); } else if (storyimgmember(event.target.outerHTML)) { this.style.zoom=1.0; storyimgresize(this).innerHTML=String.fromCodePoint(0x1F39E,0xFE0F); this.setAttribute(' + "'data-done',''" + '); window.scrollTo(0,this.getAttribute(' + "'data-st'" + ')); } } " data-title="Animate tutorial images to be ordered like a story ..." style="display:inline-block; text-decoration:none; cursor:pointer; background-color:rgba(255,155,55,0.3);" id="x' + zspare + '" ';
altanm=' <span ' + mbitis + ' title="Future animation tutorial image as slide functionality" data-onmousedown=altan(this); style=cursor:pointer;display:inline-block;>' + String.fromCodePoint(0x1F39E,0xFE0F) + '</span>';
}
if (document.body.innerHTML.indexOf('d' + zspare) == -1) {
xpspana[ximb].innerHTML+=' <div style="display:inline-block;border:3px solid rgba(255,165,0,0.4); background-color:rgba(255,255,0,0.3); " id=cc' + zspare + '><a target=_blank style="cursor:pointer;display:inline-block;text-decoration:none; font-size:12px;" ondblclick="dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" ' + oncm + '"rcrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase ... double click ' + oncmt + ' for blog posting image involvement ... to (the gist of) ' + (xspare) + '" id=tcc' + zspare + '>✂</a><a target=_blank style="background: rgba(0,255,0,0.3); background: -webkit-linear-gradient(left top, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -o-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -moz-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: linear-gradient(to bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); cursor:pointer;display:inline-block;text-decoration:none;transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); font-size:12px;" ondblclick="dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" ' + oncm + '"rcrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase ... double click ' + oncmt + ' for blog posting image involvement ... to (the gist of) ' + (xspare) + '" id=ttcc' + zspare + '>🏃🏾♀️🏃🏼♂️</a><iframe style=display:none; id=icc' + zspare + ' src=></iframe></div>';
xpspana[ximb].innerHTML+=' <div style="display:inline; background-color:rgba(255,255,0,0.3);" id=d' + zspare + '><a style="cursor:pointer;display:inline;text-decoration:none; border:2px solid yellow;" onclick=" preresize_font(this); document.getElementById(this.id.replace(String.fromCharCode(116),String.fromCharCode(105))).src=' + "'" + '//www.rjmprogramming.com.au/PHP/is_mentioned_by.php?title=' + encodeURIComponent(xspare) + "'" + '; setTimeout(precheckclass,3000); " title="' + (xspare) + ' is mentioned by ..." id=t' + zspare + '>☞</a><iframe style=display:none; id=i' + zspare + ' src=></iframe></div>';
xpspana[ximb].innerHTML+=' <div data-w="0" data-h="0" data-st="0" data-style="-webkit-overflow-scrolling:touch;overflow:scroll;" data-done="" onclick=" if (' + "('' + " + 'event.target.id) == this.id || 1 == 1) { if (this.getAttribute(' + "'data-done'" + ').length == 0) { storyreorder(this); } else if (storymember(event.target.outerHTML)) { this.style.zoom=1.0; storyresize(this).innerHTML=' + "'📖'" + '; this.setAttribute(' + "'data-done',''" + '); window.scrollTo(0,this.getAttribute(' + "'data-st'" + ')); } } " title="Reorder thread blog postings to read like a story ..." style="display:inline-block; text-decoration:none; cursor:pointer; background-color:rgba(255,155,55,0.3);" id=r' + zspare + '>📖</div>' + altanm;
}
}
xpspana=docgetclass("entry-title", "h1"); // real blog postings
for (ximb=0; ximb<xpspana.length; ximb++) {
xxspare=xpspana[ximb].innerHTML.replace('</a>','').split('>');
xspare=xxspare[eval(-1 + xxspare.length)];
zspare=xspare.toLowerCase().replace(String.fromCharCode(35), "").replace(".", "").replace(".", "").replace(".", "").replace("+", "").replace("+", "").replace("'", "").replace('%27','').replace(/\//g, "-").replace(/,/g, "").replace("---","-").replace("---","-").replace(/--/g,"-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-");
if (document.body.innerHTML.indexOf('d' + zspare) == -1) {
xpspana[ximb].innerHTML+=' <div style="display:inline-block;border:3px solid rgba(255,165,0,0.4); background-color:rgba(255,255,0,0.3); " id=cc' + zspare + '><a target=_blank style="cursor:pointer;display:inline-block;text-decoration:none; font-size:12px;" ondblclick="dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" ' + oncm + '"rcrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase ... double click ' + oncmt + ' for blog posting image involvement ... to (the gist of) ' + (xspare) + '" id=tcc' + zspare + '>✂</a><a target=_blank style="background: rgba(0,255,0,0.3); background: -webkit-linear-gradient(left top, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -o-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -moz-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: linear-gradient(to bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); cursor:pointer;display:inline-block;text-decoration:none;transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); font-size:12px;" ondblclick="dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" ' + oncm + '"rcrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase ... double click ' + oncmt + ' for blog posting image involvement ... to (the gist of) ' + (xspare) + '" id=ttcc' + zspare + '>🏃🏾♀️🏃🏼♂️</a><iframe style=display:none; id=icc' + zspare + ' src=></iframe></div>';
xpspana[ximb].innerHTML+=' <div style="display:inline; background-color:rgba(255,255,0,0.3);" id=d' + zspare + '><a style="cursor:pointer;display:inline;text-decoration:none; border:2px solid yellow;" onclick=" preresize_font(this); document.getElementById(this.id.replace(String.fromCharCode(164),String.fromCharCode(151))).src=' + "'" + '//www.rjmprogramming.com.au/PHP/is_mentioned_by.php?title=' + encodeURIComponent(xspare) + "'" + '; " setTimeout(precheckclass,3000); title="' + (xspare) + ' is mentioned by ..." id=t' + zspare + '>☞</a><iframe style=display:none; id=i' + zspare + ' src=></iframe></div>';
xpspana[ximb].innerHTML+=' <div data-w="0" data-h="0" data-st="0" data-style="-webkit-overflow-scrolling:touch;overflow:scroll;" data-done="" onclick=" if (' + "('' + " + 'event.target.id) == this.id || 1 == 1) { if (this.getAttribute(' + "'data-done'" + ').length == 0) { storyreorder(this); } else if (storymember(event.target.outerHTML)) { this.style.zoom=1.0; storyresize(this).innerHTML=' + "'📖'" + '; this.setAttribute(' + "'data-done',''" + '); window.scrollTo(0,this.getAttribute(' + "'data-st'" + ')); } } " title="Reorder thread blog postings to read like a story ..." style="display:inline-block; text-decoration:none; cursor:pointer; background-color:rgba(255,155,55,0.3);" id=r' + zspare + '>📖</div>' + altanm;
}
}
storyizecollect();
}
“; “?>
… to make a “first draft” attempt at this new image and animation presentation idea.
Previous relevant Image Not Found Crontab Curl Issue Tutorial is shown below.
Image Not Found Crontab Curl Issue Tutorial
The recent Image Not Found Onerror Event Workaround Tutorial talked about …
- live access to the WordPress Blog here in the scenario where the tutorial image of a blog posting does not exist … but there’s another aspect to this issue so that …
- similar reasoning on the overnight crontab/curl functionality helping create those Recent Posts widget imagery and Landing Page imagery
… needs our attention to close off on this issue, at least for now.
This involved PHP code and adding wrapper thinking to where a PHP copy command is made as per …
| The call … |
if (strpos($thisimg, 'rjmprogramming.com.au/') !== false) {
if (!file_exists(str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR) . explode('rjmprogramming.com.au/', $thisimg)[1])) {
ourcopy($thisimg, dirname(__FILE__) . "/" . $narray[$thisij] . ".jpg");
} else {
copy(str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR) . explode('rjmprogramming.com.au/', $thisimg)[1], dirname(__FILE__) . "/" . $narray[$thisij] . ".jpg");
}
}
|
| The new wrapper PHP function … |
function ourcopy($fromi, $toi) {
$altnf=$fromi;
if (strpos($fromi,'rjmprogramming.com.au/') !== false) {
$altnf=str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . explode('#',explode('?',explode('rjmprogramming.com.au/',$fromi)[1])[0])[0]);
//file_put_contents('xz.xz', $altnf . "\n" . $fromi . "\n" . $toi);
if (!file_exists($altnf)) {
//file_put_contents('xzz.xzz', $altnf . "\n" . $fromi . "\n" . $toi);
$winfnmis=basename($altnf);
$windiris=str_replace($winfnmis,'',$altnf);
//file_put_contents('xzzz.xzzz', str_replace(basename($altnf),'',$altnf) . 'slideshow_0.zip');
if (file_exists(str_replace(basename($altnf),'',$altnf) . 'slideshow_0.zip')) {
//file_put_contents('xzzzy.xzzzy', str_replace(basename($altnf),'',$altnf) . 'slideshow_0.zip');
$retv=shell_exec("unzip -l " . $windiris . "slideshow_0.zip " . $winfnmis);
if (strpos($retv, $winfnmis) !== false) {
//file_put_contents('xzzzyy.xzzzyy', str_replace(basename($altnf),'',$altnf) . 'slideshow_0.zip');
if (!file_exists(str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR) . '..' . DIRECTORY_SEPARATOR . $winfnmis)) {
//file_put_contents('xzzzyyy.xzzzyyy', str_replace(basename($altnf),'',$altnf) . 'slideshow_0.zip');
$rt="unzip " . $windiris . "slideshow_0.zip " . $winfnmis . " -d " . str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR) . '..' . DIRECTORY_SEPARATOR;
$rt.=shell_exec("unzip " . $windiris . "slideshow_0.zip " . $winfnmis . " -d " . str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR) . '..' . DIRECTORY_SEPARATOR);
//file_put_contents('xzzzyyyc.xzzzyyyc', str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR) . '..' . DIRECTORY_SEPARATOR . $winfnmis);
copy(str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR) . '..' . DIRECTORY_SEPARATOR . $winfnmis, $toi);
if (file_exists(str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR) . '..' . DIRECTORY_SEPARATOR . $winfnmis)) {
//file_put_contents('xzzzyyycx.xzzzyyycx', str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR) . '..' . DIRECTORY_SEPARATOR . $winfnmis);
unlink(str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,DIRECTORY_SEPARATOR,$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR) . '..' . DIRECTORY_SEPARATOR . $winfnmis);
return true;
}
}
}
}
}
}
return copy($fromi, $toi);
}
|
… in the changed recent-posts-2.php PHP called via curl within the RJM Programming crontab scheduling workflows.
Previous relevant Image Not Found Onerror Event Workaround Tutorial is shown below.
Image Not Found Onerror Event Workaround Tutorial
Yesterday’s HTML/Javascript Cockpit of Web Applications Feeling Lucky Tutorial has brought into focus, for us, those days when we were really wary of …
- Linux web hosting web server’s …
- inode count … whose limit towards which we used to get a bit too close for comfort (and as distinct from diskspace issues which were less critical but also needed attention)
… was it, a few years back now, when our CentOS web server inode count limit had us rethinking the idea that image slides of an animated presentation of some sort should all sit as individual files on the web server, and as a result we set up a system …
- for new presentations to more use animated GIFs and/or videos and/or PDF … and for those older multi-image presentations …
- zip them up during dormant times into a zip file and off the disk, and if called upon, unzip all for a short period of time until the next time they are called upon again
Nowadays, on the current crop of AlmaLinux web servers there are less stringent inode limits to worry about, but, nonetheless, we think the strategy above should still hold. But that means, occasionally, we run up against a tutorial image file not existing on the web server disk at a time of a user calling upon it.
And then we thought on this …
can an onerror event for an img element trap a 404 not found scenario … resulted in …
Yes, an onerror event handler for an ![]()
element can be used to trap a 404 Not Found scenario [1, 2].
When the browser attempts to fetch the image source (src attribute) and the server responds with a 404 status code (or any other status indicating a failure to fetch or load the resource), the error event is fired on the ![]()
element [1, 2].
… as the encouragement we needed to launch into today’s idea to …
- add an onerror event to all relevant tutorial images on our WordPress Blog via good ol’ TwentyTen theme’s header.php change …
<?php
if (isset($post->post_content)) { // img contextmenu functionality and img onerror idea
$post->post_content=str_replace('<i' . 'mg' . ' i' . 'd=', '<i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); i' . 'd=', str_replace('<i' . 'mg' . ' s' . 'rc=', '<i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); s' . 'rc=', str_replace('<i' . 'mg' . ' st' . 'yle="border', '<i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); st' . 'yle="border', str_replace('<i' . 'mg' . ' st' . 'yle="float', '<i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); st' . 'yle="float', str_replace('<i' . 'mg' . ' deco' . 'ding=', '<i' . 'mg' . ' tabindex=0 onconte' . 'xtmenu=imgedit(event); ontou' . 'chend=imgedit(event); deco' . 'ding=', $post->post_content)))));
$thendel="";
$checksrcs=explode(' Tutorial" src="', $post->post_content);
for ($ich=1; $ich<sizeof($checksrcs); $ich++) {
$urlim=explode('"', $checksrcs[$ich])[0];
if (strpos($urlim, "//") !== false) {
$urlim="//" . explode("//", $urlim)[1];
}
$urlim=str_replace("//www.rjmprogramming.com.au/", "../", $urlim);
$smallurlim=$urlim;
if (strpos($urlim, "/") !== false) {
$smallurlim=explode("/", $urlim)[-1 + sizeof(explode("/", $urlim))];
}
//if (strpos($post->post_content, "Ansible ") !== false) { file_put_contents("013.013", $smallurlim); }
if (!file_exists($urlim) && file_exists(str_replace($smallurlim, "slideshow_0.zip", $urlim))) {
//if (strpos($post->post_content, "Ansible ") !== false) { file_put_contents("014.014", "unzip " . str_replace($smallurlim, "slideshow_0.zip", $urlim) . " -d " . str_replace($smallurlim, " " . $smallurlim, $urlim)); }
exec("unzip " . str_replace($smallurlim, "slideshow_0.zip", $urlim) . " -d " . str_replace($smallurlim, " " . $smallurlim, $urlim));
if ($thendel == "") {
$thendel="sleep 5; rm -f " . $urlim . " > /dev/null 2> /dev/null ";
} else {
$thendel.="; sleep 10; rm -f " . $urlim . " > /dev/null 2> /dev/null ";
}
//if (strpos($post->post_content, "Ansible ") !== false) { file_put_contents("015.015", $thendel); }
}
}
$p_one=' style="border: 1' . '5px solid pink';
$p_two=' onerror="altunzipit(this,this.id,this.src);" style="border: 1' . '5px solid pink';
$post->post_content=str_replace($p_one,$p_two,$post->post_content);
if ($thendel != "") {
//sleep(5);
shell_exec("/usr/bin/nohup ksh -c \"" . $thendel . "\" > /dev/null 2> /dev/null &");
}
}
?>
… and then later …
<?php echo ”
var ifixn=0;
function altunzipit(imgo, imgoid, imgosrc) {
imgo.src='/hang_on_a_minute.jpg';
document.getElementById('ifimgfix' + eval(ifixn % 5)).src='/look_to_unzip.php?parid=' + encodeURIComponent(imgoid) + '&parimgsrc=' + encodeURIComponent(imgosrc);
ifixn++;
}
setTimeout(donow,2000);
</script>
</div><!-- #masthead -->
</div><!-- #header -->
<div id='hfloater'></div>
<iframe style=display:none; srcdoc='<html><body></body></html>' id='ifimgfix0'></iframe>
<iframe style=display:none; srcdoc='<html><body></body></html>' id='ifimgfix1'></iframe>
<iframe style=display:none; srcdoc='<html><body></body></html>' id='ifimgfix2'></iframe>
<iframe style=display:none; srcdoc='<html><body></body></html>' id='ifimgfix3'></iframe>
<iframe style=display:none; srcdoc='<html><body></body></html>' id='ifimgfix4'></iframe>
“; ?>
- create an interim “splash image” and upload into place …
- create the unzipping look_to_unzip.php PHP helper code that uses Linux command line accessing exec and shell_exec to work it …
<?php
// look_to_unzip.php
// Look to fix WordPress Blog top content image Not Found (error 404) looking to see if slideshow_0.zip exists and can help
// February, 2026
$pimgid='';
$pimgsrc='';
$pimgunusrc='';
$andbackagain='';
$last_access_time=-1;
if (isset($_GET['parimgsrc']) && isset($_GET['parid'])) {
$pimgid=str_replace('+',' ',urldecode($_GET['parid']));
$pimgsrc=str_replace('+',' ',urldecode($_GET['parimgsrc']));
if (strpos($pimgsrc, 'rjmprogramming.com.au/') === false) {
$pimgid='';
$pimgsrc='';
} else {
$pimgunusrc=$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . explode('rjmprogramming.com.au/', explode('#',explode('?',$pimgsrc)[0])[0])[1];
if ($pimgid == '') {
try {
$last_access_time=fileatime($pimgunusrc);
} catch (Exception $eonee) { }
}
if (file_exists($pimgunusrc)) {
if ($pimgid == '') {
$windiris=str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR, DIRECTORY_SEPARATOR, realpath($pimgunusrc) . DIRECTORY_SEPARATOR);
$winfnmis=basename($pimgunusrc);
if ($last_access_time < 0) {
$last_access_time=fileatime($pimgunusrc);
}
$seconds_since_access=(time() - $last_access_time);
if ($seconds_since_access < 85) {
if (file_exists($windiris . 'slideshow_0.zip')) { // might be in here
$retv=shell_exec("unzip -l " . $windiris . "slideshow_0.zip " . $winfnmis);
if (strpos($retv, $winfnmis) !== false) {
unlink($pimgunusrc); // cache version should be enough to show
if (!file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'img_not_found_on_wp.log')) {
file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'img_not_found_on_wp.log', '');
}
file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'img_not_found_on_wp.log', file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'img_not_found_on_wp.log') . "\n" . $pimgsrc . " rezipped at " . date('l jS \of F Y h:i:s A') . "\n");
}
}
}
exit;
} else {
echo "<html><body onload=\" parent.document.getElementById('" . $pimgid . "').src='" . explode('#',explode('?',$pimgsrc)[0])[0] . "?rand=" . rand(0,564678) . "';\"></body></html>";
$pimgid='';
$pimgsrc='';
}
} else { // here we have the Not Found img issue
$windiris=str_replace(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR, DIRECTORY_SEPARATOR, realpath($pimgunusrc) . DIRECTORY_SEPARATOR);
$winfnmis=basename($pimgunusrc);
if (file_exists($windiris . 'slideshow_0.zip')) { // might be in here
exec("unzip " . $windiris . "slideshow_0.zip " . $winfnmis . " -d " . $windiris);
if (!file_exists($pimgunusrc)) {
$pimgid='';
$pimgsrc='';
} else if ($pimgid != '') {
if (!file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'img_not_found_on_wp.log')) {
file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'img_not_found_on_wp.log', '');
}
file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'img_not_found_on_wp.log', file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'img_not_found_on_wp.log') . "\n" . $pimgsrc . " unzipped at " . date('l jS \of F Y h:i:s A') . "\n");
$andbackagain=" setTimeout(function(){ location.href=document.URL.split('?')[0].split('#')[0] + '?parid=&parimgsrc=" . $_GET['parimgsrc'] . "'; }, 45000); ";
}
} else {
$pimgid='';
$pimgsrc='';
}
}
}
}
if ($pimgid != '') {
echo "<html><body onload=\" parent.document.getElementById('" . $pimgid . "').src='" . explode('#',explode('?',$pimgsrc)[0])[0] . "?rand=" . rand(0,564678) . "'; " . $andbackagain . "\"></body></html>";
}
?>
As a result, we hope you see less “broken images”!
Previous relevant HTML/Javascript Cockpit of Web Applications Feeling Lucky Tutorial is shown below.
HTML/Javascript Cockpit of Web Applications Feeling Lucky Tutorial
Further to yesterday’s HTML/Javascript Cockpit of Web Applications Dropdown Cells Tutorial …
we’ve been restewing on cockpit_feel.html feeling lucky option in the light of yesterday’s cockpit_feel.html whole new cell content idea of blog posting dropdowns in multiple entry mode
… and, yes, a little more curry paste is required?! And doesn’t it hold up well the next day? But we digress …
We’ve come around to …
- not only including new “feeling lucky” logic where the web application selects nine random blog posting cell content iframes … but (and this is an advantage regarding a “revisited stewing” in “Paprika Place” perhaps) …
- we worked out that the PHP web application helper featuring in the recent WordPress Blog Search Title and Posting Date Expressions Tutorial could fairly easily …
<?php
$firstnine=false;
if (isset($_GET['otherpm'])) { // recall scenario
$firstnine=true;
$pmval=@file_get_contents("http://www.rjmprogramming.com.au/Welcome.html");
$bits=explode("id='tuts'", $pmval);
if (sizeof($bits) > 1) {
$ssomeof=someof(explode('</select>', $bits[1])[0], str_replace('+',' ',urldecode($_GET['otherpm'])));
if (1 == 1) {
echo '<html><body onload="if (window.parent) { if (parent.document.getElementById(' . "'blogp'" . ')) { parent.document.getElementById(' . "'blogp'" . ').value=' . "'" . $ssomeof . "'" . '; } }' . '"><p id=res>' . $ssomeof . '</p></body></html>';
} else {
$allselbits="<select" . $onclick . "'if (this.value.trim().length > 0) { if (2 == 2 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { location.href=this.value; } else { document.getElementById(\"myi\").src=this.value; } } else { var huh=prompt(\"Tutorials regarding?\",\"" . urldecode($_GET['pm']) . "\"); if (huh != null) { if (huh != \"\") { if (huh.indexOf(\".\") == 0) { huh=String.fromCharCode(92) + huh; } location.href=\"http://www.rjmprogramming.com.au/itnewblog/match/\" + encodeURIComponent(huh); } } } ' size=1 id='tuts'" . $ssomeof . '</select><br><iframe name="myi" id="myi" style="width:100%;height:1400px;" src="//www.rjmprogramming.com.au/ITblog" title="Robert James Metcalfe Blog"></iframe>';
echo '<!doctype html><html><head><title>Robert James Metcalfe Blog - Match Blog Title via RegExp</title></head><body>' . $allselbits . '</body></html>';
}
}
exit;
} else if (isset($_POST['otherpm'])) { // recall scenario
$firstnine=true;
$pmval=@file_get_contents("http://www.rjmprogramming.com.au/Welcome.html");
$bits=explode("id='tuts'", $pmval);
if (sizeof($bits) > 1) {
$ssomeof=someof(explode('</select>', $bits[1])[0], str_replace('+',' ',urldecode($_POST['otherpm'])));
if (1 == 1) {
echo '<html><body onload="if (window.parent) { if (parent.document.getElementById(' . "'blogp'" . ')) { parent.document.getElementById(' . "'blogp'" . ').value=' . "'" . $ssomeof . "'" . '; } }' . '"><p id=res>' . $ssomeof . '</p></body></html>';
} else {
$allselbits="<select" . $onclick . "'if (this.value.trim().length > 0) { if (2 == 2 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { location.href=this.value; } else { document.getElementById(\"myi\").src=this.value; } } else { var huh=prompt(\"Tutorials regarding?\",\"" . urldecode($_POST['pm']) . "\"); if (huh != null) { if (huh != \"\") { if (huh.indexOf(\".\") == 0) { huh=String.fromCharCode(92) + huh; } location.href=\"http://www.rjmprogramming.com.au/itnewblog/match/\" + encodeURIComponent(huh); } } } ' size=1 id='tuts'" . $ssomeof . '</select><br><iframe name="myi" id="myi" style="width:100%;height:1400px;" src="//www.rjmprogramming.com.au/ITblog" title="Robert James Metcalfe Blog"></iframe>';
echo '<!doctype html><html><head><title>Robert James Metcalfe Blog - Match Blog Title via RegExp</title></head><body>' . $allselbits . '</body></html>';
}
}
exit;
}
?>
… be repurposed in a changed mapper.php so that the logic of that new “Post RE” WordPress Blog search textbox area checkbox could also help out here by supplying a comma separated list …
… of WordPress Blog posting IDs it sends back up to our hosting Cockpit of Web Applications web application
… as today’s “value adding” proposition in our Cockpit Feel of web applications changed cockpit_feel.html …
var sofarblogp=',';
var today=new Date();
var yyyy = today.getFullYear();
var feeling_lucky=false, doing_preg=false, minrange=20140101, maxrange=eval(eval(1 + yyyy) * 10000 + 101);
var pval=0, ourhuh='';
function setCookie(thisg, tn) { // thanks to JavaScript and Ajax by Tom Negrino and Dori Smith
if (nomore != 'y') {
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
var huh='';
if (urls[eval(-1 + tn)] != "#nomore") {
//alert("urls[" + eval(-1 + tn) + "]=" + urls[eval(-1 + tn)]);
if (prefix != '') {
if (('' + tn) == '1') {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for just using dropdown multiple selections or OK to blank for no more now or to Feeling Lucky or some other posting criteria search string with same rules as Post RE blog checkbox (and which is not a URL)", urls[eval(-1 + tn)]);
if (huh == null || ('' + huh).toLowerCase() == 'feeling lucky' || ( ('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim() != '' && (('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim().indexOf(' ') != -1 || ('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim().indexOf('.') == -1))) {
if (('' + huh).toLowerCase() == 'feeling lucky') {
feeling_lucky=true;
huh=null;
} else if (huh != null) {
doing_preg=true;
ourhuh=huh;
setTimeout(function(){
document.getElementById('ifbppop').src='//www.rjmprogramming.com.au/itnewblog/match/mapper.php?otherpm=' + encodeURIComponent(ourhuh);
}, 2000);
huh=null;
}
cancelps=true;
nomore='y';
document.body.style.cursor='progress';
setInterval(function(){
if (amready) {
document.getElementById('dtbl').style.width='100%';
document.getElementById('dtbl').style.height='75%';
for (var ijh=0; ijh<mapping.length; ijh++) {
document.getElementById('td' + mapping[ijh]).style.width='33%';
document.getElementById('td' + mapping[ijh]).style.height='33%';
if (feeling_lucky) {
pval='';
while ((sofarblogp + ',').indexOf(',' + pval + ',') != -1 || pval == '') {
pval=eval('' + minrange) + Math.floor(Math.random() * eval(maxrange - minrange));
if (mapping[ijh] == '22') { pval=20260204; }
while (document.getElementById('dopt').innerHTML.indexOf('(' + pval + ')') == -1 || (sofarblogp + ',').indexOf(',' + pval + ',') != -1) {
pval=eval('' + minrange) + Math.floor(Math.random() * eval(maxrange - minrange));
}
if (sofarblogp != ',') { sofarblogp+=','; }
sofarblogp+='' + pval;
//alert('2:' + pval + ' ' + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=')[eval(-1 + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=').length)].split('&')[0].split('#')[0]);
pval=document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=')[eval(-1 + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=').length)].split('&')[0].split('#')[0];
}
if (sofarblogp != ',') { sofarblogp+=','; }
sofarblogp+='' + pval;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//setTimeout(function(){
document.getElementById('td' + mapping[ijh]).innerHTML='<iframe id=iftd' + mapping[ijh] + ' onload="if (this.src.indexOf(' + "'About_Us'" + ') != -1) { setTimeout(function(event){ document.getElementById(' + "'iftd' + '" + mapping[ijh] + "'" + ').src=document.getElementById(' + "'iftd' + '" + mapping[ijh] + "'" + ').getAttribute(' + "'data-src'" + '); }, ' + eval(eval(2 + ijh) * 12000) + '); }" data-src="//www.rjmprogramming.com.au/ITblog/?p=' + pval + '&openappin=30#content" src=/About_Us.html style=width:100%;height:100%;></iframe>';
//}, eval(eval('' + mapping[ijh]) * 1000));
} else {
document.getElementById('td' + mapping[ijh]).innerHTML='<iframe src="//www.rjmprogramming.com.au/ITblog/?p=' + pval + '&openappin=30#content" style=width:100%;height:100%;></iframe>';
}
} else {
document.getElementById('td' + mapping[ijh]).innerHTML+=document.getElementById('dopt').innerHTML.replace(' multiple', ' size=9 multiple').replace(' selected=', ' id=selfirstopt selected=');
}
}
if (!doing_preg) { document.body.style.cursor='pointer'; }
if (!feeling_lucky) { setInterval(blogpandtmonitor, 15000); }
amready=false;
}
}, 5000);
}
} else {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for no more now", urls[eval(-1 + tn)]);
}
} else {
if (('' + tn) == '1') {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for just using dropdown multiple selections or OK to blank for no more now or to Feeling Lucky or some other posting criteria search string with same rules as Post RE blog checkbox (and which is not a URL)", urls[eval(-1 + tn)]);
if (huh == null || ('' + huh).toLowerCase() == 'feeling lucky' || ( ('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim() != '' && (('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim().indexOf(' ') != -1 || ('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim().indexOf('.') == -1))) {
if (('' + huh).toLowerCase() == 'feeling lucky') {
feeling_lucky=true;
huh=null;
} else if (huh != null) {
doing_preg=true;
ourhuh=huh;
setTimeout(function(){
document.getElementById('ifbppop').src='//www.rjmprogramming.com.au/itnewblog/match/mapper.php?otherpm=' + encodeURIComponent(ourhuh);
}, 2000);
huh=null;
}
cancelps=true;
nomore='y';
document.body.style.cursor='progress';
setInterval(function(){
if (amready) {
document.getElementById('dtbl').style.width='100%';
document.getElementById('dtbl').style.height='75%';
for (var ijh=0; ijh<mapping.length; ijh++) {
document.getElementById('td' + mapping[ijh]).style.width='33%';
document.getElementById('td' + mapping[ijh]).style.height='33%';
if (feeling_lucky) {
pval='';
while ((sofarblogp + ',').indexOf(',' + pval + ',') != -1 || pval == '') {
pval=eval('' + minrange) + Math.floor(Math.random() * eval(maxrange - minrange));
if (mapping[ijh] == '22') { pval=20260204; }
while (document.getElementById('dopt').innerHTML.indexOf('(' + pval + ')') == -1 || (sofarblogp + ',').indexOf(',' + pval + ',') != -1) {
pval=eval('' + minrange) + Math.floor(Math.random() * eval(maxrange - minrange));
}
if (sofarblogp != ',') { sofarblogp+=','; }
sofarblogp+='' + pval;
//alert('2:' + pval + ' ' + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=')[eval(-1 + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=').length)].split('&')[0].split('#')[0]);
pval=document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=')[eval(-1 + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=').length)].split('&')[0].split('#')[0];
}
if (sofarblogp != ',') { sofarblogp+=','; }
sofarblogp+='' + pval;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//setTimeout(function(){
document.getElementById('td' + mapping[ijh]).innerHTML='<iframe id=iftd' + mapping[ijh] + ' onload="if (this.src.indexOf(' + "'About_Us'" + ') != -1) { setTimeout(function(event){ document.getElementById(' + "'iftd' + '" + mapping[ijh] + "'" + ').src=document.getElementById(' + "'iftd' + '" + mapping[ijh] + "'" + ').getAttribute(' + "'data-src'" + '); }, ' + eval(eval(2 + ijh) * 12000) + '); }" data-src="//www.rjmprogramming.com.au/ITblog/?p=' + pval + '&openappin=30#content" src=/About_Us.html style=width:100%;height:100%;></iframe>';
//}, eval(eval('' + mapping[ijh]) * 1000));
} else {
document.getElementById('td' + mapping[ijh]).innerHTML='<iframe src="//www.rjmprogramming.com.au/ITblog/?p=' + pval + '&openappin=30#content" style=width:100%;height:100%;></iframe>';
}
} else {
document.getElementById('td' + mapping[ijh]).innerHTML+=document.getElementById('dopt').innerHTML.replace(' multiple', ' size=9 multiple').replace(' selected=', ' id=selfirstopt selected=');
}
}
if (!doing_preg) { document.body.style.cursor='pointer'; }
if (!feeling_lucky) { setInterval(blogpandtmonitor, 15000); }
amready=false;
}
}, 5000);
}
} else {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for no more now", urls[eval(-1 + tn)]);
}
}
} else {
//alert("Urls[" + eval(-1 + tn) + "]=" + urls[eval(-1 + tn)]);
huh='#nomore';
}
prefix="";
if (huh == null) {
huh='';
nomore='y';
} else {
if (huh.indexOf("#iframe") != -1) {
goodmodeofshowofurl="iframe";
} else {
goodmodeofshowofurl="";
}
if (huh.indexOf("#form") != -1 && urls[0] != '') {
location.href='./cockpit_feel.html?form=y';
return;
}
document.cookie = thisg + "=" + huh.replace("#form","") + ";expires=" + expireDate.toGMTString();
if (huh.indexOf("#nomore") != -1) {
nomore='y';
fixstuff(tn);
}
if (huh.indexOf("#form") != -1) {
location.href='./cockpit_feel.html?form=y';
}
}
}
}
… using the new HTML iframe …
<iframe id=ifbppop src='//www.rjmprogramming.com.au/About_Us.html' style='display:none;'></iframe>
Previous relevant HTML/Javascript Cockpit of Web Applications Dropdown Cells Tutorial is shown below.
HTML/Javascript Cockpit of Web Applications Dropdown Cells Tutorial
We had occasion to revisit the Cockpit of Web Applications web application mentioned in HTML/Javascript Cockpit of Web Applications Home Tutorial the other day, and made the “note to self” …
cockpit_feel.html feeling lucky option
Over a few days we stewed on this, and today, came up with a better idea, we think, that goes …
cockpit_feel.html whole new cell content idea of blog posting dropdowns in multiple entry mode
Not as snappy as the first thought, but doable, and we think the quickest methodology to glean up to 9 URLs of Cut to the Chase web application with relationships to postings of this blog, in that on our Landing Page overnight crontab/curl processing ensures it has an up to date list of Blog Posting data in a dropdown. To be frank, that is a great basis to move on from that, because this is “most of the move” to our eyes!
And so, to get this achieved relied on changes to two code sources, they being …
- header.php of the TwentyTen WordPress theme used at this blog, with a new document.body onload event spawned Javascript function …
<?php echo ”
function oain() {
var oind=30000, divsarrr=[], dfnd=false;
if (document.URL.indexOf('openappin=') != -1) {
var coind=decodeURIComponent(document.URL.split('openappin=')[1].split('&')[0].split('#')[0]).trim();
if (coind != '') {
if (coind.substring(0,1) >= '0' && coind.substring(0,1) <= '9') {
oind=Math.round(eval(eval('' + coind) * 1000));
}
}
divsarrr=document.getElementsByTagName('div');
for (var idc=0; idc<divsarrr.length; idc++) {
if (('' + divsarrr[idc].className) == 'entry-content' && !dfnd) {
if (divsarrr[idc].innerHTML.indexOf(' href="') != -1 && !dfnd) {
dfnd=true;
defappurl=divsarrr[idc].innerHTML.split(' href="')[1].split('"')[0].replace(/^http\:/g,'').replace(/^https\:/g,'').replace(/^\/\//g,document.URL.split(':')[0] + '://');
document.getElementById('content').setAttribute('data-donetsry', '' + eval(30 + Math.max(700,eval('' + document.getElementById('content').getBoundingClientRect().top))));
document.getElementById('content').setAttribute('data-donet', '' + document.getElementById('content').title);
document.getElementById('content').title='Scroll down to stay reading this blog posting else within ' + eval(oind / 1000) + ' seconds from ' + ('' + new Date()) + ' we will navigate to ' + defappurl.replace(/^\/\//g,document.URL.split(':')[0] + '://') + ' ...';
document.body.style.cursor='progress';
setInterval(function(){
if (eval('0' + window.scrollY) > eval('' + document.getElementById('content').getAttribute('data-donetsry'))) {
document.body.style.cursor='pointer';
document.getElementById('content').setAttribute('data-donec', 'y');
document.getElementById('content').title='' + document.getElementById('content').getAttribute('data-donet');
}
}, 1000);
setTimeout(function(){ if (eval('0' + window.scrollY) <= eval('' + document.getElementById('content').getAttribute('data-donetsry'))) { location.href=defappurl.replace(/^http\:/g,'').replace(/^https\:/g,''); } }, oind);
}
}
}
}
}
“; ?>
- Cockpit Feel of web applications changed cockpit_feel.html …
function checkw(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.getElementById('tuts') != null) {
document.getElementById('dopt').innerHTML='Blog Posting(s): ' + aconto.getElementById('tuts').outerHTML.replace(' onchange=', ' multiple onchange="document.getElementById(' + "'" + 'blogp' + "'" + ').value=andlater(this); " data-onchange=').replace(/\(show\ blog\,\ toggle\ sort\ order\)/g,'').replace(/\(show\ blog\,\ toggle\ sort\ order\,\ click\ for\ keyboard\ autocompletion\)/g,'').replace(/\(show\ blog\,\ toggle\ sort\ order\,\ click\ for\ autocompletion\ keyboard\)/g,'').replace(/\(toggle\ sort\ order\)/g,'') + '<br><br>';
amready=true;
}
}
}
}
function blogpandtmonitor() {
var bpt=[], ib=0, jb=0;
if (lastblogp != document.getElementById('blogp').value && document.getElementById('blogp').value != '') {
lastblogp=document.getElementById('blogp').value;
bpt=document.getElementById('blogp').value.split(',');
document.getElementById('blogp').value='';
for (ib=0; ib<bpt.length; ib++) {
if (sofarblogp.indexOf(',' + bpt[ib] + ',') == -1) {
for (jb=0; jb<mapping.length; jb++) {
if (document.getElementById('td' + mapping[jb]).innerHTML.indexOf('<select ') != -1 && sofarblogp.indexOf(',' + bpt[ib] + ',') == -1) {
sofarblogp+=bpt[ib] + ',';
document.getElementById('td' + mapping[jb]).innerHTML='<iframe src="//www.rjmprogramming.com.au/ITblog/?p=' + bpt[ib] + '&openappin=30#content" style=width:100%;height:100%;></iframe>';
}
}
}
}
}
}
… Javascript set into play via new HTML iframe as per …
<iframe src='//www.rjmprogramming.com.au/Welcome.html' onload='checkw(this);' style='display:none;'></iframe>
… the user can make happen by a first prompt answer of Cancel …
if (('' + tn) == '1') {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for just using dropdown multiple selections or OK to blank for no more now", urls[eval(-1 + tn)]);
if (huh == null) {
cancelps=true;
nomore='y';
document.body.style.cursor='progress';
setInterval(function(){
if (amready) {
document.getElementById('dtbl').style.width='100%';
document.getElementById('dtbl').style.height='75%';
for (var ijh=0; ijh<mapping.length; ijh++) {
document.getElementById('td' + mapping[ijh]).style.width='33%';
document.getElementById('td' + mapping[ijh]).style.height='33%';
document.getElementById('td' + mapping[ijh]).innerHTML+=document.getElementById('dopt').innerHTML.replace(' multiple', ' size=9 multiple').replace(' selected=', ' id=selfirstopt selected=');
}
document.body.style.cursor='pointer';
setInterval(blogpandtmonitor, 15000);
amready=false;
}
}, 5000);
}
} else {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for no more now", urls[eval(-1 + tn)]);
}
} // rest of "as it used to be code here" follows
… separated off from an OK answer of blank (or some other non-blank answer) still accessing the old workflow methodologies. A cute feature (well, you had to be there) of this might be, for some users, that scrolling in Y at the blog posting cell within 30 seconds means a user can stay reading the blog posting instead (of navigating to the relevant Cut to the Chase web application), regarding the relevant one of 3×3 table cells.
Previous relevant HTML/Javascript Cockpit of Web Applications Home Tutorial is shown below.
HTML/Javascript Cockpit of Web Applications Home Tutorial
Yesterday ticked all the boxes with our Cockpit Feel web application to suggest that it is now an excellent candidate to be the designated Home Page for a web browser, as it could be the tailorable “web application central” as you enter the web browser for the first time. The Home Page of a web browser can have that important reminder functionality for how you communicate, or do your work and/or collaborate, or perform tasks, or monitor goings-on.
Yesterday’s work meant that you can send a …
- web browser address bar URL with an established list of web applications you want to open … and/or …
- cut down web browser address URL ( ie. just http://www.rjmprogramming.com.au/HTMLCSS/cockpit_feel.html ) … and let the cookies you have previously set, or not, determine what happens … thing about this is that Safari could have a different set of web applications to Internet Explorer to Firefox to Opera to Google Chrome etcetera etcetera etcetera
The thing is, we often put our favourite Search Engine URL as our web browser’s Home Page, and am not suggesting otherwise, except that these days there are so many shortcut or menu methods of getting to your favourite Search Engine that maybe what is better to put as your web browser Home Page is something more tailored to your actual use, and in any case, one of those web applications could be that favourite Search Engine, anyway.
Today’s tutorial picture URL, for example, is http://www.rjmprogramming.com.au/HTMLCSS/cockpit_feel.html?url1=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FSunAngle%2Fsun_angle_now_at.php%3Fdone%3Dy%26nowo%3Dy%26latd%3D-33%26latm%3D52%26lats%3D0%26longd%3D151%26longm%3D12%26longs%3D0%26from%3Dfrom%26country%3DAUSTRALIA%26place%3DSydney%23iframe&url2=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FMoonAngle%2Fmoon_angle_now_at.php%3Fdone%3Dy%26nowo%3Dy%26latd%3D-33%26latm%3D52%26lats%3D0%26longd%3D151%26longm%3D12%26longs%3D0%26from%3Dfrom%26country%3DAUSTRALIA%26place%3DSydney%23nomore%23iframe&url3=&url4=&url5=&url6=&url7=&url8=&url9= … representing a look at Sun Angle and Moon Angle for Sydney, Australia … and you can see that if you pick a web application from this www.rjmprogramming.com.au domain, you can use the suffix #iframe to say that the web application should “live” in an HTML iframe element.
Previous relevant HTML/Javascript Cockpit of Web Applications Form Tutorial is shown below.
HTML/Javascript Cockpit of Web Applications Form Tutorial
Today’s Cockpit Feel web application adds functionality along with yesterday’s pre-existing …
- Javascript DOM document.write() method nesting …
- Javascript prompt() window method
… way that asks for input from the user in that old interactive desktop command line application feeling kind of way, an …
… method, the more usual web application way of asking for user input.
Most websites present interactive input in an HTML form for a few reasons (we can think of) …
- everything that will be asked can be there on the webpage (so that you know what is coming)
- HTML form elements can direct the web traffic from one web page to the next via HTML input type=’submit’ buttons teamed with HTML form action=[Url] arrangements
- validation of this user entered data can be validated at the one place (via the HTML form onsubmit event we’ve talked about before), and the HTML5 input element type has several self-validating types (like type=’url’ that we make use of today)
- huge amounts of user entered data can make use of the HTML form method=’POST’ as necessary, though today we use method=’GET’ for the amounts of data we have and in order to remain with client side programming (method=’POST’ needs server side programming intervention)
- uploading of files is possible via HTML form element
The concept today remains simple …
- take the same 3×3 grid (to the beach this time, because yesterday they enjoyed the zoo so much (they’d like you to know))
- check for cookie data and $_GET[] parameters for any/all of the 3×3 and if found get (up to 9) URLs from this data, else document.write(prompt()) for the information interactively, storing good ideas in cookies for either of the two modes of display … that being …
… so that the next time the user runs the same web application, and they have not cleared their cookies out in the meantime, this same configuration of use, personalized to them and the web browser they’re using, will happen.
Again, regarding research and development we’d like to thank “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith for the great code regarding cookies.
The HTML and Javascript source code you could call cockpit_feel.html (changed for HTML form functionality in this way) for which you can use this live run link. If you want to simulate the tutorial picture “Cockpit” today try this link. We hope some/all/grid-maintenance information helps today.
If this was interesting you may be interested in this too.
Previous relevant HTML/Javascript Cockpit of Web Applications Primer Tutorial is shown below.
HTML/Javascript Cockpit of Web Applications Primer Tutorial
Today’s web application continues our interest in …
- Javascript DOM document.write() method nesting …
- Javascript prompt() window method
… to give that old interactive desktop command line application feel that many of the “senior citizens” (should we diplomatically say) of the web world, may still secretly gravitate towards?!
Okay … who are the closet interactive desktop command line application lovers out there? … Come on … you know who you are?!
But we digress … so today, we have a web application a bit like a dashboard, a bit like a cockpit (we’ve called it) … though the looks aren’t as good at this stage. Nevertheless, maybe it has a feel of a widget to it as well, because today we only use HTML, making use of cookies to do away with the need for a serverside language like PHP, which could have done the job as well. But not everybody has PHP? Right …
… left …
… Damn! Those pesky psychological tests!
The concept today is very simple …
- take a 3×3 grid (to the zoo would be nice)
- check for cookie data for any/all of the 3×3 and if found get (up to 9) URLs from this data, else document.write(prompt()) for the information interactively, storing good ideas in cookies for either of the two modes of display … that being …
… so that the next time the user runs the same web application, and they have not cleared their cookies out in the meantime, this same configuration of use, personalized to them and the web browser they’re using, will happen.
Regarding research and development we’d like to thank “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith for the invaluable code regarding cookies, and an interesting sideline, which we ended up not perusing, but is active in your *._GETME file today, to show you what is possible comes from this useful website … thanks.
The (purely) HTML and Javascript source code you could call cockpit_feel.html for which you can use this live run link. If this helps then we’re happy.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
