Start learning with our library of video tutorials taught by experts. Get started

Set a Marquee to Autoplay with jQuery and Dreamweaver

Creating a custom JavaScript function


From:

Set a Marquee to Autoplay with jQuery and Dreamweaver

with Chris Converse

Video: Creating a custom JavaScript function

Now, inside of the autoAdvance function, we are going to add a couple of different logic statements. The first thing we are going to do is put an if statement in here. I am going to type if, beginning and ending parentheses, beginning and ending bracket. Let's open that up. Now, inside of the if, inside of the parentheses, we are going to type window.timePassed, double equals to test the overall equality of that variable of timePassed, window.timeToChange.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Set a Marquee to Autoplay with jQuery and Dreamweaver
38m 22s Intermediate Jun 21, 2011

Viewers: in countries Watching now:

This course, which builds on the foundations of Create an Interactive Homepage Marquee with jQuery and Dreamweaver, enhances the marquee with an auto-play feature that automatically advances through the slide images when the page is loaded. Working in a Dreamweaver environment, Chris Converse shows how to add auto play using a combination of HTML, CSS, and JavaScript, plus the implementation of hover states in jQuery. This course also covers adding play/pause functionality, as well as an interaction timeout, which will restart the marquee after a specified period of idle time.

Topics include:
  • Previewing a project across browsers and devices
  • Updating CSS and HTML in Dreamweaver
  • Adding debugging code
  • Declaring variables in JavaScript
  • Using setInterval
  • Stopping auto play during user interaction
Subjects:
Web Web Design Projects
Software:
Dreamweaver jQuery
Author:
Chris Converse

Creating a custom JavaScript function

Now, inside of the autoAdvance function, we are going to add a couple of different logic statements. The first thing we are going to do is put an if statement in here. I am going to type if, beginning and ending parentheses, beginning and ending bracket. Let's open that up. Now, inside of the if, inside of the parentheses, we are going to type window.timePassed, double equals to test the overall equality of that variable of timePassed, window.timeToChange.

So if the variable window.timePassed equals window.timeToChange, we want to run something inside up here. What we are going to do is we want to set window.timePassed back to 0. Then inside of here we are going to add another if statement. We are going to type if, beginning and ending parentheses, beginning and ending bracket, split that open. Inside of the if, the condition we want to happen here is window.currentPanel, double equals, window.totalPanels.

So, we want now the currentPanel equals the total number of panels. This will let us know that we are on the actual last panel. We are going to set currentPanel=0. So, that ends this first condition inside of the condition timePassed=window.timeToChange. We are going to add a second condition within the timePassed=timeToChange. We are going to type if, beginning and ending parentheses, beginning and ending bracket. Let's close that up. This condition is going to be autoPlay == true.

So, if autoPlay equals true then what we want to do is change the state of the marquee. So, what we are going to do now is write a jQuery statement that is going to in a sense automatically click one of those navigation buttons. So, it will be as if the user clicked it, but we are actually going to click it through the script. So, we are going to star with a dollar sign, beginning and ending parentheses, inside we are going to put two tick marks for string literal. We are going to type .marquee_nav a.marquee_nav_item.

This is going to lock onto the anchor tags with the marquee_nav_item class. Then we are going to put a colon, and then we are going to say nth-child, beginning and ending parentheses. Let's put an x in here for the moment. Then outside of the parentheses, we are going to hit .trigger, beginning and ending parentheses, semicolon, and then inside of the trigger function two tick marks. We are going to add a click.

So, by targeting one of the anchor tags inside of marquee_nav and setting the trigger event of a click, again we're basically auto clicking that link. Now, the x in here, we want to replace it with a variable. So, instead of the x, we are going to type two tick marks. Inside the tick marks, we are going to put two plus signs. We want to concatenate a string inside of here. And what we are going to do is come up here and grab window.currentPanel. Then we are going to add a +1 and we are going to put window.currentPanel and the +1 inside of another set of parentheses.

So the JavaScript will take windowPanel, add 1, take this entire statement, replace it or concatenate it into the number of the nth-child. What nth-child does in jQuery is it basically takes all of the items inside of that element and lets you pick a specific number. Now, we can't use the nth-child with 0. We have to use it with the 1, which is why we have to take currentPanel and add a 1 to it. So, this is the second condition inside of timePassed equals timeToChange.

So, I'll close the script up a little bit. And now in the main if statement, we are going to type in else, and another beginning and ending bracket. So, this is the else statement of the original if statement. Let's come inside of the else statement and we are going to type window.timePassed += 1;. So, what this does is it auto increments the value of timePassed by 1.

So, the += means take the current value and add a 1 to it. Since the autoAdvance function, this entire function here, is going to run every second., ig the total timePassed=TimeToChange, then we know that we've satisfied the total duration or delay and we can reset this back to 0. I realize that has to be a lowercase. And then if the timePassed is not equal to timeToChange, we are going to add a 1 to it. So, this is going to be our little counter that's going to count up.

The last thing we are going to do in the script, let's copy two lines of debug code from below. Outside of the else statement, we are going to type the two debug statements and we are going to set the first one, timePassed, so that we update our debug area in our HTML. Make sure the second one is set to update the autoPlay. The one I copied and pasted already has it been there so I will just leave it. Now that that's done, let's choose File > Save All.

Let's go back to our HTML. Let's preview this in a browser. Let's hit Reload. So, now when we load the marquee, we will see that the timePassed variable is counting up. When timePassed euqals timeToChange, the autoAdvance happens. autoPlay is set to true at the top, currentPanel is set to 4, totalPanels = 4, and then when this runs again, it will set it back to 1, timePassed get set back to 0, and then it continues to count.

And in the next movie, we will set up a way to pause the autoPlay if the user wants to interact with the marquee.

Find answers to the most frequently asked questions about Set a Marquee to Autoplay with jQuery and Dreamweaver.


Expand all | Collapse all
Please wait...
Q: This course was updated in April, 2013. What changed?
A: Since the release of this course, Chrome conflicts with jQuery 1.6, and browsers run the autoplay when the windows is not in focus. To remedy these issues, the author has added a movie to Chapter 5 that will show you how to:
- Update the version of jQuery
- Detect the focus state of a web window
- Create a compound conditional JavaScript statement
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Set a Marquee to Autoplay with jQuery and Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked

Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.