Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So we're going to say SP1 and then that's going equal a new, so we'll use the new keyword, and it we'll just do a little dot syntax here. Spry.Widget.SlidingPanels and notice that as soon as we type in Spry, we get code hinting aplenty. So Dreamweaver understands the Spry framework, even the stuff that's not default in Dreamweaver, and still gives you those code hinting things, which is awesome. So Sliding Panels and then in parentheses, in the quotation marks, we're going to pass in detailSlide1. More on that in just a moment. Notice that the code hinting is telling us that we can pass in an element and then an array of options after that. We'll deal those options a little bit later on. For right now, we're only going to pass the value detailSlide1. Again you want to put that in quotation marks, close your parenthesis and add a semicolon to that.
SP1.showPanel. showPanel is pretty much the only method invoked here, although there are a couple of other ones like showFirstPanel, things like that. The panels are built in an array. So I'll use panel0 for the first panel and then we'll type in a semicolon and close the quotation mark. So again it should say onClick equals, and then in quotation marks, SP1.showPanel, zero. So what you're doing is you're passing in the ID, so which palette it is. Zero would be the first one. Now we mimic that when we gave our panel structure an ID, if you remember that.
Looking down here at line 50, it says DIV ID panel0. Now those two do not need to match up. I'm just making sure that you understand the numberings convention that Spry uses as it numbers these elements so that it builds an array, the first one, zero, the second one is one, so forth and so on. So we're going to go to the next link, which has the title of smallT. And if you want, you can make life a little bit easier on yourself by copying this. And then pasting it directly after that and then just changing the index value from zero to one. That's a lot faster so I'm going to do that for that one.
Then I'll find the opening link tag for bag. Paste that in. That one's going to be two. Then find your final link tag, go inside that. That's a longT. Paste that there and remember your last one is going to be showPanel 3. Alright. Excellent. Save the file. We'll switch back over to Design View. And we'll preview this in Firefox. We'll see how it's working. So if I click, notice our first, second, third and fourth panel content is animating exactly the way that we want it to.
We're just using placeholder data in the moment because I want you to see the functionality before we focus on the actual content itself. One of things I want you to notice about this is that it's scrolling vertically, so our animation is happening vertically. Not horizontally. And that's not what we want. We don't have anything going on customize in terms the animation itself. So it's functional, but it's not done just yet. We need to change the animation so it scrolls horizontally, not vertically. We definitely need to work on the styling. Before we tackle the styling we'll focus on getting the functionality where we need it, and that's the subject of the next movie.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98235 Viewers
61 Video lessons · 85544 Viewers
71 Video lessons · 69495 Viewers
56 Video lessons · 101838 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.
Your file was successfully uploaded.