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

    Show/hide div based on cookie?

    Hey everybody

    This is my first post here... I'm working on a form (div) thats on top of a given website, and that should only be visible the first time someone visits the site.

    What I don't have is a javascript to do that. While i use lots of scripts, unfortunately i can't code them myself... is there anybody that can help me with that? I got a div called 'overlay', and i'd like display:block first time you visit the site, and display:none after that. I'll attach the script i have now, but i simply don't know how to adapt it to do what i want.

    The deadline for this project is tomorrow, and altough i've been browsing the web extensively i haven't found anything that i can use :-(

    Thank you very much for your help!

    H.

    Code:

    <script type="text/javascript">
    <!--
    var state;
    window.onload=function() {
    obj=document.getElementById('overlay');
    state=(state==null)?'hide':state;
    obj.className=state;

    document.getElementById('close').onclick=function() {
    obj.className=(obj.className=='show')?'hide':'show';
    state=obj.className;
    setCookie();
    return false;
    }
    }

    function setCookie() {
    exp=new Date();
    plusMonth=exp.getTime()+(31*24*60*60*1000);
    exp.setTime(plusMonth);
    document.cookie='State='+state+';expires='+exp.toGMTString();
    }

    function readCookie() {
    if(document.cookie) {
    state=document.cookie.split('State=')[1];
    }
    }
    readCookie();
    //-->
    </script>

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    function getCookie(c_name)
    {
    if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=");
      if (c_start!=-1)
        { 
        c_start=c_start + c_name.length+1; 
        c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1) c_end=document.cookie.length;
        return unescape(document.cookie.substring(c_start,c_end));
        } 
      }
    return "";
    }
    function setCookie(c_name,value,expiredays)
    {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
    }
    
    window.onload=function()
    {
    var obj=document.getElementById('overlay'),
    username=getCookie('State');
    if (username!=null && username!="")
    	obj.className='hide';
    else 
    	{
    	obj.className='show';
        setCookie('State','show',365);
    	}
    document.getElementById('close').onclick=function()
    {
    var obj=document.getElementById('overlay'),state;
    obj.className=(obj.className=='show')?'hide':'show';
    state=obj.className;
    return false;
    }
    }
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,498
    Thanks
    3
    Thanked 500 Times in 487 Posts
    did this for someone else, may be of interest
    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 zxcHideShow(zxccls,zxcnu,zxcdays){
     var zxcobjs=zxctElsByClass(zxccls);
     var zxcv='';
     for (var zxc0=0;zxc0<zxcobjs.length;zxc0++){
      if (zxc0!=zxcnu) zxcobjs[zxc0].style.display='none';
      else zxcobjs[zxc0].style.display=zxcStyleValue(zxcobjs[zxc0],'display')=='none'?'block':'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="hideshow 0" onclick="zxcHideShow('hideshow',0,1);"/>
    <input type="button" name="" value="hideshow 1" onclick="zxcHideShow('hideshow',1,1);"/>
    <div class="default hideshow" >0</div>
    <div class="default hide hideshow" >1</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/


  •  

    Posting Permissions

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