...

View Full Version : Hide div for duration of visit



jamble
10-03-2008, 12:27 PM
Hi all,

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 (http://www.codingforums.com/showthread.php?t=149413) 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?

Many thanks,

J.

vwphillips
10-03-2008, 02:42 PM
<!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:100px;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');">
<input type="button" name="" value="Test Reset" onclick="zxcCreateCookie('hideshow','',-1)"/>
<br />
<input class="hideshow" type="button" name="" value="hideshow 0" onclick="zxcHide('hideshow',1);"/>
<div class="default hideshow" >0</div>

</body>

</html>

jamble
10-05-2008, 10:03 AM
Hi Vic,

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:



<!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.

Cheers,

J.

vwphillips
10-05-2008, 01:08 PM
First
there was an error in my Create Cookie function so it was not domain wide accessable

corrected

<!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

micliz
04-24-2010, 07:19 PM
First
there was an error in my Create Cookie function so it was not domain wide accessable

corrected

<!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?

vwphillips
04-25-2010, 10:27 AM
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


<!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>

Philip M
04-25-2010, 10:30 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum