Duration: 17 minutes
Summary: In this video we continue our jQuery UI discussion by talking about effects. First, please note that It is not necessary to use Visual Studio 2010 to get these examples to work. You can use any editor of your choice (as a matter of fact, you can write all that in Notepad). I use VS 2010 because it is the IDE I am most comfortable with. In this example I show you how we can work with some effects like animate and adding and removing classes. We first start with some divs on the page. We add some css to enhance their look. Then we start adding the jQuery UI code. We have two buttons on the page: The first one uses the toggle function. Toggling the button back and forth will change the colors and affect the width of the div. The second button will add a css class to the div and take it out (remove class) 1.5 seconds later.
Technology Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio 2010, toggle, animate, function, backgroundColor, color, width, addClass, removeClass, setTimeout
Transcript: Welcome back, everyone. This is Ayad Boudiab, I'm a Senior .Net application developer, and we are in our series of jQuery UI discussion. As you've noticed in the previous videos, we discussed some of the widgets as far as the jQuery UI is concerned, like the accordion, auto-complete, the dialog, progress bar, slider, we discussed all those and we saw how we can work with them. The rest of the videos I just need to show you some of the effects that we can apply when we work with the jQuery UI.
For example, we can talk about animation, adding a class, removing a class, and so on. So there are a few videos that I'd like to talk about as far as the effects are concerned, and then we will continue the rest of the jQuery UI discussion.
So far, let's look at what we have over here. We are inside an html page called effectstest.htm. In the head section of the page we have, of course, the title, and then I have a link to a CSS sheet that we have under DarkHive. We've been using that all along, so we know what this is, we know where we get it from. We also have a reference to the jQuery itself, and the jQuery UI. Both of those are under the JS folder in the parent folder where I am right now. I have a script where I have my jQuery code, and this basically specifies that when the dom is ready, and my page is safely loaded, what do you want to happen? Of course, right now we don't have anything. There are some styles in here that I'd like to apply, and those styles, so far, there's nothing there.
If I scroll down to the body, I have a div. WIthin that div, with a class named demo, I have another div with a class name toggler, and then a third div inside that, with ID named effect, and then a couple of classes, ui- widget-content, ui-corner-all. You've seen those classes before, but let me refresh your memory. If you go in and open a certain file for the code that I'm in, you can go to DarkHive. You notice that inside that, you get the images, and you get the CSS that came with the DarkHive when I downloaded it. And you notice in here, there are a lot of those classes that we'd like to use. You can experiment with those classes and use them anywhere inside your jQuery UI code. You notice in here, for example, I have ui-corner-all, that pretty much gives me a corner radius for the widget that I'm working with. So this is where I'm getting those classes from. They are available within the DarkHive. Of course, you could have chosen other than DarkHive, but basically, in that folder, you will have the CSS and the images, like any one of them. In that case, then, since I chose Dark Hive when I selected my CSS that I'd like to work with, inside the DarkHive I have my CSS file. This is where I'm getting those classes from, and the images that we can use within our code.
Inside the div, with id "effect", I have some text to describe a video that we've talked about before, discussing the dialogue and so on. That's not important, just that we added some text in here. So right now, if I simply go and look at that page, I will notice that I have a box with corners, rounded corners, some text inside that, the text is white, black is the background, and I have a couple of buttons underneath. They're stuck to the box above them, and they are underlined. So that's how so far my code would look like when I load it in the browser. Now, let me go ahead and add some of the styles that we'd like to work with. I'll just drop those here because I'd like to discuss the jQuery code and concentrate on that.
Here are the classes that I have. The class toggler, and that's the one that the div is referring to, with width 600 pixels and height 350 pixels. Now, I have in here underneath a couple of buttons, my button and a class button. Those buttons are using the ui-state-default class, and the ui- corner-all class. The first button says "apply effect," the second button says, "add a class."
So if I scroll up to the styles, I notice that my button and the class button, you notice the comma between them, they're using a padding of .5 and 1, and text decoration of none, which means I don't want to decorate the text. If you recall previously, you notice that the text was underlined, but I don't want any of those decorations, so the text should not be underlined right now. As far as the effect is concerned, that's the ID effect, you notice in here we use the pound for that ID, and we use the dot for the class. For the effect that you see here, I'm going to make a width of 400 pixels, height 300 pixel, padding .4, and background color of black. If I save this and view it in the browser, I would end up with something like this. This is the box, and these are the buttons. None of the buttons, of course, have any actions right now, because we did not go to that yet. We just took some div's, and we applied some CSS on them, and that's what we end up with. A box, rounded corners, a couple of buttons, rounded corners, no decorations, no underline on the buttons.
Let's go ahead and proceed to the core of the discussion. If we scroll up here, we have the jQuery. This is where I can put my jQuery code to work with the button. What's the name of the first button? It was called my "button". How can I get to this? Remember, we're using the dollar sign, and then we refer to my button. That would give me the button that I'm interested in. dollar, sign, and then my button. But of course, we don't want to forget the pound because we need to refer to that button because it's called "my button by ID". So I have to use the pound sign to refer to that button which has the ID" my button." That way I would be able to get to my button. Now, I want to toggle this one. So toggle it back and forth. When I click on it, what do I want to happen? When I click on it again, what do you want to happen? So toggling back and forth, you need to apply this to that specific button. So I'm going to use the toggle function.
With the toggle, I have the first function, then goes the second function. That's for the first toggle, and this goes for the second toggle. When I toggle it on and off, like clicking on the button, back and forth. These are the two toggles that I'm interested in. Don't forget now that we need to close the parenthesis for the toggle itself, this one, closing the parentheses down here. So that would give me the toggle back and forth functions. Now, what do you want to happen with those functions? So let's go ahead and do this. When I click on this button, I want the effect to animate. Which effect? This one over here. I want this effect for that div to animate in a certain away. Again, when I click the second toggle, I want the second effect to take place. So like I did with referencing the my button, I'm going to do the same here, but referencing the effect. That would give me the reference for the effect, and then I say .animate to actually trigger the animation for that effect. Now, what do you want to happen in this case? I want to change the background color. And you can make sure you spelled that right, background Color with a capital C. I want that to be red. What else do you want? The actual color for the text to be white, and I want the width in this case, for this effect div, to be 700. Done with that.
I want to close this, remember I opened the curly brace in here, so I'd better close it down here. Then I want that to happen for one second, which is 1,000 milliseconds. I want that to animate for this much. Remember in here, the first thing is you set the properties you're interested in, the second parameter would be the actual timing, how long you want it to go for. Now goes the second function. The second function is like the first one, pretty much, so let's copy that and paste it inside here. Again, in this case I'm referring to the effect, pound effect, and then I'm going to animate that. The background color in this case I want to flip it to white, and I'm going to make the actual color for the text to be red. I want the width to go to 500, and also, I want this to last for one second, which is 1,000 milliseconds. After that is done, make sure everything is closed properly, and that should give me the toggling back and forth of the button. Now, let's go ahead and see if there are any changes when we load that in the browser.
Here is the actual box, contains the text. Apply effect. It took it to background of red, color of white. Click it again, it goes back to white background, red text. Click it, click it again. Click it, click it again. This is the toggling back and forth of this button, which is applying this animation of background color red, color text white, width of 700 for the first one, lasting for one second. Background color white, color of the text red, width of 500 lasting for one second, for the second one as well. So this is how I can animate those functions. Let's scroll down over here and see what else we can do.
Let's work with the class button and see what we want to happen to it. For the class button, I want to add a class to the actual effect. And then take that class out later. So basically, what I'm trying to illustrate here is the use of add class and remove class. So I go to my dollar sign, and now I'm going to refer to the class button. That gives me the class button, but don't forget the pound sign at the beginning because it's an ID. For this class button, I want the user to click on it, I want something to happen. For that click, I want a function to take place, and that function has a certain body like that. It will refer to the effect, again using the pound sign, that gives me the effect. Then I'm going to add a class to it. Of course, I'm talking in here about a CSS class. This is a ui-state- highlight. Again, you might ask me where I get that class from, this is the same file that I showed you at the beginning of the video. It has a list of all the classes we're interested in. I'm going to add that class for one second, which is 1,000 milliseconds. I'm going to call a callback function later when that's done. So add this class to this div for one second. When you're done, call a callback function. We don't have that function yet, we're going to implement it. And then return, false. That should give me a body of this function.
Now, of course, the next thing we need to do is actually implement the callback function. The callback function would be as such. The callback function will set the timeout for 1.5 seconds, and then it removes that class of ui-state-highlight that I added up above. So in this case, then, for the callback, I need to call the set timeout. The set timeout takes a function and it will refer to the effect like I did up here. Now, in this case, I want to remove the class that I added earlier. What's that class? UI-state-highlight. It removes that class, this is the function that I'm interested in, and I want this for 1.5 seconds, so I'd better say 1500 milliseconds. That takes care of the callback function. So once again, when the user clicks on the class button, it is going to add class ui-state- highlight for one second. When it's done it is going to call the callback. The callback is going to set the timeout and then remove the class after that 1.5 seconds. Let's see if we got that right.
Let's go ahead and view that in the browser. We have the box, the text, white text, black background. I'm going to click add class. See that? 1.5 seconds later, it comes back to white. So it goes to highlight for 1.5 seconds, the callback takes it back to white. So it adds a certain class, 1.5 seconds later, it removes that class. These are some of the effects that we can work with when dealing with jQuery UI. There are also other examples of effects that I'm going to talk about, you notice some of the zero effect, one effect to effect three. I will discuss those in the upcoming videos. Thank you very much for listening, I'm Ayad Boudiab, and you take care.