Tag Archives: image

Interactively Change WordPress Blog Background Image on Scroll Tutorial

Posted on by

With yesterday’s Interactively Change Background Image on Scroll User Settings Tutorial‘s offering were you “an intrepid”, typing … //www.rjmprogramming.com.au/ITblog/600/400/ … into that newly minted Javascript prompt window designed for user interaction purposes? This populates the background images in our new Image Scrolling with Fixed Text web application with a random selection from the WordPress Blog you are reading. Because we have some control here, we researched whether our WordPress 404.php logic could be tweaked to help out more in this scenario. The way the PHP works here, detecting this situation, at the end of its workings, is to use an image header (exemplified by the GIF one below) … <?php header(‘Content-Type: image/gif’); echo file_get_contents($path); exit; ?> … where $path would point at a GIF image file residing on the RJM Programming domain web server. This design restricts us from any echo functionality before this, so what can we achieve? Anyone? Anyone? Yes, Rasmus, we can write to other web server files that could be like middle-people between the server (supplier of image data) and client (the webpage that called the server). After the server work … <?php if (strpos((” . str_replace(‘);%20}’,”,$_SERVER[‘QUERY_STRING’]) . ‘~’), ‘591734~’) !== false) { //file_put_contents($_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . ‘p.p’,’here’); $prevcontis=”; $ptfileis=$_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . ‘ptitledata.html’; if (file_exists($ptfileis)) { // thanks to https://stackoverflow.com/questions/67707029/how-do-i-get-how-long-the-file-was-created-in-seconds-in-php $modifdate = filemtime($ptfileis); $secondsago = time() – $modifdate; if ($secondsago > 5) { unlink($ptfileis); } else { $prevcontis=file_get_contents($ptfileis); } } file_put_contents($ptfileis, $prevcontis . “\n” . $ptitle . ‘?’ . str_replace(‘);%20}’,”,$_SERVER[‘QUERY_STRING’])); //file_put_contents($ptfileis . “huh”, $prevcontis . “\n” . $ptitle . ‘?’ . str_replace(‘);%20}’,”,$_SERVER[‘QUERY_STRING’])); //} else { // file_put_contents($_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . ‘p.q’,(” . str_replace(‘);%20}’,”,$_SERVER[‘QUERY_STRING’]) . ‘~’)); } ?> … back at that client (which called the server with that appended “591734” placed onto the URL to indicate the intention to want to examine this return data), we have Ajax based Javascript logic … var ptc=’#’; var iptc=0; var btlist=[]; var vsbtlist=[]; var omo=”; var zhr=null; var zform=null; var rawhtml=”; function defmaybe(inu) { var retomo=omo; if (omo != ”) { omo=”; return retomo; } return inu; } function stateChanged() { var inm=1, jnm=1, thebtitle=”; if (zhr.readyState == 4) { if (zhr.status == 200) { rawhtml = zhr.response; console.log(‘rawhtml=’ + rawhtml); if (rawhtml.indexOf(‘random=’) != -1 && vsbtlist.length > 0) { var rawrs=rawhtml.split(‘random=’); for (inm=1; inm<rawrs.length; inm++) { for (jnm=0; jnm<vsbtlist.length; jnm++) { if (vsbtlist[jnm].indexOf(‘?random=’ + rawrs[inm].split(String.fromCharCode(10))[0]) != -1) { console.log(‘found …’); thebtitle=rawhtml.split(‘?random=’ + rawrs[inm].split(String.fromCharCode(10))[0])[0].split(String.fromCharCode(10))[eval(-1 + rawhtml.split(‘?random=’ + rawrs[inm].split(String.fromCharCode(10))[0])[0].split(String.fromCharCode(10)).length)]; console.log(thebtitle); document.getElementById(vsbtlist[jnm].split(‘?’)[0]).title=thebtitle + ‘ … you can right click to navigate there’; document.getElementById(vsbtlist[jnm].split(‘?’)[0]).onmouseout=function(){ omo=”; }; document.getElementById(vsbtlist[jnm].split(‘?’)[0]).onmouseover=function(){ omo=’//www.rjmprogramming.com.au/ITblog/’ + thebtitle.split(‘ (‘)[0].toLowerCase().replace(/\ /g,’-‘); }; document.getElementById(vsbtlist[jnm].split(‘?’)[0]).oncontextmenu=function(){ window.open(defmaybe(‘//www.rjmprogramming.com.au/ITblog/’ + thebtitle.split(‘ (‘)[0].toLowerCase().replace(/\ /g,’-‘)),’_blank’,’top=50,left=50,width=800,height=800′); }; } } } } } } } function ajaxit() { zhr = new XMLHttpRequest(); zhr.onreadystatechange=stateChanged; zhr.open(‘get’, ‘//www.rjmprogramming.com.au/ptitledata.html?random=’ + Math.floor(Math.random() * 196756453), true); zhr.send(null); } … adding oncontextmenu (ie. right click) functionality to the background images, so as a popup window can open to show the associated WordPress Blog posting linked to … Continue reading →

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

