• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1139
  • Last Modified:

slideToggle once on first page load, not again

I have two DIVs on my page:

<div id="main">This shows all the time</div>
<div id="expanded">This shows when toggled open</div>

Open in new window


My related CSS is:

#main
{
	background: #000099;
	color: #FFF;
	width: 960px;
	height: 60px;
	margin-top: 20px;
}
#expanded
{
	background: #FFF;
	width: 958px;
	height: 300px;
	border: 1px solid #000099;
	display: none;
}

Open in new window


What I want is for my page to load and display the main div, then slowly toggleSlide the expanded div, wait a few seconds, toggleSlide the expanded div closed again, and then after that point, the user can click on the main div to re-expand it. I HAVE this piece working using the following javascript:

<script type="text/javascript">
	$(document).ready(function () {
		$('#expanded').delay(1000).slideToggle(1400); 
		$('#expanded').delay(5000).slideToggle(1000);

		$("#main").click(function () {
			$(this).next("#expanded").slideToggle(1000); 
		});
	});
</script>

Open in new window


The part I'm unsure how to do is that I only one the automatic slideToggle to happen the first time the user comes to the page (the homepage) if they're browsing around the site and come back to the homepage again, I don't want it to slideToggle automatically every single time. So I'm thinking I need to set a cookie or session variable...? How would I do something like this? It would be OK if they left the site and came back later and it automatically did the slideToggle again, but not on a single session visiting the site.
0
mandi224
Asked:
mandi224
  • 3
2 Solutions
 
elliottbenzleCommented:
You'll need to set a cookie which sets when the home page is loaded, and then check for it when the user returns.

http://www.w3schools.com/js/js_cookies.asp
0
 
mandi224Author Commented:
Ok thanks for pointing me in the right direction. I decided to use jquery.cookie.js

I modified my code to look like this:

<script type="text/javascript">
	$(document).ready(function () {
		$('#expanded').delay(1000).slideToggle(1500);
		$('#expanded').delay(5000).slideToggle(1500); 
		$.cookie("mypromo", "true", { expires: 2 }); 

		$("#main").click(function () {
			$(this).next("#expanded").slideToggle(1000);
		});
	});
</script>

Open in new window


This works, and is setting the cookie properly, however, I'm unsure how to check for the cookie. This is what I tried, and it is not working. (Please forgive me; I'm not very good with javascript/jquery.)

<script type="text/javascript">
	$(document).ready(function () {
		if ($.cookie("mypromo") == null) {
			$('#expanded').delay(1000).slideToggle(1500);
			$('#expanded').delay(5000).slideToggle(1500); 
			$.cookie("mypromo", "true", { expires: 2 }); 
		}

		$("#main").click(function () {
			$(this).next("#expanded").slideToggle(1000);
		});
	});
</script>

Open in new window


With this on the page, and my cookies cleared, it doesn't execute the toggle or set the cookie.
0
 
mandi224Author Commented:
Nevermind ... figured it out:

<script type="text/javascript">
	$(document).ready(function () {
		if ($.cookie("mypromo") != "true") {
			$('#expanded').delay(1000).slideToggle(1500);
			$('#expanded').delay(5000).slideToggle(1500); 
			$.cookie("mypromo", "true", { expires: 2 }); 
		}

		$("#main").click(function () {
			$(this).next("#expanded").slideToggle(1000);
		});
	});
</script>
           

Open in new window


This seems to work!
0
 
mandi224Author Commented:
User pointed me in the right direction but did not provide specific code.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now