On-the-floor

On the Floor

3 jQuery plugins I use all the time

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?

Comments

On August 12 2010 at 11:54AM Renê Dettenborn said:

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 2:36PM Hardik Shah [Guru] said:

Awesome stuff !

Regards,
H.

On August 12 2010 at 2:41PM the future said:

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

On August 12 2010 at 3:09PM jason said:

The corners one is outstanding, TY!!!

On August 12 2010 at 5:36PM Paul said:

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 7:18PM London said:

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:33PM Seth said:

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

On August 13 2010 at 9:46AM Jamie Allen said:

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

On August 13 2010 at 12:09PM Jake said:

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:29PM David said:

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:50PM sundawg said:

hi does cycle have external control buttons like jcarousel?

On August 13 2010 at 1:18PM Jamie Allen said:

@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 5:13PM Gregg Bolinger said:

Here's my list:

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

On August 13 2010 at 7:59PM Ricardo Soares de Lima said:

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 9:37PM zoidberg said:

why don't you link to homepages of the plugin

On August 15 2010 at 9:01AM Jamie Allen said:

@Gregg thanks for the list!

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

On August 21 2010 at 6:47AM Aman said:

hi

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

Thanks
Amandeep mann

On August 11 2012 at 7:13PM Balwinder said:

Too easy to hack. And it is not true, that it depends on user iocerattinn, since it depends only on the presence of an empty input field. The javascript and the random password are only a potemkin village in front of this input field, since they are not needed at all.The design shows, that there is a total misunderstanding about passwords and captchas.Thomas

On August 13 2012 at 6:52PM wwwdzroj said:

Lq4ZhJ ilaoxdfezjcf

On January 5 2013 at 5:47AM Mehdi said:

Velmi hezke9, děkuji za www stre1nky. Až budu stare1 babička, nebudu moc chdoit, nezapomenu na tyto fotografie, budu si je alespoň prohledžet. Doufe1m, že si zapamatuji , již nyned s tedm pamatove1nedm me1m proble9m. Dedky