With our recent interest in hashtag navigation movement (or โeventโ) trapping weโve been studying weโve been concentrating on changes to โฆ
โฆ but there is another whole โlayerโ of thought in that we can also, and independently, be trapping changes to โฆ
โฆ 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 โฆ
- the progression through a slideshow arranged horizontally in an HTML table, looking at the scroll in X percentage โฆ or โฆ
- 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 โฆ
- (top.document.getElementsByTagName(โtableโ)[0], top.document.body)
- (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 โฆ
- horizontal scrolling if you click the โStart of Movieโ, as we discussed earlier with Horizontal Hashtag Navigation Trapping Primer Tutorial is shown below
- 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_checkhtm โฆ
</textarea></body></html>
โฆ that can have this liverun 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 โฆ
- 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 โฆ - 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 โฆ
- horizontal scrolling (but scroll checking turned off)
- 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.
Yesterday we got into some hashtag navigation event trapping, after โฆ
- our discovery, during HTML a Tag Navigation Primer Tutorial
- our follow up, during Web Slideshow Like PowerPoint Hashtag Navigation Tutorial
โฆ 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_slideshowhtml 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 โฆ
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_slideshowhtml 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.