jQuery for Designers

Two New Series

Remy — Fri, 03 Oct 2008 16:48:26 +0000

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. Sorry all! So, before I ask for your opinion on what's next - the next screencast will be [...]

Animation Jump - quick tip

Remy — Tue, 19 Aug 2008 12:54:55 +0000

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 [...]

Image Fade Revisited

Remy — Mon, 28 Jul 2008 12:58:48 +0000

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. Watch the image fade revisited screencast (alternative flash version) QuickTime version [...]

Coda Slider Effect

Remy — Tue, 03 Jun 2008 13:15:31 +0000

Background 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. How to Solve the Problem Recreating this effect is simple to do if you know what plugins to use. There are [...]

Help make jQuery for Designers better

Remy — Thu, 15 May 2008 17:15:10 +0000

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. I've put together a really short questionnaire - just yes/no kind of stuff all feedback will be considered! http://remysharp.questionform.com/public/nextpost If you're reading this in an RSS reader and [...]

Image Cross Fade Transition

Remy — Fri, 11 Apr 2008 13:29:38 +0000

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.com, needed a method one image into another mouse rolls over, and the slowly fade back once the mouse has left. Image rollovers were the staple JavaScript nugget of [...]

Coda Popup Bubbles

Remy — Mon, 03 Mar 2008 16:22:11 +0000

Background 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 [...]

Slider Gallery

Remy — Mon, 18 Feb 2008 14:52:56 +0000

Background Michiel Kenis requested a tutorial explaining how to create a similar effect used to showcase the products on the Apple web site. This '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 [...]

Image Loading

Remy — Mon, 04 Feb 2008 12:33:08 +0000

Background Daniel Mee requested a tutorial and writes: I have a large image (500k). I have a loading gif (little rotating circle thingy from ajaxload.info). I want the animated gif to be swapped with the large image once it's loaded. The event may be on page load or may be some button onClick... This is similar [...]

jQuery Tabs

Remy — Fri, 18 Jan 2008 15:49:26 +0000

Background 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 [...]