PDA

View Full Version : Show/hide div based on cookie value



bigalo
11-12-2009, 04:37 PM
Hello all,

I need some help! I am trying to finish a script that shows a particular div based on the last 2 chars in the cookie value. I have the cookie part done. I just need a little help with the show hide part.

Can anyone help!

Thanks in advance!



<HTML>
<HEAD>
<TITLE>cookie set, delete, get value and create</TITLE>
<SCRIPT LANUAGE="JavaScript">
/**
* Sets a Cookie with the given name and value.
*
* name Name of the cookie
* value Value of the cookie
* [expires] Expiration date of the cookie (default: end of current session)
* [path] Path where the cookie is valid (default: path of calling document)
* [domain] Domain where the cookie is valid
* (default: domain of calling document)
* [secure] Boolean value indicating if the cookie transmission requires a
* secure transmission
*/
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
/**
* Gets the value of the specified cookie.
*
* name Name of the desired cookie.
*
* Returns a string containing value of specified cookie,
* or null if cookie does not exist.
*/
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
</SCRIPT>

</HEAD>
<BODY>
<input type="button" value="Set Cookie" onclick='setCookie("location", prompt("Enter your location:\n Enter \"Baltimore, MD\" in the text box below."))' />
<br>
<br>

<script>
var state = getCookie("location").slice(-2);
if (state=='MD' || state=='NC'){
alert("location stripped to" + " - " + state);

//Show hide code here...

}
</script>

Refresh page after setting the cookie to "Baltimore, MD"<br>

<br>
<div id="image1">Image1</div>
<div id="image2">Image2</div>
<div id="image3">Image3</div>
</BODY>
</HTML>

jscheuer1
11-12-2009, 06:09 PM
Your cookie code is pretty poor, but apparently workable, at least in Firefox. It's not clear what you are trying to doing really, one interpretation could be:


<HTML>
<HEAD>
<TITLE>cookie set, delete, get value and create</TITLE>
<script type="text/javascript">

/**
* Sets a Cookie with the given name and value.
*
* name Name of the cookie
* value Value of the cookie
* [expires] Expiration date of the cookie (default: end of current session)
* [path] Path where the cookie is valid (default: path of calling document)
* [domain] Domain where the cookie is valid
* (default: domain of calling document)
* [secure] Boolean value indicating if the cookie transmission requires a
* secure transmission
*/
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
/**
* Gets the value of the specified cookie.
*
* name Name of the desired cookie.
*
* Returns a string containing value of specified cookie,
* or null if cookie does not exist.
*/
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}

</script>

</HEAD>
<BODY>
<input type="button" value="Set Cookie" onclick='setCookie("location", prompt("Enter your location:\n Enter \"Baltimore, MD\" in the text box below."))' />
<br>
<br>

Refresh page after setting the cookie to "Baltimore, MD"<br>

<br>
<div id="image1">Image1</div>
<div id="image2">Image2</div>
<div id="image3">Image3</div>
<script type="text/javascript">
var state = getCookie("location")? getCookie("location").slice(-2) : '';
if (state=='MD' || state=='NC'){
alert("location stripped to" + " - " + state);

if(state === 'MD'){
document.getElementById('image1').style.display = 'none';
}

}
</script>
</BODY>
</HTML>

Better cookie code may be found here:

http://www.dynamicdrive.com/forums/blog.php?b=32

bigalo
11-12-2009, 06:24 PM
I just figured it out! here is what I have:



<script>
window.onload=function(){
var state = getCookie("location").slice(-2);
var Image1 = document.getElementById("image1");
var Image2 = document.getElementById("image2");
var Image3 = document.getElementById("image3");
if (state=='MD' || state=='NC'){
alert("location stripped to" + " - " + state);
Image1.style.display="inline";
}else if (state=='SC' || state=='VA') {
Image2.style.display="inline";
}else{
Image1.style.display="none";
Image2.style.display="none";
Image3.style.display="none";
}
}
</script>