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.


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?


Tags:
Web, Design
Share this post:
Permalink



Comments

Aman

hi

Very helpful Plugins List.I have also jquery tutorial and Plugins in jquery13.

Thanks
Amandeep mann

On August 21 2010 at 6:47 AM
Jamie Allen

@Gregg thanks for the list!

@zoidberg each plugin is linked to from the plugin name before the explanation.

On August 15 2010 at 9:01 AM
zoidberg

why don't you link to homepages of the plugin

On August 13 2010 at 9:37 PM
Ricardo Soares de Lima

Nice tips!
Does anyone know a plugin to create horizontal scrollbars inside a webpage?
I've seen the jquery ui example bu I'm having a hard time trying to adapt it to my code.

On August 13 2010 at 7:59 PM
Gregg Bolinger

Here's my list:

http://blog.greggbolinger.com/jquery-plugins-i-recommend

On August 13 2010 at 5:13 PM
Jamie Allen

@jake when i was initially writing this i was thinking of getting into HTML5 and other details/upcoming-ness, but the post was getting really long.. i decided to stick with the basics. thanks!

@dave fancybox was totally in my initial list, but, as i mentioned above, the post was already really long. Also on my initial list was FancyZoom and jQuery tabs.

@sundawg it has previous/next buttons and pagination that you can style any way you like. check out the more advanced samples on the site.

thanks for the comments!!

On August 13 2010 at 1:18 PM
sundawg

hi does cycle have external control buttons like jcarousel?

On August 13 2010 at 12:50 PM
David

Can't forget about FancyBox http://fancybox.net/ . I've found it to be the best jquery "lightbox" plugin. I use it in all of my designs.

On August 13 2010 at 12:29 PM
Jake

corner is rather unnecessary. non IE browsers' newest version supports rounded corners well.

if pixel perfect design isn't your goal, just stick to multiple border-radius: 10px etc. will be fine.

the hint one is neat, it provides one of the new attributes added in HTML5 to text input. namely, placeholder. so it's a good temporary workaround for that.

cycle plugin is handy. i like it.

nice share.

On August 13 2010 at 12:09 PM
Jamie Allen

@seth good eye. jumping from language to language can sometimes be choppy when you're on a roll.

On August 13 2010 at 9:46 AM
Seth

Small note, but you're using JS comments in your CSS.

On August 12 2010 at 7:33 PM
London

I use jquery corners all the time, it makes everything look very web 2.0 - without all the images.

On August 12 2010 at 7:18 PM
Paul

These are very nicly done. I also like Rene's datatables plugin. I use jquery UI for some additional standard apps like calendar and slider.

On August 12 2010 at 5:36 PM
jason

The corners one is outstanding, TY!!!

On August 12 2010 at 3:09 PM
the future

Thanks for these. I think I'll check out the corners plugin straight away.

On August 12 2010 at 2:41 PM
Hardik Shah [Guru]

Awesome stuff !

Regards,
H.

On August 12 2010 at 2:36 PM
RenĂª Dettenborn

Nice plugins!
I like jQuery Datatables plugin.
It's nice to table structure, have a search field and nice view. [http://www.datatables.net]
[http://renedet.blogspot.com/2009/10/datatables-plugin-jquery-para-tabelas.html]

On August 12 2010 at 11:54 AM

Passionate People. Creative Minds.

We view our clients as partners. Knowing that great ideas can come from anywhere, we find ourselves constantly inspired by our partnerships.