CODEWITHSUNDEEP
javascriptcsscookieshidestate
sm.
sm.

Reputation: 43

How to get Javascript cookie to remember DIV state?

I've got a test site here (still in development) and I'm trying to get the little notification at the top to stay hidden once you click close.

Currently my script is like this:

<style type="text/css">
<!--
.hide {
display:none;
}
.show {
display:block;
}
-->
</style>
<script type="text/javascript">
<!--
var state;
window.onload=function() {
obj=document.getElementById('alert');
state=(state==null)?'show':state;
obj.className=state;

document.getElementById('close').onclick=function() {
obj.className=(obj.className=='show')?'hide':'show';
state=obj.className;
setCookie();
return false;
}
}

function setCookie() {
exp=new Date();
plusMonth=exp.getTime()+(31*24*60*60*1000);
exp.setTime(plusMonth);
document.cookie='State='+state+';expires='+exp.toGMTString();
}

function readCookie() {
if(document.cookie) {
state=document.cookie.split('State=')[1];
}
}
readCookie();
//-->
</script>

and then:

<div id="alert" class="show" style="float: left; width: 100%;"><div style="width: 80%; text-align:left; float:left;">Sorry for the downtime, we were experiencing some problems with our web host. Everything should be back to normal now =D</div> 
<div style="width: 18%; text-align:right; float:left; padding-right: 20px;"><a href='#' id="close">close</a></div> </div>

but it doesn't seem to work. Any ideas?

Thanks in advance!

Sam

Upvotes: 4

Views: 4241

Answers (2)

karim79
karim79

Reputation: 342635

First of all, you need to fix readCookie, your call to split will return everything after "State=", which will be stored in the first offset of the returned array, so instead do this:

function readCookie() {
    if(document.cookie) {
        var tmp = document.cookie.split(';')[0];
        state = tmp.split('=')[1];
        alert(state);
    }
}

Upvotes: 1

MrMage
MrMage

Reputation: 7487

For me, it does work (Firefox 3.5, Windows XP). But the div will not disappear before the site has finished loading. You might want to set the div to style="hide" in the first place and have it appear after the page has loaded.

Upvotes: 1

Related Questions