Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Hide div for duration of visit

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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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: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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    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.

    Cheers,

    J.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    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?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by vwphillips View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •