Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So at this point, now that we have all of our CSS and layout done, we're going to come back over to Code view and we're going to pull this data out of the marquee_container and put it into the marquee_panels. So in Code view, let's scroll down to the marquee_panels div that we created earlier. Let's get our cursor in here, and let's split this. Inside of marquee_panels, let's create another div, div class=, and this is going to be called marquee_panel singular.
So all of the panels will be inside of--all the individual panels, rather- will be inside of the marquee_panels class. Let's end that tag. Begin a new tag. Forward slash to end that div. So everything inside of here will represent one panel worth of data. In the very first one, we're going to have just the image tag for the photography. So let's come up here to line 13. Let's select this entire line here. Let's choose Edit > Cut. I am also going to back up that ending div so that the marquee_photos div is on the same line.
Let's come down to marquee_panel. Let's tab in, choose Edit > Paste, and get that code in there. Let's create a new line. Let's create one more div, class="marquee_panel_caption". End the tag. New tag. Forward slash to end the div.
Let's open that up. Now, inside of here, let's come up to lines 15 through 18. We're going to grab the image tag for the flag, the h2 heading, and the two paragraph tags. We are going to go to Edit. We're going to cut this. Let's back this ending div up for our marquee_caption_content. Let's come down here to marquee_panel_ caption, choose Edit > Paste, and now we have all of the data for one of the panels inside of an entire marquee_panel div here.
So now what I want to do is let's grab all of the marquee_panel, choose Edit > Copy, and we're going to paste this four times. Let's hit Return, Command+V or Ctrl+V, paste 2, 3, and 4. So now we have four sets of panels. So the first one is London. We will leave this one the same. I just want to come in here to "This is a test caption for London", "This is a test caption for London".
This is how I can tell if this is actually working. So let's come down to the second one. Instead of london, we're going to type milan here. We are going to link to the milan.jpg file. Change Milan in the alt text. The flag is italy. For the heading, we're going to type Milan. M, we're going to use an acute accent mark.
So that's &i--the letter i is going to be the letter getting the acute, acute;lan. This is a test caption for. Let's choose Edit and Copy the heading, paste, paste. Next, the third one. Instead of london, type 'staugustine'.
For the heading, St. Augustine. Let's copy and paste "This is a caption for St. Augustine". Flag is going to be usa. The last one, instead of london, we're going to type montreal.
Flag is going to be canada. For the heading, I'm going to type 'Montreal' tr, we're going to put an acute for the e. éal. Let's copy that, "This is a caption for Montreal" Hit paste, Command+V. Now, the last thing I can do in order to make this look a little nicer on the screen for myself is inside of the width being 700, I can come in here and change this to 100, and I can get rid of the height attribute altogether.
We're going to be hiding this div from our users, but while we're looking at it on the screen to make our edits, we don't need to see the photography in full size. In jQuery, we're going to come in here and just simply pull out the source of this particular JPEG file. So I'm going to grab width=100, choose Copy, and for each one of these, I'm going to replace width and height, Command+V and Ctrl+V, and paste in just width as 100. Now, let's switch back to Design view.
Now, in Design view, I will see all these panels showing up in the page here. None of them more styled because we don't have any CSS rules that target anything inside of the marquee_panels tag, but we're going to actually hide this from the users. If I scroll up to the top, I'll see that our container now is completely empty for the marquee. We took out the photography and all the caption information, and we have them all down here. We can add or remove panels to our marquee by simply adding and removing the number of panels inside of the marquee_panel's main container div. Now that all of our data is in place, we want to do one more thing.
Let's come in to our CSS Rules. Let's create a rule called marquee_panel. Choose Class. So, marquee_panels. Choose OK. Let's come down to Block properties. Set a Display to none. Click OK. Now in our main page, we have all of the divs in place here, but the main panels will be hidden from our users.
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.