jQuery for Designers - screencasts and tutorials http://jqueryfordesigners.com Learn how easy it is to apply web interaction using jQuery. http://blogs.law.harvard.edu/tech/rss en All screencast copyright of Remy Sharp Mon, 19 May 2008 16:25:27 +0100 Wed, 21 May 2008 12:25:27 +0100 http://jqueryfordesigners.com/images/j4d-2009.png jQuery for Designers - screencasts and tutorials http://jqueryfordesigners.com/ 144 144 jQuery for Designers jQuery for Designers: learn how easy it is to apply web interaction using jQuery. jQuery for Designers: learn how easy it is to apply web interaction using jQuery. jquery, screencast, javascript, code clean Remy Sharp info@jqueryfordesigners.com no Populate Select Boxes http://jqueryfordesigners.com/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 the bad old days, and incredibly easy with jQuery and a dash of Ajax.

]]> Fri, 11 Feb 2011 13:00:00 +0000 populate-select-boxes jQuery for Designers 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 the bad old days, and incredibly easy with jQuery and a dash of Ajax. 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 the bad old days, and incredibly easy with jQuery and a dash of Ajax. 15:27 Scroll Linked Navigation http://jqueryfordesigners.com/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 the page. This tutorial will show you exactly how to achieve just that.

]]> Wed, 18 Aug 2010 16:00:00 +0000 scroll-linked-navigation jQuery for Designers 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 the page. This tutorial will show you exactly how to achieve just that. 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 the page. This tutorial will show you exactly how to achieve just that. 12:48 Debugging Tools http://jqueryfordesigners.com/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 those browsers with a couple of tips thrown in to the mix.

]]> Tue, 7 Jul 2010 10:30:00 +0000 debugging-tools jQuery for Designers 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 those browsers with a couple of tips thrown in to the mix. 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 those browsers with a couple of tips thrown in to the mix. 45:38 Enabling the Back Button http://jqueryfordesigners.com/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. This episode will show you how to re-enable the back button on your apps.

]]> Mon, 19 Apr 2010 13:00:00 +0000 enabling-the-back-button jQuery for Designers 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. This episode will show you how to re-enable the back button on your apps. 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. This episode will show you how to re-enable the back button on your apps. 16:47 Adding Keyboard Navigation http://jqueryfordesigners.com/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 sliders and carousels but not mentioned keyboard supported navigation yet.

]]> Tue, 12 Jan 2010 13:00:00 +0000 keyboard-nav jQuery for Designers 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 sliders and carousels but not mentioned keyboard supported navigation yet. 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 sliders and carousels but not mentioned keyboard supported navigation yet. 13:35 Fixed Floating Elements http://jqueryfordesigners.com/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. We’ll look at how to replicate the fixed floating sidebars or elements with very little jQuery.

]]> Fri, 23 Oct 2009 14:00:00 +0000 fixed-floating-elements jQuery for Designers 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. We’ll look at how to replicate the fixed floating sidebars or elements with very little jQuery. 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. We’ll look at how to replicate the fixed floating sidebars or elements with very little jQuery. 14:02 iPhone-like Sliding Headers http://jqueryfordesigners.com/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. We’ll see how to create this effect using jQuery.

]]> Thu, 10 Sep 2009 14:00:00 +0000 iphone-like-sliding-headers jQuery for Designers 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. We’ll see how to create this effect using jQuery. 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. We’ll see how to create this effect using jQuery. 25:09 Automatic Infinite Carousel http://jqueryfordesigners.com/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.

]]> Thu, 13 Aug 2009 14:00:00 +0000 automatic-infinite-carousel jQuery for Designers 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. 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. 5:25 Play School: Broken Repeating Animations http://jqueryfordesigners.com/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!

]]> Fri, 23 Jul 2009 14:00:00 +0000 broken-repeating-animations jQuery for Designers 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! 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! 5:31 API: queue and dequeue http://jqueryfordesigners.com/api-queue-dequeue/ queue & dequeue are a pair of core data utilities that help you to add your own bespoke to animations.

]]> Fri, 10 Jul 2009 14:30:00 +0000 api-queue-dequeue jQuery for Designers queue and dequeue are a pair of core data utilities that help you to add your own bespoke to animations. queue and dequeue are a pair of core data utilities that help you to add your own bespoke to animations. 5:39 jQuery Infinite Carousel http://jqueryfordesigners.com/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. This tutorial will walk through the fundamentals of the effect and how to recreate it.

]]> Thu, 11 June 2009 14:00:00 +0000 jquery-infinite-carousel jQuery for Designers 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. This tutorial will walk through the fundamentals of the effect and how to recreate it. 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. This tutorial will walk through the fundamentals of the effect and how to recreate it. 39:48 SlideDown Animation Jump Revisited http://jqueryfordesigners.com/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.

]]> Wed, 15 Apr 2009 14:00:00 +0000 slidedown-animation-jump-revisited jQuery for Designers 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. 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. 8:35 BBC Radio 1 Zoom Tabs http://jqueryfordesigners.com/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.

]]> Fri, 3 Apr 2009 14:00:00 +0000 bbc-radio-1-zoom-tabs jQuery for Designers 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. 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. 29:55 API: map & grep http://jqueryfordesigners.com/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.

