New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Customizing the finished widget

From: Dreamweaver CS3 Projects: Creating Custom Spry Widgets

Video: Customizing the finished widget

If you remember previewing the finished project back in the first movie, you might recall how the content of the panel seem to blur while animating. A nice subtle effect that can make your Spry assets just that much better than what we get by default. By browsing the Spry assets CSS file, and I'm going to flip over to that because we have our SprySlidingpanels.CSS, you'll come across a few empty class styles that aren't used by default widgets. So I'm going to scroll down and as you get all the way down to the bottom here, I can see that we have SlidingPanelsAnimating, SlidingPanelsCurrentPanel and SlidingPanelsFocused.

Customizing the finished widget

If you remember previewing the finished project back in the first movie, you might recall how the content of the panel seem to blur while animating. A nice subtle effect that can make your Spry assets just that much better than what we get by default. By browsing the Spry assets CSS file, and I'm going to flip over to that because we have our SprySlidingpanels.CSS, you'll come across a few empty class styles that aren't used by default widgets. So I'm going to scroll down and as you get all the way down to the bottom here, I can see that we have SlidingPanelsAnimating, SlidingPanelsCurrentPanel and SlidingPanelsFocused.

So these classes are dynamically assigned as your panel widget is activating. Now the only one that's got content on it currently is the SlidingPanelsAnimating and notice it says overflow hidden and it gives that a rank of important so that no matter what's going on, whatever's animating inside that, if there's any overflow, it will be hidden and that allows the viewport to continue to crop all the content without any of it flowing outside of it. Note the wild card. So that's telling you that anything, any element that's animating, is going have the style applied to.

We're going to take advantage of that. We're going to take advantage of the SlidingPanelsAnimating class to change the styling of our content while it's animating. We won't do that here inside of our SlidingPanels.CSS. We're going to have to use a more specific selector and since we might not want to change the default behavior of our Sliding Panels, we'll do it locally in our embedded styles. So I'm going to close this file, make no changes to it whatsoever. And I'll go back into the details_start.htm, which is found in the Chapter 10 directory. So I'm going to switch over to Code View, and once again we'll go up to our embedded styles and I'n just going to collapse my panel so I can see this a little bit better.

So here are the background images that we did earlier and what I'm going to do is go to the very bottom of those and hit Return and I'm going to enter a new CSS comment. Once again, giving myself some dashes there to sort of hold this out. I'll type in 'styles for panels as they animate.' Again, a little note to myself in terms of what the styles are doing. And we'll hit Return and we'll go down to our first style. Remember the class style is SlidingPanelsAnimating, and you'll never see it, because it's dynamically assigned to the panels as they animate. So we're taking advantage of both the JavaScript and the styling functionality to customize our widget.

So we're going to type in #mainContent, space, .Sliding, capital S, Panels, capital A, Animating, space h2. We're first going to style the heading as it animates. We're going to open up a curly brace for it and assign a different color to it and the color we're going to give it will be the #999, which is sort of a medium gray color. And don't forget your semicolon and then close your curly brace. So that's the first one. That's pretty easy, right? So let's go down and we'll do our second one, which is #mainContent.SlidingPanelsAnimating, space, p.

So now we're going to target the paragraph inside of that, and we're going to type in color and guess what? We're going to go ahead and do a #999 to that too. So if you're wondering, "Hey, can I have a group of those selectors together?" Yep. You certainly could have. Now if you're tired of typing in the first part of this, you could just copy the #mainContent.SlidingPanelsAnimating. And if you typed it in correctly the first time, that way you don't worry about making mistakes from there on. So that's what I'm going to do. I'm going to copy it, go down to the next line and paste it. And then I'm going to add to the descendent selector span.price.

So again we're going to be styling the span.price. And here we pass along the same color to it #999. So if you want to group all the selectors together, feel free. That's fine. I just want to separate them so you can see what each one of those is doing. So we're done with that and what we need to do now is work on all the individual panels themselves. So I'm going to hit Enter to go down to the next line. I'll go ahead and start that by using the copied #mainContent.SlidingPanelsAnimating and then inside that, I'm going to type in #panel0, panel zero. If you remember that is the first panel.

