JavaScript Forum

**uomeds** · 06:30 AM

I am attempting to produce a link that will set a cookie, and based on the cookie value, either hide or display a certain div id on all pages.

I have implemented a code that I found here:
http://www.webmasterworld.com/javascript/3003082.htm

It works perfectly in isolation:
http://uomeds.com/cbl/cbl-2.htm

However, when I try adding it to the actual site, the hidden text won't hide under any circumstance. It does not seem to be applying the 'hide' class attribute to the div id on load. It also doesn't seem as if the cookie is setting when show/hide is clicked.

http://uomeds.com/cbl/cbl.htm

I have tried looking at it with Firebug but I don't see any relevant errors.

Any help sorting this out would be amazing. I'm really lost here.

Thanks.

**chrishirst** · 12-28-2009, 06:30 AM

Quote:

However, when I try adding it to the actual site

???????
It would appear that both of your example URIs ARE on the same site.

You simply need to work out what the code does differently on the page where you get the desired result to the page where you don't

HINT!

A cookie value does not exist until an action or event on the page creates it.

**uomeds** · 06:41 AM

Quote:

Originally Posted by chrishirst

???????
It would appear that both of your example URIs ARE on the same site.

You simply need to work out what the code does differently on the page where you get the desired result to the page where you don't

HINT!

A cookie value does not exist until an action or event on the page creates it.

That's what's so baffling about it. I've changed nothing in the raw code, but inserting it into cbl.htm causes it to fail.

On the plus side, I've narrowed it down a bit. I've found that the code doesn't actually require a cookie to be set initially to work, so that's probably not my first problem at least.

The code works on initial page load by finding any <div id="tutor-guide"> and adding a class definition to make <div id="tutor-guide class="tutor-hide">.

Class="tutor-hide" is then described by CSS as "display:none" so the div will be hidden to start.

This is how it works in isolation (cbl-2.htm).

But again, for some reason, using the same code in cbl.htm does not produce this result. The tutor-hide class is not added to the div on page load so it is never hidden from the start.

Any possible cookie dysfunction is thus irrelevant, at least until I can find out why it won't initially hide.

**chrishirst** · 12-28-2009, 07:11 AM

Why add a class to the element?

simply "tell" the element itself to be hidden.

**uomeds** · 12-28-2009, 09:13 AM

I've checked again and even the raw code seems to be creating FireBug Javascript warnings, despite working okay. Could anyone look it over for what's possibly wrong with it or how to clean it up to make it more robust? Perhaps that will take care of my other problems with it.

Thanks again.

http://uomeds.com/cbl/cbl-2.htm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>two state cookie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#tutor-setup {
color:#000;
background-color:#fff;
}
#tutor-guide {
width:400px;
padding:30px 20px;
border:3px double #000;
margin:20px auto;
}
#tutor-guide p {
margin:0;
text-align:justify;
}
.tutor-hide {
display:none;
}
.tutor-show {
display:block;
}
-->
</style>

<script type="text/javascript">
<!--
var state;
window.onload=function() {
obj=document.getElementById('tutor-guide');
state=(state==null)?'tutor-hide':state;
obj.className=state;

document.getElementById('tutor-setup').onclick=function() {
obj.className=(obj.className=='tutor-show')?'tutor-hide':'tutor-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>

</head>
<body>

<div>
<a id="tutor-setup" href="#t">show/hide information</a>
</div>

<div id="tutor-guide">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p>
</div>

</body>
</html>