Use JQuery preventDefault(), but still add the path to the URL

Question

I am working on a website where clicking on a certain link will slide down a login panel. I am using event.preventDefault() to stop the site from redirecting as well as an animation event to slide the panel down. When the link is clicked, the panel slides down and the url remains unchanged.

What I want to happen when the link is clicked is for the panel to animate as normal, but for the href attribute of the link to be shown in the url. In this case it would be something like this: http://domain_name/#login.

Here is the code I've got going right now:

$("#login_link").click(function (e) {
    e.preventDefault();
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear');

    window.location.hash = $(this).attr('href');
});

This code successfully adds the '#login' to the url as desired, but it skips the animation of the login panel. When clicking the link the panel just appears instantly. I would like to keep both the animation and the updated url behaviors. Is this possible?

This may be a silly question, but are you sure the jquery animation is working when the window.location.hash line of code is commented out? — Justin Beckwith, Aug 07 '11 at 06:10
Could you accept answers to questions you have asked? I'm sure at least a few of them have decent answers... people generally like recognition for their work. — beatgammit, Aug 07 '11 at 06:16
what happens when you just omit the `e.preventDefault()` line? — Shadow The GPT Wizard, Aug 07 '11 at 07:30

score 3 · Answer 1 · answered Aug 07 '11 at 06:22

3

use below code . just call the hash in animation completed event.

$("#login_link").click(function (e) {
    e.preventDefault();
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear', function(){  window.location.hash = $(this).attr('href'); });

});

answered Aug 07 '11 at 06:22

Chamika Sandamal

23,565
5
63
86

1

i remove mine, i so yours only after i posted :) – Rafael Herscovici Aug 07 '11 at 06:29

score 1 · Answer 2 · answered Aug 07 '11 at 07:40

I am not sure but you may bee looking for this feature

1> when some body clicks login, url changes to abc.com/#login, and login panel animation occurs

or

2 > when some body just types abc.com/#login in url, you expect the same behavior (animation of login panel).

What you are doing currently will work only for case1 and wont work for case2. If you want animation (or whatever) to work both, when clicked , or just url typed. You need some mechanism to detect hash changes.

There is a famous plugin http://benalman.com/projects/jquery-bbq-plugin/

Go and see this plugin and, look how things are done. If you find anything tough to understand we are here!!

Use JQuery preventDefault(), but still add the path to the URL

2 Answers2

Linked