On the Floor

When making anything over and over you tend not to notice repetitive actions. The other day I stepped back from what I do and I noticed a few things. I've used a lot of jQuery plugins. I started looking through some of the ones I use consistently and came up with these three.

jQuery Cycle

Fancy front page slide shows are all the rage right now and jQuery Cycle is my favourite solution. I've tried SerialScroll as well, but I've found over and over that jQuery Cycle is much easier to implement.

First include the files in the head:

Build your photo collection wrapped in a div:

Add some styles:

Then all you have to do is add the specs into your chosen applications javascript file:

This will cycle through each child of #rotating-photos. It is also very easy to add and style previous/next buttons as well as pagination. There are a pile of examples here to help you get started.

jQuery Corner

Have you ever noticed how designers seem to love rounded corners? To do this you used to have to make all kind of images then use some fancy CSS to get it all looking right. And once you get it working in Firefox or Safari you have to do it all over again for Internet Explorer. Good times.

jQuery corner is a cross-browser solution to those woes.

Create your object:

Style your object:

And tell your script to round the corners:

Don't forget to include the files in the head:

You can also do a number of other things to your corners such as "Sharp," "Fray" or "Wicked." There are quite a few possibilities that I don't think I would ever use, but it's always nice to have options.

jQuery Hint

This one is really straight forward. It provides a "hint" in a text field which disappears when the field is in focus.

Include the files in the head:

Add you field, which will obviously be part of a larger form:

Then simply call it up from your javascript file:

That's it! The title you've added becomes the hint in the text field.

Anyone else have any favourites?