Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,971 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Examining the Spry framework
- Finding information on customizing Spry assets
- Defining page structure
- Modifying presentation through CSS
Skill Level Intermediate
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.