Category Archives: jQuery

Bind events to future elements using jQuery’s .on()

· Leave a comment · in jQuery

I loved the feature of jQuery .live() binding to future elements – but it had problems.

It’s replacement, .on(), DOES NOT bind to future elements by default.

The following explains how to bind future elements using .on().
(more…)

Using jQuery to loop thru DOM objects with optional delay

· 9 Comments · in JavaScript, jQuery

You want to loop through a collection of DOM objects, so you use .each().

But what if you want to have a delay between effects on the current item?

In short – don’t use .each() for looping – and don’t use setTimeout for the delay.

We’re going to call items by index instead, optionally using a clever way to add a delay.
(more…)

jQuery and JavaScript snippets

· Leave a comment · in JavaScript, jQuery

This is a list of useful snippets that do not garner their own posts.

The jQuery snippets have been tested with version 1.7.2+.

If you have any to contribute, email them to me and I will post them!
(more…)

Pausing an animation with jQuery

· Leave a comment · in JavaScript, jQuery

Starting an animation with jQuery is easy.

Stopping an animation with jQuery is easy.

But what if we want to “pause” and restart the animation?

Well, not so easy – so I dug in and figured a way to make this work cross-browser.
(more…)

Background animation using jQuery

· Leave a comment · in JavaScript, jQuery

You can actually animate a background image with jQuery – though it’s not as easy as it sounds.

There are cross-browser concerns.

I’ve tested many ways to achieve it and in this post there is code that should work cross-browser. Let’s dig in…
(more…)

Banner ad animation with jQuery

· 1 Comment · in HTML5, jQuery

This is an example of using two images to create simple banner ad animation. Perfect for quick and easy HTML5 banner ad creation.

There are two versions, both use jQuery.

One runs animation on hover, the other loops the animation and pauses when hovered over.
(more…)

Handling multiple timers with JavaScript’s setInterval and jQuery

· 4 Comments · in JavaScript, jQuery

For a recent project I needed to create a slideshow with auto play capability. To achieve this I used JavaScript’s setInterval to rotate the slides every 15 seconds.

intervalId = window.setInterval("moveSlide()",15000);

To stop animation the timer needed to be cleared. The conventional way is:

window.clearInterval(intervalId);

All well and good if you only have one timer on a page.
(more…)