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.

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.

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.

<!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>

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.