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!

Code:

<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:

Code:

<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:

Code:

<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>

Thread: Show/hide div based on cookie value

Thread Tools

Search Thread

Show/hide div based on cookie value

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions