Jamie Allen by Jamie Allen on August 12, 2010
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.
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:
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.
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.
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:
That's it! The title you've added becomes the hint in the text field.
Anyone else have any favourites?