jquery: js-cookie in ie7 not working?

Question

hey guys, don't get it... I want to show a bar at the top of my page only if viewed with ie6, ie7 or ie8.

<div id="topbar">
    <div class="topbarcontent">Some Information for users.</div>
    <div class="topbarCloser" title="Schließen">&nbsp;</div>
</div>

jquery:

if ($.browser.msie && $.browser.version.substr(0,1)<9) { // if ie6 || ie7 || ie8

var topbar = $.cookie('TopBar');

if (topbar === 'on') {
    $('#topbar').hide();
} else { 
    $('#topbar').show();
}

//Browser Tip
$('#topbar .topbarCloser').click(function() {
    $(this).parent().slideUp({
        duration: 300,
        easing: 'easeOutQuint',
        complete: function() { 
            $('#topbar').remove();
            $.cookie('TopBar', 'on', { expires: 1000 });
        }
    });
});

}

The user can simply click the closer, a cookie is saved and the bar is hidden for future visits. (i know this should be done with a database, but in my case that's okay)

It works fine in ie8 but in ie7 the bar does blink for like a few milliseconds and than is hidden. So if the page is visited for the first time in ie7 the topbar should be visible, however it isn't. I can see it blinking very shortly and then it is hidden. (doesn't fade out, is just hidden).

Any idea what could cause that? Anything weird with my code?

Answer 1

This is likely caused by your CSS. Your JS doesn't hide it right away, and your CSS has it visible. Switch your case up. Hide your bar by default (in CSS) and then, if necessary, show it with JavaScript.

This will prevent that brief moment on page load where it's visible before your JS comes along to hide it.

So...

#topbar { display: none; }

This means your JS can just read:

if (topbar != 'on') {
    $('#topbar').show();
}

Answer 2

try to edit the cookie plugin:

in line 83 instead of :

if (document.cookie && document.cookie != '') {

use :

if ((typeof(document.cookie) != 'undefined') && document.cookie != '') {