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

Adding Spry interaction

From: Dreamweaver CS3 Projects: Creating Custom Spry Widgets

Video: Adding Spry interaction

Structuring your code correctly is only part of creating your Spry widgets. In this movie we'll take care of three important tasks. First we'll add links to external JavaScript and CSS files necessary to make our Spry widget function. Next we'll add the constructor function that will instantiate and control our Sliding Panel widget. Finally, we'll add the event handlers to our links that will trigger the widget's interactivity. Before we start doing this to our file, I want to point something out. We're in the Chapter 6 directory, and I have the details_start file open.

Adding Spry interaction

Structuring your code correctly is only part of creating your Spry widgets. In this movie we'll take care of three important tasks. First we'll add links to external JavaScript and CSS files necessary to make our Spry widget function. Next we'll add the constructor function that will instantiate and control our Sliding Panel widget. Finally, we'll add the event handlers to our links that will trigger the widget's interactivity. Before we start doing this to our file, I want to point something out. We're in the Chapter 6 directory, and I have the details_start file open.

I want you to notice to the Chapter 6 directory I have a folder called SpryAssets and inside that I already have the SprySlidingPanel CSS and the SprySlidingPanels JavaScript file copied over. So you would want to do this for your own root directory if you are creating this with your files. And if you downloaded the Spry 1.6 framework, you can find them inside the widgets folder and you can just copy them wherever you want. Most developers will keep their Spry library on one place on the hard drive and then copy those files into the root directory as they need them.

Some people share a global directory, but it's really a personal preference in terms of what you want to do. OK. So I'll flip over to Code View, and once again I'm going to hide our panels so that I have a little bit more room for code on the screen. So first I'm going to scroll up into the head of my content and you'll notice that on lines 13 to 14, I have a couple of lines commented out. Let's go ahead and highlight those, lines 13 and 14, and using the Coding toolbar, click the Remove Comment and let's take a look at what these are doing. So in the first is a script tag and it's referencing as its source the SpryAssets folder and the SprySlidingPanels JavaScript file, so that's the file that I just showed you guys copied over into the Chapter 6 folder.

We also have a link tag and the link tag is linking out to the CSS file. So we're now referencing the external JavaScript file and the external styles to help us drive our widget. So that's essentially flipping the switch on, if you will. The next thing we have to do is, in order to have a Sliding Panels widget, we need to use the constructor function, which is just a little bit of JavaScript that's going to create that widget for us. So having the structure is good, making sure all the names are correct in terms of class and IDs are great, but if you don't have a constructor function, you have no widget. So let's go ahead and make that.

So we're going go down to about line 63 in our code, so scroll down to about line 63. And on line 63, we've got a blank line where the constructor function is going to go. The only rule you need to follow for the constructor function is that it needs to be below is a widget that it's going to turn on. So your widget code will do directly above the constructor function. It can come at the very bottom of the page. It just needs to be somewhere within the body tag and somewhere below the element that you're instantiating. So we'll start out by using a script tag, so we'll just say script and the language is going to be JavaScript. I'm going to be too precise there.

Type is going to be text/JavaScript. And then close the opening of the script tag and we'll go ahead and do our constructor function. So the constructor function's going to use the var keyword and after the var keyword we're going to type in SP1. SP1 is the name of our Sliding Panels. You can name them anything you want to name them. SP1 is just kind of like a default name. If you use something else, however, be aware and remember what you've used because this is the name that you're going to use in the event handler when you're doing the function call. So remember that.

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.

Who is detailSlide1? Well detailSlide1, if we scroll up just a little bit, you see that that is the ID that we've used for the overall DIV tags surrounding Sliding Panel. Also we're identifying the element on the page that Dreamweaver is going to be driving as a Sliding Panel widget. Now don't forget to come back in and close your script tag out. It's very important. We'll save this and we're almost done. We've got links to our external JavaScript and cascading style sheet file. We have a new constructor function that is instantiating a new Sliding Panels widget and the last thing we have to do is we have to go up into the elements that are going to trigger the Sliding Panels and add a little in-line JavaScript event handler to those.

Now if I switch over to Design View, you can see that these thumbnails have a link attached to them and they're just sort of a default JavaScript link. Just enable connectivity, enable a little bit of accessibility on those. We don't need the link tag in order to do the inline event handler. But based on cross browser compatibility, it's a good idea. So I'll go to about line 46 on my code and I'll click inside the first link tag, which has the title of hoody, and right after as a title of hoody and still inside the opening tag, I'll hit space. So right after hoody, I'll type in onClick equals and then in quotation marks, SP1. So remember that's the name that we just used in the constructor function.

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.

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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Projects: Creating Custom Spry Widgets.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.