Menu
I want to implement on my site show-hidden div block as on stackoverflow.com - at a time when the user wants to hide it himself putted on button "X". May already have a ready-made solution? I am not verse in Javascript and would be very grateful for the help!
Picture:
922
JavaScript can also manipulate cookies using the cookie property of the Document object. JavaScript can read, create, modify, and delete the cookies that apply to the current web page.
So, when accessing a cookie using client-side JavaScript, only the cookies that have the same domain as the one in the URL bar are accessible. Similarly, only the cookies that share the same domain as the HTTP request's domain are sent along with the request headers to the server.
This is simple working example without using any external library. You can improve it with your animation/design. Also these functions for cookies can be very simplier but you can use it in future to set not only boolean value. UPDATE: I added functon for show your popup again (for debug mostly).
<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();">
<div id="popup" style="display:none">Hello! Welcome to my site. If you want to hide this message then click <a href="#" onclick="hidePopup(); return false;">[x]</a></div>
<div>Some static text here.</div>
<div>Bring me <a href="#" onclick="showPopup(); return false;">back</a> my popup!</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
