New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Set a Marquee to Autoplay with jQuery and Dreamweaver
Illustration by

Set a Marquee to Autoplay with jQuery and Dreamweaver

with Chris Converse

Video: Previewing the project across browsers and devices

Hi! This is Chris Converse and this a course on adding an autoplay to interactive marquee. This actually builds on an earlier course where we actually built the interactive marquee. What we're going to be adding in this course is the ability to have the marquee autoplay. So as I open up the final project here that we will be creating, we can see that the marquee is auto advancing itself after a certain number of seconds. When it gets to the final slide, as it's about to right here, it will realize that it's on its final slide and then animate back to the very beginning and continue on. When I roll my cursor inside of the marquee, we actually stop the autoplay and give the users a chance to interact with the marquee.

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

Previewing the project across browsers and devices

Hi! This is Chris Converse and this a course on adding an autoplay to interactive marquee. This actually builds on an earlier course where we actually built the interactive marquee. What we're going to be adding in this course is the ability to have the marquee autoplay. So as I open up the final project here that we will be creating, we can see that the marquee is auto advancing itself after a certain number of seconds. When it gets to the final slide, as it's about to right here, it will realize that it's on its final slide and then animate back to the very beginning and continue on. When I roll my cursor inside of the marquee, we actually stop the autoplay and give the users a chance to interact with the marquee.

So the navigation goes from semitransparent to fully opaque. I can click on the different panels, go to different slides, and when I roll out, the timer will be reinitiated. It will realize it's on the third panel, go to the fourth panel, and then continue on. I have the timer set really fast here, so you can see the entire process moving slide to slide, but during the course we'll show you how to set any time delay that you want. Another advantage of the platform we're using here, which is JavaScript jQuery and HTML, is going to be the ability to have this work across multiple platforms and devices.

So I want to quickly hop over here to Windows 7, running IE 9, and look at the same exact user experience running in that particular browser. This will work all the way back to IE 7 in Windows XP and there is something else that's really nice about this particular implementation. If we look at the same experience on a mobile device, I'll start off with the iPad here, one of the things that we added was disability to roll into the marquee and be able to stop the autoplay. Now on touch devices such as tablets and phones, we don't have a hover state.

So what the different devices will actually do here is you'll notice it's auto playing here on the iPad. When I come in here and click on the navigation item, that will actually trigger the hover state, bring my navigation in, and actually move us into a fully user interaction mode. So this is a function that happening on the iOS. Let's hop over into Android. Let's open a web browser. Let's go take a look at this exact same experience running on a mobile device. I'm going to hit Ctrl+F11 to rotate this.

I can see the autoplay is advancing. And again when I come in here and click on the navigation points, All of the navigations come out to 100%, the autopsy is now stopped, and that moves into a full user interaction mode on the Android platform as well. And there is one more thing we will be doing throughout the course and that is we're to be adding our own little debugging section to the HTML, and we're going to be sending variable data from our JavaScript over to the HTML so we can track the progress. So I'm going to open up the same marquee with the debugging code in there and you'll notice down there we have a timePassed variable, which is counting up to 3 seconds until it's time to change. We have currentPanel variable and a totalPanels and an autoPlay set to True.

If I roll my cursor into the marquee, you'll see that it changes from True to False for autoPlay. The timer is still counting, but when it gets to 3 and matches the time to change, it doesn't auto advance. And again, I can come in here and interact with it roll outside. timeToPassed sets back to 0 and then comes up to 3 and then currentPanel get changed and the marquee advances again. So this little debugging script is going to be invaluable to us as we write our script and be able to tell what's happening inside of our marquee.

Once we're completed with the course, we can then go in and take out the debugging code and publish this up on our web site. So I hope this course sounds interesting and I hope this is a really valuable add-on to the original marquee course, and if so, let's get started with the first movie.

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

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

join now 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
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

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.