How do I keep a div visible when the user goes to a different page?

So, the user clicks something and then a div pops out from the left side.

Then I save via a cookie whether or not the div is "visible" or "hidden" in JavaScript.

$('#click').click(function()
{
    save_cookie('div', 'visible');

    $('.class').animate({'margin-right': '-20px'});

    return false;
});

if(get_cookie('div') != null)
{
    if(get_cookie('div') == 'visible')
    {
        $('.class').css({'margin-right': '-20px'});
    }
    else
    {
        $('.class').css({'margin-right': '0px'});
    }
}

So, if the user decides to go to a different page, I check whether or not I should display the div or not.

And the problem I'm having is that the div "blinks" for a 开发者_高级运维second, when the user goes to a different page. And I know this is due to the fact that it takes a few seconds before the HTML, CSS and JavaScript is loaded.

But I was wondering if there is a better technique on how to do this? So it doesn't "blink."

BTW, I also tried to move the JavaScript to the head (from the bottom), but this also didn't change anything. :/

A simple solution could be to apply display:none in css as default value for div and change it then accordingly from jQuery.

is your javascript inside document.ready? It shouldn't be really, not if you want to avoid the flicker. I'd add it to the head just in it's own little script and use it to add a class to the html element. Then style the div to appear when that class is present.

You are close to the right code methodology - what you may want to change though is to start the page with the DIV visible, then animate it retracting. This hints to the user that there is something else that can appear (your div) and also makes it load properly.

you can use an iFrame that is the size of the browser window for main navigation, and have the overlay work happen outside the iFrame.