So open up that and I'm going to type in background, and I'll keep a lot of the stuff the same, so for example I'm going to use the same background graphic #A8BAAA. So do URL and we're going to browse to the Chapter 10 directory because we're in Chapter 10 now. So we'll go in Chapter 10, images, details, and here we can find hoody_blur and you can see it's just a blurred version of our normal hoody_detail file and that will give us the illusion as it's animating of blurring. So we're just going to swap one background graphic out for another one and that's another reason to use background graphics here because if this was an image tag, I would have to do some very fancy JavaScripting in order to swap this out. So I'm going to click OK.

So here I'm driving that functionality through CSS instead, which is a lot easier to do. Remember that we have to say no-repeat and we're going to do 10 pixels for our horizontal placement, 5 pixels for vertical placement and don't forget to close out the curly brace. Once again, if you don't feel like typing this all over again, I don't blame you. So I'm going to copy this and I will paste it. And I'm going to change the panel to panel one instead of panel zero. Everything else remains the same, just the name of the graphic is going to change. So instead of hoody_blur, the second one is going to get tshirt_blur.jpg.

I'll paste that for the third one. Scroll down to give us a little bit more room here. And again the third one needs to change to panel two and instead of hoody_blur, my third one's going to be bag_blur and we'll finish out our backgrounds by changing it to panel three and changing it from hoody_blur to longt_blur and this time we did blur and not blurs. What we've done is for our animated content, we've taken all the text and changed it to a lighter gray so it's going to appear to fade and maybe even look a little blurred itself. Then the images we swapped out our normal background graphic with a blurred version of the same graphic. So if I save the file, and we preview this in our browser...

now when I click on the thumbnails, you can see the blurred graphic is coming in, the text is getting lighter so it gives it the illusion of blurring as well. That looks really good. Now the one thing that we haven't talked about yet is customizing the animation itself and you might think that this is too slow. Or you might think it's too fast, so let's talk about how we can change our animation properties by changing the parameters that are passed into the constructor function. Let's go back into our file and let's go find our constructor function. It's on about line 85 by now, so somewhere around in there.

Actually mine's on line 91. So somewere around down there you'll see the constructor function, it's the script tag we did earlier. So currently the only thing we're passing into the constructor function is the name of the widget itself, which in this case is detailSlide1. Well after detailSlide1, I can type in a comma and then my options have to be passed in as an array. So I'll open up a curly brace. Take a look at some of the options here. We have defaultPanel, duration and enableAnimation, which is true or false. It's a Boolean value. enableKeyboardNavigation, frames per second, so there's a lot of things that we can change here. I'm going to pass in duration.

And I'm going to type in a duration of 500. Now that would be milliseconds so by saying 500, I'm saying let's animate to that position in half of a second. So duration has a colon and then the property follows it. Next we'll use a comma and we'll use FPS, which is frames per second and I'm going type in 80 frames per second. Now the higher the value of the frames per second, the smoother the animation will render, but it has its limits. If you go too far up, it's simply going to not be able to render it and performance will suffer. So you want to test this value pretty thoroughly. Sometimes a higher frames per second is not going to work over certain connection speeds so you might want to test that over as a wide array of connections as you can. So let's save that.

Test it in our browser and now when we click, the animation is occurring in only half a second, which is a little faster, and the blurring looks a little bit more meaningful, especially is we go over a longer distance. Cool beans. As you can see, digging around the CSS and JavaScript files can be very helpful in unlocking additional features for your widgets. Regardless of which widgets or content type you're adding to your site, a thorough examination of the structure and code will help you understand precisely what is and what is not possible with the widget.

Plus since it's merely JavaScript and CSS, you're free to modify and add to the existing functions and styles to truly make these widgets your own.

Show transcript

This video is part of

Image for Dreamweaver CS3 Projects: Creating Custom Spry Widgets
 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.