Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating a custom JavaScript function

From: Set a Marquee to Autoplay with jQuery and Dreamweaver

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.

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.

Show transcript

This video is part of

Image for Set a Marquee to Autoplay with jQuery and Dreamweaver
 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now "Already a member? Log in

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

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.