Back Button in Ajax disables Animation

Question

Hi,

I have a webpage at http://www.optiekmeulemeester.be/normal with sliding navigation. This happens with the following code:

$(".link").click(function(){
  var link = $(this).attr('href');
  $("#middle").scrollTo(link, 800);
  return false;
});

This works, but now I'm trying to enable the Back Button by using jQuery Address (http://www.asual.com/jquery/address/). My code has changed to this:

$.address.change(function(event){
  var link = event.pathNames[0] || '#panel1'; 
  if(link != '#panel1'){ link = '#' + link;}
  $("#middle").scrollTo(link, 800);
});

The code for all .link clicks is commented out also the return false.

My back button gets enable and mostly it works as you can see and test at http://www.optiekmeulemeester.be/test. I'm sure it needs tweaking for special cases but before I get into that, the big problem is that my animation is not working anymore.

*edit: i now see that sometimes it works, and sometimes it doesn't. Can't find a logic into it. As well as clicking on the links as through the back button?!? Anyone get's my error?

Is this because the call for the animation comes after the address changes through the standard a(nchor) behavior?

Thanks in advance.

Answer 1

1 Answer that I found but is probably a work-around:

$.address.change(function(event){
  var link = event.pathNames[0] || '#panel1';
  if(link != '#panel1'){ link = '#' + link;}
  $("#middle").scrollTo(link, 800);
});

$(".link").click(function(){
  var link = $(this).attr('href');
  $("#middle").scrollTo(link, 800);
  return true;
});

Same code in the $.address.change function + another time in $(".link").click + return true so that address.change is fired.

Works for now :). If you got something better let me know!

Answer 2

Try something like the following:

$.address.change(function(event){
  $("#middle").scrollTo('#' + (event.pathNames[0] || 'panel1'), 800);
});

$(".link").address();

Few advises:

• Use speaking names for your links instead of panel1, panel2, etc.
• Try making some difference between the IDs of the containers and the address values because browsers may enforce some built-in behavior for scrolling to the proper place. Consider enabling the script mode as an option for this.
• Use an empty value for the first panel so that you can have a single unique value for the first page, not both "" and "panel1".
• Consider using the wrap option of the plugin that should fix some of the built-in scrolling.