Checking Display Value of HTML element and saving to a Cookie in jQuery

Question

I'm trying to use jQuery to toggle the appearance of a shoutbox and remember that state from page to page. My problem is getting the cookie that remembers the state set. Here's the code I've come up with so far, but it doesn't seem to be executing the if statement correctly. Any ideas why?

function show_shoutbox() 
{
$('#SB').toggle("fast"); 

if ( $('#SB').css('display') =="none")
    { document.cookie = "displaysb=false;"; }
else
    { document.cookie = "displaysb=true; ";}
}

My experience with Javascript and jQuery is minimal, so I apologize if this is a stupid question.

Answer 1

Try

if ( $('#SB').is(':visible') ) {
    ...
}

It's normalized to work a little better than checking display.

Answer 2

document.cookie doesn't work that way. Check out:
http://www.quirksmode.org/js/cookies.html

It even has code at the end of it:

function createCookie(name,value,days) {
    if (days) {
     var date = new Date();
     date.setTime(date.getTime()+(days*24*60*60*1000));
     var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
     var c = ca[i];
     while (c.charAt(0)==' ') c = c.substring(1,c.length);
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

Answer 3

Cache your element for efficiency

var sb=$('#SB');//cache once outside the function
function show_shoutbox() {
  sb.toggle("fast"); 
  if ( sb.is(':visible')) {//do your business
  }
  else { //do something else
  }
}