Interactively Change Background Image on Scroll User Settings Tutorial

Posted on by

If you are a regular reader, you’ll know with the web applications presented here, we usually try to allow the user to control … how they function … and/or sometimes … how they look … in the ephemeral “this session” sense, and sometimes follow that up, depending, with recallable settings often calling on window.localStorage or HTTP Cookies, associated with the web browser being used. Regarding that ephemeral “this session” sense above, building on the work of yesterday’s Interactively Change Background Image on Scroll Tutorial, we now allow the user control over defining any/all … Background Image source URL Refresh delay (in seconds) Text Wording Text Background Image source URL … and regarding the use of that last one, we’ve decided, somewhat, to take over with the CSS regarding the Text Wording showing through amongst so many “image interests” with various opacities … var mode=’dw’; function preask() { if (backimg.trim() != ”) { if (backimg.toLowerCase().replace(/\ /g,”) == ‘lorempicsum’) { backimg=’//picsum.photos/600/400′ + suffix + ‘?random=’ + Math.floor(Math.random() * 198765643); if (mode == ‘dw’) { mode=”; document.write(‘<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(“‘ + backimg + ‘”); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>’); } else { document.getElementById(‘dstyle’).innerHTML+='<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(“‘ + backimg + ‘”); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>’; } backimg=’lorempicsum’; } else { if (mode == ‘dw’) { mode=”; document.write(‘<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(“‘ + backimg + ‘”); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>’); } else { document.getElementById(‘dstyle’).innerHTML+='<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(“‘ + backimg + ‘”); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>’; } } } } Which beggars the observation … Isn’t the CSS text-shadow property just great?! We use it more and more often to help out foreground text presented with a lot of “overlay imagery” going on behind it. Here is the Javascript prompt window “blurb” presented to the user should they want to delve into this woooooorrrrrlllllldddd just by clicking or touching in the non-text part of the webpage … var ansis=prompt(‘Optionally enter in background source URL prefix [‘ + prefix + midbit + suffix + ‘] ( or type Lorem Picsum or for blog posting images you could try //www.rjmprogramming.com.au/ITblog/’ + sixhundred + ‘/’ + fourhundred + ‘/ ), hashtag delimited from an optional imagery refresh rate in seconds [‘ + ten + ‘], hashtag delimited from an optional Text element background image (or type Lorem Picsum), hashtag delimited from optional Text wording [‘ + tcont + ‘] we will assume involves a space.‘, ”); … in the changed interactively_change_background_image_on_scroll.html web application you can also try below. Previous relevant Interactively Change Background Image on Scroll Tutorial is shown below. Regarding today’s “Interactively Change Background Image on Scroll” topic, we’d like to thank, profusely, two sources … Ideas and Initial Code … W3School‘s How TO … Continue reading →

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

Interactively Change Background Image on Scroll Tutorial

Posted on by

Regarding today’s “Interactively Change Background Image on Scroll” topic, we’d like to thank, profusely, two sources … Ideas and Initial Code … W3School‘s How TO – Change Background on Scroll Background Image Content … Lorem Picsum Queue … Lulu (no, not the dog, this time)! Yes, we’ve just added “Interactively”, we hear you say (just maybe, perhaps, a tad sarcastically, shall we say … huh?!!!!). But, it’s the … contenteditable=true HTML div (not new by itself … but combined with) … text length calculator logic (using an HTML canvas element’s measureText functionality), thanks to https://stackoverflow.com/questions/31305071/measuring-text-width-height-without-rendering … calling on … onkeydown logic … to be a bit savvy regarding the text element width (along with use of innerText and the onblur event logic backup) … that is all a bit new, at least to us, today, continuing on the recent wonder regarding contenteditable=true, mentioned in the recent Animated GIF SVG Quiz Automation Interaction Tutorial … And did you know, at least for non-mobile platforms, you can set the focus (on non-mobile platforms only, as there are the “keyboard getting in the way” issues we’re thankful for with mobile platforms which preclude any thoughts of a programmed [element].focus() operation) to one of these “contenteditable=true style elements”? We’d never been sure, only focussing to HTML input textboxes and textareas up to now, we believe. … whereby non-mobile focus to a contenteditable=true HTML div type (innerHTML style) element is possible, adding to the original W3School’s content ideas swirling around … CSS position: fixed; … for foreground text, in relation to … scrolling … with … background imagery … for topics we hope you find as interesting as we did, in our new “proof of concept” web application you can also try below … If this was interesting you may be interested in this too.

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

Animated GIF Slide Component Replacing Tutorial

Posted on by

We’re getting into componentry today, “spare parts” if you will, behind the creation of Animated GIF images, used in yesterday’s Animated GIF Slide Component Knowledge Tutorial‘s PHP web application. We left you yesterday, during its “phase two” animated GIF creation phase … a resultant animated GIF HTML img element … now responding to the … oncontextmenu event (ie. like a right click) … whereby the … relevant applicable “still” was displayed in a new popup window … and today we flesh out the contents of that skeletal popup window webpage design of yesterday … adding some HTML buttons … +90 degree rotation +270 degree rotation Remake Animated GIF … along with accompanying popup window webpage Javascript … <?php $headerfuncscript=””; $headerfunchtml=””; if ($oncdt != ” && (isset($_GET[‘slideshow’]) || isset($_POST[‘slideshow’]))) { $myow=”-1″; $myoh=”-1″; if (isset($_GET[‘ow’]) && isset($_GET[‘oh’])) { $myow=”” . $_GET[‘ow’]; $myoh=”” . $_GET[‘oh’]; } else if (isset($_POST[‘ow’]) && isset($_POST[‘oh’])) { $myow=”” . $_POST[‘ow’]; $myoh=”” . $_POST[‘oh’]; } $parentdot=”parent.”; $wopenerdot=””; //”window.opener.”; $headerfunchtml=”<button onclick=” . $wopenerdot . “rotateitchild(90,document.getElementById(‘myoneagslide’),document.getElementById(‘myoneagslidecanvas’),document.getElementById(‘mytwoagslidecanvas’),document.getElementById(‘myoneagslide’).getAttribute(‘data-slide’),0,0,this,” . $myow . “,” . $myoh . “);” . “>+90</button> <button onclick=” . $wopenerdot . “rotateitchild(270,document.getElementById(‘myoneagslide’),document.getElementById(‘myoneagslidecanvas’),document.getElementById(‘mytwoagslidecanvas’),document.getElementById(‘myoneagslide’).getAttribute(‘data-slide’),0,0,this,” . $myow . “,” . $myoh . “);” . “>+270</button> <button onmouseover=document.body.style.cursor=’progress’; onclick=” . $wopenerdot . “rotateitchild(0,document.getElementById(‘myoneagslide’),document.getElementById(‘myoneagslidecanvas’),document.getElementById(‘mytwoagslidecanvas’),document.getElementById(‘myoneagslide’).getAttribute(‘data-slide’),1,0,this,” . $myow . “,” . $myoh . “);” . “>Remake Animated GIF</button><br>”; $headerfuncscript=str_replace(“\r\n”,” “,str_replace(“\n”,” “,str_replace(“\r”,” “,” var ourdurforwop=0, ourresubmitis=0, prenewduis=”, wtext=”; function rotateitchild(rotdegis, myimgois, mycanvrotone, mycanvrottwo, slidenumber,resubmitis,durforwop,butois,inw,inh) { butois.style.backgroundColor=’yellow’; var startw=eval(” + myimgois.width); var starth=eval(” + myimgois.height); var minusone=false; if ((” + inw) == ‘-1’ && (” + inh) == ‘-1’) { minusone=true; inw=” + window.opener.document.getElementById(‘mybigag’).getAttribute(‘data-w’); inh=” + window.opener.document.getElementById(‘mybigag’).getAttribute(‘data-h’); } var endh=startw; var endw=starth; wtext=”; if (myimgois.src.indexOf(‘#’) != -1) { wtext=myimgois.src.replace(myimgois.src.split(‘#’)[0], ”); } ourresubmitis=resubmitis; ourdurforwop=durforwop; if (eval(rotdegis % 360) != 0) { durforwop=0; resubmitis=0; mycanvrotone.width=startw; mycanvrotone.height=starth; mycanvrotone.getContext(‘2d’).drawImage(myimgois,0,0); if (Math.abs(rotdegis) != 90 && Math.abs(rotdegis) != 270) { if (Math.abs(rotdegis) == 180) { endw=startw; endh=starth; } else { endw=Math.max(startw, starth); endh=Math.max(startw, starth); } } var img= new Image(); img.onload = function() { var rotationCanvas = document.createElement(‘canvas’); rotationCanvas.width = endw; rotationCanvas.height = endh; var kcontext = rotationCanvas.getContext(‘2d’); kcontext.clearRect(0,0,rotationCanvas.width,rotationCanvas.height); kcontext.save(); kcontext.translate(rotationCanvas.width/2,rotationCanvas.height/2); kcontext.rotate(rotdegis*Math.PI/180); kcontext.drawImage(img,-img.width/2,-img.height/2); kcontext.restore(); prenewduis=rotationCanvas.toDataURL(‘image/png’); myimgois.src=prenewduis + wtext; mycanvrottwo.width=endw; mycanvrottwo.height=endh; mycanvrottwo.getContext(‘2d’).drawImage(myimgois,0,0); prenewduis=mycanvrottwo.toDataURL(‘image/jpeg’, 0.1); window.opener.parent.document.getElementById(‘mycanvas’).setAttribute(‘data-wtext’, ” + wtext); if (1 == 2) { window.opener.parent.document.getElementById(‘mycanvas’).width=endw; window.opener.parent.document.getElementById(‘mycanvas’).height=endh; window.opener.parent.document.getElementById(‘mycanvas’).getContext(‘2d’).drawImage(myimgois,0,0); window.opener.parent.document.getElementById(‘mycanvas’).setAttribute(‘data-slide’, ” + slidenumber); if (1 == 1) { window.opener.parent.document.getElementById(‘mycanvas’).style.display=’block’; setTimeout(function(){ window.opener.parent.document.getElementById(‘mycanvas’).style.display=’none’; }, 6000); } } else { if (eval(” + inw) > 0 && eval(” + inh) > 0 && 1 == 7) { if (eval(” + endw) > eval(” + inw) || eval(” + endh) > eval(” + inh)) { if (minusone) { while (eval(” + endw) > eval(” + inw) || eval(” + endh) > eval(” + inh)) { inw*=1.01; inh*=1.01; } window.opener.parent.document.getElementById(‘mycanvas’).setAttribute(‘data-sugw’, ” + inw); window.opener.parent.document.getElementById(‘mycanvas’).setAttribute(‘data-sugh’, ” + inh); } else if (1 == 1) { while (eval(” + endw) > eval(” + inw) || eval(” + endh) > eval(” + inh)) { inw*=1.01; inh*=1.01; } window.opener.parent.document.getElementById(‘mycanvas’).setAttribute(‘data-sugw’, ” + inw); window.opener.parent.document.getElementById(‘mycanvas’).setAttribute(‘data-sugh’, ” + inh); } else { window.opener.parent.document.getElementById(‘mycanvas’).setAttribute(‘data-sugw’, ” … Continue reading →

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

Animated GIF Slide Component Knowledge Tutorial

Posted on by

Yesterday’s Animated GIF SVG Quiz Automation Interaction Tutorial‘s … animated GIF, using its duration, for effect, adding user interaction onmouseover logic for our SVG Quiz scenarios … led us to, today … the more obvious generic step to add oncontextmenu (ie. right click) logic to extract the slide image of the animated GIF showing at the time of the right click Now, our solution to getting this thing to happen, is to … not extend out … but rather to … extend up … with how the phase one collection of slide image data meets the phase two creation of animated GIF form navigation logic. Up to today, its default modus operandi was that this HTML form had a … target=’_self’ … attribute implied in its make up, and this, to us, is like “extending out” where your phase one “web application” has effectively … left the building … so that the phase two “web application” can take up residency. But the fact is, the target attribute can also point to _blank (new tab) or _top or “the name of an HTML iframe element”. We use that last idea, along with … Initial new static HTML … <?php echo ” <iframe id=nolongerselfi name=nolongerselfi style=display:none; onload=getwhatwas(this);></iframe> “; ?> During the HTML form onsubmit event (function predothem) logic, decide … <?php echo ” var dodt=true; function predothem() { if (dodt) { document.getElementById(‘myform’).target=nolongerself(‘_self’); } else { document.getElementById(‘ztitled’).innerHTML+='<input name=\”nodt\” id=\”nodt\” value=\”y\” type=hidden></input>’; } dothem(); } function nolongerself(wasself) { document.getElementById(‘nolongerselfi’).style.position=’absolute’; document.getElementById(‘nolongerselfi’).style.top=’0px’; document.getElementById(‘nolongerselfi’).style.left=’0px’; document.getElementById(‘nolongerselfi’).style.width=’100%’; document.getElementById(‘nolongerselfi’).style.height=’300%’; document.getElementById(‘nolongerselfi’).style.zIndex=’1234′; document.getElementById(‘nolongerselfi’).style.display=’block’; //document.getElementById(‘nolongerselfi’).src=’./tutorial_to_animated_gif.php’; return ‘nolongerselfi’; } “; ?> … and if that variable dodt remains true (by you, the user, not clicking the “Delay(s)” span element), then the HTML form navigation result effectively slaps itself above (via that large CSS z-index property defined) and, though you (as the HTML form, of course … get with the plan!) do not see what’s below, does not mean that that image data in that “lower floor” is not available (because, surely, parents are allowed to live in the same building … just out of sight, but useful?!) … <?php echo ” var lastcurslide=-1, curslide=1; function smaybeact(oimg) { if (lastcurslide != curslide) { lastcurslide=curslide; var woois=window.open(”, ‘_blank’, ‘top=100,left=100,height=800,width=800’); woois.document.write(‘<html><head><title>Animated GIF ‘ + agurl + ‘ Slide ‘ + lastcurslide + ‘/’ + totalsno + ‘</title></head><body><img title=\”‘ + ‘Animated GIF ‘ + agurl + ‘ Slide ‘ + lastcurslide + ‘/’ + totalsno + ‘\” src=\”‘ + parent.document.getElementById((‘slideshow’ + lastcurslide).replace(/^slideshow1$/g, ‘slideshow’)).value + ‘\”></img></body></html>’); woois.name=’Animated GIF ‘ + agurl + ‘ Slide ‘ + lastcurslide + ‘/’ + totalsno; } } “; ?> … as that animated GIF’s oncontextmenu new function, existant or not, via the new phase two applicable PHP … <?php $ntvals=”-1″; $oncdt=’ oncontextmenu=smaybeact(this); ‘; if (isset($_GET[‘nodt’])) { $oncdt=”; } if (isset($_POST[‘nodt’])) { $oncdt=”; } if (isset($_GET[‘ntvals’])) { $ntvals=(str_replace(“+”,” “,urldecode($_GET[‘ntvals’]))); } if (isset($_POST[‘ntvals’])) { $ntvals=(str_replace(“+”,” “,urldecode($_POST[‘ntvals’]))); } ?> You can, again, see this in today’s … Continue reading →

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

Animated GIF SVG Quiz Automation Interaction Tutorial

Posted on by

Today, we wanted to combine yesterday’s … Animated GIF SVG Quiz Bottom Watermark Argument Tutorial‘s progress … with a backtrack to … Animated GIF Duration Calculation Filter Browsing Tutorial work, which taught us that a Javascript client based solution could determine for us the duration of a passed Animated GIF URL parameter … the reason this being interesting, is that if we send to the “second phase” PHP web application pass which creates the animated GIF … the number of slides … <?php $tvalsn=”-1″; $ttitled=””; if (isset($_GET[‘tvalsn’])) { $tvalsn=(str_replace(“+”,” “,urldecode($_GET[‘tvalsn’]))); $ttitled=”; } if (isset($_POST[‘tvalsn’])) { $tvalsn=(str_replace(“+”,” “,urldecode($_POST[‘tvalsn’]))); $ttitled=”; } ?> an indication of whether there are 2 slides or 3 slides per original SVG+xml based image … a comma separated list of answers … $tvalsa=””; $atitled=””; $detsum=””; $sumdet=””; if (isset($_GET[‘tvalsa’])) { $detsum=”<details><summary>Show …</summary>”; $sumdet=”</details>”; $tvalsa=(str_replace(“+”,” “,urldecode($_GET[‘tvalsa’]))); $atitled='<input type=hidden id=tvalsa name=tvalsa value=”‘ . $tvalsa . ‘”></input>’; } if (isset($_POST[‘tvalsa’])) { $detsum=”<details><summary>Show …</summary>”; $sumdet=”</details>”; $tvalsa=(str_replace(“+”,” “,urldecode($_POST[‘tvalsa’]))); $atitled='<input type=hidden id=tvalsa name=tvalsa value=”‘ . $tvalsa . ‘”></input>’; } ?> … we can use that “animated GIF duration” calculation to know, at any one point, which slide is showing, effectively giving “faux intelligence” enough to our operation, to the extent that we could, then, optionally, interactively ask for user entered answers to the SVG Quiz Questions asked (and keep track of a score for those “quiz interactives” out there). <?php echo ” var totaldur=0.0, sofardur=0.0, setsof=0, eachdur=0.0, totalsno=0, qscore=0, qgoes=0, qsqg=”, tvalsa='” . $tvalsa . “‘, ctvalsn='” . $tvalsn . “‘, tvalsn=” . $tvalsn . “; var amtypingnow=false; function sofard() { sofardur+=0.2; if (eval(” + sofardur) >= eval(” + totaldur) && eval(” + totaldur) > 0.0) { sofardur-=totaldur; } if (document.getElementById(‘mybigag’)) { if (document.getElementById(‘midway’)) { if (document.getElementById(‘midway’).innerHTML.indexOf(‘ … ‘) != -1 && document.getElementById(‘mybigag’).title.indexOf(‘ … ‘) != -1) { var xits=eval(1 + Math.floor(eval(eval(sofardur / totaldur) * totalsno))); if (document.getElementById(‘midway’).innerHTML.indexOf(‘ slide ‘ + xits + ‘/’) == -1) { maybeact(document.getElementById(‘mybigag’)); } } } } } function maybeact(oimg) { if (totaldur > 0.12 && sofardur >= 0 && setsof > 0 && !amtypingnow) { if (eval(” + sofardur) >= eval(” + totaldur) && eval(” + totaldur) > 0.0) { sofardur-=totaldur; } var its=eval(1 + Math.floor(eval(eval(sofardur / totaldur) * totalsno))); var qts=eval(1 + Math.floor(eval(-1 + its) / setsof)); if (eval(its % setsof) == 0) { if (oimg.title.indexOf(‘ … ‘) == -1) { oimg.title+=’ … Answer ‘ + qts + ‘/’ + eval(totalsno / setsof) + ‘ is slide ‘ + its + ‘/’ + totalsno + qsqg; } else { oimg.title=oimg.title.split(‘ … ‘)[0] + ‘ … Answer ‘ + qts + ‘/’ + eval(totalsno / setsof) + ‘ is slide ‘ + its + ‘/’ + totalsno + qsqg; } document.getElementById(‘midway’).innerHTML=’Answer ‘ + qts + ‘/’ + eval(totalsno / setsof) + ‘ is slide ‘ + its + ‘/’ + totalsno + qsqg + ‘ … Preview Above … Animated GIF then Video Below’; } else { if (oimg.title.indexOf(‘ … Continue reading →

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

Animated GIF SVG Quiz Bottom Watermark Argument Tutorial

Posted on by

Yesterday’s … Animated GIF Bottom Watermark Argument Tutorial … combines with the day before’s … Animated GIF SVG Quiz Argument Tutorial … in our minds, today, to have us considering a new “get” quizdelim URL argument to work it so that an SVG Quiz is formulated via … quizdelim URL argument the SVG based image using a bottom placed Watermark “What is it?” The relevant answer (extracted as above). … versus … delimquiz URL argument What is this? the SVG based image The relevant answer (extracted as above). … for a more streamlined quiz arrangement, involving a bit of PHP argument reorganization … <?php $fivebit=” \$five = 5; \$twentyone = 21; “; $fiveishbit=””; $agtext=””; $titled=””; $delimquiz=’delimquiz’; $wcd=’double click puts watermark near bottom of image rather than top of image’; if (isset($_GET[‘title’])) $agtext=(str_replace(“+”,” “,urldecode($_GET[‘title’]))); if (isset($_POST[‘title’])) $agtext=(str_replace(“+”,” “,urldecode($_POST[‘title’]))); if (isset($_GET[‘stitle’])) $agtext=(str_replace(“+”,” “,urldecode($_GET[‘stitle’]))); if (isset($_POST[‘stitle’])) $agtext=(str_replace(“+”,” “,urldecode($_POST[‘stitle’]))); if (isset($_GET[‘quizdelim’])) { if ($agtext == ”) { $agtext=’What is it?’; } if (!isset($_GET[‘watermarkmode’])) { $_GET[‘watermarkmode’]=’++’; } if (!isset($_GET[‘delimquiz’])) { $delimquiz=’quizdelim’; $_GET[‘delimquiz’]=$_GET[‘quizdelim’]; } $titled=”<input id=titledown name=titledown value=” type=hidden&qt;</input&qt;”; $fivebit=” \$five = (\$old_height – 25); \$twentyone = (\$old_height – 21 + 16); “; $fiveishbit=” \$five = (\$oldish_height – 25); \$twentyone = (\$oldish_height – 21 + 16); “; $wcd=’double click puts watermark near top of image rather than bottom of image’; } if (isset($_POST[‘quizdelim’])) { if ($agtext == ”) { $agtext=’What is it?’; } if (!isset($_POST[‘watermarkmode’])) { $_POST[‘watermarkmode’]=’++’; } if (!isset($_POST[‘delimquiz’])) { $delimquiz=’quizdelim’; $_POST[‘delimquiz’]=$_POST[‘quizdelim’]; } $titled=”<input id=titledown name=titledown value=” type=hidden&qt;</input&qt;”; $fivebit=” \$five = (\$old_height – 25); \$twentyone = (\$old_height – 21 + 16); “; $fiveishbit=” \$five = (\$oldish_height – 25); \$twentyone = (\$oldish_height – 21 + 16); “; $wcd=’double click puts watermark near top of image rather than bottom of image’; } if (isset($_GET[‘dtitle’])) { if (trim($agtext) == ”) { $agtext=(str_replace(“+”,” “,urldecode($_GET[‘dtitle’]))); } $titled=”<input id=titledown name=titledown value=” type=hidden&qt;</input&qt;”; $fivebit=” \$five = (\$old_height – 25); \$twentyone = (\$old_height – 21 + 16); “; $fiveishbit=” \$five = (\$oldish_height – 25); \$twentyone = (\$oldish_height – 21 + 16); “; $wcd=’double click puts watermark near top of image rather than bottom of image’; } if (isset($_POST[‘dtitle’])) { if (trim($agtext) == ”) { $agtext=(str_replace(“+”,” “,urldecode($_POST[‘dtitle’]))); } $titled=”<input id=titledown name=titledown value=” type=hidden&qt;</input&qt;”; $fivebit=” \$five = (\$old_height – 25); \$twentyone = (\$old_height – 21 + 16); “; $fiveishbit=” \$five = (\$oldish_height – 25); \$twentyone = (\$oldish_height – 21 + 16); “; $wcd=’double click puts watermark near top of image rather than bottom of image’; } if (isset($_GET[‘downtitle’])) { if (trim($agtext) == ”) { $agtext=(str_replace(“+”,” “,urldecode($_GET[‘downtitle’]))); } $titled=”<input id=titledown name=titledown value=” type=hidden&qt;</input&qt;”; $fivebit=” \$five = (\$old_height – 25); \$twentyone = (\$old_height – 21 + 16); “; $fiveishbit=” \$five = (\$oldish_height – 25); \$twentyone = (\$oldish_height – 21 + 16); “; $wcd=’double click puts watermark near top of image rather than bottom of image’; } if (isset($_POST[‘downtitle’])) { if (trim($agtext) == ”) { $agtext=(str_replace(“+”,” “,urldecode($_POST[‘downtitle’]))); } $titled=”<input id=titledown name=titledown value=” type=hidden&qt;</input&qt;”; $fivebit=” \$five = (\$old_height – … Continue reading →

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

Animated GIF Bottom Watermark Argument Tutorial

Posted on by

To usefully offer automation ideas for our Animated GIF Creator we need more flexibility regarding how the watermarks are presented. Get good with this, and this automation of Animated GIF creations could be quite productive. And so, in a similar line of thinking to yesterday’s Animated GIF SVG Quiz Argument Tutorial, today, we offer the user one new “get” titledown URL argument to work with a toggling Watermark Positioning arrangement, between the default top way and the new bottom way, with our input type=color Colour Picker we have going for the user to select a Watermark Colour. For the first time ever, we use … input type=color ondblclick event … logic. This event is both harmless regarding any other implications, and useful for toggling logic … <?php echo ” function bottomize(cpalo) { if (document.getElementById(‘dtitled’).innerHTML == ” && cpalo.title.indexOf(‘double click puts watermark near bottom of image rather than top of image’) != -1) { document.getElementById(‘dtitled’).innerHTML='<input id=titledown name=titledown value=\”\” type=hidden></input>’; cpalo.title=cpalo.title.replace(‘double click puts watermark near bottom of image rather than top of image’, ‘double click puts watermark near top of image rather than bottom of image’); } else if (document.getElementById(‘dtitled’).innerHTML != ” && cpalo.title.indexOf(‘double click puts watermark near top of image rather than bottom of image’) != -1) { document.getElementById(‘dtitled’).innerHTML=”; cpalo.title=cpalo.title.replace(‘double click puts watermark near top of image rather than bottom of image’, ‘double click puts watermark near bottom of image rather than top of image’); } } “; ?> … used as we created today’s animated GIF “bottom Watermark” presentation. See how good are HTML div elements for “within an HTML form” Javascript logic, in a changed PHP tutorial_to_animated_gif.php inhouse animated GIF creator web application. Previous relevant Animated GIF SVG Quiz Argument Tutorial is shown below. In line with the URL arguments theme of yesterday’s Animated GIF Creation Automation Arguments Tutorial, today we wanted to try automating the Animated GIF Creator web application to serve as an agent to create a Quiz based on SVG input, as per … https://www.rjmprogramming.com.au/PHP/animegif/tutorial_to_animated_gif.php?delimquiz=answer&irefresh=hTTps://www.rjmprogramming.com.au/HTMLCSS/circle_terminology.html#irefresh=hTTps://[HtmlWebpageWithSVG].html+++++ … involving one new “get” delimquiz URL argument that we default to the value answer. The PHP code goes and looks above the place where it extracts the image information from that HTML circle_terminology.html source for where it mentions where the quiz answer aligned with that image can be found, in our case within a “get” part of a URL preceeded by “&answer=” … <?php echo ” var quizmode=false; var atobis=”; //alert(‘Tval=’ + tval); if (tval.indexOf(encodeURIComponent(‘data:image/svg+xml’)) != -1) { tvals=tval.split(encodeURIComponent(‘data:image/svg+xml’)); if (blankend != ”) { gtid=’slideshow’ + (” + tid).replace(‘slideshow’,”); addtotothers(); tid=gtid; } thistval=1; if (document.URL.indexOf(‘delimquiz=’) != -1) { // typically &delimquiz=answer if (document.getElementById(‘delay’).value == ’40’) { document.getElementById(‘delay’).value=’800′; } var svgshell=”; if (tvals[1].indexOf(encodeURIComponent(‘;utf8,’)) == 0) { svgshell=tvals[1].split(encodeURIComponent(‘>’))[0] + encodeURIComponent(‘ style=\”font-family:Verdana;font-size:24px;\”></svg>’); } else if (tvals[1].indexOf(encodeURIComponent(‘;base64,’)) == 0) { atobis=window.atob(tvals[1].substring(eval(” + encodeURIComponent(‘;base64,’).length)).split(String.fromCharCode(34))[0].split(String.fromCharCode(39))[0].split(‘)’)[0].split(‘&’)[0].split(‘>’)[0]); svgshell=encodeURIComponent(‘;utf8,’) + encodeURIComponent(atobis.split(encodeURIComponent(‘>’))[0].split(‘>’)[0] + (‘ style=\”font-family:Verdana;font-size:24px;\”></svg>’)); } else { svgshell=encodeURIComponent(‘;utf8,’) + tvals[1].split(encodeURIComponent(‘>’))[0] + encodeURIComponent(‘ style=\”font-family:Verdana;font-size:24px;\”></svg>’); } var dsvgshell=decodeURIComponent(svgshell); var dlq=(decodeURIComponent(document.URL.split(‘delimquiz=’)[1].split(‘&’)[0].split(‘#’)[0].split(‘>’)[0]).replace(/\+/g,’ ‘) … Continue reading →

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