Navigation Scrolling Trapping Primer Tutorial
โœ‚๐Ÿƒ๐Ÿพโ€โ™€๏ธ๐Ÿƒ๐Ÿผโ€โ™‚๏ธ
๐Ÿ“–

Navigation Scrolling Trapping Primer Tutorial

Navigation Scrolling Trapping Primer Tutorial   ๐Ÿ”

With our recent interest in hashtag navigation movement (or โ€œeventโ€) trapping weโ€™ve been studying weโ€™ve been concentrating on changes to โ€ฆ



window.location.hash

โ€ฆ but there is another whole โ€œlayerโ€ of thought in that we can also, and independently, be trapping changes to โ€ฆ

  1. [top.]window.scrollX โ€ฆ and/or โ€ฆ
  2. [top.]window.scrollY

โ€ฆ as an alternative scrolling โ€œeventโ€ trapping mechanism. Again, we monitor for this via Javascriptโ€™s setTimeout timer functionality, rather than relying on any one defined Javascript event as such.

We present this โ€œscrollingโ€ measurement as a percentage, as for a โ€œvertical scrollโ€ you might think of this percentage as, for example โ€ฆ

  1. the progression through a slideshow arranged horizontally in an HTML table, looking at the scroll in X percentage โ€ฆ or โ€ฆ
  2. the amount of a book or article youโ€™ve read, looking at the scroll in Y percentage

And so the monitoring of the scroll dimensions is relatively straightforward, but the necessary width 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 width of document.body, so, respectively, what we compare the (scroll in X,scroll in Y) to in terms if (width,height) are best against โ€ฆ

  1. (top.document.getElementsByTagName(โ€˜tableโ€™)[0], top.document.body)
  2. (top.document.body, top.document.body)

โ€ฆ because the โ€ฆ



dw="" + eval(top.window.getComputedStyle(document.getElementsByTagName('table')[0], null).getPropertyValue("width").replace('px',''));

โ€ฆ Javascript code caters for all that huge width potential off to the right, that is not factored in with โ€ฆ



dw="" + eval(top.window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px',''));

โ€ฆ more reflecting just the current width of your screenโ€™s web browser window.

We again use the Android toast view look to our HTML div position:absolute opacity:0.3 z-index:8 (ร  la our usual โ€œoverlayโ€ CSS โ€œfriendsโ€) element styling used for the display, as its Javascript DOM changes to top and left co-ordinates keep the view of it in front of the userโ€™s eyes as the scrolling procedes, in real time.

Naturally, weโ€™d like to illustrate this in the two โ€œmode of use thoughts as aboveโ€ so we offer you live runs for โ€ฆ

  1. horizontal scrolling if you click the โ€œStart of Movieโ€, as we discussed earlier with Horizontal Hashtag Navigation Trapping Primer Tutorial is shown below
  2. vertical scrolling is more the go with this checking HTML we wrote for todayโ€™s purposes

And today we have a dual mode of use you could see working in that vertical scrolling idea 2 above with the HTML and Javascript programming source code you could call scroll_checkโšซhtm โ€ฆ


</textarea></body></html>

โ€ฆ that can have this liveโœ‚run link โ€ฆ featuring (commented out, in addition to the active Javascript DOM invocation of the HTML iframe usage discussed below) both scrolling detection modes of use โ€ฆ

  1. External Javascript you could call scroll_checkโšซjs called via โ€ฆ


    <script src="//www.rjmprogramming.com.au/HTMLCSS/scroll_check.js" type="text/javascript"></script>


    โ€ฆ between <head> and </head> โ€ฆ and/or โ€ฆ
  2. HTML and Javascript designed to be called by supervisory code (like scroll_check.htm as above) within an HTML iframe element you could call scroll_checkโšซhtml accessible via โ€ฆ


    <iframe id='iframeshowscrollxy' style='display:none;' src='//www.rjmprogramming.com.au/HTMLCSS/scroll_check.html'></iframe>


    โ€ฆ between <body> and </body> โ€ฆ is more the go with this checking HTML we wrote for todayโ€™s purposes

โ€ฆ that both reference top.window or top.document as their point of reference, for all their โ€œscrollingโ€ measurements and display.

Both modes of use offer URL noscrollcheck=y chances to have the scrolling position checking be turned off as you can see with โ€ฆ

  1. horizontal scrolling (but scroll checking turned off)
  2. vertical scrolling (but scroll checking turned off)

Did you know?

With the scrolling information we try to describe percentage scroll positions of the top left of the screen window and also a percentage representation of the bottom right which are arrived at via โ€ฆ



bottom = top + top.window.innerHeight

right = left + top.window.innerWidth



Previous relevant Horizontal Hashtag Navigation Trapping Primer Tutorial is shown below.

Horizontal Hashtag Navigation Trapping Primer Tutorial

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 we applied these thoughts to a recent Ansible and Vagrant Deploys Git and Jenkins Primer Tutorialโ€˜s slideshow presentation to end up with HTML and Javascript you could call horizontal_slideshowโšซhtml perhaps, and that changed to cater for horizontal hashtag navigation โ€œeventโ€ trapping techniques in thisway, and that 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.



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 โ€ฆ



windows.location.hash

Along the way we try the HTML5 progress element, in preference to the meter element (that we last talked about with HTML/Javascript Staged Animation Meter Presentation Tutorial at this blog), to show you progress through the slideshow when you view it using the new functionality.

So we applied these thoughts to a recent Ansible and Vagrant Deploys Git and Jenkins Primer Tutorialโ€˜s slideshow presentation to end up with HTML and Javascript you could call horizontal_slideshowโšซhtml perhaps, and that changed to cater for horizontal hashtag navigation โ€œeventโ€ trapping techniques in thisway, and that you can try here (and perhaps compare against the old approach 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.


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 *