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 Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating new HTML5 documents
- Using code hinting for CSS3, HTML5, DOM elements, and jQuery
- Configuring jQuery widgets with the Widget Browser
- Managing media queries
- Previewing web pages on multiple devices with the Multiscreen Preview panel
- Configuring mobile application frameworks
- Building and emulating mobile applications
Skill Level Intermediate
One of the most frequent questions I get regarding Dreamweaver is, when are they going to start integrating other frameworks like jQuery into it? Well, if you've been wondering that as well, wonder no longer because your wait is over. In Dreamweaver CS5.5, Adobe introduces a number of jQuery-related features, including jQuery code hinting. In this movie, we are going to take a quick look at how Dreamweaver is going to make life a little bit easier for you when writing your own jQuery scripts. I have the explorers.htm open from the 02_06 folder, and what we're going to do is we're going to finish up an existing script that I've got that's going to be controlling the animation of the submenus.
So here we have some dropdown menus that we're going to slide down with jQuery and then slide back up. We have a few things that we need to take in to account. For example, we only want the menus to animate when we're at a large screen resolution, so desktop size. So if we're on a tablet or if we're on a smartphone, we don't want the jQuery animation to occur. So we're basically going to need to check for screen size and then go through and animate the menus when our screen resolution is larger than say 768 pixels or so. I also want to point out how we're going to do that.
If I go into Code view and look at the source code of the page, I can see that on the body tag there is a class called no-js, and what we're going to do with that is we're going to check for its presence. If it's there, it means that we're at a smaller resolution and I shouldn't animate; if it's not there, if it has been stripped out, then we're at a larger screen size, and jQuery can go ahead and perform the animation. So that being said, I want to go into my related files and I want to click on menus.js, which of course our Explorers page is linking to, and this script is the one that's going to be controlling our animation.
Now, the first thing I want to show you about jQuery code hinting is actually something that we don't need for our own code, so I am just going to do a little demo, or example, here. If you go ahead and declare a global jQuery object, you're going to get a list of all the static methods and properties that jQuery has to offer. So, for example, if I just go $ and then .notation, I get a full list of all of the static methods and properties. The syntax you use doesn't really matter, so if I instead wanted to use the jQuery keyword to establish that global object, once again I would get the exact same list.
So that's pretty cool! That is, however, something that we don't need for our script, so I am going to go ahead and get rid of that. Okay. Now, the first thing I want to do, I want to place my cursor here on line number 6, and I just want to create a variable that's going to give me a little shortcut that references the navigation element on the page. That way I don't have to keep finding this element. So I am just going to create a new variable, and I am going to create a variable named menu, and I'm going to set its value equal to an element on the page. So I am going to go ahead and declare an object, and the object I'm looking for is actually a navigational element, so I could look by element type.
So if I type in a single quotation mark, I get a list of all the HTML elements available to me. Now, this is the same list that you would get if you were hand-coding an HTML file. Now actually, I want to go a little bit more specific than that. So I want to use an ID that I've assigned to that particular navigation. So if I type in a octothorpe symbol, or the pound symbol, whatever you want to call it, Dreamweaver goes ahead and introspects the parent document and then returns to me a list of all the IDs on the page. So this is really cool. It's going to dramatically speed up time, and I don't have to remember exactly how something is spelled or written.
So siteNav is what I am looking for, so I am just going to go ahead and finish that up and declare the variable. Okay. Now, I am going to go right down to the next line, which is line 8 here, and here we are going to do a conditional statement that essentially checks to see what the width of the current document is. If it's above a certain amount, then we're going to go ahead and animate the menus. So I am just going to start a conditional statement. I am going to type in if, and then I am going to check the document itself. Whenever you declare an object in jQuery, if you use dot notation, you are going to get a full list of now non-static methods and properties.
So here I have all these non-static methods and properties I can choose from. Now, the property I am looking for is width, so as soon as I go down to width, I see something else that Dreamweaver's jQuery code hinting is going to do for us. Dreamweaver supports the use of overloaded methods in jQuery. So occasionally, in jQuery I am just going to be looking for a generic width value, just return that to me, and other times I am going to be looking for specific values, and the code hinting allows me to take it either way. So if I am looking for a specific value, I could choose the second item on the list here, and my parentheses would be kept open, and I could just go ahead and type in a value.
On the other hand, if I just want to return the width of the current document, I can choose the first value and it will go ahead and close the parentheses for me. So it's a nice subtle difference, but it's really cool that it gives us that option. So I am going to look for a width that is greater than 768. So now I'm going to close that and then open up my function's curly brace. Now, I don't have to close that. That's actually closed a little bit later on in my code, so just go ahead and open that up at that point if you're doing this along with me. All right! The next thing I need to do is I need to check to see if the no-js class is applied to the body tag; if it is, I am going to go ahead and strip it out.
So if the screen resolution is larger than 768, the first thing we are going to do is strip that out so that our animation will run. So I am going to type in if, and now I just need to find the body element, so I am going to go ahead and declare that. Remember, code hinting will help me find all of the elements on the page, and that allows me to do that really, really quickly. No matter what object or element you're working with, you're going to get that list of non-static methods and properties if you're using dot notation. So I need to use a method here to check to see if the body tag has that class, so I am going to use the hasClass method.
Now, again, methods like this that are checking the parent document to see if it has a class or maybe removing that class, again, code hinting is going to help me out here. It knows that it's looking for a class assignment, so as soon as I enter a quotation mark in, it's going to give me a list of all of the classes in my parent document, which is really cool. Now, we are looking for no-js, so I can just type in no, hit Enter, and it finishes that for me. Neat! So we're going to go ahead and close that, and then I am going to open up the curly brace, hit Return, and close my curly brace out, just to build sort of the skeleton.
I have a bad habit of forgetting to close those, so I like to sort of remind myself to do it at the very beginning. So the next thing I am going to do is remove that and again, you can see that it doesn't really matter which method we're using, and go ahead and find the body element. And this time we're going to use removeClass. Notice that as soon as we use removeClass and type in a single quotation mark, I get the same list of class. So it doesn't matter which of those two methods I am using, it's still going to go about, introspect the classes, and then bring them back for me, which is really, really cool. So again, the first thing it does is it says, okay, if the screen resolution is over a certain size, does the body tag have the specific class? If it does, go ahead and strip it out.
All right, excellent! Now that we've gotten that out of the way, we can go ahead and animate our menus. So I am going to just go right down to line 14 right here, and you can see what we're going to do here. We're going to attach a listener to every list item that has a child unordered list and then slide the submenus down or up depending upon the mouse position, whether it's mouse enter or mouse is leaving. So we're going to add a couple of event handlers here as well. So the first thing for us to do is go through our unordered list and find which list items have a submenu and which don't. So we're going to use the menu variable. Again, what's nice here is that Dreamweaver recognizes who that variable is and when we use dot notation, it brings up that non-static list of methods and properties.
So we need to find which elements-- and in this case the li element, list item, so you can notice code hinting is just being very consistent there with how it acts-- and we need to find each one of those that has a submenu. Now, sometimes you're going to want to use code hinting; sometimes you might not. In this case, if I were to hit Return right now with each, it would finish out and actually create the syntax for the anonymous function for me, and pass an event object into that. Sometimes you're going to want that full-fledged functionality and sometimes you're not; sometimes you're just going to want to hand-code that yourself. So it's up to you to decide whether you want to hand-code it or whether you want to let Dreamweaver finish that syntax out for you.
Now, I am going to showcase doing that in just a moment, so here I am just going to hand code this. So I am going to type in 'each', and it will just create a function base off that. So open up a curly brace, I hit Enter twice, and I am going to go ahead and close that curly brace. I am also going to close the parentheses and type in a semicolon to close that out. Now, the next thing you need to do is go ahead and loop through all of the list items that its found and check to see whether or not they have an unordered list, and the easiest way to do that is just do a conditional statement. I am going to check each of the list items by using 'this', and then I am going to find which ones have more than one unordered list. And the best way to do that is to just check the length of your unordered list; anything over 0 indicates that they do have one. So I am just saying, hey, if the number of unordered lists is greater than 0, then let's go ahead and animate.
So I'll go ahead and close the conditional statement. Once again, open up a curly brace, hit Enter twice, close the curly brace, and type in a semicolon. So now we are ready to go ahead and animate. Now, the first thing I am going to do is go ahead and strip off any event listeners that might already be attached to these elements, before we assign new ones. I am going to go ahead and run this function based on when the page loads, but also any time the page is resized. So I don't want there to be multiple event handlers. So the first thing I am going to do is just go in and unbind any events that might already be there. So I am just going to choose unbind as the method.
So now we need to go on to our event listeners. Now, here's another place where Dreamweaver can really help us out. So I'm going to basically go in, and for each list item I want to attach an event handler for a mouseenter. So I am going to do mouseenter. Now, you will notice here I have several different flavors of checking for mouseenter, and one of the things that I can choose, right down there at the bottom, is to go ahead and create an anonymous function for the event handler. So if I choose to do that and hit Enter or Return, notice it's going to finish that out for me and it goes ahead and builds out the entire event handler function for me and passes the event object into it.
So this can actually speed up the process considerably. Another thing that Dreamweaver supports is how jQuery allows for the chaining of methods. So let's go ahead and experiment with that a little bit. So I am going to go to each list item and I am going to tell it to find all of the unordered lists, and then after that, I am going to stop anything that might be going on at the moment. Now, notice it also gives you a function tooltip. So when values aren't made available to you in code hinting, it at least says, hey, do you want to clear the queue out? Do you want to jump to the end? And we are just going to say yes.
So go ahead clear out any queues of events that are going to be happening and go ahead and jump to the end of any event that's currently happening, and then we are going to tell it that we want to slide down. Now, here again, we get some code hinting, and above and beyond that, we're actually going to get some values. So if I type in a single quotation mark, notice that it says for duration, I can either do fast or slow. It's also letting me know that the parameters that I can pass in-- duration, easing, and callback function--are all optional. So the square brackets are telling me that those are optional. So I just want to go ahead and do fast, and then I'll close that line out. So basically the only thing that's left for us to do here is to attach another event listener for mouseleave so that the menu will slide back up.
So I am going to go right after the mouseenter event handler, and we will just basically do the same thing. We'll say 'this'. This time we'll do mouseleave instead. Again, I get to choose which version I want, and in this case, I want it to go ahead and attach the event handler for me and close that out. And in this case, I am going to chain together a similar set of methods, so I am just going to go ahead and say (this).find ('ul'). Again, I want to stop anything that's currently going on.
And then this time instead of slideDown, I want to do slideUp. And this time I am going to go slow instead of fast. I am going to go ahead and save that. Now, I could test this, but one of the things that you're going to notice is that the function of enablemenus, which is exactly what we finished writing, the enablemenus function, in this particular external script is called on resize only. I want to call it on document load. Now, normally, I would just go ahead and do that here, but I want to showcase something else about jQuery code hinting. So I am going to go right back to my Source Code.
Now again, normally I wouldn't call this within the document. You'd go ahead and externalize this, but I want to show you again how good Dreamweaver is at introspecting these related files. So I am going to go down to the bottom of my code, about line 140-- this is my normal Source Code--and I am just going to go ahead and create a script tag down here. So I am going to open that up, and then I want to close script, and inside that we're going to go ahead and call the enablemenus function. So we're just going to say (document).ready, and we'll have it create a function for me.
It does make those custom methods available to me, and I can just go ahead and say enablemenus. So I am going to go ahead and finish that up, save the file, and let's go ahead and test this. So I am going to preview this in my browser. And as soon as I do, I notice that now when I mouse over, I get the animation. It animates down fast, up a little bit slower. So jQuery is driving that for me. Also, I want to make sure that at a certain size, the menus turn off, so if I go beyond 768, I notice that now no animation happening.
Go a little bit larger, our animation is happening. The script is working really, really well. Now, honestly, I think this is just the start. I have a feeling that Dreamweaver's CS5.5's jQuery code hinting is simply the opening round in adding jQuery development tools to the overall Dreamweaver workflow. If the initial code hinting abilities are any indication, we have a lot to look forward to.