Historically, I believe that John Resig was inspired by the Perl functions of the same name - which are basic building blocks of the Perl programming language. Let’s look at how you can use these functions.

]]> Wed, 25 Mar 2009 14:00:00 +0000 api-map-grep jQuery for Designers 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. Historically, I believe that John Resig was inspired by the Perl functions of the same name - which are basic building blocks of the Perl programming language. Let’s look at how you can use these functions. 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. Historically, I believe that John Resig was inspired by the Perl functions of the same name - which are basic building blocks of the Perl programming language. Let’s look at how you can use these functions. 10:29 jQuery look: Tim Van Damme http://jqueryfordesigners.com/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.

The two key effects Tim is using are a simplified accordion and a hover effect. It's worth noting that the hover effect only works in WebKit (Safari & Chrome), but I'll show you how to create the effect using jQuery too.

]]> Fri, 20 Feb 2009 14:00:00 +0000 jquery-look-tim-van-damme jQuery for Designers 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. The two key effects Tim is using are a simplified accordion and a hover effect. It's worth noting that the hover effect only works in WebKit (Safari & Chrome), but I'll show you how to create the effect using jQuery too. 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. The two key effects Tim is using are a simplified accordion and a hover effect. It's worth noting that the hover effect only works in WebKit (Safari & Chrome), but I'll show you how to create the effect using jQuery too. 33:01 How to test if an Element Exists http://jqueryfordesigners.com/ajax-spy/ 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 simple) way to find out.

]]> Tue, 10 Feb 2009 17:00:00 +0000 element-exists jQuery for Designers 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 simple) way to find out. 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 simple) way to find out. 7:53 Ajax Spy http://jqueryfordesigners.com/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).

However I did promise I would demonstrate how to ajaxify the spy.

]]> Fri, 30 Jan 2009 13:20:00 +0000 ajax-spy jQuery for Designers 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). However I did promise I would demonstrate how to ajaxify the 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). However I did promise I would demonstrate how to ajaxify the spy. 16:24 Play School: Easy Ajax - load http://jqueryfordesigners.com/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 .load function is the best place to start.

]]> Tue, 13 Jan 2009 19:45:00 +0000 play-school-easy-ajax-load jQuery for Designers 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 .load function is the best place to start. 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 .load function is the best place to start. 10:12 API: Filter and Find http://jqueryfordesigners.com/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.

]]> Tue, 6 Jan 2009 15:00:00 +0000 api-filter-find jQuery for Designers 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. 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. 10:29 Simple jQuery Spy Effect http://jqueryfordesigners.com/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 Realmac Software released the site QuickSnapper to accompany LittleSnapper.

It's the QuickSnapper site (the left hand side) that makes use of the similar spy technique that I'll explain how to produce.

]]> Tue, 2 Dec 2008 15:50:00 +0000 simple-jquery-spy-effect jQuery for Designers 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 Realmac Software released the site QuickSnapper to accompany LittleSnapper. It's the QuickSnapper site (the left hand side) that makes use of the similar spy technique that I'll explain how to produce. 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 Realmac Software released the site QuickSnapper to accompany LittleSnapper. It's the QuickSnapper site (the left hand side) that makes use of the similar spy technique that I'll explain how to produce. 31:27 Fun with Overflows - Part 1 http://jqueryfordesigners.com/fun-with-overflows/ 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. So this episode of J4D demonstrates the same effect used in two completely different ways.

The first is a scrollable timeline. A couple of readers requested a demo of how Plurk's browse timeline works. In addition, in the last month, Google released a 10 year timeline - so I wanted to show how this works.

]]> Thu, 16 Oct 2008 20:10:00 +0100 fun-with-overflows jQuery for Designers 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. So this episode of J4D demonstrates the same effect used in two completely different ways. 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. So this episode of J4D demonstrates the same effect used in two completely different ways. The first is a scrollable timeline. A couple of readers requested a demo of how Plurk's browse timeline works. In addition, in the last month, Google released a 10 year timeline - so I wanted to show how this works. 20:21 Fun with Overflows - Part 2 http://jqueryfordesigners.com/fun-with-overflows/ 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. So this episode of J4D demonstrates the same effect used in two completely different ways.

The second was a request from Trevor Morris who's involved with/runs Geek in the Park. He asked whether the techniques I used in a jQuery marquee plugin I wrote recently could be used to smooth out CPU spikes that were occurring on his site when the header pattern flowed.

]]> Thu, 16 Oct 2008 20:10:00 +0100 fun-with-overflows jQuery for Designers 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. So this episode of J4D demonstrates the same effect used in two completely different ways. 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. So this episode of J4D demonstrates the same effect used in two completely different ways. The second was a request from Trevor Morris who's involved with/runs Geek in the Park. He asked whether the techniques I used in a jQuery marquee plugin I wrote recently could be used to smooth out CPU spikes that were occurring on his site when the header pattern flowed. 16:49 Animation Jump - quick tip http://jqueryfordesigners.com/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.

