Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So in order to stop the marquee from auto advancing we're going to use a hover function inside of jQuery to reset the autoPlay variable. So inside of the original script after our setinterval, we're going to come in here and we're going to type dollar sign, beginning and ending parenthesis, two tick marks inside, .marquee_container. Outside we're going to type dot, hover, beginning and ending parenthesis, semicolon. This hover function actually has two possible functions inside of it.
We're going to split this open. The first function is going to be triggered when the user rolls into this and the second functional will be trolled when the user rolls out of this object. So the first one we're going to type function, beginning and ending parenthesis, beginning and ending bracket, then I'm going to hit a comma, hit a new line, function, beginning and ending parenthesis, beginning and ending bracket, and we'll close this up. So inside of the first function which gets triggered on rollover, hit a few Returns and split the bracket open.
Inside of the function the first thing we're going to do, we're going to set the window.autoPlay equal to false. On the next line I'm going to type dollar sign, beginning and ending parenthesis, type the word this inside, which is going to target the marquee container, the object that this hover state is assigned to, .removeClass, beginning and ending parenthesis, semicolon.
Inside we're going to type autoplay, all lowercase to match the CSS rule we created in our CSS file. Inside of the second function, inside of the brackets let's split that open. When the user rolls outside of the marquee container, just type window.autoPlay = true. Now on the next line we want to reset the timePassed variable, just to make sure that when the user rolls off the marquee won't automatically advance immediately after they roll out.
We're going to type window.timePassed. We're going to set that equal to zero and last we're going to type $(this).addClass, beginning and ending parenthesis, semicolon, string literal. We're going to type autoplay, all lowercase, so we're going to add that CSS rule back onto this object. So quickly to recap, on hover this first function is going to run. When somebody rolls out or on no hover, it's going to go back to the original state.
autoPlay is going to be set to false up here on hover state and if we go back into our autoAdvance we see that we only trigger this auto trigger on the anchor links if autoPlay is equal to true. Now again, the script is going to be running every three seconds based on variable timeToChange up here, and so as it's going through the timer is still going to count, but if autoPlay is set to false, it's just going to sit there. So the user can interact with it and it's not going to auto advance for them. Now we also talked about in the introduction video the way this will work on mobile.
Now on mobile devices and tablets that are touch enabled, the hover state will be activated when the user touches the marquee to interact with it. So they will also get feedback that they have moved the marquee into a user interaction state. So at this point let's choose File > Save All. Back to our Index file, choose Preview in Browser, hit Reload. We should see our timer continue to count, timePassed equals timeToChange. It advances, current panel. Now when I roll into the marquee, notice that autoPlay now changes to false.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.