Start learning with our library of video tutorials taught by experts. Get started
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 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.
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.
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.