Solved

slideToggle once on first page load, not again

Posted on 2012-03-30
4
1,048 Views
Last Modified: 2012-04-04
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
Comment
Question by:mandi224
  • 3
4 Comments
 
LVL 4

Assisted Solution

by:elliottbenzle
elliottbenzle earned 500 total points
ID: 37787207
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
 

Author Comment

by:mandi224
ID: 37787859
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
 

Accepted Solution

by:
mandi224 earned 0 total points
ID: 37787873
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
 

Author Closing Comment

by:mandi224
ID: 37805144
User pointed me in the right direction but did not provide specific code.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
iframe detection of parent window scale 20 60
jQuery AJAX Redirects Without Response/Error 10 46
Replace &lt; with < 14 56
what is the difference between call and apply 1 26
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now