{"id":22805,"date":"2016-06-17T03:01:20","date_gmt":"2016-06-16T17:01:20","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=22805"},"modified":"2016-08-06T11:47:07","modified_gmt":"2016-08-06T01:47:07","slug":"navigation-scrolling-trapping-image-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/navigation-scrolling-trapping-image-tutorial\/","title":{"rendered":"Navigation Scrolling Trapping Image Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Navigation Scrolling Trapping Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/navigation_scrolling_trapping_image.jpg\" title=\"Navigation Scrolling Trapping Image Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Navigation Scrolling Trapping Image Tutorial<\/p><\/div>\n<p>Yesterday, with <a title='Navigation Scrolling Trapping Primer Tutorial' href='#nstpt'>Navigation Scrolling Trapping Primer Tutorial<\/a> as shown below, we started on some HTML and Javascript code to detect scrolling activity in the sense of &#8230;<\/p>\n<ol>\n<li>detecting horizontal scrolling, and allowing for an HTML table element to be able to extend webpage data content off to the right of the screen<\/li>\n<li>detecting vertical scrolling<\/li>\n<\/ol>\n<p> &#8230; but what if you have huge HTML <a target=_blank title='HTML img tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_img.asp'>img<\/a> image elements that run off the screen as well, and it could be to do with either type of scrolling above?  Is this you?  <a style=text-decoration:underline; onclick=\" document.getElementById('qywhbg').style.display='block'; document.getElementById('qywhbg').src += '?autoplay=1'; \">Yes<\/a> <a href=#qlywhbg onclick=\" alert('Well, be like that then.  Narrrrggh'); \">No<\/a><br \/>\n<iframe loading=\"lazy\" style='display:none;' id='qywhbg' width=\"420\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/7o9wvYXR3n0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Actually, its functionality we&#8217;re keen on here at RJM Programming with respect to our <a target=_blank title='One Image Website' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?page_id=189'>One Image Website<\/a> series and the ability for their scrolling to be harnessed into a use, and we think, given that the data this time around in an image, to show a &#8220;whole of picture&#8221; thumbnail view of the &#8220;zoomed into&#8221; part up the top left of the screen would be good.  While we&#8217;re there, we offer the user the chance to click that thumbnail to open a window on its own of that image &#8230; mind you, a right-click (or Mac two finger gesture) to choose &#8220;View Image&#8221; does a good job, here, as well.<\/p>\n<p>Below are links to One Image Website showing this &#8220;scroll detection creating thumbnails&#8221; mode of use &#8230;<\/p>\n<ul>\n<li><a target=_blank title=\"The Commute\" href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/?yesscrollcheck=y\">Ephemeral<\/a><\/li>\n<li><a target=_blank title=\"Bygone\" href=\"http:\/\/www.rjmprogramming.com.au\/bygone\/?yesscrollcheck=y\">Bygone<\/a><\/li>\n<li><a target=_blank title=\"Pyrmont and Ultimo - Inner City 'Burbs\" href=\"http:\/\/www.rjmprogramming.com.au\/pyrmontultimo\/?yesscrollcheck=y\">Pyrmont and Ultimo &#8211; Inner City &#8216;Burbs<\/a><\/li>\n<li><a target=_blank title=\"The Commute\" href=\"http:\/\/www.rjmprogramming.com.au\/thecommute\/?yesscrollcheck=y\">The Commute<\/a><\/li>\n<li><a target=_blank title=\"Blue Mountains and Bathurst and Orange Trip in New South Wales, Australia\" href=\"http:\/\/www.rjmprogramming.com.au\/thewest\/?yesscrollcheck=y\">Blue Mountains and Bathurst and Orange Trip in New South Wales, Australia<\/a><\/li>\n<li><a target=_blank title=\"Walking Trip\" href=\"http:\/\/www.rjmprogramming.com.au\/walkingtrip\/?yesscrollcheck=y\">Walking Trip<\/a><\/li>\n<li><a target=_blank title=\"Street Art\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\/?yesscrollcheck=y\">Street Art<\/a><\/li>\n<\/ul>\n<p>Again today we have a dual mode of use you could see working in that <i>vertical scrolling<\/i> idea 2 above with the HTML and Javascript programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.htm-GETME\">scroll_check.htm<\/a> (changed from yesterday <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.htm-GETME\" title='scroll_check.htm'>this way<\/a>) &#8230;<\/p>\n<p><iframe width=100% height=400 src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.htm-GETME\" title='scroll_check.htm'><\/iframe><br \/>\n&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;<\/p>\n<p> &#8230; that can have this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.htm\" title='Click picture'>live run<\/a> link now featuring a large image you can scroll around &#8230; and again, featuring (commented out, in addition to the active Javascript DOM invocation of the HTML iframe usage discussed below) both scrolling detection modes of use &#8230;<\/p>\n<ol>\n<li>External Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.js-GETME\" title='scroll_check.js'>scroll_check.js<\/a> (changed from yesterday <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.js-GETME\" title='scroll_check.js'>this way<\/a>) called via &#8230;<br \/>\n<code><br \/>\n&lt;script src=\"<span style='opacity:0.2;'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/<\/span>scroll_check.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;<br \/>\n<\/code><br \/>\n &#8230; between  &lt;head&gt; and &lt;\/head&gt; &#8230; and\/or &#8230;<\/li>\n<li>HTML and Javascript designed to be called by supervisory code (like <i>scroll_check.htm<\/i> as above) within an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.html-GETME\" title='scroll_check.html'>scroll_check.html<\/a> (changed from yesterday <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.html-GETME\" title='scroll_check.html'>this way<\/a>) accessible via &#8230;<br \/>\n<code><br \/>\n&lt;iframe id='iframeshowscrollxy' style='display:none;' src='<span style='opacity:0.2;'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/<\/span>scroll_check.html'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n &#8230; between  &lt;body&gt; and &lt;\/body&gt;  &#8230; is more the go with this checking HTML we wrote for today&#8217;s purposes<\/li>\n<\/ol>\n<hr>\n<p id='nstpt'>Previous relevant <a target=_blank title='Navigation Scrolling Trapping Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/navigation-scrolling-trapping-primer-tutorial\/'>Navigation Scrolling Trapping 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\/HTMLCSS\/scroll_check.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Navigation Scrolling Trapping Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/navigation_scrolling_trapping.jpg\" title=\"Navigation Scrolling Trapping Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Navigation Scrolling Trapping Primer Tutorial<\/p><\/div>\n<p>With our recent interest in hashtag navigation movement (or &#8220;event&#8221;) trapping we&#8217;ve been studying we&#8217;ve been concentrating on changes to &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Javascript window.location.hash information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_loc_hash.asp'>window.location.hash<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; but there is another whole &#8220;layer&#8221; of thought in that we can also, and independently, be trapping changes to &#8230;<\/p>\n<ol>\n<li>[top.]window.<a target=_blank title='Good information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/scrollX'>scrollX<\/a> &#8230; and\/or &#8230;<\/li>\n<li>[top.]window.<a target=_blank title='Good information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/scrollY'>scrollY<\/a><\/li>\n<\/ol>\n<p> &#8230; as an alternative <a target=_blank title='Scrolling information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Scrolling'>scrolling<\/a> &#8220;event&#8221; trapping mechanism.  Again, we monitor for this via Javascript&#8217;s <a target=_blank title='Javascript setTimeout function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timer functionality, rather than relying on any one defined Javascript <i>event<\/i> as such.<\/p>\n<p>We present this &#8220;scrolling&#8221; measurement as a percentage, as for a &#8220;vertical scroll&#8221; you might think of this percentage as, for example &#8230;<\/p>\n<ol>\n<li>the progression through a slideshow arranged horizontally in an HTML table, looking at the <i>scroll in X<\/i> percentage &#8230; or &#8230;<\/li>\n<li>the amount of a book or article you&#8217;ve read, looking at the <i>scroll in Y<\/i> percentage<\/li>\n<\/ol>\n<p>And so the monitoring of the scroll dimensions is relatively straightforward, but the necessary <i>width<\/i> of what to compare against (to arrive at a percentage result), for the example 1 above is not going to be representative if you use the <i>width<\/i> of <i>document.body<\/i>, so, respectively, what we compare the (<i>scroll in X<\/i>,<i>scroll in Y<\/i>) to in terms if (<i>width<\/i>,<i>height<\/i>) are best against &#8230;<\/p>\n<ol>\n<li>(top.document.<a target=_blank title='Javascript DOM getElementsByTagName() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_getelementsbytagname.asp'>getElementsByTagName<\/a>(&#8216;table&#8217;)[0], top.document.body)<\/li>\n<li>(top.document.body, top.document.body)<\/li>\n<\/ol>\n<p> &#8230; because the &#8230;<\/p>\n<p><code><br \/>\ndw=\"\" + eval(top.window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a>(document.getElementsByTagName('table')[0], null).getPropertyValue(\"width\").replace('px',''));<br \/>\n<\/code><\/p>\n<p> &#8230; Javascript code caters for all that huge width potential off to the right, that is not factored in with &#8230;<\/p>\n<p><code><br \/>\ndw=\"\" + eval(top.window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a>(document.body, null).getPropertyValue(\"width\").replace('px',''));<br \/>\n<\/code><\/p>\n<p> &#8230; more reflecting just the current width of your screen&#8217;s web browser window.<\/p>\n<p>We again use the Android <a target=_blank title='Andoid toast information' href='https:\/\/developer.android.com\/reference\/android\/widget\/Toast.html'>toast<\/a> view look to our HTML div <i><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position<\/a>:absolute<\/i> <i><a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a>:0.3<\/i> <i><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a>:8<\/i> (\u00e0 la our usual <a target=_blank title='Overlay blog postings at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> CSS &#8220;friends&#8221;) element styling used for the display, as its Javascript DOM changes to <a target=_blank title='window.top information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_top.asp'>top<\/a> and <a target=_blank title='window.top information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_left.asp'>left<\/a> co-ordinates keep the view of it in front of the user&#8217;s eyes as the scrolling procedes, in real time.<\/p>\n<p>Naturally, we&#8217;d like to illustrate this in the two &#8220;mode of use thoughts as above&#8221; so we offer you live runs for &#8230;<\/p>\n<ol>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/\">horizontal scrolling<\/a> if you click the &#8220;Start of Movie&#8221;, as we discussed earlier with <a title='Horizontal Hashtag Navigation Trapping Primer Tutorial' href='#hhntpt'>Horizontal Hashtag Navigation Trapping Primer Tutorial<\/a> is shown below<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.htm\">vertical scrolling<\/a> is more the go with this checking HTML we wrote for today&#8217;s purposes (as we also discuss at WordPress 4.1.1&#8217;s <a target=_blank title='Navigation Scrolling Trapping Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/navigation-scrolling-trapping-primer-tutorial\/'>Navigation Scrolling Trapping Primer Tutorial<\/a>)<\/li>\n<\/ol>\n<p>And today we have a dual mode of use you could see working in that <i>vertical scrolling<\/i> idea 2 above with the HTML and Javascript programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.htm_GETME\">scroll_check.htm<\/a> &#8230;<\/p>\n<p><iframe width=100% height=400 src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.htm_GETME\" title='scroll_check.htm'><\/iframe><br \/>\n&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;<\/p>\n<p> &#8230; that can have this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.htm\" title='Click picture'>live run<\/a> link &#8230; featuring (commented out, in addition to the active Javascript DOM invocation of the HTML iframe usage discussed below) both scrolling detection modes of use &#8230;<\/p>\n<ol>\n<li>External Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.js_GETME\" title='scroll_check.js'>scroll_check.js<\/a> called via &#8230;<br \/>\n<code><br \/>\n&lt;script src=\"<span style='opacity:0.2;'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/<\/span>scroll_check.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;<br \/>\n<\/code><br \/>\n &#8230; between  &lt;head&gt; and &lt;\/head&gt; &#8230; and\/or &#8230;<\/li>\n<li>HTML and Javascript designed to be called by supervisory code (like <i>scroll_check.htm<\/i> as above) within an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.html_GETME\" title='scroll_check.html'>scroll_check.html<\/a> accessible via &#8230;<br \/>\n<code><br \/>\n&lt;iframe id='iframeshowscrollxy' style='display:none;' src='<span style='opacity:0.2;'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/<\/span>scroll_check.html'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n &#8230; between  &lt;body&gt; and &lt;\/body&gt;  &#8230; is more the go with this checking HTML we wrote for today&#8217;s purposes<\/li>\n<\/ol>\n<p> &#8230; that both reference <i><a target=_blank title='Javascript top property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_win_top.asp'>top<\/a>.window<\/i> or <i>top.document<\/i> as their point of reference, for all their &#8220;scrolling&#8221; measurements and display.<\/p>\n<p>Both modes of use offer URL <i>noscrollcheck=y<\/i> chances to have the scrolling position checking be turned off as you can see with &#8230;<\/p>\n<ol>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.htm?noscrollcheck=y\">horizontal scrolling (but scroll checking turned off)<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_check.htm?noscrollcheck=y\">vertical scrolling (but scroll checking turned off)<\/a><\/li>\n<\/ol>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>With the scrolling information we try to describe percentage scroll positions of the <i>top left<\/i> of the screen window and also a percentage representation of the <i>bottom right<\/i> which are arrived at via &#8230;<\/p>\n<p><code><br \/>\nbottom = top + <a target=_blank title='Javascript innerHeight and innerWidth property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_win_innerheight.asp'>top.window.innerHeight<\/a><br \/>\nright = left + <a target=_blank title='Javascript innerHeight and innerWidth property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_win_innerheight.asp'>top.window.innerWidth<\/a><br \/>\n<\/code><\/p>\n<hr>\n<p id='hhntpt'>Previous relevant <a target=_blank title='Horizontal Hashtag Navigation Trapping Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/horizontal-hashtag-navigation-trapping-primer-tutorial\/'>Horizontal Hashtag Navigation Trapping 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\/Mac\/Ansible\/Jenkins\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Horizontal Hashtag Navigation Trapping Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/horizontal_hashtagging.jpg\" title=\"Horizontal Hashtag Navigation Trapping Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Horizontal Hashtag Navigation Trapping Primer Tutorial<\/p><\/div>\n<p>Yesterday we got into some hashtag navigation event trapping, after &#8230;<\/p>\n<ul>\n<li>our discovery, during <a target=_blank title='HTML a Tag Navigation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-a-tag-navigation-primer-tutorial\/'>HTML a Tag Navigation Primer Tutorial<\/a><\/li>\n<li>our follow up, during <a target=_blank title='Web Slideshow Like PowerPoint Hashtag Navigation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/web-slideshow-like-powerpoint-hashtag-navigation-tutorial\/'>Web Slideshow Like PowerPoint Hashtag Navigation Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; where that &#8220;follow up&#8221; was really dealing with &#8220;vertical navigation&#8221;, which is probably your more natural human idea of web navigation.  But what about &#8220;horizontal navigation&#8221; where the webpage content continues off to the right of your screen, for those of us that read left to right?  It should be noted that some languages of the world read right to left, and that is worth considering, should you take up the mantle and use the source code below to continue on with your studies and web application work.<\/p>\n<p>So we applied these thoughts to a recent <a target=_blank title='Ansible and Vagrant Deploys Git and Jenkins Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ansible-and-vagrant-deploys-git-and-jenkins-primer-tutorial\/'>Ansible and Vagrant Deploys Git and Jenkins Primer Tutorial<\/a>&#8216;s slideshow presentation to end up with HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.htm-GETME\">horizontal_slideshow.html<\/a> perhaps, and that changed to cater for horizontal hashtag navigation &#8220;event&#8221; trapping techniques in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.htm-GETME\">this way<\/a>, and that you can try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/\" title='Click picture'>here<\/a>, where you can compare the old &#8220;@&#8221; method versus the new &#8220;Start of Movie&#8221; horizontal hashtag navigation &#8220;event&#8221; trapping method, for your perusal and edification.<\/p>\n<p><code><br \/>\nlocation.href='#i7'; \/\/ navigate to the 8th slide of the slideshow<br \/>\n<\/code><\/p>\n<p> &#8230; as distinct from the (still unchanged) &#8220;@&#8221; link method where the leftmost &#8220;cell&#8221; has Javascript DOM slap over it the relevant image data that should happen next for the slideshow to progress forward.<\/p>\n<p>So the new &#8220;horizontal navigation&#8221; hashtag event trapping uses the same &#8220;last three days&#8221; way that monitors changes to &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Javascript windows.location.hash information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_loc_hash.asp'>windows.location.hash<\/a><br \/>\n<\/code><\/p>\n<p>Along the way we try the HTML5 <a target=_blank title='HTML progress element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_progress.asp'>progress<\/a> element, in preference to the <a target=_blank title='HTML meter element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_meter.asp'>meter<\/a> element (that we last talked about with <a target=_blank title='HTML\/Javascript Staged Animation Meter Presentation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-staged-animation-meter-presentation-tutorial\/'>HTML\/Javascript Staged Animation Meter Presentation Tutorial<\/a> at this blog), to show you progress through the slideshow when you view it using the new functionality.<\/p>\n<p>So we applied these thoughts to a recent <a target=_blank title='Ansible and Vagrant Deploys Git and Jenkins Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ansible-and-vagrant-deploys-git-and-jenkins-primer-tutorial\/'>Ansible and Vagrant Deploys Git and Jenkins Primer Tutorial<\/a>&#8216;s slideshow presentation to end up with HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.htm-GETME\">horizontal_slideshow.html<\/a> perhaps, and that changed to cater for horizontal hashtag navigation &#8220;event&#8221; trapping techniques in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.htm-GETME\">this way<\/a>, and that you can try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/\" title='Click picture'>here<\/a> (and perhaps compare against the old approach <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.html\" title='Old way'>here<\/a>), where you can compare the old &#8220;@&#8221; method versus the new &#8220;Start of Movie&#8221; horizontal hashtag navigation &#8220;event&#8221; trapping method, for your perusal and edification.<\/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='#d22708' onclick='var dv=document.getElementById(\"d22708\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22708' 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='#d22746' onclick='var dv=document.getElementById(\"d22746\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scrolling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22746' 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='#d22805' onclick='var dv=document.getElementById(\"d22805\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22805' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday, with Navigation Scrolling Trapping Primer Tutorial as shown below, we started on some HTML and Javascript code to detect scrolling activity in the sense of &#8230; detecting horizontal scrolling, and allowing for an HTML table element to be able &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/navigation-scrolling-trapping-image-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,30,37],"tags":[1580,327,354,409,557,576,578,587,590,1598,1517,830,894,931,997,1915,1917,1107,1238,1319],"class_list":["post-22805","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-photography","category-tutorials","tag-cell","tag-did-you-know","tag-dom","tag-external-javascript","tag-hashtag","tag-html","tag-html5","tag-iframe","tag-image","tag-jacascript","tag-meter","tag-navigation","tag-overlay","tag-photography","tag-programming","tag-progress","tag-scroll","tag-scrolling","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22805"}],"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=22805"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22805\/revisions"}],"predecessor-version":[{"id":23913,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22805\/revisions\/23913"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=22805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=22805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=22805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}