jQuery Basics Part IV

Asif Ahmed

Now we will be looking at Video 7-10 of the series. In these videos we will be learning more applicable functions of the jQuery library.

In Video 7 we learn a pretty neat feature that deals with what happens when we “hover” over something. Hovering means we have put our mouse cursor over the element or item but haven’t clicked it. In this video we learn how to create a “div” with 5 pictures that are halfway faded at first, but return to full color and brightness when you hover over a picture. This functionality can be tested here. This definitely seems like something I could put in an actual website unlike the previous videos where the most difficult thing we did was create a red box that moved around the screen. The code dealing with the hover is below.

$(function() {
$('#container img').animate({"opacity": .5 });
$('#container img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
}, function() {
$(this).stop().animate({ "opacity": .5 });
});
});

The first line is the function that will execute when the document is ready and loaded. Whenever the document is ready we want to change the opacity of all images in the div “container”. Whenever we hover over something we want to change the opacity to “1”. However the hover function takes another parameter as well. We want to change the opacity when we hover onto the image, but we want to change the opacity when we hover off of the image as well.

I’ll be skipping Video 8 because I think the CSS is a little advanced right now, plus I don’t think this video is that useful.

In Video 9 we learn about how to dynamically make text size smaller and bigger. Though in their example text size is changed by click on a link, we could also change the text size whenever the window is resized. We can see how Gmail changes the text size and spacing whenever we change the window size. The code to change text size is fairly straightforward. It does involve some string to float to string manipulation.

Video 10 introduces us to AJAX. AJAX stands for Asynchronous Javascript and XML. We can think about it as doing stuff on the page without the page needed to reload. Autocomplete and search suggestions on Google is one example of AJAX. We use the load function to load text from a different page and append it onto one of our divs. We add some slideDown animation as well. An example of this can be found here. In this tutorial we also learn how to take into account if javascript is disabled. This load functionality will only work if we have javascript enabled. However, if we have our anchor tag open up a new page if javascript is disabled and have it use the “load” function when its enabled we can solve this problem. We just have to remember to add return false; at the end of our click function.