2

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?

matt
  • 42,713
  • 103
  • 264
  • 397

2 Answers2

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();
}
Adam Terlson
  • 12,610
  • 4
  • 42
  • 63
  • well, I'm actually hiding it with css by default... i just didn't post the css in my question - sorry for that. Your proposed changes in the js seem actually logical, but the it doesn't make a difference. It works in all browsers and ie8. ie7 however doesn't show the bar. – matt May 14 '11 at 07:34
  • i found the solution. since the topbar is an overlay. i set it to `position:relative` and gave it a really high z-index of 99999. – matt May 14 '11 at 07:45
  • Interesting. I'm happy I at least... maybe... helped a little. – Adam Terlson May 14 '11 at 23:20
0

try to edit the cookie plugin:

in line 83 instead of :

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

use :

if ((typeof(document.cookie) != 'undefined') && document.cookie != '') {
Shlomi Komemi
  • 5,445
  • 3
  • 28
  • 41