Horizontal Hashtag Navigation Trapping Primer Tutorial

Yesterday we got into some hashtag navigation event trapping, after ...

... where that "follow up" was really dealing with "vertical navigation", which is probably your more natural human idea of web navigation. But what about "horizontal navigation" 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.

So what we believe, around here, is the best way to establish horizontal navigation is to use the HTML table element with one tr row element containing many td cell elements, in our case, each containing an HTML img element of a width that spans a lot of the width of the user's screen. And this is the form of our "inhouse" slideshow web applications here at this blog ... the ones with the "@" links that start the slideshow. Today's added functionality also includes a "Start of Movie" (Android toast like) temporary dialog box method to run the slideshow in a "horizontal navigation" scenario where ...

location.href='#i7'; // navigate to the 8th slide of the slideshow

... as distinct from the (still unchanged) "@" link method where the leftmost "cell" has Javascript DOM slap over it the relevant image data that should happen next for the slideshow to progress forward.

So the new "horizontal navigation" hashtag event trapping uses the same "last three days" way that monitors changes to ...

window.location.hash

So we applied these thoughts to a recent Ansible and Vagrant Deploys Git and Jenkins Primer Tutorial's slideshow presentation you can try here, where you can compare the old "@" method versus the new "Start of Movie" horizontal hashtag navigation "event" trapping method, for your perusal and edification.

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