Category: Plugins

jQuery emptyonclick Plugin - form field watermarks

by Jack K

The jQuery emptyonclick plugin solves a common problem nicely, creating "watermark" text inside a form field.

http://www.madewithlove.be/blog/the-jquery-emptyonclick-plugin/

I've actually tried a few plugins for this kind of effect and most solutions have some kind of problem with them. There are a few subtleties to solving the problem nicely. I ran some tests on this one and didn't find any gotcha's or special requirements that would make it seem annoying to use.

Worth remembering. Solves a seemingly simple problem in a simple seeming way.

A note: if the form that the field you're watermarking has reset or submit buttons, an event handler gets bound to them that will clear the value in your watermarked fields if it's the same value as the default for the field. That will probably be useful and probably won't get in your way, but it's something to be aware of.



Flip! jQuery box flipping plugin

by Jack K

OK, gotta admit, this one's got me a little excited, probably because I've been playing with iPhone apps so much lately. On the iPhone (and some dashboard widget apps) there's a cool effect where you can "turn over" something you're looking at, which shows you what looks like the "other side" of it. A good example is looking at an image and then flipping it over to see picture info (date taken, etc). I've seen this effect used very well on a few web sites lately, too. Anyway, the jquery Flip! plugin:

http://lab.smashup.it/flip/

I've tested this in IE6 and it worked, FWIW. The author says it would, but I'm a bit paranoid (kicked enough times by that piece of merde). I'd like to see some more clear examples there of using the "content" option, which to me is what makes the use case something more than just a neat effect.

Anyway, this is kinda cool, IMO. Maybe "flip will be the next reflection", which was um, "the next rounded corners", which was um... the next Windows Playskool UI, no, wait, no... yes.

jQuery CrossSlide plugin for image panning, zooming, fading effects

by Jack K

If you need to fade a set of images in and out of each other, all in the same box, this jQuery slide show animation plugin might do the trick for you:

http://www.gruppo4.com/~tobia/cross-slide.shtml

This can give you some of the nice fades and transitions that used to be found mostly in Flash-based solutions. The example there are nice, but you also can have a lot of control over how the animations look (think Ken Burns effect, with panning, zooming and fading all going on at once).

I fired this thing up in IE6 to see if it would pass muster and the examples worked. Kudo's to the author (Tobia Conforto) for that. This is a nice plugin to remember when you want to put in some nice self-contained image gallery animations.

If you're in the market for something for this, you might also want to take a look at the jQuery Cycle Plugin, which I've noticed is well supported in the jquery Google group (and I've used it for a few things, with success).

jQuery idTabs - clean, simple, effective tabbing

by Jack K

I've used a few jQuery and javascript based tabbing solutions, but keep finding myself opting to use this one when faced with a UI that needs tabs. It's very flexible, simple to setup and, well, just a pretty elegant solution:

http://www.sunsean.com/idTabs/

There are a bunch of examples there, which of course you access via some tabs :-) . The examples show how versatile the plugin is (you can arrange your tabs pretty much any way you want). A code snippet for each example is visible via an expanding panel.

One thing you might want to is look at how the css is setup for the tabs, there are some nice hacks/workarounds to get rid of link edges (the border that can appear when clicking a tab).

Definitely one to reach for when you want to get some groovy tabs into place.


jQuery Sparklines

by Jack K

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

http://www.omnipotent.net/jquery.sparkline/

[2 cents] This is pretty cool and might work nicely for creating a mini version of something you create a larger version of using jQuery FLOT. I know this one's been around for a while, but I'm still waiting for a prime use case so I can tinker with it. (usually when I say something like that I end up finding a reason to use it within a day... ha ha).

<< 1 2 3 >>