Hello there, 1st of all i would like to say hi to everyone and i hope your having a nice day.
Now I can’t make up my mind how to approach this problem.
I have 2 div-s, on the same position, 1 hidden 1 visible. Now depending on the cookie value i would like the divs to change from visible to hiden and the other way around. This cookie is set by a button on the web page and can be toggled on/off whenever. Now my question is, what would be the best solution to use to make this? Php? JS? Jquery?
Thanks in advance for your replies and have a nice day
If you don’t already have jQuery loading, then it’s kind of like using a rocket propelled grenade to kill a spider to use jQuery for this.
IMHO, vanilla JS or jQuery would be ideal for this. They can both read the value of the cookie entry and show/hide accordingly. The exception being, of course, if JS is disabled.
If you are expecting a somewhat high number of your target demographic to have JS disabled, then a server-side solution (PHP, ASP, ColdFusion, etc.) would be more ideal.
So i found this code since i don’t know how to write my own. never worked with JS. Im wondering where to change the parameters (cookie name, expires, domain etc) and can i merge the 2 buttons that toggle the div on / off into 1 button?
<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>
To address your second question first, yes, you can merge the two buttons/links into one.
You can use just the one link/button, give it one function that will toggle the display of both divs at once. This creates more work, as you’ll need to read the value of the cookie, first, then set hide/show of each div based upon that value, then change the value of the cookie for the next time the page loads
As far as your first question, .you would call ‘getCookie()’ and pass the name of the cookie to it and evaluate the response (kind of like "if(getCookie(‘thisCookie’)==0){display;}else{don’t display;} - very simplified, but effective.) You don’t need ALL of the parameters in each function, as the functions check to see if the parameter has been passed before considering to use it.
