Start learning with our library of video tutorials taught by experts. Get started
Hi! This is Chris Converse, and this is a course on adding an autoplay to an 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'll 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 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 this ability 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 its 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 this into a fully user-interaction mode. So this is a function that's happening on the iOS. Let's hop over into Android. Let's open our web browser. Let's go take a look at this exact same experience running on a mobile device.
So I'm going to open up the same marquee with the debugging code in there, and you'll notice down here, we have a timePassed variable which is counting up to 3 seconds until its timeToChange. We have a 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 timeToChange, it doesn't auto-advance. And again, I can come in here and interact with it, roll outside, timeToPass sets back to 0 and then counts up to 3, and then currentPanel gets 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.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.