Tag Archives: onmouseover

Landing Page Linked Background Images Long Hover Hashtag Tutorial

Posted on by

Maybe you remember … Landing Page Linked Background Images Long Hover Tutorial … and … WordPress Blog Hashtag Navigation Return Onmouseover Tutorial ? Ideas from each, combine, today, to add some “hashtag navigational smarts” to our recently added “multiple background image” driven places whereby navigation can happen rightwards from our RJM Programming Landing Page to our RJM Programming I.T. WordPress Blog. Before the changes, a “long hover” on one of these Landing Page background (thumbnail) images would have opened a new HTML iframe element to the right, but not do any hashtag navigating to ensure that that iframe (element) was “front and center”. Well, today, we remedy that via code changes … 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)) { if (!document.getElementById(‘aahtreturn’)) { document.getElementById(‘bleft’).innerHTML+='<a id=”aahtreturn” style=”text-decoration:underline;z-index:209;position:fixed;top:70px;left:60px;background-color:yellow;opacity:0.5;display:inline-block;” onclick=”document.getElementById(‘ + “‘” + ‘bleft’ + “‘” + ‘).scrollIntoView({inline: ‘ + “‘” + ‘start’ + “‘” + ‘});” href=”#bleft”>Back to Landing Page …</a>’; } document.getElementById(alastrid).target=’if’ + lastrid; document.getElementById(‘if’ + lastrid).src=document.getElementById(alastrid).href; location.href=’#’ + lastrid; } else if (document.getElementById(” + lastrid)) { if (!brect) { brect=document.getElementById(‘tblr’).getBoundingClientRect(); } if (!document.getElementById(‘aahtreturn’)) { document.getElementById(‘bleft’).innerHTML+='<a id=”aahtreturn” style=”text-decoration:underline;z-index:209;position:fixed;top:70px;left:60px;background-color:yellow;opacity:0.5;display:inline-block;” onclick=”document.getElementById(‘ + “‘” + ‘bleft’ + “‘” + ‘).scrollIntoView({inline: ‘ + “‘” + ‘start’ + “‘” + ‘});” href=”#bleft”>Back to Landing Page …</a>’; } 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>’; location.href=’#’ + lastrid; } lastrid=”; } } … with an effect whereby you might see a new “Back to Landing Page …” ( CSS style position:fixed; ) “a” link with its href attribute filled in as “#bleft” to hashtag navigate the user back from the right hand side Blog information to the left hand side Landing Page “caller” information (where the background images come back into the field of view). Previous relevant Landing Page Linked Background Images Long Hover Tutorial is shown below. 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)

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

WordPress Calendar Widget Destination Webpage Image Background Tutorial

Posted on by

Yesterday’s WordPress Calendar Widget Table Cell Tutorial Image Background Tutorial highlights a talking point regarding webpage functionality … there is the flagging that “functionality is there” phase of webpage development … maybe almost as important as … the “functionality itself working” phase of webpage development Alas, mobile platforms not having an onhover feel to showing an HTML element’s title attribute have made the former “functionality is there” flagging harder (than it should be) to achieve, sometimes. Over time, though, we have often found solace here with the “placeholder” attribute with textboxes and various “short period” ideas. We’re not complaining, as much as trying to get the point across, that doing productive office work which involves webpages, is likely to be a lot easier and more self explanatory on a laptop rather than a mobile device. And it’s not just this aspect where this is the case. Ajax via the onmouseover (ie. hover) event is not a mobile friendly thing. But, of course, the big counter argument, is that there are mobile apps designed for your bespoke purposes. The question is, do you want hundreds of bespoke applications that could be solved via a few generic web applications designed for use on your office laptops or desktops? Yesterday’s work helped flag what you might expect next, at least if you click that “a” link embedded within the “td” cell element. You get to … that date’s summary of relevant blog postings … which a user might now expect … as happens as of today … some background images showing tutorial pictures … possible because of that 404.php functionality … and then we realized it would be good to extend that to all of … a search list of tutorial blog post summaries … or … a category list of tutorial blog post summaries … or … a tag list of tutorial blog post summaries … or … a monthly list of tutorial blog post summaries … which got us to (PHP code), in (good ol’) header.php, first off, down in the HTML before div id=main definition … <?php $mypre=”; $mysuff=”; if (strlen($stylebitapp) > 0) { $mypre='<div id=”divnthcss”>’; $mysuff='</div>’; } echo str_replace(‘<style>’,'<!–style>’,str_replace(‘</style>’,'</style–>’,$mypre . $stylebitapp . $mysuff)); ?> … and just below “<style>” … <style> <?php $stylebitapp=’ <style> .entry-summary { background: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),url(//www.rjmprogramming.com.au/ITblog/1000/1000/?random=4575657&mustbedated=) center center no-repeat; background-size:cover; background-color:white; text-shadow: 1px 1px 2px #ff2d95; } .entry-utility { background: linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url(//www.rjmprogramming.com.au/ITblog/1000/1000/?random=4575657&mustbedated=) center right no-repeat; background-size:contain; background-color:white; text-shadow:

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