The sliding panel returns to its homeland when pressed

Question

I made a vertical sliding bar on a 1 page website (click psssst in the upper right corner). In general, it works fine, it slides up and down properly (still a small hit on the button when sliding, but not big).

The problem is that you go to the right, and then go to the top of the page on the sliding panel.

How can I fix / prevent this? You can see this problem here: http://www.basenharald.nl/3d

early!

Answer 1

It seems that you have two problems:

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

The click event at anchor sends you to the URL '/ #'. This is because the anchor element has a href of "#", and the default behavior of the browser is to send you this URL.

To prevent this, you should use e.preventDefault() in the click event handlers or return false if you want to stop the event propagation (because jQuery works).

Second problem

It seems that even after preventing default behavior, clicking on "#open" or "#close" still returns the Scroller to its original state. In firebug, I see that there is a click event handler for those elements that trigger this. You can see it for yourself by running this in firebug:

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

You will see the following:

 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 assign an event handler to all the anchors , and the line

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

- this is what causes your scroller to "reset", "return" or something else.

Maybe the problem is conditional? Maybe if (a[i].name == l) always evaluates to true and ultimately assigns an event handler to all the anchors, even if this is not his intention.

I don’t know enough about your application and / or any plugins that you use, so I can only tell you where the problem is, and this is 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; });