Question

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. :/

Answer 1

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.