jQuery Tutorials

Toggling makes it easy to turn things on and off

Everyone likes writing jQuery for one main reason: it’s really easy to use. One feature that makes life a lot easier is toggling. Let’s say you have an image that you need to show when a button is clicked and then hide when it is clicked again. Instead of two separate functions, one to show and another to hide, use jQuery’s handy shorthand: toggle:

$(‘button’).click( function() {
$(this).toggle();
});

But jQuery’s support of toggling goes way beyond hiding and showing. It has toggleClass() which adds a class or removes it depending on if the class exists. Also slideToggle() which slides an object up and then down.

And besides these simple shorthands for existing functions, jQuery has a variety of support for more custom toggle functions. … (more…)

Probably one of the most widely adopted “web 2.0” features is the grayed out overlay. Rather than always redirecting users to a new page, overlays allow the current page to get “grayed out” with an overlaid panel. With the wide use of Javascript libraries like jQuery, the prevalence of these grayed-out overlays is understandable: they are very easy to build.

Let’s start with the markup and CSS. We’ll need two wrappers, appended at the end of the DOM. Although we will append these later with jQuery, for now just put them right in the HTML (or wait until we append them).

The idea for these wrappers is that the first ‘overlay’ div will be the grayed-out background and the ‘overlay-panel’ will be the HTML panel that sits on top of the overlay.

Now let’s get started by styling the overlay. The first problem we’ll have to tackle … (more…)

Animation and function timing can often seem like an uphill battle in Javascript. Thankfully jQuery’s variety of timing control mechanisms provide excellent alternatives to Javascript’s standard order of function processing.

With both callback functions and chainable methods, jQuery allows much greater control over animation timing than Javascript alone. Callback functions provide the ability to execute a function once an animation has completed. Chainable methods allow us to stack a series of operations on a single object. Combining the two, jQuery provides near perfect control over the timing of animations.

With jQuery, coding side navigation with drawers that expand and collapse is a piece of cake.

Let’s start with some best-practices HTML/CSS navigation: