CODEWITHSUNDEEP
jqueryjquery-animatereloadpage-refresh
Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

How to stop jQuery animation restarting on page refresh?

I have created a search form animated with jquery, like this NextLevelSearch. I want that when I open the search form and refresh page this doesn't close. How can i accomplish this?

I tried with e.preventDefault(); and return false; but doesn't work, and I know that has nothing to do with my issue.

This is my code:

$globalsearch_submit.click(function(){
    $('#stat').hide();
    $('.wrapper-simple').animate({'width':'275px'})
        .end().find('.wrapper-simple input[type=text]').css({opacity: 0, visibility: "visible"}).animate({'width': '231px', opacity: 1}) 
        .end().find('.wrapper-simple .button').animate({ 'right': '40px' })
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'235px', opacity: 1}, 10)               
    return false;
}); 
$('.wrapper-simple input[type=submit]').click(function() {
    $('#stat').show();
    $('#stat').delay(500).css('opacity',0).show().animate({opacity:1},100); 

    $('.wrapper-simple').animate({'width':'40px'}) 
        .end().find('.wrapper-simple input[type=text]').animate({'width': '1px', opacity: 0})
        .end().find('.wrapper-simple .button').animate({ 'right': '0' })
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'0', opacity: 0}).attr('value', ''); 
    return false;
});

Please help! Thank you.

(i'm sorry for my bad english)

Upvotes: 0

Views: 1474

Answers (1)

Dave
Dave

Reputation: 46339

I would use the document hash (window.location.hash) to save the current state of the page;

$('.wrapper-simple input[type=submit]').click(function() {
    $('#stat').show();
    $('#stat').delay(500).css('opacity',0).show().animate({'opacity':1},100); 

    $('.wrapper-simple').animate({'width':'40px'}) 
        .end().find('.wrapper-simple input[type=text]').animate({'width': '1px', 'opacity': 0})
        .end().find('.wrapper-simple .button').animate({'right': 0})
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft': 0, 'opacity': 0}).attr('value', '');

    document.location.hash='form';

    return false; // not related to this, but needed for other reasons
});

(in that example I set it to "form", so your page's URL will display as "mysite.com/mypage.htm#form" after clicking the button. You can use anything you like, with certain restrictions on which characters are allowed — see this answer: List of valid characters for the fragment identifier in an URL?)

You can then detect this tag when the page loads:

$(document).ready(function(){
    var h=window.location.hash.replace(/^#/,'');
    if(h==='form'){
        $('#stat').css({'opacity':1}).show(); 

        $('.wrapper-simple').css({'width':'40px'}) 
            .end().find('.wrapper-simple input[type=text]').css({'width': '1px', 'opacity': 0})
            .end().find('.wrapper-simple .button').css({'right': 0})
            .end().find('.wrapper-simple input[type=submit]').css({'marginLeft': 0, 'opacity': 0}).attr('value', '');
    }
}

Notice that I've copied the code but changed any animate calls to simple css calls, to change it instantly.

This means that once your user clicks the button, any refresh of the page, or bookmarking, closing, and re-opening from the bookmark, etc. will mean the form is open immediately (with a slight flicker as the page loads, which is more work to avoid). Also this does not use cookies, which are increasingly problematic. To mark the form as closed again, you can just set the hash to something else (such as an empty string).

Twitter, Google, Facebook and many others use this technique.

Upvotes: 2

Related Questions