WordPress Blog Hashtag Navigation Return Onmouseover Tutorial

WordPress Blog Hashtag Navigation Return Onmouseover Tutorial

WordPress Blog Hashtag Navigation Return Onmouseover Tutorial

There are some nuances to the hashtag navigation algorithms here at this blog we talked about with yesterday’s WordPress Blog Hashtag Navigation Return Tutorial

  • add (just non-mobile) onmouseover and onmouseout mouse event logics to override that 20 second wait before …

    Back to reading …

    … hashtag navigation link to “return to original content” disappears, that goes “as long as you hover” (and this is possible with position:fixed CSS even as you scroll down or up) the “Back to reading …” link will not disappear until a “onmouseout” event, plus 20 seconds, transpires

  • it suits more platforms to change the “Back to reading …” link positioning
  • if you remember the work of Hashtag Navigation Scrolling Tweaks WordPress Tutorial it introduced a “double hashtagging” technique to tweak the hashtag navigation “lobbing onto” scrolling position, which we use to better contextualize the “return to original reading” positioning
  • we extend the wait from 20 seconds to 50 seconds for mobile platforms

… in good ol’ WordPress TwentyTen themed header.php code …


function ahashlook() {
var ahashois = document.getElementsByTagName('a');
var ahashs=[];
var amend=false;
var bhuhih=document.body.innerHTML;
for (var idmjk=0; idmjk<ahashois.length; idmjk++) {
if (('' + ahashois[idmjk].href + '').replace(document.URL.split('#')[0],'').indexOf('#') == 0 && ('' + ahashois[idmjk].outerHTML).indexOf(' onclick=') == -1) {
if (('' + ahashois[idmjk].id).replace(/^null$/g,'') != '') {
amend=true;
bhuhih=bhuhih.replace(' id="' + ahashois[idmjk].id + '"', ' id="' + ahashois[idmjk].id + '" onclick="hashtagreturnp(event);"');
bhuhih=bhuhih.replace('' + ahashois[idmjk].href.replace(document.URL.split('#')[0],'').replace('#andabit=-60','') + '"', '' + ahashois[idmjk].href.replace(document.URL.split('#')[0],'').replace('#andabit=-60','') + '#andabit=-60"');
} else {
amend=true;
bhuhih=bhuhih.replace(ahashois[idmjk].outerHTML, ahashois[idmjk].outerHTML.replace('>', ' id="ahash' + Math.floor(Math.random() * 19876543) + '" onclick="hashtagreturnp(event);">').replace('' + ahashois[idmjk].href.replace(document.URL.split('#')[0],'').replace('#andabit=-60','') + '"', '' + ahashois[idmjk].href.replace(document.URL.split('#')[0],'').replace('#andabit=-60','') + '#andabit=-60"'));
}
}
}
if (amend) {
document.body.innerHTML=bhuhih;
}
}

function hagtagblank() {
if (document.getElementById('aahtreturn').innerHTML != document.getElementById('aahtreturn').innerHTML.trim()) {
//console.log('extending wait');
document.getElementById('aahtreturn').innerHTML=document.getElementById('aahtreturn').innerHTML.replace(/\ \.[\.]*\ $/g, ' ... ');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(hagtagblank, 50000);
} else {

setTimeout(hagtagblank, 20000);
}
} else {
//console.log('unextending wait *' + document.getElementById('aahtreturn').innerHTML + '*');
document.getElementById('ahtreturn').innerHTML='';
}
}

function hashtagendure() {
if (document.getElementById('aahtreturn')) {
if (document.getElementById('aahtreturn').innerHTML.replace(/\ $/g, '') == document.getElementById('aahtreturn').innerHTML) {
document.getElementById('aahtreturn').innerHTML=document.getElementById('aahtreturn').innerHTML.trim() + String.fromCharCode(32);
//console.log('helping extending wait');
}
}
}


