Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we've got the global variable set up, what we want to do now is set the totalPanels based on the total number of panels that the marquee has. Now we do that already in the navigation links when we generate the navigation links from the previous course. So inside of here we have a jQuery statement under the Generate Navigation links comment. That goes through and find every time there's a individual panel inside of the marquee_panels container and we generate a navigation item. We're going to come into this same function inside up here after we generate the navigation item.
We're going to hit Return, we're going to type window.totalPanels, and we're going to set that equal to the index+1;. The index is the number of times this item is running based on how many times it finds each of the marquee panels, and we're going to add one to it since the index automatically starts at zero. So we want to take the zero and add 1 to it and then we're going to add all the numbers. So four items, instead of going from 0 to 3, we'll go from 1 to 4.
Next we're going to update the debugger within the same function. So let's come up to one of the lines above. Copy one of these debugger statements. Command+C or Ctrl+C to copy, Command+V or Ctrl+V to paste, and we're going to replace totalPanels into the item that's being modified here. So we're going to set totalPanels. html equal to the string literal of totalPanels plus the value of window.totalPanels. Next we're going to scroll down to the script and look for the setup navigation links. This is where we control what happens when some actually clicks on these links.
We have a whole bunch of variables that we've setup inside up here, again from the previous course. So after newCaption we're going to come in here, we're going to hit Return, and then here we're going to set the window.currentPanel, and we are going to set this equal to, and we're going to lock onto a previous variable that we already set. We've up here navClicked. Let me just double-click and copy that. So navClicked equals this index. So when this script actually runs, we know which navigation item was clicked on.
So we're going to use the navClicked variable. So let's comedown under window.currentPanel= navClicked and let's add 1 to this as well. Let's hit Return. Let's scroll up and grab one of those debug lines of code, copy that to the clipboard, and let's come down to the next line and hit Paste. Let's double-click currentPanel and let's replace that into the debugger line on all three spots.
If I come up to the navigation and click on another panel, notice that currentPanel is now switched to 2. So as I interact now with the navigation, that variable is being sent over to that currentPanel variable. Now that we have all our global variables in place, in the next movie we'll create some custom functions to make the marquee play by itself.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66014 Viewers
61 Video lessons · 96626 Viewers
56 Video lessons · 110343 Viewers
82 Video lessons · 105125 Viewers
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.