CODEWITHSUNDEEP
javascriptcookies
Ethernity4ever
Ethernity4ever

Reputation: 1

JS cookie div visibility

I got this JS script that sets the cookie and show / hides the div 

<html>
<head>
<script type="text/javascript">
function setCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}
function getCookie (name) {
    var cookie = " " + document.cookie;
    var search = " " + name + "=";
    var setStr = null;
    var offset = 0;
    var end = 0;
    if (cookie.length > 0) {
        offset = cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            end = cookie.indexOf(";", offset);
            if (end == -1) {
                end = cookie.length;
            }
            setStr = unescape(cookie.substring(offset, end));
        }
    }
    if (setStr == 'false') {
        setStr = false;
    } 
    if (setStr == 'true') {
        setStr = true;
    }
    if (setStr == 'null') {
        setStr = null;
    }
    return(setStr);
}
function hidePopup() {
    setCookie('popup_state', false); 
    document.getElementById('popup').style.display = 'none';
}
function showPopup() {
    setCookie('popup_state', null);
    document.getElementById('popup').style.display = 'block';
}
function checkPopup() {
    if (getCookie('popup_state') == null) { // if popup was not closed
        document.getElementById('popup').style.display = 'block';
    }   
}

</script>
</head>
<body onLoad="checkPopup();">
<a href="#" onClick="hidePopup(); return false;">Turn Off</a></br></br>
<a href="#" onClick="showPopup(); return false;">Turn On</a>
     <div id="popup" style="display:none">Hello! Welcome to my site. If you want to hide this message then click</div>
</body>
</html>

I need someone, if anyone is kind enough to explain to me, how can i change the cookie values? (name, expires, etc) and how can i merge the on / off buttons into 1 button that will do the job of toggleing the show/hide and editing the cookie correspondingly.

Upvotes: 0

Views: 223

Answers (1)

user4006175
user4006175

Reputation: 399

to change the current value of cookie you can set the cookie again with thesame name that will overlap the current value of the cookie

to your second question you can use checkbox for on/off

    function shoWhidePopup(el){
    if(el.checked==true){
        showPopup();
    }else if(el.checked==false){
        hidePopup();
    }
}

and in the html

<label>
    <input type="checkbox" onclick="shoWhidePopup(this);" hidden>
    <span style="appearance:button; -moz-appearance:button; -webkit-appearance:button;">show/hide</span>
</label>

Upvotes: 1

Related Questions