Tag Archives: onmouseover

WordPress Calendar Widget Table Cell Tutorial Image Background Tutorial

Posted on by

The recently increased role for our Word Press Blog 404.php (initially envisaged by WordPress codex as the PHP to address HTTP error 404 “Page Not Found”) has opened the door to many more uses. And thanks here to Lorem Picsum regarding a good role model here. Today’s idea, best suited to non-mobile users (but can work more awkwardly on mobile) is to respond for a mobile hovering over our TwentyTen themed WordPress Blog’s Calendar widget, specifically the active “a” links within “td” table cells, and render a background image into that cell that corresponds to that date’s tutorial picture. In order to achieve this we revisit the “function calendar_pass” Javascript function, within (good ol’) header.php, featuring in Calendar iCal Integration WordPress Tutorial up near the top … <?php echo ” function calendar_pass() { var thisc=”, thiscc=”, thist=”, jiicp=0, thisdate=”, thistime=”, nexttime=”, thishour=0, nexthour=0, thisminute=”, thissecond=’00’, thisurl=”; var h1cps=docgetclass(‘entry-title’,’*’); //document.getElementsByTagName(‘h2’); var tdzs=document.getElementsByTagName(‘td’), itdzs=0; var cps=document.getElementsByTagName(‘a’); var mfnd=false;; for (var ijcal=0; ijcal<cps.length; ijcal++) { // new calendar links background image if (eval(” + (” + cps[ijcal].href).split(‘/’).length) == 8) { if (eval(” + (” + cps[ijcal].href).split(‘/’)[4].length) == 4) { mfnd=false; for (itdzs=0; itdzs<tdzs.length; itdzs++) { if (tdzs[itdzs].innerHTML == cps[ijcal].outerHTML) { tdzs[itdzs].className=cps[ijcal].title.replace(/\ /g,’_’); tdzs[itdzs].onclick=function(evt){ window.open(‘//www.rjmprogramming.com.au/ITblog/’ + evt.target.innerHTML.split(‘ title=”‘)[1].split(‘”‘)[0].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(” “,”-“), ‘_blank’, ‘top=50,left=50,width=1200,height=900’); }; mfnd=true; } } if (!mfnd) { cps[ijcal].onmouseover=function(evt){ var pbs=(” + evt.target.href).split(‘/’); if (document.head.innerHTML.indexOf(‘[title=’ + “‘” + evt.target.title + “‘” + ‘]’) == -1) { document.head.innerHTML+=’ <style> [title=’ + “‘” + evt.target.title + “‘” + ‘] { ‘ + ‘ background:url(//www.rjmprogramming.com.au/ITblog/500/500/?random=178654345&mustbedated=’ + pbs[4] + pbs[5] + pbs[6] + ‘) center center no-repeat; background-size:cover; } </style> ‘; } }; } else { cps[ijcal].onmouseover=function(evt){ var pbs=(” + evt.target.href).split(‘/’); if (document.head.innerHTML.indexOf(‘ .’ + evt.target.title.replace(/\ /g,’_’) + ‘ {‘) == -1) { document.head.innerHTML+=’ <style> .’ + evt.target.title.replace(/\ /g,’_’) + ‘ { ‘ + ‘ background:url(//www.rjmprogramming.com.au/ITblog/500/500/?random=178654345&mustbedated=’ + pbs[4] + pbs[5] + pbs[6] + ‘) center center no-repeat !important; background-size:cover; } </style> ‘; } }; } } } } // Rest of calendar_pass as in Calendar iCal Integration WordPress Tutorial below … } “; ?> … in the process … in a first pass adding a classname to those relevant “td” table cells … in same first pass adding an “onmouseover” (ie. hover) event to the relevant “a” link, that when the user hovers, appends to the document “head” some CSS styling that adds the tutorial picture image as the “td” background image and helped out by that “td” table cell classname … in same first pass adding an “onclick” event to the relevant “td” table cell, that when the user clicks the “td” cell, opens the relevant blog posting webpage in a popup window … … helping, a little, previewing a calendar date’s content ahead of navigating to that content. Previous relevant Calendar iCal Integration WordPress … Continue reading →

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

Video to Amended Animated GIF Mobile Slide Swap Tutorial

Posted on by

The “drag” about yesterday’s Video to Amended Animated GIF Drag Slide Swap Tutorial‘s slide swapping functionality was that mobile platforms were left out. Sometimes there is no alternative modus operandi to offer a mobile user, but here, we did not need to … simulate drag and drop with double clicking kind of logic … but, rather, just … simulate drag and drop with single clicking kind of logic … and so, also not restrict the swapping to adjoining slides … via new “onclick” Javascript function logic … <?php echo ” function mspanhover(elmnt) { if (spanso.length == 0) { if (dragto.length == 0) { dragto.push(elmnt.id.replace(‘ours’,”)); } else { dragto[0]=elmnt.id.replace(‘ours’,”); } if (document.getElementById((‘slideshow’ + dragto[0]).replace(/slideshow1$/g,’slideshow’)).value != ”) { spanso.push(elmnt); } } else if (spanso.length == 1) { if (elmnt.id != spanso[0].id) { if (dragfrom.length == 0) { dragfrom.push(elmnt.id.replace(‘ours’,”)); } else { dragfrom[0]=elmnt.id.replace(‘ours’,”); } if (document.getElementById((‘slideshow’ + dragfrom[0]).replace(/slideshow1$/g,’slideshow’)).value != ”) { var yesdoit=confirm(‘Swap Image ‘ + dragto[0] + ‘ for Image ‘ + dragfrom[0] + ‘ content?’); if (yesdoit) { var fromx=document.getElementById((‘slideshow’ + dragto[0]).replace(/slideshow1$/g,’slideshow’)).value; var tox=document.getElementById((‘slideshow’ + dragfrom[0]).replace(/slideshow1$/g,’slideshow’)).value; document.getElementById((‘slideshow’ + dragto[0]).replace(/slideshow1$/g,’slideshow’)).value=tox; document.getElementById((‘slideshow’ + dragfrom[0]).replace(/slideshow1$/g,’slideshow’)).value=fromx; var inthis=document.getElementById((‘slideshow’ + dragto[0]).replace(/slideshow1$/g,’slideshow’)); inthis.style.color=’black’; inthis.style.opacity=’1.0′; inthis.style.background=”; inthis.style.border=”; inthis.style.outset=”; inthis=document.getElementById((‘slideshow’ + dragfrom[0]).replace(/slideshow1$/g,’slideshow’)); inthis.style.color=’black’; inthis.style.opacity=’1.0′; inthis.style.background=”; inthis.style.border=”; inthis.style.outset=”; } spanso=[]; dragfrom=[]; dragto=[]; } } } } “; ?> Which, of course, begs the question, why not apply “single clicking kind of logic” for non-mobile platforms? Irresistible arguments. Well presented. Joy to have in the class. And so, is there any role going forward for the drag logic? Interesting argument. But there are users who love drag and drop. And so, for those non-mobile users we allow the two approaches to co-exist. One thing we do for mobile platforms, alone, though, is to set the “text-decoration” (CSS) styling of those “Tutorial Slideshow” elements be set to “underline” to make up for the lack of a span title attribute the user would see on a non-mobile platform as they hover over that span element for the changed tutorial_to_animated_gif.php our inhouse Animated GIF Creator helper PHP web application. Previous relevant Video to Amended Animated GIF Drag Slide Swap Tutorial is shown below. Today’s work improving on yesterday’s Video to Amended Animated GIF Alignment Tutorial, has, yet again, alas, only a non-mobile platform applicability, that being … Drag and Drop … methodologies to allow for Animated GIF slide swaps with an adjoining slide (slot) because … The reason we think those non-mobile users will enjoy this functionality, if anything like me, is that we might browse for images in a sorted bunch and assume all is well, but that order may not suit in the animated GIF order structure, and here is a mechanism that might help. We got great help from How To Create a Draggable HTML Element (by W3Schools), thanks, piecing together the (PHP writes) Javascript benefitting from yesterday’s work lining up the “Tutorial Slideshow” span ( now including onmouseover=spanhover(this); onmouseout=spanunhover(this); ) … Continue reading →

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

Video to Amended Animated GIF Drag Slide Swap Tutorial

Posted on by

Today’s work improving on yesterday’s Video to Amended Animated GIF Alignment Tutorial, has, yet again, alas, only a non-mobile platform applicability, that being … Drag and Drop … methodologies to allow for Animated GIF slide swaps with an adjoining slide (slot) because … The reason we think those non-mobile users will enjoy this functionality, if anything like me, is that we might browse for images in a sorted bunch and assume all is well, but that order may not suit in the animated GIF order structure, and here is a mechanism that might help. We got great help from How To Create a Draggable HTML Element (by W3Schools), thanks, piecing together the (PHP writes) Javascript benefitting from yesterday’s work lining up the “Tutorial Slideshow” span ( now including onmouseover=spanhover(this); onmouseout=spanunhover(this); ) elements over to the left of the webpage, with … <?php echo ” var dragfrom=[]; var dragto=[]; function spanhover(elmnt) { var srectz=null, srecty=null, srectx=null, sifilter=null; if (1 == 1) { if (document.getElementById(‘y’ + elmnt.id)) { srecty=document.getElementById(‘y’ + elmnt.id).getBoundingClientRect(); } if (document.getElementById(‘z’ + elmnt.id)) { srectz=document.getElementById(‘z’ + elmnt.id).getBoundingClientRect(); srectx=document.getElementById(‘x’ + elmnt.id).getBoundingClientRect(); sifilter=document.getElementById(‘x’ + elmnt.id).getBoundingClientRect(); document.getElementById(‘z’ + elmnt.id).style.position=’absolute’; //document.getElementById(‘z’ + elmnt.id).style.left=” + srectz.left + ‘px’; document.getElementById(‘x’ + elmnt.id).style.position=’absolute’; //document.getElementById(‘x’ + elmnt.id).style.left=” + srectx.left + ‘px’; document.getElementById(‘ifilter’).style.position=’absolute’; //document.getElementById(‘ifilter’).style.left=” + sifilter.left + ‘px’; } if (document.getElementById(‘y’ + elmnt.id)) { document.getElementById(‘y’ + elmnt.id).style.position=’absolute’; //document.getElementById(‘y’ + elmnt.id).style.left=” + srecty.left + ‘px’; document.getElementById(‘y’ + elmnt.id).style.color=’blue’; } } elmnt.style.opacity=’0.5′; elmnt.title=’You can swap (or drag) this image content one down or up’; elmnt.style.position=’absolute’; dragElement(elmnt); } function spanunhover(elmnt) { if (1 == 1) { if (document.getElementById(‘z’ + elmnt.id)) { document.getElementById(‘z’ + elmnt.id).style.position=’relative’; document.getElementById(‘x’ + elmnt.id).style.position=’relative’; document.getElementById(‘ifilter’).style.position=’relative’; } if (document.getElementById(‘y’ + elmnt.id)) { document.getElementById(‘y’ + elmnt.id).style.position=’relative’; document.getElementById(‘y’ + elmnt.id).style.color=’black’; } } elmnt.style.opacity=’1.0′; elmnt.style.position=’relative’; elmnt.title=”; elmnt.onmousedown=function(evt){ evt=evt; }; elmnt.onmouseup=function(evt){ evt=evt; }; elmnt.onmousemove=function(evt){ evt=evt; }; } function dragElement(elmnt) { // thanks to https://www.w3schools.com/howto/howto_js_draggable.asp var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + ‘header’)) { // if present, the header is where you move the DIV from: document.getElementById(elmnt.id + ‘eader’).onmousedown = dragMouseDown; } else { // otherwise, move the DIV from anywhere inside the DIV: elmnt.onmousedown = dragMouseDown; if (dragfrom.length == 1) { closeDragElement(); //if ((‘dragfrom[0]=’ + dragfrom[0] + ‘ and dragto[0]=’ + dragto[0]).length <= 40) { //alert(‘dragfrom[0]=’ + dragfrom[0] + ‘ and dragto[0]=’ + dragto[0]); // //dragfrom[0]=eval(” + elmnt.target.id.replace(‘ours’,”)); //} } } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: if (e.clientX) { pos1 = pos3 – e.clientX; pos2 = pos4 – e.clientY; pos3 = e.clientX; pos4 = e.clientY; } else if (e.pageX) { pos1 = pos3 – e.pageX; pos2 = pos4 – e.pageY; pos3 = e.pageX; } // set … Continue reading →

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

Video to Amended Animated GIF Alignment Tutorial

Posted on by

Around here when “alignment” thoughts are teamed with “web design” we still like the “oldy worldy” HTML table element approach, but such an idea felt a bit too extra kludgy regarding the “dynamically vertically expanding” ideas in the Animated GIF Creator (PHP) web application of yesterday’s Video to Amended Animated GIF Preview Forever Tutorial. We could apply pretty complex CSS styling and use “div” elements, no doubt! But we opted for some application of new textbox applicable CSS that uses … percentage widths ( width: 80%; ) float: right; margin-right: 1%; … and then work at making other elements align around this “good start” having a neat right hand edge for the “delay(s)” and “slide(s)” textboxes. An impediment to good “alignment” results also had us revisiting our penchant for any CSS “align: center” ideas, instead making “alignment” on the left hand side of the web application be “to the left” (doh!) Let’s take a look at (PHP writes) Javascript alignment related changes to “previewing” logic that augments the PHP variable change … <?php $seventypc=”80%;float:right;margin-right:1%”; ?> … is … <?php echo ” var lastiid=”, relatedto=null; var delaylastiid=”, delayrelatedto=null, delayslidenum=-1, delaythisslide=-1, delaysare=[]; function prenext() { if (delayrelatedto) { if (delaythisslide >= delayslidenum) { delaythisslide=1; document.getElementById(‘delay’).style.backgroundImage=’linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\”‘ + document.getElementById(‘slideshow’).value + ‘\”)’; setTimeout(prenext, eval(” + delaysare[0])); } else { delaythisslide++; document.getElementById(‘delay’).style.backgroundImage=’linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\”‘ + document.getElementById(‘slideshow’ + eval(0 + eval(delaythisslide))).value + ‘\”)’; if (delaythisslide <= delaysare.length) { setTimeout(prenext, eval(” + delaysare[eval(-1 + eval(” + delaythisslide))])); } else { setTimeout(prenext, eval(” + delaysare[0])); } } } } function preanimate(inthis, inthisvalue) { var delaysuff=”; delaysare=inthisvalue.split(‘,’); if (delayslidenum == -1 || 1 == 1) { delayslidenum=-1; while (document.getElementById(‘slideshow’ + delaysuff).value != ”) { if (delayslidenum == -1) { delayslidenum=1; delaysuff=” + eval(1 + eval(” + delayslidenum)); } else { delayslidenum++; delaysuff=” + eval(1 + eval(” + delayslidenum)); } } } delaythisslide=1; setTimeout(prenext, eval(” + delaysare[0])); return document.getElementById(‘slideshow’).value; } function preafterbithis() { if (delayrelatedto) { if (delaylastiid == (” + delayrelatedto.id)) { delaylastiid=”; //delayrelatedto=null; } } else { delaylastiid=”; } } function preinrelatedto() { var thisappi=1; if (delayrelatedto) { if ((” + delayrelatedto.title).indexOf(‘ong hover’) != -1) { var appiwords=(” + delayrelatedto.title).replace(‘ after losing focus’, ‘ after losing focus 0’).split(‘ ‘); delayrelatedto.title+=’ ‘ + eval(1 + eval(appiwords[eval(-1 + appiwords.length)])); if (eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) <= 7) { delayrelatedto.style.border=” + eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) + ‘px dotted yellow’; delayrelatedto.style.borderLeftStyle=’solid’; } setTimeout(preinrelatedto, 990); } } } function prebithis(inthis) { if (inthis.value.trim() != ”) { if (delayrelatedto) { if ((” + inthis.id) != (” + delayrelatedto.id)) { preunbithis(delayrelatedto); delayrelatedto=null; } } if ((” + inthis.getAttribute(‘data-oh’)).replace(/^undefined$/g,”).replace(/^null$/g,”) == ”) { inthis.setAttribute(‘data-oh’, ” + inthis.getBoundingClientRect().height); if (document.getElementById(‘ours0’)) { document.getElementById(‘ours0’).setAttribute(‘data-oh’, ” + document.getElementById(‘ours0’).getBoundingClientRect().height); } } if ((” + inthis.title).indexOf(‘ong hover’) == -1) { inthis.title+=’ … long hover of 7 seconds keeps background image in place after losing focus’; } else { inthis.title=inthis.title.split(‘ong hover’)[0] + ‘ong hover of 7 seconds keeps background image in place after losing focus’; } … Continue reading →

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

Video to Amended Animated GIF Preview Forever Tutorial

Posted on by

Onto yesterday’s Video to Amended Animated GIF Slide Preview Forever Tutorial, am sure there are a lot of readers out there who’d like … not only the possibility for a preview of individual slide images … but … a preview approximation of the final animated GIF (we decide to offer in non-mobile hover and long hover scenarios for the “delay” textbox) … positioned there because the delay is what makes an animated GIF be the “animation” it is. If you saw this coming, you’ll not be too surprised by the PHP self contained work that complements the “delay” textbox’s onmouseover=prebithis(this); onmouseout=preunbithis(this); new Javascript functionality … <?php echo ” var delaylastiid=”, delayrelatedto=null, delayslidenum=-1, delaythisslide=-1, delaysare=[]; function prenext() { if (delayrelatedto) { if (delaythisslide >= delayslidenum) { delaythisslide=1; document.getElementById(‘delay’).style.backgroundImage=’linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\”‘ + document.getElementById(‘slideshow’).value + ‘\”)’; setTimeout(prenext, eval(” + delaysare[0])); } else { delaythisslide++; document.getElementById(‘delay’).style.backgroundImage=’linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\”‘ + document.getElementById(‘slideshow’ + eval(0 + eval(delaythisslide))).value + ‘\”)’; if (delaythisslide <= delaysare.length) { setTimeout(prenext, eval(” + delaysare[eval(-1 + eval(” + delaythisslide))])); } else { setTimeout(prenext, eval(” + delaysare[0])); } } } } function preanimate(inthis, inthisvalue) { var delaysuff=”; delaysare=inthisvalue.split(‘,’); if (delayslidenum == -1 || 1 == 1) { delayslidenum=-1; while (document.getElementById(‘slideshow’ + delaysuff).value != ”) { if (delayslidenum == -1) { delayslidenum=1; delaysuff=” + eval(1 + eval(” + delayslidenum)); } else { delayslidenum++; delaysuff=” + eval(1 + eval(” + delayslidenum)); } } } delaythisslide=1; setTimeout(prenext, eval(” + delaysare[0])); return document.getElementById(‘slideshow’).value; } function preafterbithis() { if (delayrelatedto) { if (delaylastiid == (” + delayrelatedto.id)) { delaylastiid=”; //delayrelatedto=null; } } else { delaylastiid=”; } } function preinrelatedto() { var thisappi=1; if (delayrelatedto) { if ((” + delayrelatedto.title).indexOf(‘ong hover’) != -1) { var appiwords=(” + delayrelatedto.title).replace(‘ after losing focus’, ‘ after losing focus 0’).split(‘ ‘); delayrelatedto.title+=’ ‘ + eval(1 + eval(appiwords[eval(-1 + appiwords.length)])); if (eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) <= 7) { delayrelatedto.style.border=” + eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) + ‘px dotted yellow’; } setTimeout(preinrelatedto, 1000); } } } function prebithis(inthis) { if (inthis.value.trim() != ”) { if (delayrelatedto) { if ((” + inthis.id) != (” + delayrelatedto.id)) { preunbithis(delayrelatedto); delayrelatedto=null; } } if ((” + inthis.getAttribute(‘data-oh’)).replace(/^undefined$/g,”).replace(/^null$/g,”) == ”) { inthis.setAttribute(‘data-oh’, ” + inthis.getBoundingClientRect().height); } if ((” + inthis.title).indexOf(‘ong hover’) == -1) { inthis.title+=’ … long hover of 7 seconds keeps background image in place after losing focus’; } else { inthis.title=inthis.title.split(‘ong hover’)[0] + ‘ong hover of 7 seconds keeps background image in place after losing focus’; } inthis.style.backgroundImage=’linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\”‘ + preanimate(inthis, inthis.value) + ‘\”)’; inthis.style.height=’80px’; inthis.style.backgroundSize=’contain’; inthis.style.backgroundRepeat=’no-repeat’; inthis.style.backgroundPosition=’right top’; delaylastiid=” + inthis.id; delayrelatedto=inthis; setTimeout(preinrelatedto, 1000); setTimeout(preafterbithis, 7000); } } function preunbithis(inthis) { if (inthis.value.trim() != ” && delaylastiid == (” + inthis.id)) { if ((” + inthis.title).indexOf(‘ong hover’) != -1) { inthis.title=inthis.title.split(‘ong hover’)[0] + ‘ong hover keeps background animated GIF image in place after losing focus’; } if (delayrelatedto) { delayrelatedto=null; } if ((” + inthis.getAttribute(‘data-oh’)).replace(/^undefined$/g,”).replace(/^null$/g,”) != ”) { inthis.style.height=” + inthis.getAttribute(‘data-oh’) + ‘px’; } inthis.style.color=’black’; inthis.style.opacity=’1.0′; inthis.style.background=”; inthis.style.border=”; } } “; ?> … Continue reading →

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

Video to Amended Animated GIF Slide Preview Forever Tutorial

Posted on by

Further to yesterday’s Video to Amended Animated GIF Slide Preview Tutorial … … and then, there’s the idea to leave the image thumbnail there … concept. Wouldn’t you say? But, how to implement this? Well, as for the recent Landing Page Linked Background Images Long Hover Tutorial we figured that the “Long Hover” ideas form that independent and non-interfering (with existent non-mobile functionality) methodology we could look into, so that the “just hover” work became … <?php echo ” var lastiid=”, relatedto=null; function afterbithis() { if (relatedto) { if (lastiid == (” + relatedto.id)) { lastiid=”; relatedto=null; } } else { lastiid=”; } } function inrelatedto() { var thisappi=1; if (relatedto) { if ((” + relatedto.title).indexOf(‘ong hover’) != -1) { var appiwords=(” + relatedto.title).replace(‘ after losing focus’, ‘ after losing focus 0’).split(‘ ‘); relatedto.title+=’ ‘ + eval(1 + eval(appiwords[eval(-1 + appiwords.length)])); if (eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) <= 7) { relatedto.style.border=” + eval(1 + eval(appiwords[eval(-1 + appiwords.length)])) + ‘px dotted yellow’; } setTimeout(inrelatedto, 1000); } } } function bithis(inthis) { if (inthis.value.trim() != ”) { if (relatedto) { if ((” + inthis.id) != (” + relatedto.id)) { unbithis(relatedto); relatedto=null; } } if ((” + inthis.getAttribute(‘data-oh’)).replace(/^undefined$/g,”).replace(/^null$/g,”) == ”) { inthis.setAttribute(‘data-oh’, ” + inthis.getBoundingClientRect().height); } if (inthis.value.indexOf(‘data:’) == 0) { if ((” + inthis.title).indexOf(‘ong hover’) == -1) { inthis.title+=’ … long hover of 7 seconds keeps background image in place after losing focus’; } else { inthis.title=inthis.title.split(‘ong hover’)[0] + ‘ong hover of 7 seconds keeps background image in place after losing focus’; } inthis.style.backgroundImage=’linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\”‘ + inthis.value + ‘\”)’; inthis.style.color=’rgba(240,240,240,0.2)’; inthis.style.height=’80px’; inthis.style.backgroundSize=’contain’; inthis.style.backgroundRepeat=’no-repeat’; inthis.style.backgroundPosition=’right top’; lastiid=” + inthis.id; relatedto=inthis; setTimeout(inrelatedto, 1000); } else if (inthis.value.indexOf(‘.’) != -1) { if ((” + inthis.title).indexOf(‘ong hover’) == -1) { inthis.title+=’ … long hover of 7 seconds keeps background image in place after losing focus’; } else { inthis.title=inthis.title.split(‘ong hover’)[0] + ‘ong hover of 7 seconds keeps background image in place after losing focus’; } inthis.style.backgroundImage=’linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\”‘ + inthis.value + ‘\”)’; inthis.style.height=’80px’; inthis.style.backgroundSize=’contain’; inthis.style.backgroundRepeat=’no-repeat’; inthis.style.backgroundPosition=’right top’; lastiid=” + inthis.id; relatedto=inthis; setTimeout(inrelatedto, 1000); } setTimeout(afterbithis, 7000); } } function unbithis(inthis) { if (inthis.value.trim() != ” && lastiid == (” + inthis.id)) { if ((” + inthis.title).indexOf(‘ong hover’) != -1) { inthis.title=inthis.title.split(‘ong hover’)[0] + ‘ong hover keeps background image in place after losing focus’; } if (relatedto) { relatedto=null; } if ((” + inthis.getAttribute(‘data-oh’)).replace(/^undefined$/g,”).replace(/^null$/g,”) != ”) { inthis.style.height=” + inthis.getAttribute(‘data-oh’) + ‘px’; } inthis.style.color=’black’; inthis.style.opacity=’1.0′; inthis.style.background=”; inthis.style.border=”; } } “; ?> … to, again, accompany the (input type=text) slide textbox onmouseover=bithis(this); onmouseout=unbithis(this); “short hover” event logic callers, to get a taste for what is involved here, in the changed tutorial_to_animated_gif.php our inhouse Animated GIF Creator helper PHP web application. Previous relevant Video to Amended Animated GIF Slide Preview Tutorial is shown below. Keeping to the recent theme of interest in (the non-mobile) “onmouseover” (hover) and “onmouseout” events, today we improve our inhouse Animated GIF Creator helper PHP web application last … Continue reading →

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

Video to Amended Animated GIF Slide Preview Tutorial

Posted on by

Keeping to the recent theme of interest in (the non-mobile) “onmouseover” (hover) and “onmouseout” events, today we improve our inhouse Animated GIF Creator helper PHP web application last talked about with Video to Amended Animated GIF via ffmpeg Tutorial. The reason we think those non-mobile users will enjoy this functionality, if anything like me, is that we might browse for images in a sorted bunch and assume all is well, but that order may not suit in the animated GIF order structure, and here is a mechanism that might help. And so take a look at the changed tutorial_to_animated_gif.php our inhouse Animated GIF Creator helper PHP web application … <?php echo ” function bithis(inthis) { if (inthis.value.trim() != ”) { if ((” + inthis.getAttribute(‘data-oh’)).replace(/^undefined$/g,”).replace(/^null$/g,”) == ”) { inthis.setAttribute(‘data-oh’, ” + inthis.getBoundingClientRect().height); } if (inthis.value.indexOf(‘data:’) == 0) { inthis.style.backgroundImage=’linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\”‘ + inthis.value + ‘\”)’; inthis.style.color=’rgba(240,240,240,0.2)’; inthis.style.height=’80px’; inthis.style.backgroundSize=’contain’; inthis.style.backgroundRepeat=’no-repeat’; inthis.style.backgroundPosition=’right top’; } else if (inthis.value.indexOf(‘.’) != -1) { inthis.style.backgroundImage=’linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\”‘ + inthis.value + ‘\”)’; inthis.style.height=’80px’; inthis.style.backgroundSize=’contain’; inthis.style.backgroundRepeat=’no-repeat’; inthis.style.backgroundPosition=’right top’; } } } function unbithis(inthis) { if (inthis.value.trim() != ”) { if ((” + inthis.getAttribute(‘data-oh’)).replace(/^undefined$/g,”).replace(/^null$/g,”) != ”) { inthis.style.height=” + inthis.getAttribute(‘data-oh’) + ‘px’; } inthis.style.color=’black’; inthis.style.opacity=’1.0′; inthis.style.background=”; } } “; ?> … to accompany the (input type=text) slide textbox onmouseover=bithis(this); onmouseout=unbithis(this); event logic callers, to get a taste for what is involved here. Previous relevant Video iPad Time Lapse Animated GIF via ffmpeg Tutorial is shown below. We wanted to try out a small Time Lapse video … Time-lapse photography is a technique whereby the frequency at which film frames are captured (the frame rate) is much more spread out than the frequency used to view the sequence. When played at normal speed, time appears to be moving faster and thus lapsing. For example, an image of a scene may be captured at 1 frame per second, but then played back at 30 frames per second; the result is an apparent 30 times speed increase. In a similar manner, film can also be played at a much lower rate than it was captured at, slowing down an otherwise fast action, as in slow motion or high-speed photography. … created with the iPad Camera app “Video Time Lapse” option. Small being the operative word. So small in fact, that for a few seconds of video, it is possible to email your video off to an emailee receiver, the tradeoff being that when they play it at many speeds it is likely to play in the jerky fashion … like with our Nala Time Lapse (iPad Camera app created) video below … … which we downloaded to this MacBook Pro that has (the great opensource) ffmpeg installed ready to reconstitute some slides from the video via … $ ffmpeg -i nala_timelapse.mov -r 5 nala_image-%04d.jpeg ffmpeg version 4.1.1 Copyright (c) 2000-2019 the FFmpeg developers built with Apple LLVM version 10.0.0 (clang-1000.11.45.5) configuration: –prefix=/usr/local/Cellar/ffmpeg/4.1.1 –enable-shared –enable-pthreads –enable-version3 –enable-hardcoded-tables –enable-avresample … Continue reading →

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

Landing Page Linked Background Images Long Hover Tutorial

Posted on by

Yesterday’s Landing Page Linked Background Images Tutorial introduced linked background (thumbnail) image “onclick” event logic. Today, we extend, rather than impinge in any way, by adding “long hover” linked background (thumbnail) image functionality, which bases itself on a “short hover + delayed logic” paradigm (via the non-mobile “onmouseover” (or hover) and “onmouseout” events) … var bodyrect=null, lastrid=”; function omstill() { var brect=null; if (lastrid != ”) { var alastrid=lastrid.replace(‘e’,’a’); if ((” + document.getElementById(‘tblr’).style.display).toLowerCase().indexOf(‘none’) == 0) { brect=document.body.getBoundingClientRect(); document.getElementById(‘tblr’).style.position=’absolute’; document.getElementById(‘tblr’).style.left=” + bodyrect.right + ‘px’; document.getElementById(‘tblr’).style.top=’0px’; document.getElementById(‘tblr’).style.height=” + brect.height + ‘px’; document.getElementById(‘tblr’).style.display=’block’; } if (document.getElementById(‘if’ + lastrid)) { document.getElementById(alastrid).target=’if’ + lastrid; document.getElementById(‘if’ + lastrid).src=document.getElementById(alastrid).href; } else if (document.getElementById(” + lastrid)) { if (!brect) { brect=document.getElementById(‘tblr’).getBoundingClientRect(); } document.getElementById(alastrid).target=’if’ + lastrid; document.getElementById(” + lastrid).innerHTML='<iframe style=”width:’ + bodyrect.right + ‘px;’ + ‘height:’ + brect.height + ‘px;” id=if’ + lastrid + ‘ name=if’ + lastrid + ‘ src=”‘ + document.getElementById(alastrid).href + ‘”></iframe>’; } lastrid=”; } } function omright(aois) { lastrid=aois.id.replace(‘a’,’e’); if ((” + aois.title) != ” && (” + aois.title).indexOf(‘ong hover’) == -1) { aois.title+=’ Long hover of 7 seconds on thumbnails opens iframes to right.’; } if ((” + document.getElementById(‘style_3’).title) != ” && (” + document.getElementById(‘style_3’).title).indexOf(‘ong hover’) == -1) { document.getElementById(‘style_3′).title+=’ Long hover of 7 seconds on thumbnails opens iframes to right.’; } setTimeout(omstill, 7000); } function moright(aois) { lastrid=”; } … allowing blog posts to be presented in iframe elements off to the right within the one webpage way of amending … function noandmaybe(iois) { var aconto=null, jps=[]; if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device if (iois != null) { aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { aconto.body.innerHTML=aconto.body.innerHTML.replace(/\#andabit\=\-70/g,”); } } } } if (document.getElementById(‘style_3’) && (” + document.getElementById(‘style_3′).title) == ”) { if (!aconto) { aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } } } var omover=’ onmouseover=”omright(this);” ‘, omout=’ onmouseout=”moright(this);” ‘, bdapp='<table id=tblr style=display:none><tr></tr></table>’; var rdbit=’?rand=’ + Math.floor(Math.random() * 1985676); if (aconto) { if (aconto.body != null) { if (document.getElementById(‘p_style_3’)) { document.getElementById(‘style_3’).innerHTML=document.getElementById(‘p_style_3’).outerHTML.replace(/\.jpg/g, ‘.jpg’ + rdbit); } var hrefs=aconto.body.innerHTML.split(‘ href=’); var style_3r=document.getElementById(‘style_3’).getBoundingClientRect(); document.getElementById(‘style_3′).title=’Feel free to visit thumbnail links to our WordPress Tutorial blog!’; for (var ihrefs=1; ihrefs<hrefs.length; ihrefs++) { //document.body.innerHTML+='<div id=ediv’ + ihrefs + ‘></div>’; bdapp=bdapp.replace(‘</tr>’, ‘<td id=ediv’ + ihrefs + ‘></td></tr>’); jps=hrefs[ihrefs].split(‘.jpeg?rand=’); console.log(jps[0].slice(-9)); if (jps[0].slice(-3).indexOf(‘-‘) != -1) { jps[0]=jps[0].split(‘-‘)[eval(-2 + eval(” + jps[0].split(‘-‘).length))]; } switch (jps[0].slice(-3)) { case ‘ght’: document.body.innerHTML+='<a id=adiv5′ + omover + omout + ‘ target=_blank style=”opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(/PHP/eight.jpg’ + rdbit + ‘);position:absolute;z-index:99;top:’ + style_3r.top + ‘px;width:30px;height:20px;background-color:transparent;left:’ + style_3r.left + ‘px;” title=”‘ + hrefs[ihrefs].substring(1).split(‘ title=’)[1].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + ‘” href=”‘ + hrefs[ihrefs].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + ‘”></a>’; break; case ‘ven’: document.body.innerHTML+='<a id=adiv4′ + omover + omout + ‘ target=_blank style=”opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(/PHP/seven.jpg’ + rdbit + ‘);position:absolute;z-index:99;top:’ + style_3r.top + ‘px;width:30px;height:20px;background-color:transparent;left:’ + eval(eval(eval(style_3r.left + style_3r.right) / 2) – 15) + ‘px;” title=”‘ + hrefs[ihrefs].substring(1).split(‘ title=’)[1].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + ‘” href=”‘ + hrefs[ihrefs].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + ‘”></a>’; break; … Continue reading →

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