function hashtagreturnp(evt) {
var aeleo=evt.target;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('ahtreturn').innerHTML='<a id="aahtreturn" style="position:fixed;
top:50px;left:10px;background-color:yellow;opacity:0.5;display:inline-block;" href="#' + aeleo.id + '#andabit=-60" title="Return to reading via click within 50 seconds (or during 50 seconds after hovering over this link)" onclick="document.getElementById(' + "'" + 'ahtreturn' + "'" + ').innerHTML=' + "'" + '' + "'" + ';" onmouseover="setTimeout(hashtagendure, 5000);" onmouseout="console.log(String.fromCharCode(46) + String.fromCharCode(46) + String.fromCharCode(46)); this.innerHTML=this.innerHTML.trim() + String.fromCharCode(46);">Back to reading ...</a>';
setTimeout(hagtagblank, 50000);
} else {

document.getElementById('ahtreturn').innerHTML='<a id="aahtreturn" style="position:fixed;top:50px;left:10px;background-color:yellow;opacity:0.5;display:inline-block;" href="#' + aeleo.id + '#andabit=-60" title="Return to reading via click within 20 seconds (or during 20 seconds after hovering over this link)" onclick="document.getElementById(' + "'" + 'ahtreturn' + "'" + ').innerHTML=' + "'" + '' + "'" + ';" /font>onmouseover="setTimeout(hashtagendure, 5000);" onmouseout="console.log(String.fromCharCode(46) + String.fromCharCode(46) + String.fromCharCode(46)); this.innerHTML=this.innerHTML.trim() + String.fromCharCode(46);">Back to reading ...</a>';
setTimeout(hagtagblank, 20000);
}
}


Previous relevant WordPress Blog Hashtag Navigation Return Tutorial is shown below.

WordPress Blog Hashtag Navigation Return Tutorial

WordPress Blog Hashtag Navigation Return Tutorial

At this WordPress blog, with its blog posting content, we often have “blog posting threads” that build (and include) the previous day’s work (which itself was a blog posting). If the user arrives, mid-story here, we cater for steps back in time, via “a” element hashtag navigation, the navigation that moves (scrolling wise) in the content of the same original webpage. In yesterday’s Windows AutoHotKey Dynamic Compile Procedure Program Tutorial we also included a …

<a href=”#myul” title=”Conditions”>many stars aline</a>

… that referenced a previous day’s block of content (and am sure you can forgive us not constantly repeating that content, always). But supposing we have a user clicking this “a” element who quickly “takes in” that information (the scrolling to which has made your original content “reading position” disappear “above the fold”, in all likelihood) and is ready within, say, twenty seconds, to rejoin the original piece of text they diverted from, via that hashtag navigation, wouldn’t it be good to offer that user a dynamically added …


<a style="position:fixed;top:100px;left:100px;background-color:yellow;opacity:0.5;display:inline-block;" href="#ahash9215371" title="Return to reading ..." onclick="document.getElementById('ahtreturn').innerHTML='';">Back to reading ...</a>

… type of new “a” element hashtag navigating element to optionally facilitate the return to the original content “reading place”?

To make this happen we introduced, in good ol’ TwentyTen themed header.php code, a new document.body “onload” event Javascript function


<body onload=" ahashlook(); ">

… calling on a new “static” div element …


<div id="ahtreturn"></div>

… framework to work with, with the new Javascript code …


function ahashlook() {
var ahashois = document.getElementsByTagName('a');
var ahashs=[];
var amend=false;
var bhuhih=document.body.innerHTML;
for (var idmjk=0; idmjk<ahashois.length; idmjk++) {
if (('' + ahashois[idmjk].href + '').replace(document.URL.split('#')[0],'').indexOf('#') == 0 && ('' + ahashois[idmjk].outerHTML).indexOf(' onclick=') == -1) {
console.log('1:' + ahashois[idmjk].outerHTML);
if (('' + ahashois[idmjk].id).replace(/^null$/g,'') != '') {
console.log(ahashois[idmjk].outerHTML);
amend=true;
bhuhih=bhuhih.replace(' id="' + ahashois[idmjk].id + '"', ' id="' + ahashois[idmjk].id + '" onclick="hashtagreturnp(event);"');
} else {
amend=true;
console.log('3:' + ahashois[idmjk].outerHTML);
bhuhih=bhuhih.replace(ahashois[idmjk].outerHTML, ahashois[idmjk].outerHTML.replace('>', ' id="ahash' + Math.floor(Math.random() * 19876543) + '" onclick="hashtagreturnp(event);">'));
}
}
}
if (amend) {
document.body.innerHTML=bhuhih;
}
}


function hagtagblank() {
document.getElementById('ahtreturn').innerHTML='';
}

function hashtagreturnp(evt) {
var aeleo=evt.target;
document.getElementById('ahtreturn').innerHTML='<a style="position:fixed;top:100px;left:100px;background-color:yellow;opacity:0.5;display:inline-block;" href="#' + aeleo.id + '" title="Return to reading ..." onclick="document.getElementById(' + "'" + 'ahtreturn' + "'" + ').innerHTML=' + "'" + '' + "'" + ';">Back to reading ...</a>';
setTimeout(hagtagblank, 20000);
}

… which had us ending up with, what we see as, a better “a” element hashtag navigating element that looks something like …

<a href=”#myul” title=”Conditions” id=”ahash9215371″ onclick=”hashtagreturnp(event);”>many stars aline</a>

… introducing new “onclick” event logic checks.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>