Category Archives: jQuery

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

byclarke ulmer onSeptember 24, 2012
· Leave a comment · in jQuery
Tags:

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

byclarke ulmer onAugust 25, 2012
· 9 Comments · in JavaScript, jQuery
Tags:

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

byclarke ulmer onAugust 16, 2012
· 1 Comment · in JavaScript, jQuery
Tags: ,

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

byclarke ulmer onAugust 14, 2012
· Leave a comment · in JavaScript, jQuery
Tags: , , ,

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

byclarke ulmer onAugust 13, 2012
· Leave a comment · in JavaScript, jQuery
Tags: , , ,

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

byclarke ulmer onAugust 3, 2012
· 2 Comments · in HTML5, jQuery
Tags: , , , , ,

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

byclarke ulmer onJuly 23, 2012
· 4 Comments · in JavaScript, jQuery
Tags: ,

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…)