Results 1 to 3 of 3

Thread: Show/hide div based on cookie value

  1. #1
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Show/hide div based on cookie value

    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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    bigalo (11-12-2009)

  4. #3
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    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>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •