{"id":16798,"date":"2015-08-26T05:01:19","date_gmt":"2015-08-25T19:01:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=16798"},"modified":"2015-08-26T14:06:35","modified_gmt":"2015-08-26T04:06:35","slug":"external-javascript-genericity-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-genericity-primer-tutorial\/","title":{"rendered":"External Javascript Genericity Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"External Javascript Genericity Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ExternalJavascriptGenerics.jpg\" title=\"External Javascript Genericity Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">External Javascript Genericity Primer Tutorial<\/p><\/div>\n<p>We want to talk about some External Javascript usage tactics today in the context of toggling the HTML <a target=_blank title='HTML sup tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_sup.asp'>sup<\/a> element&#8217;s .innerHTML (ie. wording) specifically (we&#8217;ll explain why, later).  External Javascript (as distinct from &#8220;inline&#8221; or Internal Javascript) gathers your client side logic from files loaded into the &lt;head&gt; &#8230; &lt;\/head&gt; header section of your HTML via an HTML <a target=_blank title='HTML script tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_script.asp'>script<\/a> tag element containing a src= parameter pointing to where to find the External Javascript file.  But is that all?  Please read on.<\/p>\n<p>External Javascript (which we first really talked about, and contrasted to Internal Javascript, here at this blog with <a target=_blank title='PHP + JavaScript + HTML Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-+-javascript-+-html-primer-tutorial\/'>PHP + JavaScript + HTML Primer Tutorial<\/a>) is a good way to go for some pretty obvious and maybe a bit less obvious reasons, respectively &#8230;<\/p>\n<ol>\n<li>External Javascript increases code modularity &#8230; and then perhaps less obviously &#8230;<\/li>\n<li>External Javascript usage can increase genericity, which we hope to illustrate today, by highlighting the interplay and relationship the called External Javascript has with its calling HTML (or PHP or ASP.Net or whatever else you use to code web pages)<\/li>\n<\/ol>\n<p>Today&#8217;s External Javascript calls into play &#8230;<\/p>\n<ol>\n<li>the calling address bar URL (ie. document.URL) &#8211; examining &#8230;\n<ul>\n<li>the name of the calling HTML (ie. the underscore separated parts after &#8220;longhover&#8221; for HTML tag and\/or long hover period (in seconds))<\/li>\n<li>the query string of this URL (ie. the GET parameters after ? and separated by &#038; looking for &#8220;tag=&#8221; or &#8220;from=&#8221; or &#8220;to=&#8221; or &#8220;period=&#8221;)<\/li>\n<\/ul>\n<\/li>\n<li>the way the external Javascript is called (ie. document.head.innerHTML) &#8211; examining &#8230;\n<ul>\n<li>the name of the called external Javascript (ie. the underscore separated parts after &#8220;longhover&#8221; for HTML tag and\/or long hover period (in seconds))<\/li>\n<li>the query string of this called Javascript (ie. (optional (you don&#8217;t often see their use)) bits after ? and separated by &#038; looking for &#8220;tag=&#8221; or &#8220;from=&#8221; or &#8220;to=&#8221; or &#8220;period=&#8221;)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Using all these thoughts above, similarly as for when we talked about how PHP glob can (perhaps inadvertently) help modularity and genericity on the server side (with <a target=_blank title='PHP Modularization for Lighthouses in Australia Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-modularization-for-lighthouses-in-australia-tutorial\/'>PHP Modularization for Lighthouses in Australia Tutorial<\/a>), so External Javascript usage maximises the potential to be modular and generic on the client side because with today&#8217;s HTML source code <a target=_blank title='longhover_sup.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.html_GETME'>longhover_sup.html<\/a> supervision of today&#8217;s <a target=_blank title='longhover_sup.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.js_GETME'>longhover_sup.js<\/a> External Javascript source code all of &#8230;<\/p>\n<ol>\n<li>name of HTML file<\/li>\n<li>way HTML is called by web browser<\/li>\n<li>name of External Javascript file<\/li>\n<li>way External Javascript is called by the HTML<\/li>\n<\/ol>\n<p> &#8230; can be used to tailor a solution to the particular business logic needs of your web application.  This &#8220;proof of concept&#8221; (standalone, unit testable) web application you can also try as a <a target=_blank title='longhover_sup.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.html'>live run<\/a>.<\/p>\n<p>This work also highlights another thought, that of what we Land Surveyors used to say &#8220;leave things as you left them&#8221;, even if you are in a paddock entertaining curious cows (by setting up the bright yellow tripods required for a survey traverse) and you leaving (the paddock) makes them a tad sad.  What we mean by this is that there are nuances to event logic that are better than others to implement at a later date, and those are ones that just add to functionality, and do not expect the user to change their old ways to achieve things, nor change the things those old event logics do.  So, in this respect, here, we stretch the onmouseover (and ontouchstart) event to be differentiated into &#8230;<\/p>\n<ul>\n<li>the default normal &#8220;short&#8221; hover &#8230; the old way that continues on as it was doing all that it used to do &#8230; but making these events &#8220;stretch&#8221; to cover &#8230;<\/p>\n<li> your new &#8220;long&#8221; hover (the delay of which can be parameterizable by &#8220;period=&#8221; and\/or a numerical underscore file namimg convention, as talked about above) functionality to allow this toggling of the HTML sup element&#8217;s .innerHTML (ie. its wording)<\/li>\n<\/ul>\n<p>And so why dream up the &#8220;longhover_sup&#8221; idea?  It was to solve a little issue on this WordPress Blog from the day two days ago we created <a href='#wbasfut' title='WordPress Blog Alphabetical Search Follow Up Tutorial'>WordPress Blog Alphabetical Search Follow Up Tutorial<\/a> as shown below.  In that tutorial we added an HTML sup tag to flag a link to control alphabetical blog posting sorts.<\/p>\n<p>So why does longhover_sup.js help here with this WordPress issue?  Well, we didn&#8217;t have much room to add any more HTML elements, and this approach could be used to make the necessary functional niceties to offer both forward and backward sorting without first having to do a forward sort, necessarily, and not affect any of the other existant good logic, adversely.<\/p>\n<p>In our defence, that we don&#8217;t practice much of what we preach above, is that we, at this blog, try to keep explanations as much as possible to single bits of code, such as HTML .htm[l] or PHP .php (and to a lesser extent ASP.Net .aspx), that are in the one place &#8230; here and now, though, we encourage you just to think of this as a guide and hive off the &#8220;inline&#8221; Javascript we show to external Javascript for some of the advantageous reasons as talked about above.<\/p>\n<p>So we need to show you how this got integrated into our WordPress TwentyTen themed blog in good old header.php &#8230;<\/p>\n<p><code><br \/>\n&lt;script type=\"text\/javascript\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.js?period=5000&from=+&to=-\"&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and you can try this out by looking to your right in the Search TextBox area, and doing some Long Hovering <strike>man<\/strike> person.<\/p>\n<hr>\n<p id='wbasfut'>Previous relevant <a target=_blank title='WordPress Blog Alphabetical Search Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-alphabetical-search-follow-up-tutorial\/'>WordPress Blog Alphabetical Search Follow Up Tutorial<\/a><\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/AlphaSearch.gif\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Blog Alphabetical Search Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/AlphaSearch.gif\" title=\"WordPress Blog Alphabetical Search Follow Up Tutorial\"   \/><\/a><p class=\"wp-caption-text\">WordPress Blog Alphabetical Search Follow Up Tutorial<\/p><\/div>\n<p>Yesterday, with <a target=_blank title='WordPress Blog Alphabetical Search Primer Tutorial' href='#wbaspt'>WordPress Blog Alphabetical Search Primer Tutorial<\/a> as shown below, for the WordPress Blog such as this TwentyTen themed one, we added Alphabetical Search results complimenting the Date Modified list WordPress creates for you as a default.<\/p>\n<p>We hooked into the Oldest Link inspired PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/gotoend.php--GETME\" title=\"gotoend.php\">gotoend.php<\/a> (changed as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/gotoend.php--GETME\" title=\"gotoend.php\">this link<\/a>, from yesterday&#8217;s efforts) and you will see in it the use of @<a target=_blank title='file-get_contents PHP method information' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents<\/a> PHP method where the @ suppresses immediate output, and so is useful, as is this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/272361\/how-can-i-handle-the-warning-of-file-get-contents-function-in-php'>link<\/a> &#8230; thanks.<\/p>\n<p>As a first draft, that was fine, but, as you&#8217;d expect, and probably will forever, there are ways to improve, like, making it more obvious where the user gets to this functionality.  To do this, we did a small &#8220;wave wildly at the user&#8221; and say &#8220;yoo hoo, over here&#8221;, by using the HTML <a target=_blank title='HTML sup tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_sup.asp'>sup<\/a> tag over the &#8220;h&#8221; (for Highlighted Search) and &#8220;a&#8221; (for Alphabetical Search) &#8230; in the case for the &#8220;a&#8221; HTML sup tag we make it a &#8220;+&#8221; for sorting alphabetically ascending and &#8220;-&#8221; for sorting alphabetically descending &#8230; because what goes up, must come down &#8230; unless you are signed up for the space station as a <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Virgin_Galactic' title='Virgin Galactic information from Wikipedia ... thanks'>Virgin<\/a> customer!<\/p>\n<p>Our contextual help Javascript source code (all in the one place) can be downloaded by <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js------------------GETME' title='wajax.js'>wajax.js<\/a> which changed as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js------------------GETME' title='wajax.js'>wajax.js<\/a> for these modifications today, and to do with an annoying bug we had, you might be pleased to hear?!<\/p>\n<p>The place (WordPress Blog TwentyTen theme&#8217;s header.php) where the new functionality can be accessed changes as per the <b><i>bold itallics<\/i><\/b> (and yesterday&#8217;s <b>bold<\/b>) below &#8230;<\/p>\n<p><code><br \/>\nformihis = document.getElementById('searchform').innerHTML.replace(\"&lt;\/div&gt;\", tagselis + catselis + \"&lt;input style='display:none;' type='radio' name='stype' value=''&gt;&lt;input <b><i>title='Traditional WordPress search ...'<\/i><\/b> style='margin-left:-2px;' onclick=\\\"radiocc('Search');\\\" type='radio' name='stype' value='Search'&gt;Se<b>&lt;a title='<i> ... welcome to the long hover functionality that shows Blog Post regarding Alphabetical Search Functionality'<\/i> href='#searchform' onclick='alphabeticaltest();' <i>onmouseover='getAlphabeticalSearch();' onmouseout='yehBut();' ontouchstart='getAlphabeticalSearch();' ontouchend='yehBut();'<\/i>&gt;&lt;font color=red&gt;<\/b>a<b><i>\" + getsupalpha + \"<\/i>&lt;\/font&gt;&lt;\/a&gt;<\/b>rc&lt;a title='<b><i> ... welcome to the long hover functionality that shows Blog Post regarding Highlighted Search Functionality<\/i><\/b>' href='#searchform' onclick='highlighttest();' onmouseover='getHighlightedSearch();' onmouseout='yehBut();' ontouchstart='getHighlightedSearch();' ontouchend='yehBut();'&gt;&lt;font color=orange&gt;h<b><i>\" + getsuphl + \"<\/i><\/b>&lt;\/font&gt;&lt;\/a&gt;&nbsp;&nbsp;&lt;input <b><i>title='Popular WordPress Tag in TextBox above search ...'<\/i><\/b> onclick=\\\"radiocc('Tag');\\\" type='radio' name='stype' value='Tag'&gt;&nbsp;&nbsp;&lt;a onclick=\\\"ovput('Tag');\\\" title=\\\"Overlay Tag dropdown ...\\\" href=\\\"#tagselis\\\"&gt;Tag&lt;\/a&gt;&nbsp;&nbsp;&lt;input <b><i>title='WordPress Category (number) in TextBox above search ...'<\/i><\/b> onclick=\\\"radiocc('Category');\\\" type='radio' name='stype' value='Category'&gt;&nbsp;&nbsp;&lt;a onclick=\\\"ovput('Category');\\\" title=\\\"Overlay Category dropdown ...\\\" href=\\\"#catselis\\\"&gt;Category&lt;\/a&gt;<b>\" + getalpha + \"<\/b>&lt;select id='seltc' style='display:none;' onchange=\\\"window.open(this.value,'_blank');\\\" size='1'&gt;&lt;option value=''&gt;Blog Postings below ...&lt;\/option&gt;&lt;\/select&gt;&lt;\/div&gt;\");<br \/>\n<\/code><\/p>\n<p> &#8230; and the PHP function helper methods involving displaying results (got more involved) &#8230;<\/p>\n<p><code><br \/>\n<b><i><br \/>\nvar wasaction=\"\";<br \/>\n&lt;?php echo \"\\n var getsupalpha='\" . getsupalphabetical(false) . \"'; \\n\"; ?&gt;<br \/>\n&lt;?php echo \"\\n var getsuphl='\" . getsuphighlight() . \"'; \\n\"; ?&gt;<br \/>\n<\/i><br \/>\n&lt;?php echo \"\\n var getalpha='\" . getalphabetical() . \"'; \\n\";<br \/>\nfunction getalphabetical() {<br \/>\n $aret = \"\";<br \/>\n if (file_exists(\"localsearch_\" . my_t_d_server_remote_addr() . \".yzy\")) {<br \/>\n  $aret = file_get_contents(\"localsearch_\" .  my_t_d_server_remote_addr()  . \".yzy\");<br \/>\n  if (isset($_GET['orbyder'])) unlink(\"localsearch_\" .  my_t_d_server_remote_addr()  . \".yzy\");<br \/>\n }<br \/>\n return $aret;<br \/>\n}<br \/>\n<i><br \/>\nfunction getsupalphabetical($getih) {<br \/>\n $aret = \"&lt;sup id=supalpha&gt;+&lt;\/sup&gt;\";<br \/>\n if (isset($_GET['reverse'])) {<br \/>\n  $aret = \"&lt;sup id=supalpha&gt;-&lt;\/sup&gt;\";<br \/>\n }<br \/>\n if ($getih) return str_replace(\"&lt;sup id=supalpha&gt;\", \"\", str_replace(\"&lt;\/sup\", \"\", $aret));<br \/>\n return $aret;<br \/>\n}<br \/>\nfunction getsuphighlight() {<br \/>\n $aret = \"&lt;sup&gt;^&lt;\/sup&gt;\";<br \/>\n return $aret;<br \/>\n}<br \/>\n<\/i><br \/>\n?&gt;<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; and the PHP onload event code needed to be tweaked &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction muchlater() {<br \/>\n  location.href=document.URL.replace(\"byorder=\", \"orbyder=\");<br \/>\n}<\/b><br \/>\nfunction precc() { \/\/ wopenall= functionality<br \/>\n&lt;?php<br \/>\n<b><i><br \/>\n var wa=wasaction;<br \/>\n if (wasaction == \"\") {<br \/>\n   document.getElementById('s').style.width='55%';<br \/>\n   wasaction=document.getElementById('searchform').action;<br \/>\n }<\/i><br \/>\n if ((isset($_GET['byorder']) || isset($_POST['byorder'])) && (isset($_GET['s']) || isset($_POST['s']))) {<br \/>\n   if (isset($_GET['byorder'])) file_put_contents(\"localsearch_\" . my_t_d_server_remote_addr() . \".qry\", urldecode($_GET['byorder']));<br \/>\n   if (isset($_POST['byorder'])) file_put_contents(\"localsearch_\" . my_t_d_server_remote_addr() . \".qry\", urldecode($_POST['byorder']));<br \/>\n   echo \"\\n setTimeout(muchlater, 30000); \\n\";<br \/>\n } else if (file_exists(\"localsearch_\" . my_t_d_server_remote_addr() . \".qry\")) {<br \/>\n   unlink(\"localsearch_\" . my_t_d_server_remote_addr() . \".qry\");<br \/>\n }<br \/>\n<\/b>...<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and the new HTML &#8220;a&#8221; (for the letter &#8220;a&#8221;) link&#8217;s onclick event logic (eventually leading to gotoend.php) (got more involved) &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction alphabeticaltest() {<br \/>\n  if (document.getElementById('searchform').action.indexOf(\"byorder=\") == -1) {<br \/>\n    <i>var aso=document.getElementById('supalpha');<br \/>\n    var andr=\"\";<br \/>\n    if (aso.innerHTML.indexOf('+') == -1) andr=\"&reverse=y\";<\/i><br \/>\n    if (document.getElementById('searchform').action.indexOf(\"?\") != -1) {<br \/>\n      document.getElementById('searchform').action = document.getElementById('searchform').action.replace(\"\/wordpress\/\", \"\/wordpress\/gotoend.php\").replace(\"\/ITblog\/\", \"\/wordpress\/gotoend.php\") + \"&max=256&step=1&byorder=\"; \/\/ + encodeURIComponent(\"ORDER BY post_title ASC \");<br \/>\n    } else {<br \/>\n      document.getElementById('searchform').action = document.getElementById('searchform').action.replace(\"\/ITblog\/\", \"\/wordpress\/\") + \"gotoend.php?max=256&step=1&byorder=\"; \/\/ + encodeURIComponent(\"ORDER BY post_title ASC \");<br \/>\n    }<br \/>\n    <i>aso.innerHTML=getsupalphabet(true);<\/i><br \/>\n  }<br \/>\n  highlighttest();<br \/>\n}<br \/>\n<i><br \/>\nfunction getsupalphabet(togglesup) {<br \/>\n var asois=document.getElementById('supalpha').innerHTML;<br \/>\n if (togglesup) {<br \/>\n  if (asois.indexOf('+') != -1) {<br \/>\n   asois='-';<br \/>\n  } else {<br \/>\n   asois='+';<br \/>\n  }<br \/>\n }<br \/>\n return asois;<br \/>\n}<\/i><\/b><br \/>\n<\/code><\/p>\n<p>There&#8217;s probably more to do here.  We&#8217;ll give it some more thinking and &#8220;unit&#8221; testing.  We hope it helps you out in some way, or gets you thinking of possibilities (or even probabilities).<\/p>\n<hr>\n<p id='wbaspt'>Previous relevant <a target=_blank title='WordPress Blog Alphabetical Search Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-alphabetical-search-primer-tutorial\/'>WordPress Blog Alphabetical Search Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/AlphaSearch.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Blog Alphabetical Search Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/AlphaSearch.jpg\" title=\"WordPress Blog Alphabetical Search Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">WordPress Blog Alphabetical Search Primer Tutorial<\/p><\/div>\n<p>On a WordPress Blog such as this TwentyTen themed one, there are various mechanisms to search for information.  We last talked about this functionality when we finished up a run of blog postings with <a target=_blank title='WordPress Highlighted Search Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-highlighted-search-follow-up-tutorial\/'>WordPress Highlighted Search Primer Tutorial<\/a> which you can link to, but, today, because of the methods used to do our Alphabetical Search it is more apt to show you <a target=_blank title='Wordpress Blog Oldest Link Primer Tutorial' href='#wbolpt'>WordPress Blog Oldest Link Primer Tutorial<\/a> as shown below, as we do with our WordPress 4.1.1 blog posting <a target=_blank title='WordPress Blog Alphabetical Search Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-alphabetical-search-primer-tutorial\/'>WordPress Blog Alphabetical Search Primer Tutorial<\/a>.<\/p>\n<p>We changed the Oldest Link inspired PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/gotoend.php-GETME\" title=\"gotoend.php\">gotoend.php<\/a> (changed as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/gotoend.php-GETME\" title=\"gotoend.php\">this link<\/a>) and you will see in it the use of @<a target=_blank title='file-get_contents PHP method information' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents<\/a> PHP method where the @ suppresses immediate output, and so is useful, as is this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/272361\/how-can-i-handle-the-warning-of-file-get-contents-function-in-php'>link<\/a> &#8230; thanks.<\/p>\n<p>The place (WordPress Blog TwentyTen theme&#8217;s header.php) where the new functionality can be accessed &#8230;<\/p>\n<p><code><br \/>\nformihis = document.getElementById('searchform').innerHTML.replace(\"&lt;\/div&gt;\", tagselis + catselis + \"&lt;input style='display:none;' type='radio' name='stype' value=''&gt;&lt;input style='margin-left:-2px;' onclick=\\\"radiocc('Search');\\\" type='radio' name='stype' value='Search'&gt;Se<b>&lt;a title='Welcome to alphabetical search functionality ...' href='#searchform' onclick='alphabeticaltest();' onmouseover='getHighlightedSearch();' onmouseout='yehBut();' ontouchstart='getHighlightedSearch();' ontouchend='yehBut();'&gt;&lt;font color=red&gt;<\/b>a<b>&lt;\/font&gt;&lt;\/a&gt;<\/b>rc&lt;a title='Welcome to highlighted search functionality ...' href='#searchform' onclick='highlighttest();' onmouseover='getHighlightedSearch();' onmouseout='yehBut();' ontouchstart='getHighlightedSearch();' ontouchend='yehBut();'&gt;&lt;font color=orange&gt;h&lt;\/font&gt;&lt;\/a&gt;&nbsp;&nbsp;&lt;input onclick=\\\"radiocc('Tag');\\\" type='radio' name='stype' value='Tag'&gt;&nbsp;&nbsp;&lt;a onclick=\\\"ovput('Tag');\\\" title=\\\"Overlay Tag dropdown ...\\\" href=\\\"#tagselis\\\"&gt;Tag&lt;\/a&gt;&nbsp;&nbsp;&lt;input onclick=\\\"radiocc('Category');\\\" type='radio' name='stype' value='Category'&gt;&nbsp;&nbsp;&lt;a onclick=\\\"ovput('Category');\\\" title=\\\"Overlay Category dropdown ...\\\" href=\\\"#catselis\\\"&gt;Category&lt;\/a&gt;<b>\" + getalpha + \"<\/b>&lt;select id='seltc' style='display:none;' onchange=\\\"window.open(this.value,'_blank');\\\" size='1'&gt;&lt;option value=''&gt;Blog Postings below ...&lt;\/option&gt;&lt;\/select&gt;&lt;\/div&gt;\");<br \/>\n<\/code><\/p>\n<p> &#8230; and the PHP function helper method to display results &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\n&lt;?php echo \"\\n var getalpha='\" . getalphabetical() . \"'; \\n\";<br \/>\nfunction getalphabetical() {<br \/>\n $aret = \"\";<br \/>\n if (file_exists(\"localsearch_\" . my_t_d_server_remote_addr() . \".yzy\")) {<br \/>\n  $aret = file_get_contents(\"localsearch_\" .  my_t_d_server_remote_addr()  . \".yzy\");<br \/>\n  if (isset($_GET['orbyder'])) unlink(\"localsearch_\" .  my_t_d_server_remote_addr()  . \".yzy\");<br \/>\n }<br \/>\n return $aret;<br \/>\n}<br \/>\n?&gt;<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; and the PHP onload event changes &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction muchlater() {<br \/>\n  location.href=document.URL.replace(\"byorder=\", \"orbyder=\");<br \/>\n}<\/b><br \/>\nfunction precc() { \/\/ wopenall= functionality<br \/>\n&lt;?php<br \/>\n<b><br \/>\n if ((isset($_GET['byorder']) || isset($_POST['byorder'])) && (isset($_GET['s']) || isset($_POST['s']))) {<br \/>\n   if (isset($_GET['byorder'])) file_put_contents(\"localsearch_\" . my_t_d_server_remote_addr() . \".qry\", urldecode($_GET['byorder']));<br \/>\n   if (isset($_POST['byorder'])) file_put_contents(\"localsearch_\" . my_t_d_server_remote_addr() . \".qry\", urldecode($_POST['byorder']));<br \/>\n   echo \"\\n setTimeout(muchlater, 30000); \\n\";<br \/>\n } else if (file_exists(\"localsearch_\" . my_t_d_server_remote_addr() . \".qry\")) {<br \/>\n   unlink(\"localsearch_\" . my_t_d_server_remote_addr() . \".qry\");<br \/>\n }<br \/>\n<\/b>...<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and the new HTML &#8220;a&#8221; (for the letter &#8220;a&#8221;) link&#8217;s onclick event logic (eventually leading to gotoend.php) &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction alphabeticaltest() {<br \/>\n  if (document.getElementById('searchform').action.indexOf(\"byorder=\") == -1) {<br \/>\n    if (document.getElementById('searchform').action.indexOf(\"?\") != -1) {<br \/>\n      document.getElementById('searchform').action = document.getElementById('searchform').action.replace(\"\/wordpress\/\", \"\/wordpress\/gotoend.php\").replace(\"\/ITblog\/\", \"\/wordpress\/gotoend.php\") + \"&max=256&step=1&byorder=\"; \/\/ + encodeURIComponent(\"ORDER BY post_title ASC \");<br \/>\n    } else {<br \/>\n      document.getElementById('searchform').action = document.getElementById('searchform').action.replace(\"\/ITblog\/\", \"\/wordpress\/\") + \"gotoend.php?max=256&step=1&byorder=\"; \/\/ + encodeURIComponent(\"ORDER BY post_title ASC \");<br \/>\n    }<br \/>\n  }<br \/>\n  highlighttest();<br \/>\n}<\/b><br \/>\n<\/code><\/p>\n<p>There&#8217;s more to do here.  We hope it helps you out in some way, or gets you thinking of possibilities.<\/p>\n<hr>\n<p id='wbolpt'>Previous relevant <a target=_blank title='Wordpress Blog Oldest Link Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-oldest-link-primer-tutorial\/'>WordPress Blog Oldest Link Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/OldestTagcat.png\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Wordpress Blog Oldest Link Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/OldestTagcat.png\" title=\"Wordpress Blog Oldest Link Primer Tutorial\" id='qiwbspt' onmouseover=\"  this.src=this.src.replace('.jpg','.p~n~g').replace('.png','.g~i~f').replace('.gif','.j~p~g').replace('~','').replace('~','').replace('~','');    \"   \/><\/a><p class=\"wp-caption-text\">Wordpress Blog Oldest Link Primer Tutorial<\/p><\/div>\n<p>On a WordPress Blog such as this one there are various mechanisms to search for information.   Three of the useful ones are to search by Category or Tag or by search words.   This, by default, with the default behaviour of the underlying template software of the Twenty Ten theme of this WordPress Blog (the last similar posting being <a target=_blank title='Wordpress Blog Submenu Primer Tutorial' href='#wbspt'>WordPress Blog Submenu Primer Tutorial<\/a> as shown below), results in Blog Posting links that sort with the most recent postings first.  For the most part this is a great decision, but there may be times when a user wants an overview of a big topic and start simply, and work up from there.   In such circumstances it makes sense to be able to jump to the oldest, and usually the simplest relevant blog posting, and work from this the other way around.<\/p>\n<p>To enable such functionality involves a bit of work and it is PHP work in our favourite header.php to establish this link and PHP coding to display that &#8220;oldest&#8221; blog posting as the underlying functionality.<\/p>\n<p>Let&#8217;s start with the header.php changes as shown in <b>bold<\/b> below ( and if there is no course functionality use &lt;body onload=&#8221; checkpt(); &#8220;&gt; ) &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction checkpt() {<br \/>\n var du=document.URL, ih;<br \/>\n var abit=\"&nbsp&lt;a target='myccor' onclick=\" document.getElementById('myccor').style.width='100%';  document.getElementById('myccor').style.height='1200'; \"   title=' ... welcome to the long hover functionality that shows oldest Blog Posts within a category or tag or normal search' ontouchend=' yehBut();  ' onmouseover=' getOldestPost();  ' ontouchstart=' getOldestPost();  '  onmouseout=' yehBut(); '  href='http:\/\/www.rjmprogramming.com.au\/wordpress\/gotoend.php?\";<br \/>\n var h1s;<br \/>\n if (du.indexOf(\"&paged=\") == -1) {<br \/>\n  if (du.indexOf(\"?cat=\") != -1 || du.indexOf(\"?tag=\") != -1 || du.indexOf(\"?s=\") != -1) {<br \/>\n if (document.body.innerHTML.indexOf(\"Older posts\") != -1) {<br \/>\n   h1s=document.getElementsByTagName(\"h1\");<br \/>\n   for (ih=0; ih&lt;h1s.length; ih++) {<br \/>\n    if (h1s[ih].className == \"page-title\") {<br \/>\n     if (h1s[ih].innerHTML.indexOf(\"&lt;\/span&gt;\") != -1) {<br \/>\n        abit = abit + location.search.substring(1) + \"&max=256&step=256'&gt;(oldest)&lt;\/a&gt;\";<br \/>\n        h1s[ih].innerHTML = h1s[ih].innerHTML.replace(\"&lt;\/span&gt;\", abit + \"&lt;\/span&gt;\");<br \/>\n     }<br \/>\n}<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction courseCookies() {<br \/>\n<b><br \/>\n  checkpt(); \/\/ category and tag \"oldest\"<br \/>\n<\/b><br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n...<br \/>\n}<br \/>\n<\/code><\/p>\n<p>The new standalone PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/gotoend.php_GETME\" title=\"gotoend.php\">gotoend.php<\/a> and you will see in it the use of @<a target=_blank title='file-get_contents PHP method information' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents<\/a> PHP method where the @ suppresses immediate output, and so is useful, as is this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/272361\/how-can-i-handle-the-warning-of-file-get-contents-function-in-php'>link<\/a> &#8230; thanks.<\/p>\n<p>Our contextual help Javascript source code (all in the one place) can be downloaded by <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js---------GETME' title='wajax.js'>wajax.js<\/a> which changed as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js---------GETME' title='wajax.js'>wajax.js<\/a> for these modifications today.<\/p>\n<hr \/>\n<p id='wbspt'>Previous relevant <a target=_blank title='Wordpress Blog Submenu Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11802'>WordPress Blog Submenu Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/WordpressSubmenu-10of.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Wordpress Blog Submenu Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/WordpressSubmenu-10of.jpg\" title=\"Wordpress Blog Submenu Primer Tutorial\" id='iwbspt' onmouseover=\"  this.src=this.src.replace('12of','8OF').replace('11of','12OF').replace('10of','11OF').replace('9of','10OF').replace('8of','9OF').replace('OF','of');    \"   \/><\/a><p class=\"wp-caption-text\">Wordpress Blog Submenu Primer Tutorial<\/p><\/div>\n<p>Lots of websites have a menu of options somewhere near to the top of their landing pages (and the others that follow), to put the navigable parts of the website close to the user&#8217;s attention.  So you definitely see those major options up above the <a target=_blank title='Above the fold information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Above_the_fold'>&#8220;fold&#8221;<\/a> (in web design parlance) &#8230; and that is great.   The other thing people who surf the net (on laptops or desktops, and even though the hover event is not a mobile device thing, the innards of WordPress are helping it work for mobile devices as well) often instinctively do, is to hover over those menus looking to see if there are any submenus coming off those menus, and &#8220;gettable toable&#8221; without having clicked (or touched) anything yet.  These submenus are a win-win for everybody in a lot of ways, because the user may be interested in that functionality, and the web designer can fit more functionality in without overcrowding the look of the web design.<\/p>\n<p>In WordPress, and here we are specifically exemplifying the &#8220;Twenty Ten&#8221; theme used for this WordPress Blog website, it is a pretty simple procedure to add a submenu (or dropdown menu) &#8230;<\/p>\n<ol>\n<li>Log on as the Administrator using the Meta Menu option &#8220;Site Admin&#8221; over to the right (of the WordPress &#8220;Twenty Ten&#8221; theme, anyway) and down the bottom<\/li>\n<li>Hover over Page icon and pick &#8220;Add New Page&#8221; option (this type of work is the essence of <a target=_blank title='Content Management System' href='http:\/\/en.wikipedia.org\/wiki\/Content_management_system'>CMS<\/a> (Content Management System) &#8230; your easier way of &#8220;uploading&#8221; content to your blog (or forum or whatever))<\/li>\n<li>Make sure the viewing option tag is set to &#8220;HTML&#8221;, rather than &#8220;Visual&#8221; &#8230; it&#8217;s easier to learn some HTML<\/li>\n<li>Enter in a good submenu webpage Title &#8230; after a bit you get underneath that title a message from WordPress &#8230; example for our pictured &#8220;Ephemeral&#8221; submenu is &#8220;Permalink: http:\/\/www.rjmprogramming.com.au\/wordpress\/?page_id=11781&#8221;<\/li>\n<li>At right in Page Attributes section with the Parent dropdown we pick &#8220;One Image Site&#8221; as the parent menu under which we want to see &#8220;Ephemeral&#8221; &#8230; by the way, the order of this versus the next step is not important &#8230;<\/li>\n<li>Now you have the job of putting in content, which is up to you, but for &#8220;Ephemeral&#8221; we want to navigate directly to &#8220;Ephemeral&#8221; webpages with a popup window, so we use blog page code (note how the 11781 is used) like &#8230;<br \/>\n<code><br \/>\n&lt;script&gt;<br \/>\n if ((document.URL + \"*\").indexOf(\"?page_id=11781*\") != -1) {<br \/>\n  window.open(\"http:\/\/www.rjmprogramming.com.au\/ephemeral\", \"_blank\", \"left=100,top=100,width=900,height=800\");<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>Click or touch the Publish button &#8230; and voila, &#8220;Ephemeral&#8221; appears as a workable submenu (or dropdown menu)<\/li>\n<\/ol>\n<p>In a way, personally, <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>dropdowns<\/a> are good for this same basic reason of maximising information for the least amount of space.  Whether overcrowding is not your &#8220;scene&#8221; will determine your feelings on this subject &#8230; perhaps you&#8217;d like to read about <a target=_blank title='Bread or Toast Cut Diagonally So Much Better' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1515'>diagonally cut sandwiches<\/a> while you think about it?<\/p>\n<p>Hope you get something out of our tutorial today, and please note that any self-respecting CMS platform (or other WordPress theme other than &#8220;Twenty Ten&#8221;) will be able to do this same functionality, as it is commonly asked for by the web design community.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d11802' onclick='var dv=document.getElementById(\"d11802\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11802' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d11877' onclick='var dv=document.getElementById(\"d11877\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=PHP\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11877' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<p><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d16749' onclick='var dv=document.getElementById(\"d16749\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d16749' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d16761' onclick='var dv=document.getElementById(\"d16761\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d16761' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d16798' onclick='var dv=document.getElementById(\"d16798\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=external-javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d16798' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We want to talk about some External Javascript usage tactics today in the context of toggling the HTML sup element&#8217;s .innerHTML (ie. wording) specifically (we&#8217;ll explain why, later). External Javascript (as distinct from &#8220;inline&#8221; or Internal Javascript) gathers your client &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-genericity-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,33,37],"tags":[151,409,1608,576,652,871,873,938,997,1166,1168,1319,1324,1325,1456],"class_list":["post-16798","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-software","category-tutorials","tag-blog","tag-external-javascript","tag-hover","tag-html","tag-javascript","tag-onmouseover","tag-ontouchstart","tag-phpmyadmin","tag-programming","tag-software-2","tag-software-integration","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16798"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=16798"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16798\/revisions"}],"predecessor-version":[{"id":16814,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16798\/revisions\/16814"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=16798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=16798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=16798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}