jQuery

Learn how to use the powerful jQuery JavaScript library to create all sorts of useful scripts and nice effects.

Create Smooth Rotatable Images with CSS3 and jQuery

25 August 2010 / 19 Comments

With the advent of CSS3 transforms, we can do some nice tricks with elements in a web page, including rotation, scaling, and skewing. Once we start throwing jQuery into the mix too, we can start doing some really nice tricks!

In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page. You can try it out right now by clicking the “View Demo” button above. Hold down Shift, then click and drag on a photo to rotate it.

I’ve based the code on this photo light table tutorial that I wrote a couple of months ago. In that tutorial, you could drag photos around the table, and click a photo to view it in a lightbox. Now, with this latest addition, you can also Shift-drag a photo to rotate it smoothly about its centre. Nice!

I should point out that this tutorial won’t work in IE at all, since IE (as of version 8) doesn’t support CSS transforms. I suspect it might work in IE9, although I don’t have it to test with. It also won’t work in touchscreen mobile browsers (yet) due to the lack of a Shift key!

Here’s how to code this baby up. Bear in mind that we’re starting with the script from the last tutorial, so if you want to follow along then you can download that code and work from it.

A Snazzy Animated Pie Chart with HTML5 and jQuery

11 August 2010 / 84 Comments

View Demo »
Download Code

In this tutorial I’m going to show you how to build a lovely, interactive pie chart using the latest HTML5 technologies. Not that long ago, this kind of thing was only practical to do with Flash. Now, thanks to advances such as the HTML5 canvas element, we can create pretty nifty animated effects using nothing but JavaScript, CSS, and a small sprinkling of maths!

Super-Easy Animated Effects with jQuery

3 August 2010 / 6 Comments

One of the lovely things about jQuery is it makes it ridiculously easy to animate page elements. Whereas you previously had to mess around with setTimeout() or setInterval(), and lots of JavaScript code, with jQuery you can work wonders with just a line or two of code.

In this tutorial we’ll cover some of the more common effects you can achieve with jQuery. We’ll look at:

Fading elements in and out
Showing and hiding elements
Sliding elements up and down
Animating any numeric CSS property
Creating an animation sequence
Inserting delays into an animation, and
Stopping animations.

Ready? Let’s get going!

Kitchen Table: Adding a Lightbox

1 July 2010 / Leave a Comment

View Demo »
Download Code

In Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery, we created a nice-looking “light table” of draggable photos. This is a fun, novel way to display a handful of images in an image gallery. However it would be nice if the user could click a photo to enlarge it.

In this tutorial you’ll learn how to enhance the light table by adding a lightbox to display a bigger version of a photo when it’s clicked. You’ll also display a caption for the image within the lightbox.

Working with jQuery Events

24 June 2010 / Leave a Comment

In this tutorial you’ll learn how to use events in jQuery. Events are fundamental to most JavaScript web apps. Using events, your code can respond to things happening in the browser, such as the user clicking a button, entering text into a form field, or submitting a form.

This tutorial isn’t a comprehensive reference, but it includes the stuff that you’ll need when writing the majority of your scripts. Here’s a full list of the jQuery event methods and properties should you need it.

You’ll explore the following topics in this tutorial:

What is an event?
Working with events
A simple event handler example
Shortcut methods for binding common events
Accessing the element from within the event handler
Getting more information about an event
Stopping default actions and event propagation
Cancelling event handlers
Triggering events yourself

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

11 June 2010 / 14 Comments

View Demo »
Download Code

In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!

The aim is to make our table and photos look as realistic as possible. Here’s our desired feature list:

A wooden table background image for the photos to sit on
Each photo “floats” onto the table as it loads
Each photo is given a random position and orientation to create a “scattered” effect
The photos have a white border and drop shadow to add a 3D effect, and are ever-so-slightly transparent
Once on the table, a photo can be dragged around by using the mouse

Ready? Let’s go!

Removing, Replacing and Moving Elements in jQuery

8 June 2010 / 5 Comments

In Adding Elements to the Page in jQuery, you explored a number of ways to add new HTML elements — such as paragraphs and images — to a page. In this tutorial you learn how to manipulate existing elements in the page, including:

Removing elements from the page using the empty(), remove(), detach() and unwrap() methods
Replacing elements with new elements by using the replaceWith() and replaceAll() methods, and
How to move an element from one parent element in the page to another.

Once you’ve read this tutorial, you’ll have mastered all the jQuery techniques you need to manipulate elements in the DOM.

Adding Elements to the Page in jQuery

25 May 2010 / 6 Comments

One of the lovely things about jQuery is that it makes it really easy to manipulate content in the page. With just a few method calls, you can quickly add, remove, and replace page elements, as well as move elements around the page’s DOM tree.

In this tutorial you explore various jQuery methods for adding new content to the page. You look at:

Adding content at the start of an element (or elements) with prepend() and prependTo()
Adding content at the end of an element (or elements) with append() and appendTo()
Adding content before an element (or elements) with before() and insertBefore()
Adding content after an element (or elements) with after() and insertAfter(), and
Wrapping content around an element (or elements), or around an element’s contents, with wrap(), wrapAll() and wrapInner().

As well as using the above methods, you can also add new content to an element using the html() and text() methods. Find out more in Accessing Element Content with jQuery.

The tutorial’s quite lengthy, but once you understand the basic concepts you’ll find that all the methods work in a similar way. You’ll also find lots of code examples to make things clear. So let’s get started!

Manipulating Element Classes with jQuery

12 May 2010 / Leave a Comment

In Manipulating Element Attributes with jQuery, you explored 2 jQuery methods for working with element attributes: attr() to read, add, and change attributes, and removeAttr() to remove attributes.

In this tutorial you’ll look at some jQuery methods for working specifically with the class attributes of elements:

hasClass() to check if an element has a certain class
addClass() to add a class to an element
removeClass() to remove a class from an element
toggleClass() to add a class to an element if it doesn’t already have it, or remove a class if it does

While you can use attr() and removeAttr() to work with classes, these class-specific methods are more useful because:

They’re easier to use on classes
You tend to work with CSS classes a lot with jQuery, and
class attribute values often contain multiple class names, making them more complex to deal with than most other attributes.

Let’s take a look at each of these methods in turn.

Manipulating Element Attributes with jQuery

19 April 2010 / Leave a Comment

In Accessing Element Content with jQuery, you learned how to use jQuery to read and change the contents of HTML elements. This tutorial concentrates on reading and changing element attributes.

jQuery

Footer

Contact Matt

Follow Matt