However, on more than one occasion I've found that after creating a sliding effect, the animation jumps on completion.

Having found the cause, I thought it only fair to share and explain why it's happening and how to avoid it.

]]> Tue, 19 Aug 2008 13:30:00 +0100 animation-jump-quick-tip jQuery for Designers 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. However, on more than one occasion I've found that after creating a sliding effect, the animation jumps on completion. Having found the cause, I thought it only fair to share and explain why it's happening and how to avoid it. 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. However, on more than one occasion I've found that after creating a sliding effect, the animation jumps on completion. Having found the cause, I thought it only fair to share and explain why it's happening and how to avoid it. 03:01 Image Fade Revisited http://jqueryfordesigners.com/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. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown here.

]]> Tue, 28 Jul 2008 13:02:00 +0100 image-fade-revisited jQuery for Designers 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. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown here. 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. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown here. 16:20 Coda Slider Effect http://jqueryfordesigners.com/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 apart the pieces required to create the effect, and how to better it.

]]> Tue, 3 Jun 2008 12:25:40 +0100 coda-slider-effect jQuery for Designers Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect. This article will pick apart the pieces required to create the effect, and how to better it. Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect. This article will pick apart the pieces required to create the effect, and how to better it. 32:56 Image Cross Fade Transition http://jqueryfordesigners.com/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 rollovers are so 90s - we want rollover transitions!

]]> Fri, 11 Apr 2008 15:25:40 +0100 image-cross-fade-transition jQuery for Designers 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 rollovers are so 90s - we want rollover transitions! 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 rollovers are so 90s - we want rollover transitions! 19:26 Coda Popup Bubbles http://jqueryfordesigners.com/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) are also known for their sharp design.

In particular, Jorge Mesa writes to ask how to re-create their 'puff' popup bubble shown when you mouse over the download image.

In essence the effect is just a simple combination of effect, but there's a few nuances to be wary of.

]]> Thu, 03 Apr 2008 15:23:22 +0100 coda-popup-bubbles jQuery for Designers Coda is one of the new web development tools for the Mac - and it's popular amongst designers and developers I know. Panic are also known for their sharp design. We look at how to recreate the 'puff' effect to show a bubble of information. 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) are also known for their sharp design. In particular, Jorge Mesa writes to ask how to re-create their 'puff' popup bubble shown when you mouse over the download image. In essence the effect is just a simple combination of effect, but there's a few nuances to be wary of. 16:19 Slider Gallery http://jqueryfordesigners.com/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 user controls to view the items. Simple stuff.

jQuery already has the plugins to create these effects so we don't have to go about creating them ourselves from scratch.

]]> Mon, 18 Feb 2008 15:21:18 +0000 slider-gallery jQuery for Designers 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 user controls to view the items. We'll demonstrate how to achieve this using jQuery's UI library. 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 user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don't have to go about creating them ourselves from scratch. 12:17 Image Loading http://jqueryfordesigners.com/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 the lightbox effect, except we have full control of the load event.

]]> Mon, 04 Feb 2008 15:19:28 +0000 image-loading jQuery for Designers 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 the lightbox effect, except we have full control of the load event. 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 the lightbox effect, except we have full control of the load event. 7:11 jQuery Tabs - part 2 http://jqueryfordesigners.com/jquery-tabs/ Fri, 18 Jan 2008 15:15:30 +0000 jquery-tabs-part-2 jQuery for Designers 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 world problem and applies the tabbing functionality to non-conventional markup. Tabbing has been common place on the Internet for some time now. Today web sites will make use of tabbing without the page having to reload with the addition of JavaScript. For this tutorial I have created two screencasts demonstrating how to quickly apply a dash of jQuery to different layouts of markup, which, if the markup is well designed, it will automatically degrade nicely without JavaScript enabled. In a future article we will cover default browser functionality (i.e. supporting back, forward and bookmark buttons) and saving tab states. 11:14 jQuery Tabs - part 1 http://jqueryfordesigners.com/jquery-tabs/ Fri, 18 Jan 2008 15:15:01 +0000 jquery-tabs-part-1 jQuery for Designers 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 world problem and applies the tabbing functionality to non-conventional markup. Tabbing has been common place on the Internet for some time now. Today web sites will make use of tabbing without the page having to reload with the addition of JavaScript. For this tutorial I have created two screencasts demonstrating how to quickly apply a dash of jQuery to different layouts of markup, which, if the markup is well designed, it will automatically degrade nicely without JavaScript enabled. In a future article we will cover default browser functionality (i.e. supporting back, forward and bookmark buttons) and saving tab states. 7:31