...

View Full Version : showing div only once per session (stuck setting cookie)



gribbs100
01-28-2011, 05:13 PM
Hello Guys,

I'm hoping somebody can help me out. I am pretty new to JQuery but have already learned basic effects and stuff but now I need to set a simple cookie and am not sure how to set it up.

I did a Google search the subject and have read a lot of simple tutorials but i'm not getting it to work so I want to start from scratch.

Basically, I have a html page. As soon as the page loads, I need a box to simply fade in on the screen above everything else ( a div called #message ). It will just have some text in it and also need a simple button to close it out.

Here is my issue: I only want this div to show 1 time per browser session so that if they go to another page on the site and come back to this page, the div #message will not appear again during that session.


I'm not sure if it is mandatory to use the jquery plugin called cookie or, it is not needed to do this?

Below is my html, which is very basic ( I made this quick just for testing purposes )



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

<style type="text/css">

#message {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
background-image: url(images/black.png);
background-repeat: repeat;
text-align: center;
height: 100%;
width: 100%;
color: #FFF;
}
body {
background-color: #FFF;
margin:0;
}

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>

<script type="text/javascript" src="includes/message.js"></script>

<script type="text/javascript" src="includes/cookie.js"></script>

</head>

<body>

<div id="message">this is the div to display once per session</div>

</body>

</html>




I don't know how to write the jquery that would go in message.js to set the cookie to display #message only once per session

A lot of the tutorials out there for this topic seem to over complicate things so I thought I would ask you guys for a hand.

Any help would be great. I value the help and intend to learn from it.


Thanks

harbingerOTV
01-28-2011, 09:50 PM
make sure you use this plugin: https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

Page 1:

<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="cookie.js"></script>

$(document).ready(function() {

if($.cookie("example") == null){
$('#message').fadeIn(function(){
$.cookie("example", "foo");
});
}
$('#message a').click(function(){
$('#message').fadeOut();
});

});
</script>

<style type="text/css">
#message {
display: none;
border: 2px solid #000;
background: #eee;
text-align: center;
padding: 20px 0;
width: 300px;
position: absolute;
z-index: 999;
top:100px;
left: 50%;
margin-left: -151px;
}
</style>

</head>
<a href="page2.html">Page 2</a>

<div id="message">
<p>Setting the cookie</p>
<p><a href="#x" onclick="return false">ok</a></p>
</div>

</body>
</html>


Page 2:

<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="cookie.js"></script>

$(document).ready(function() {

if($.cookie("example") == null){
$('#message').fadeIn(function(){
$.cookie("example", "foo");
});
}
$('#message a').click(function(){
$('#message').fadeOut();
});

});
</script>

<style type="text/css">
#message {
display: none;
border: 2px solid #000;
background: #eee;
text-align: center;
padding: 20px 0;
width: 300px;
position: absolute;
z-index: 999;
top:100px;
left: 50%;
margin-left: -151px;
}
</style>

</head>
<a href="page1.html">Page 1</a>

<div id="message">
<p>Setting the cookie</p>
<p><a href="#x" onclick="return false">ok</a></p>
</div>

</body>
</html>

Notice I have the script on both pages. No matter what page you enter, the cookie will set.

If you only want it being set on the home page, only include the:


if($.cookie("example") == null){
$('#message').fadeIn(function(){
$.cookie("example", "foo");
});
}

on the home page.

gribbs100
01-28-2011, 10:32 PM
Thank you very much for helping me out! I appreciate it. It seems to work fine in Firefox, IE 7 & 8 but it doesn't seem to work in Chrome. Do you have any ideas why that is so?

Thanks

gribbs100
01-29-2011, 02:08 AM
I figured out the problem. Apparently, Chrome has a know issue where it will not store local cookies. The topic seems to be discussed all over. Online, this works in all major browsers.

Thanks again for the help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum