I'm trying to find what I'm sure is a simple bit of js which I can use that will close a div for the duration of a users visit as it would hide a notice I'd only want to display once on a site.
Essentially all I'd want to do is have a simple div with a paragraph and a link to close the div but to have it remember across pages that the user has dismissed the notice.
I noticesearched around and found a similar request here but I don't know js enough to replace the inputs in the example to a simple link and to remove the show div functionality.
Anyone able to provide me with any pointers on how I'd be able to achieve this?
Thanks for the reply and code snippet, much appreciated.
I was wondering though, I'm looking at making something slightly simpler that if possible just uses a simple link.
I'd imagined the HTML would just be:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="notice">
<p>This is the notice div. It would show up by default and when you click <a href="#">this link</a> it would hide/disappear the div notice for the remainder of the visitors session.</p>
</div>
</body>
</html>
It's easy enough for me to make the div disappear on click, I'm just having a bit of trouble with the cookie itself to make sure it hides the notice throughout a site rather than the user keep having to dismiss the notice.
Any thoughts on how I might be able to do this? I don't need to restore the notice at any point so don't need to "re-show" the notice.
First
there was an error in my Create Cookie function so it was not domain wide accessable
corrected
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.default {
width:300px;height:100px;background-Color:red;
}
.hide {
display:none;
}
.show {
display:block;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxcHide(zxccls,zxcdays){
var zxcobjs=zxctElsByClass(zxccls);
var zxcv='';
for (var zxc0=0;zxc0<zxcobjs.length;zxc0++){
zxcobjs[zxc0].style.display='none';
zxcv+=zxcobjs[zxc0].style.display+':'
}
zxcCreateCookie(zxccls,zxcv,zxcdays);
}
function zxctElsByClass(zxccls,zxcp,zxctag) {
zxcp=zxcp||document;
zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
zxctag=zxctag||'*';
for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
}
return zxcary;
}
function zxcStyleValue(zxcobj,zxcp){
if (zxcobj.style[zxcp.replace(/-/g,'')]) return zxcobj.style[zxcp.replace(/-/g,'')];
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace(/-/g,'')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}
function zxcCreateCookie(zxcnme,zxcv,zxcdays){
document.cookie=zxcnme+'='+zxcv+';expires='+(new Date(new Date().getTime()+zxcdays*86400000).toGMTString())+';path=/';
}
function zxcReadCookie(zxcnme){
zxcnme+='=';
var zxcsplit = document.cookie.split(';');
for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
var zxcs=zxcsplit[zxc0];
while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
}
return null;
}
function zxcRestore(zxccls){
var zxcv=zxcReadCookie(zxccls);
if (zxcv){
zxcv=zxcv.split(':');
var zxcobjs=zxctElsByClass(zxccls);
for (var zxc0=0;zxc0<zxcobjs.length;zxc0++){
zxcobjs[zxc0].style.display=zxcv[zxc0];
}
}
}
/*]]>*/
</script>
</head>
<body onload="zxcRestore('hideshow');">
<br />
<input type="button" name="" value="Reset" onclick="zxcCreateCookie('hideshow','',-1); "/>
<div class="default hideshow" >
<p>This is the notice div. It would show up by default and when you click <a href="#" onclick="zxcHide('hideshow',1); return false">this link</a> it would hide/disappear the div notice for the remainder of the visitors session.</p>
</div>
</body>
</html>
second
using client side coding the cookie can only be set by time
you may be able control the session using serverside code
First
there was an error in my Create Cookie function so it was not domain wide accessable
corrected
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.default {
width:300px;height:100px;background-Color:red;
}
.hide {
display:none;
}
.show {
display:block;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxcHide(zxccls,zxcdays){
var zxcobjs=zxctElsByClass(zxccls);
var zxcv='';
for (var zxc0=0;zxc0<zxcobjs.length;zxc0++){
zxcobjs[zxc0].style.display='none';
zxcv+=zxcobjs[zxc0].style.display+':'
}
zxcCreateCookie(zxccls,zxcv,zxcdays);
}
function zxctElsByClass(zxccls,zxcp,zxctag) {
zxcp=zxcp||document;
zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
zxctag=zxctag||'*';
for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
}
return zxcary;
}
function zxcStyleValue(zxcobj,zxcp){
if (zxcobj.style[zxcp.replace(/-/g,'')]) return zxcobj.style[zxcp.replace(/-/g,'')];
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace(/-/g,'')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}
function zxcCreateCookie(zxcnme,zxcv,zxcdays){
document.cookie=zxcnme+'='+zxcv+';expires='+(new Date(new Date().getTime()+zxcdays*86400000).toGMTString())+';path=/';
}
function zxcReadCookie(zxcnme){
zxcnme+='=';
var zxcsplit = document.cookie.split(';');
for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
var zxcs=zxcsplit[zxc0];
while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
}
return null;
}
function zxcRestore(zxccls){
var zxcv=zxcReadCookie(zxccls);
if (zxcv){
zxcv=zxcv.split(':');
var zxcobjs=zxctElsByClass(zxccls);
for (var zxc0=0;zxc0<zxcobjs.length;zxc0++){
zxcobjs[zxc0].style.display=zxcv[zxc0];
}
}
}
/*]]>*/
</script>
</head>
<body onload="zxcRestore('hideshow');">
<br />
<input type="button" name="" value="Reset" onclick="zxcCreateCookie('hideshow','',-1); "/>
<div class="default hideshow" >
<p>This is the notice div. It would show up by default and when you click <a href="#" onclick="zxcHide('hideshow',1); return false">this link</a> it would hide/disappear the div notice for the remainder of the visitors session.</p>
</div>
</body>
</html>
second
using client side coding the cookie can only be set by time
you may be able control the session using serverside code
This code seems to work but when the users hides the div after that it pops up for a second or two upon page refreshing then it hides itself... any way to eliminate this?
I can only presume that your page is quite large and includes elements that take time to load.
You could put the div at the top of the page and place the restore call immediatly after the div
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.default {
width:300px;height:100px;background-Color:red;
}
.hide {
display:none;
}
.show {
display:block;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxcHide(zxccls,zxcdays){
var zxcobjs=zxctElsByClass(zxccls);
var zxcv='';
for (var zxc0=0;zxc0<zxcobjs.length;zxc0++){
zxcobjs[zxc0].style.display='none';
zxcv+=zxcobjs[zxc0].style.display+':'
}
zxcCreateCookie(zxccls,zxcv,zxcdays);
}
function zxctElsByClass(zxccls,zxcp,zxctag) {
zxcp=zxcp||document;
zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
zxctag=zxctag||'*';
for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
}
return zxcary;
}
function zxcStyleValue(zxcobj,zxcp){
if (zxcobj.style[zxcp.replace(/-/g,'')]) return zxcobj.style[zxcp.replace(/-/g,'')];
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace(/-/g,'')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}
function zxcCreateCookie(zxcnme,zxcv,zxcdays){
document.cookie=zxcnme+'='+zxcv+';expires='+(new Date(new Date().getTime()+zxcdays*86400000).toGMTString())+';path=/';
}
function zxcReadCookie(zxcnme){
zxcnme+='=';
var zxcsplit = document.cookie.split(';');
for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
var zxcs=zxcsplit[zxc0];
while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
}
return null;
}
function zxcRestore(zxccls){
var zxcv=zxcReadCookie(zxccls);
if (zxcv){
zxcv=zxcv.split(':');
var zxcobjs=zxctElsByClass(zxccls);
for (var zxc0=0;zxc0<zxcobjs.length;zxc0++){
zxcobjs[zxc0].style.display=zxcv[zxc0];
}
}
}
/*]]>*/
</script>
</head>
<body >
<br />
<input type="button" name="" value="Reset" onclick="zxcCreateCookie('hideshow','',-1); "/>
<div class="default hideshow" >
<p>This is the notice div. It would show up by default and when you click <a href="#" onclick="zxcHide('hideshow',1); return false">this link</a> it would hide/disappear the div notice for the remainder of the visitors session.</p>
</div>
<script type="text/javascript">
/*<![CDATA[*/
zxcRestore('hideshow');
/*]]>*/
</script>
</body>
</html>
second using client side coding the cookie can only be set by time
you may be able control the session using serverside code
A Javascript cookie without any expiry date is a session cookie, i.e. persists throughout that browser session. +';path=/'; makes the cookie available throughout the domain.
Before you post, read our: 
Hide div for duration of visit
