jQuery for Designers

Enabling the Back Button

As we build more and more Ajaxy applications, and our apps reside on a single page, the browser's native back button can get more and more broken.

J4D update: My Book, Other Books, Workshops and talks

It's been a while since I've been in touch, so I wanted to let you know what's going on in the jQuery for Designers world, what to look out for and what's coming next.

Adding Keyboard Navigation

I was recently asked how keyboard navigation could be supported to move a slider backwards and forwards.

Fixed Floating Elements

On visiting Apple's web site an putting items in my shopping basket, I noticed (an old effect) where the shopping basket would follow me down the page.

Want to learn more about JavaScript? Go Full Frontal!

I'm sure your familiar with a bit of JavaScript now that you've subscribed to my screencasts and hacked and played around with jQuery.

iPhone-like Sliding Headers

The iPhone has a few unique UI features, one in particular are the static headings when you're scrolling through a list, so you know the context of the content.

Automatic Infinite Carousel

Following on from the infinite carousel, there have been a number of requests asking how to make the scrolling action automatic, so I've gone ahead to explain how to achieve this.

Play School: Broken Repeating Animations

jQuery makes it incredibly easy to add effects to your web sites, but there's some effects you just don't want: the hover repeatedly to make the effect go wild!

API: queue & dequeue

queue dequeue are a pair of core data utilities that help you to add your own bespoke to animations.

jQuery Infinite Carousel

With jQuery for Designer's redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page.

jQuery for Designers: In Live Action

This September dConstruct will return the UK again, running 2 days of workshops and one full day of talks.

Return to normal scheduling

It has to be said that it's been a little quiet around the jQuery for Designers web site for the last month.

SlideDown Animation Jump Revisited

When using slideDown depending on the layout of your page, you could still see the jumping effect, regardless of whether you fix the padding around the element.

BBC Radio 1 Zoom Tabs

Gareth Rogers asked how to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

API: map & grep

map and grep are two utilities that are extremely useful if you know how to use them, but more often that not, I see more convoluted code written to achieve the effect of these functions.

SXSW, Server Issues and Redesign

I wanted to post a short note to let those of you who subscribe to the jQuery for Designers feed that I've not forgotten my pledge to get new videos out each week,

jQuery look: Tim Van Damme

Jonathan Diba writes to ask how the effects are achieve on Tim Van Damme's portfolio site, referring to Tim's site as one of the most compelling site design he's seen.

How to tell if an element exists

A common question for beginners coming to jQuery is:

Is there a way to return true or false if an element exists?

There is, and it's (very, very) simple to do.

The Book and The Redesign

I wanted to share a few news items with regular (and new!) visitors of jQuery for Designers.

Ajax Spy

Last month I showed you how to create a spy effect as seen on the first version of QuickSnapper (though they've since changed their site design with to release the release of Little Snapper).

Play School: Easy Ajax - load

Ajax is made incredibly simple with jQuery. There's a number of helper functions to get in to the nitty gritty of Ajax, but if you want something that's quick and simple to get going with the .

API: Filter & Find

As the first in the series of API screencasts, but also as a good beginners tutorial, this short episode shows the difference between filter and find.

Simple jQuery Spy Effect

A few years ago Digg released a very cool little visualisation tool they dubbed the Digg Spy (it's since been upgraded to the Big Spy).

Fun with Overflows

Background

Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left.

Two New Series

First up, an apology for not being able to get the September article released. September was the peak of my work load (working evenings and weekends for a long while) and poor old J4D slipped by.

Animation Jump - quick tip

jQuery has got good base level support for effects out of the box. Setting them up and using them to reveal and hide elements is exceptionally easy.

Image Fade Revisited

This episode is revisiting the image cross fade effect, in particular Dragon Interactive has a beautiful little transition for their navigation that some readers have been requesting.

Coda Slider Effect

Background

Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect.

Help make jQuery for Designers better

The next post is waiting in the wings, but before the screencast is recorded I wanted to get your opinion on how I can improve jQuery for Designers.

Image Cross Fade Transition

Background

A frequent query and request I receive (and have myself) as a developer is: "how can I fade one image in to another?".

In particular, Nathan Wrigley of pictureandword.

Powered by Drupal, an open source content management system