Sliding panel jumping back to home when clicked

Question

I made a vertical sliding panel on a 1page website (click psssst on the top right). All in all it works fine, it slides up and down properly (still a little bump on the button when sliding, but no biggy).

The problem is when you scroll to the right and then click the sliding panel it jumps back to the beginning of the page.

How can i fix/prevent this? You can view the problem here: http://www.basenharald.nl/3d

thanks in advance!

Answer 1

It seems that you have two problems:

The first problem (you've already fixed it, I think)

The click event on the anchor is sending you to the '/#' URL. This happens because the anchor element has an href of "#" and the default behavior of the browser is to send you to that URL.

In order to prevent that from happening, you should use e.preventDefault() in your click event handlers, or return false if you want to stop all event propagation (because that's how jQuery works).

The second problem

It seems that even after preventing the default behavior, clicking on '#open' or '#close' is still bringing the Scroller back to the initial state. In firebug I can see that there is a handler for the click event on those elements that is causing this to happen. You can see it yourself by running this in firebug:

console.log($('#close')[0].onclick.toString())

You'll see this:

function () {
  Scroller.end(this);
  l = this.hash.substr(1);
  a = document.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    if (a[i].name == l) {
      clearInterval(Scroller.interval);
      Scroller.interval = setInterval("Scroller.scroll(" + Scroller.offsetParent(a[i]) + ")", 10);
    }
  }
}

It seems that somewhere in your code you're assigning an event handler to all anchors, and the line

Scroller.interval = setInterval("Scroller.scroll(" + Scroller.offsetParent(a[i]) + ")", 10); 

is what's causing your Scroller to "reset", "go back" or something.

Maybe the problem is the conditional? Maybe if (a[i].name == l) is always evaluating to true and ends up assigning the event handler to all anchors even though that's not its intent.

I don't know enough about your app and/or whatever plugins you're using, so I can only tell you where the problem is, and it's in this function.

Hope this helps.

Answer 2

Try adding return false; to your click handlers:

// Expand Panel
$("#open").click(function(){
    $("div#panel").slideDown("slow");
    return false;
}); 

// Collapse Panel
$("#close").click(function(){
    $("div#panel").slideUp("slow");
    return false;
});