{"id":22746,"date":"2016-06-16T03:01:05","date_gmt":"2016-06-15T17:01:05","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=22746"},"modified":"2016-06-16T10:18:26","modified_gmt":"2016-06-16T00:18:26","slug":"navigation-scrolling-trapping-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/navigation-scrolling-trapping-primer-tutorial\/","title":{"rendered":"Navigation Scrolling Trapping Primer Tutorial"},"content":{"rendered":"
\"Navigation<\/a>

Navigation Scrolling Trapping Primer Tutorial<\/p><\/div>\n

With our recent interest in hashtag navigation movement (or “event”) trapping we’ve been studying we’ve been concentrating on changes to …<\/p>\n


\nwindow.location.hash<\/a>
\n<\/code><\/p>\n

… but there is another whole “layer” of thought in that we can also, and independently, be trapping changes to …<\/p>\n

    \n
  1. [top.]window.scrollX<\/a> … and\/or …<\/li>\n
  2. [top.]window.scrollY<\/a><\/li>\n<\/ol>\n

    … as an alternative scrolling<\/a> “event” trapping mechanism. Again, we monitor for this via Javascript’s setTimeout<\/i><\/a> timer functionality, rather than relying on any one defined Javascript event<\/i> as such.<\/p>\n

    We present this “scrolling” measurement as a percentage, as for a “vertical scroll” you might think of this percentage as, for example …<\/p>\n

      \n
    1. the progression through a slideshow arranged horizontally in an HTML table, looking at the scroll in X<\/i> percentage … or …<\/li>\n
    2. the amount of a book or article you’ve read, looking at the scroll in Y<\/i> percentage<\/li>\n<\/ol>\n

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

        \n
      1. (top.document.getElementsByTagName<\/a>(‘table’)[0], top.document.body)<\/li>\n
      2. (top.document.body, top.document.body)<\/li>\n<\/ol>\n

        … because the …<\/p>\n


        \ndw=\"\" + eval(top.window.        getComputedStyle<\/a>(document.getElementsByTagName('table')[0], null).getPropertyValue(\"width\").replace('px',''));
        \n<\/code><\/p>\n

        … Javascript code caters for all that huge width potential off to the right, that is not factored in with …<\/p>\n


        \ndw=\"\" + eval(top.window.        getComputedStyle<\/a>(document.body, null).getPropertyValue(\"width\").replace('px',''));
        \n<\/code><\/p>\n

        … more reflecting just the current width of your screen’s web browser window.<\/p>\n

        We again use the Android toast<\/a> view look to our HTML div position<\/a>:absolute<\/i> opacity<\/a>:0.3<\/i> z-index<\/a>:8<\/i> (\u00e0 la our usual “overlay”<\/a> CSS “friends”) element styling used for the display, as its Javascript DOM changes to top<\/a> and left<\/a> co-ordinates keep the view of it in front of the user’s eyes as the scrolling procedes, in real time.<\/p>\n

        Naturally, we’d like to illustrate this in the two “mode of use thoughts as above” so we offer you live runs for …<\/p>\n

          \n
        1. horizontal scrolling<\/a> if you click the “Start of Movie”, as we discussed earlier with Horizontal Hashtag Navigation Trapping Primer Tutorial<\/a> is shown below<\/li>\n
        2. vertical scrolling<\/a> is more the go with this checking HTML we wrote for today’s purposes<\/li>\n<\/ol>\n

          And today we have a dual mode of use you could see working in that vertical scrolling<\/i> idea 2 above with the HTML and Javascript programming source code you could call scroll_check.htm<\/a> …<\/p>\n