SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)

    Fire a JavaSript event when user moves from one div to another using address bar

    Hi,

    I have a page divided into various divs, each with an unique id.

    The user can navigate through these divs using a nav bar at the top of the screen, which is pinned in position with 'position:fixed'.

    I want to fire a JavaScript event whenever the user views a different div.

    I have attached an event handler to the links in the nav bar. Correspondingly when the user uses the nav bar to move around the page the desired event always fires.

    However, if the user uses the address bar to navigate nothing happens, e.g. if someone is viewing "www.mysite.com/#panel1" and then types into the address bar "www.mysite.com/#panel2", they are moved to the corresponding section of the site, but no event fires.

    Is there any way to achieve this?

    Thanks in advance.

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think there's an event that notifies a hash change.
    You could use the onscroll event to poll location.hash, but it doesn't allow for manual scrolling. I would use onscroll to monitor which of the group of relevant elements is currently displaying the most area within the viewing pane.
    Tab-indentation is a crime against humanity.

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi thanks for that,

    I'm using jQuery and following your advice I came up with the code:

    $(window.document).scroll(function(){
    do stuff
    });

    Now I can detect when scrolling starts. This also fires when navigating via the address bar as previously described and also when navigating via the back button. So this is definitely progress. Thanks very much!

    However, what I would really like to do, is not to fire an event when scrolling starts, rather when it stops.

    Is this possible?
    If so, could you give me a pointer as to how I might acheive this?

    Thanks very much.

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    However, what I would really like to do, is not to fire an event when scrolling starts, rather when it stops.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type = "text/css">
    body{line-height:3em}
    </style>		
    </head>
    <body>
    <p>
    
    <script type='text/javascript'>
    
    function myFunc( )
    {
      document.title = "Scrolling stopped at " + new Date().getTime();  
    }
    
    window.onscroll = ( function ( funcRef )
    {
      var t;
      
      return function()
      {
       clearTimeout( t ); 
       
       t = setTimeout( funcRef, 300 );     
      }
      
    })( myFunc );
    
    </script>
    		
    <br>=<br>--<br>***<br>=<br>--<br>***<br>=<br>--<br>***<br>=<br>--<br>***
    <br>=<br>--<br>***<br>=<br>--<br>***<br>=<br>--<br>***<br>=<br>--<br>***
    </body>
    </html>
    Tab-indentation is a crime against humanity.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Thank you ever so much for that.
    The code you supplied really pointed me in the right direction.
    Now everything works just as it should.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •