Search jQuery

jQuery Forum

Getting Started

rhalskov

hide "div", only the first time

in Getting Started • 11 years ago

Hi everyone

I need a little help.

I have a site where the first time a visitor comes to the site, i have to hide a <Div> tag.

After 5 sec the <Div> tag should fade in. It should only do this the first time.

Here is the code i have been trying to get work

I am trying to use .data to set a value, after the jQuery had shown the box the first time.

If the value is set it should not hide the "<Div>"

Any hint witch could point me in the right direction would help. tanks in advance...

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.div {
background-color: #6699FF;
border-style: dotted;
height: 251px;
width:600px;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$("#setTest").text(jQuery.data(#setTest, "true"));
case:1
$(document).ready(function(){
$(".div").hide()
$(".div").delay(2000).fadeIn(6000);
case:2
jQuery.data(#setTest { "true" });
});
</script>
</head>
<body>
<div class="div"></div>
<div id="setTest"></div>
</body>
</html>

Replies(4)

dsvick

Re: hide "div", only the first time

11 years ago

The problem you're going to run into is that each time they come to the page your values will be reset and it will be as if it is the first time to the page. You'll need to use either a cookie or some sort of server side flag to maintain the fact they've been to the page already.

A cookie will be easier and more accurate as well. Unless it is site that has a login a server side method wont be very reliable.

So the code would work like this ...   (sorry no actual example)
hide the element
if there is a cookie that says they've been there
      don't do anything
else
      show the div
      set the cookie

Hope that gets you started

rhalskov

Re: Re: hide "div", only the first time

11 years ago

I was trying this... no luck..

A little more help.. in the right direction, tanks in adwance..

Haw e a nice weekend

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.div {
background-color: #6699FF;
border-style: dotted;
height: 251px;
width:600px;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$.cookie('hide'); // get cookie
if $.cookie('hide') === "true"
//do nothing
else
$(document).ready(function(){
$(".div").hide()
$(".div").delay(2000).fadeIn(6000);
$.cookie('hide', 'true'); // set cookie
});
</script>
</head>
<body>
<div class="div"></div>
<div id="setTest"></div>
</body>
</html>

dsvick

Re: hide "div", only the first time

11 years ago

A couple of things

Your code does not start in the ready handler, in fact you have the ready handler in the middle of your code.
Your if clause needs to be inside of parenthesis
The else should be enclosed in curly braces
You are only hiding the div if the cookie is not set already
I dont see where you import the cookie plugin

Check this out here:

$(".div").hide() ;
if ($.cookie("hide") != "true") {
$(".div").delay(2000).fadeIn(6000);
$.cookie("hide", "true")
}

Place all of that within the ready handler and you should be good to go, assuming you download and reference the plugin.

rhalskov

Re: hide "div", only the first time

11 years ago

Solved

Tanks a lot.

Here is the two tings which was tricky for me

Working with Cookies demands cookies.js (Get it here: https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js )
Cookies do not work on localhost, at least not at my localhost

Correction: It works fine on localhost. if i set the right path ;-)

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.div {
background-color: #6699FF;
border-style: dotted;
height: 251px;
width:600px;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($.cookie("hide") != "true") {
$(".div").hide() ;
$(".div").delay(2000).fadeIn(6000);
$.cookie("hide", "true")
}
});
</script>
</head>
<body>
<div class="div"></div>
<div id="setTest"></div>
</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

hide "div", only the first time

Replies(4)

Re: hide "div", only the first time

Re: Re: hide "div", only the first time

Re: hide "div", only the first time

Re: hide "div", only the first time

Statistics

Tags

Actions