jQuery for Designers - screencasts and tutorials
Channel Details
jQuery for Designers - screencasts and tutorials
Learn how easy it is to apply web interaction using jQuery.
Recent Episodes
30 episodes
Populate Select Boxes
It’s the age old (well, in webby terms) issue of how to populate one select box based on another’s selection. It’s actually quite easy compared with t...
Scroll Linked Navigation
There are a few websites I’ve seen lately that have a left hand navigation automatically updates it’s selection based on where you’ve scrolled to on t...
Debugging Tools
Most of us have to make our web pages work in The Big Five browsers, so I thought it was about time I introduce you to the debugging tools for each of...
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. Thi...
Adding Keyboard Navigation
I was recently asked how keyboard navigation could be supported to move a slider backwards and forwards. I've created a few tutorials on how to create...
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...
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 th...
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...
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 effec...
API: queue and 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. T...
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 th...
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 ima...
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 a...
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...
How to test if an Element Exists
A common question for beginners coming to jQuery: "Is there a function to return true or false if an element exists?" Not really, but there is a (very...
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 t...
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...
API: Filter and 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). Recently Realm...
Fun with Overflows - Part 1
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....
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 s...
Coda Slider Effect
Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect.
This article will pick ap...
Image Cross Fade Transition
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, image roll...
Coda Popup Bubbles
Coda is one of the new web development tools for the Mac - and it's popular amongst designers and developers I know. Panic (the developers of Coda) ar...
Slider Gallery
The Apple web site 'product slider' is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the us...
Image Loading
This tutorial will show how to load images in the background, and once loaded handle the event and create your own response.
This is similar to...
jQuery Tabs - part 2
Part 1 of a 2 part tutorial demonstrating how to implement tabbing using jQuery. The first demo shows basic markup as tabs, the second takes a real wo...
jQuery Tabs - part 1
Part 1 of a 2 part tutorial demonstrating how to implement tabbing using jQuery. The first demo shows basic markup as tabs, the second takes a real w...