{"id":58164,"date":"2023-01-27T03:01:06","date_gmt":"2023-01-26T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=58164"},"modified":"2023-01-27T07:02:32","modified_gmt":"2023-01-26T21:02:32","slug":"wikipedia-colour-coded-mark-through-links-long-hover-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wikipedia-colour-coded-mark-through-links-long-hover-tutorial\/","title":{"rendered":"Wikipedia Colour Coded Mark Through Links Long Hover Tutorial"},"content":{"rendered":"
\"Wikipedia<\/a>

Wikipedia Colour Coded Mark Through Links Long Hover Tutorial<\/p><\/div>\n

Yesterday’s Wikipedia Colour Coded Mark Through Links Tutorial<\/a> introduced us to three …<\/p>\n

\nongoing\n<\/p><\/blockquote>\n

… modes of use for our changed<\/a> “fourth draft” PHP wiki_mark_eight.php<\/a> web application<\/a> we hope you are interested in (re-)trying, perhaps below<\/a>.<\/p>\n

Onto those “ongoing” (options) modes of use scenarios, today, we introduce another “layer of navigation”, if you will, gotten to by what we like to refer to as “long hover” logic. Alas, only for non-mobile use, this calls on both “onmouseover” and “onmouseout” event logic introduced today with<\/font> …<\/p>\n

<?php
\n
\n if ($postub != \"\") {
\n $inth=str_replace(\" href='\/wiki\/\", ' onmouseover=\"if (window.opener) { sretis=window.opener.startlhc(this.href); } else { parent.startlhc(this.href); }\" onmouseout=\"if (window.opener) { sretis=window.opener.quitlhc(); } else { parent.quitlhc(); }\"' . <\/font>\" href='\" . $postub, $inth);
\n $inth=str_replace(' href=\"\/wiki\/', ' onmouseover=\"if (window.opener) { sretis=window.opener.startlhc(this.href); } else { parent.startlhc(this.href); }\" onmouseout=\"if (window.opener) { sretis=window.opener.quitlhc(); } else { parent.quitlhc(); }\"<\/font> href=\"' . $postub, $inth);
\n $inth=str_replace(\"'\/wiki\/\", \"'\" . $postub, $inth);
\n $inth=str_replace('\"\/wiki\/', '\"' . $postub, $inth);
\n }
\n<\/code>
\n?><\/p>\n

… which you may notice needs to differentiate logic via two steams of use …<\/p>\n

    \n
  1. navigate to new Wikipedia content in new window … the default … and using “window.opener.[JavascriptFunction]” based logic … versus …<\/li>\n
  2. navigate to new Wikipedia content within an incorporated child iframe … and using “parent.[JavascriptFunction]” based logic<\/li>\n<\/ol>\n

    … in which the “new window” scenario required changes at the HTML form element “onsubmit” event logic to establish that window.opener existence scenario, as and when possible, as per HTML<\/font> …<\/p>\n

    <?php echo ”
    \n
    \n<form onsubmit=\\\" if (place != '_blank') { document.getElementById('below').style.display='block'; document.body.style.cursor='progress'; } return maybe(<\/font>true, this)<\/font>; \\\" id=myform target=_blank action=http:\/\/\" . $_SERVER['SERVER_NAME'] . str_replace(\":80\",\"\",str_replace(\":443\",\"\",\":\" . $_SERVER['SERVER_PORT'])) . explode('#',explode('?',$_SERVER['REQUEST_URI'])[0])[0] . \" method=GET>
    \n ... innerHTML of the form goes here ...
    \n<\/form>
    \n<\/code>
    \n“; ?><\/p>\n

    … calling on new Javascript maybe function<\/font> and other parent-child relevant functions (that could “fill in the gaps” with that first code excerpt, today) …<\/p>\n

    <?php echo ”
    \n
    \n<script type='text\/javascript'>
    \n var woone=null, wotwo=null, place='_blank';
    \n
    \n function maybe(intr, myf) {
    \n if (('' + myf.method).toUpperCase() == 'GET') {
    \n if (document.getElementById('mysub').title != '') {
    \n if (place == '_blank') {
    \n if (document.getElementById('dongoing').innerHTML.trim() == '') {
    \n wotwo=window.open(document.URL.split('?')[0].split('#')[0] + '?place=_blank&okst=y&letlen=' + lastlen + '&protocol=http%3A%2F%2F&lang=' + encodeURIComponent(document.getElementById('lang').value) + '&afterlang=.wikipedia.org%2Fwiki%2F&url=' + encodeURIComponent(document.getElementById('url').value), '_blank');
    \n } else {
    \n wotwo=window.open(document.URL.split('?')[0].split('#')[0] + '?place=_blank&ongoing=y&letlen=' + lastlen + '&okst=y&protocol=http%3A%2F%2F&lang=' + encodeURIComponent(document.getElementById('lang').value) + '&afterlang=.wikipedia.org%2Fwiki%2F&url=' + encodeURIComponent(document.getElementById('url').value), '_blank');
    \n }
    \n return false;
    \n }
    \n }
    \n }
    \n return intr;
    \n }<\/font>
    \n
    \n function countlhc() {
    \n if (longhoverurl != '') {
    \n longhovercount++;
    \n setTimeout(countlhc, 1000);
    \n }
    \n }
    \n

    \n function windowopen(p1, p2, p3) {
    \n setTimeout(detc, 3000);
    \n if (woone) {
    \n if (!woone.closed) {
    \n try {
    \n if ('' + woone.innerWidth != '' + fivehundredw) {
    \n document.getElementById('dnwa').innerHTML=document.getElementById('dnwa').innerHTML.replace('width=' + fivehundredw, 'width=' + woone.innerWidth);
    \n fivehundredw='' + woone.innerWidth;
    \n }
    \n if ('' + woone.innerHeight != '' + fivehundredh) {
    \n document.getElementById('dnwa').innerHTML=document.getElementById('dnwa').innerHTML.replace('height=' + fivehundredh, 'height=' + woone.innerHeight);
    \n fivehundredh='' + woone.innerHeight;
    \n }
    \n } catch(ert) { woone=woone; }
    \n woone.close();
    \n woone=null;
    \n }
    \n }
    \n woone=window.open(p1, p2, p3);
    \n }
    \n
    \n function detc() {
    \n document.getElementById('mydetail').open=false;
    \n }
    \n
    \n function quizlhc() {
    \n return woone;
    \n }
    \n
    \n function endlhc() {
    \n if (eval('' + longhovercount) >= 7 && longhoverurl != '') {
    \n longhovercount=0;
    \n if (document.getElementById('piframe') && document.getElementById('mya')) {
    \n document.getElementById('mya').href=longhoverurl;
    \n document.getElementById('mya').innerHTML=decodeURIComponent(longhoverurl.split('&url=')[1]).replace(\/\\_\/g,' ');
    \n document.getElementById('piframe').src=longhoverurl;
    \n if (woone) {
    \n if (!woone.closed) {
    \n try {
    \n if ('' + woone.innerWidth != '' + fivehundredw) {
    \n document.getElementById('dnwa').innerHTML=document.getElementById('dnwa').innerHTML.replace('width=' + fivehundredw, 'width=' + woone.innerWidth);
    \n fivehundredw='' + woone.innerWidth;
    \n }
    \n if ('' + woone.innerHeight != '' + fivehundredh) {
    \n document.getElementById('dnwa').innerHTML=document.getElementById('dnwa').innerHTML.replace('height=' + fivehundredh, 'height=' + woone.innerHeight);
    \n fivehundredh='' + woone.innerHeight;
    \n }
    \n } catch(ert) { woone=woone; }
    \n document.getElementById('nwa').click();
    \n }
    \n }
    \n } else {
    \n document.getElementById('mytable').style.backgroundColor='#f9f9f9';
    \n document.getElementById('tdright').innerHTML='<details id=mydetail><summary id=mysummary>&nbsp;&nbsp;<a id=mya target=_blank href=' + longhoverurl + '>' + decodeURIComponent(longhoverurl.split('&url=')[1]).replace(\/\\_\/g,' ') + '<\/a>&nbsp;&nbsp;<div id=dnwa style=display:inline-block;><a id=nwa onclick=\\\"event.stopPropagation(); windowopen(document.getElementById(' + \\\"'\\\" + 'mya' + \\\"'\\\" + ').href.replace(' + \\\"'\\\" + '?' + \\\"'\\\" + ',' + \\\"'\\\" + '?okst=y&' + \\\"'\\\" + '),' + \\\"'\\\" + '_blank' + \\\"'\\\" + ',' + \\\"'\\\" + 'top=300,left=100,height=' + fivehundredh + ',width=' + fivehundredw + \\\"'\\\" + ');\\\" title=\\\"In new window\\\">&#129695;<\/a><\/div><\/summary>&nbsp;&nbsp;<iframe id=piframe src=' + longhoverurl + ' style=width:600px;height:600px;><\/iframe><\/details>';
    \n if (window.opener) {
    \n \/\/alert(1);
    \n window.opener.focus();
    \n } else {
    \n \/\/alert(11);
    \n window.focus();
    \n }
    \n }
    \n longhoverurl='';
    \n }
    \n }
    \n
    \n function clicklhc() {
    \n if (document.getElementById('nwa') && !woone) { document.getElementById('nwa').click(); }
    \n return ''; \/\/window.focus();
    \n }
    \n
    \n function quitlhc() {
    \n longhovercount=0;
    \n longhoverurl='';
    \n return ''; \/\/window.focus();
    \n }
    \n

    \n function startlhc(inlh) {
    \n if (inlh.trim().indexOf('&url=') != -1) {
    \n longhovercount=0;
    \n longhoverurl=inlh;
    \n setTimeout(endlhc, 12000);
    \n setTimeout(countlhc, 1000);
    \n if (!document.getElementById('mya')) {
    \n return longhoverurl;
    \n } else {
    \n return '';
    \n }
    \n }
    \n return '';
    \n }
    \n<\/script>
    \n<\/code>
    \n“; ?><\/p>\n

    … and needing extra (pretty independent) Javascript logic to help with the window focus issues at the Wikipedia<\/a> content window webpage as per<\/font> …<\/p>\n

    <?php
    \n
    \n $scrst=\"<scr\" . \"ipt type=text\/javascript>
    \n

    \n var sretis='', sreturl='';
    \n var newwo=null;
    \n

    \n function sistuffis() {
    \n if (sretis.trim().length > 0) {
    \n sreturl=sretis;
    \n \/\/document.title='checking ...';
    \n sretis=' ';
    \n setTimeout(presistuffend, 12100);
    \n setTimeout(sistuffend, 13000);
    \n }
    \n }
    \n

    \n function presistuffend() {
    \n if (sretis == ' ') {
    \n if (!window.opener.quizlhc() && !newwo) {
    \n window.opener.clicklhc();
    \n }
    \n }
    \n }
    \n

    \n function sistuffend() {
    \n if (sretis == ' ') {
    \n siretis='';
    \n \/\/document.title='refocussing ...';
    \n if (!window.opener.quizlhc() && !newwo) {
    \n newwo=window.open(sreturl,'_blank','top=320,left=120,width=600,height=600');
    \n } else if (!window.opener.quizlhc()) {
    \n window.opener.postMessage(
    \n {
    \n message: \\\"focus\\\",
    \n },
    \n \\\"*\\\" \/\/ cross-origin
    \n ); \/\/ window.opener.focus();
    \n }
    \n }
    \n }
    \n

    \n if (window.opener) {
    \n setInterval(sistuffis, 1000);
    \n }
    \n

    \n <\/scri\" . \"pt>\";<\/font>
    \n<\/code>
    \n?><\/p>\n

    … in order to allow the propagation of any\/all …<\/p>\n

      \n
    1. ongoing<\/li>\n
    2. long hover (into 🪟 ( ie. &#129695; ) new popup window or details\/summary hosted iframe presentation styles)<\/font><\/li>\n
    3. colour coded “mark” lists<\/li>\n<\/ol>\n

      … logic sets through Wikipedia content windows once you first show an interest in that relevant mode of use.<\/p>\n

      Did you know?<\/i><\/b><\/p>\n

      Though it’s a tad unwieldy, it pans out that the “long hover” functionality above can work on mobile platforms. You just hold your touch down on Wikipedia links for that 12 seconds that turns a “hover” into a “long hover” (in our current wooooooorrrrrrllllllddddd view)<\/font> and release to see the 🪟 ( ie. &#129695; ) new popup window or details\/summary hosted iframe presentation styles presented to you.<\/p>\n

      \n

      \n

      Previous relevant Wikipedia Colour Coded Mark Through Links Tutorial<\/a> is shown below.<\/p>\n

      \"Wikipedia<\/a>

      Wikipedia Colour Coded Mark Through Links Tutorial<\/p><\/div>\n

      You might be figuring that judging by today’s blog posting topic, adding to yesterday’s Wikipedia Mark Language Tutorial<\/a>, that …<\/p>\n