How can I set a cookie to expire after x days with this code I have.

**alexsmith9** · 07-03-2011 04:12 AM

So I have this code (which I did not make) which basically makes a container with an X, so when I press the X, the div container closes. However, when you refresh the page, the div container will reappear again.

How can I make it so when the person presses the X button, the person will never see the div container ever again (or for a set amount of time like 30 days) on that page?

I want to take it one step further, if possible, and make it so when the person presses the X button, he/she will never see the div container again throughout my site, as I plan on implementing the same div container throughout my site.

Hope this isn't too confusing, and that someone can help me out. Thanks.

HTML Code:
<div id="bottom_ad">
<div id="close_ad" onclick="close_bottom_ad();">X</div>

</div>
CSS
Code:
#bottom_ad
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
background: #000;
}
#close_ad
{
position: absolute;
top: 8px;
right: 8px;
width: 15px;
height: 15px;
color: #fff;
}
JavaScript (Place at bottom of file, before </body> tag.)
Code:
<script type="text/javascript">
// I may have sorta kinda taken this function from W3Schools. :S
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}

var ad_cookie = getCookie("closedAd");

if (ad_cookie != null && ad_cookie != "")
{
document.getElementById("bottom_ad").style.display="none";
}

function close_bottom_ad()
{
document.getElementById("bottom_ad").style.display="none";
document.cookie = "closedAd=true;";
}
</script>

**007Julien** · 07-03-2011 07:16 AM

You have to use the function setCookie !

HTML Code:

function close_bottom_ad(){
   document.getElementById("bottom_ad").style.display="none";
   setCookie("closedAd",true,30);}

Don't lose too many time for test with this kind of script (witch shows that the duration may be reduced to milliseconds)...

**vwphillips** · 07-03-2011 07:23 AM

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[*/
#bottom_ad
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
background: #000;
}
#close_ad
{
position: absolute;
top: 8px;
right: 8px;
width: 15px;
height: 15px;
color: #fff;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
function close_bottom_ad(days){
 document.getElementById("bottom_ad").style.display="none";
 document.cookie='bottom_ad=true;expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
}

function cookie(nme){
 var re=new RegExp(nme+'[^;]+','i');
 if (document.cookie.match(re)){
  return document.cookie.match(re)[0].split("=")[1];
 }
 return null
}


/*]]>*/
</script>
</head>

<body>
<div id="bottom_ad">
<div id="close_ad" onclick="close_bottom_ad(1);">X</div>
<!-- Ad Content -->
</div>

<script  type="text/javascript">
/*<![CDATA[*/

if  (cookie('bottom_ad')){
 document.getElementById("bottom_ad").style.display="none";
}
/*]]>*/
</script></body>

</html>

**alexsmith9** · 07-03-2011 06:15 PM

Hey guys, thanks for the response. I'll try it soon, and I'm sure it'll work. Once again, thanks!

**alexsmith9** · 07-04-2011 09:00 AM

007Julien, can you show me how to put it into the actual code though?

vwphillips, the code doesn't work at all

. Nothing shows up. If I put the
<script type="text/javascript">
/*<![CDATA[*/

if (cookie('bottom_ad')){
document.getElementById("bottom_ad").style.display="none";
}
/*]]>*/
</script>
on the head however, I get the same result as my original post. Which is a container that can be X'd and nothing more. It doesn't not show for a set number of days after a person has hit X.

**wbport** · 07-04-2011 09:39 AM

These are the cookie functions I use in my guitar chords site.

Code:

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.toUTCString());
}

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 "";
}

HTH

**clueful** · 07-04-2011 09:47 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<style>
#bottom_ad
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
background: #000;
}
#close_ad
{
position: absolute;
top: 8px;
right: 8px;
width: 15px;
height: 15px;
color: #fff;
}
</style>

</head>
<body>
<div id="bottom_ad">
<div id="close_ad" onclick="close_bottom_ad();">X</div>
AD CONTENT
</div>

<script type="text/javascript">
function readCookie( cName )
{
  var v;

  return decodeURIComponent( ( v = ( document.cookie || "" ).match( "(^|\\s)" + cName + "=([^;$]+)" ) ) ? v[ 2 ] : "" );
}

function setCookie( cName, cValue, life, cPath, cDomain, cSecure )
{
 var dt = new Date(), 
     expSecs = ( expSecs = life.toString().match( /\bsecs\s*=\s*(\d+)/i ) ) ? Number( expSecs[ 1 ] ) : 0,
     params = ( life ? ( ";expires=" + new Date( expSecs ? ( dt.setTime( dt.getTime() + expSecs * 1000 ) )                                                          : ( dt.setDate( dt.getDate() + life) ) ).toUTCString() ) : "" )
            + ( cPath ? (";path=" + cPath) : "" )
            + ( cDomain ? ";domain=" + cDomain : "" )
            + ( cSecure ? ";secure" : "" );

 document.cookie = cName + "=" + encodeURIComponent( cValue ) + params;

 return readCookie( cName );
}

if( readCookie( "closedAd" ) )
{
  document.getElementById("bottom_ad").style.display="none";
}

function close_bottom_ad()
{
  document.getElementById("bottom_ad").style.display="none";
  setCookie( "closedAd", "true", 30 );
}
</script>

</body>
</html>

**007Julien** · 07-05-2011 03:26 AM

vwphillips : There are 11 characters with special meanings in regular expression : the opening square bracket [, the backslash \, the caret ^, the dollar sign $, the period or dot ., the vertical bar or pipe symbol |, the question mark ?, the asterisk or star *, the plus sign +, the opening round bracket ( and the closing round bracket ). These special characters are often called "metacharacters" and strictly speaking you have to put an antislash before this characters in nme.

Thread: How can I set a cookie to expire after x days with this code I have.

Thread Tools

Display

How can I set a cookie to expire after x days with this code I have.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions