Tags: plugin

Slider plugin that coordinates with HTML select boxes

by Jack K

The Filament Group has been real busy lately bringing lots of goodness to jQuery and jQuery UI. Actually, the stuff is pretty amazing... I'm so happy they're on board with the jQuery projects. I think their contributions are going to play a significant role in the increasing use of jQuery and jQuery UI. OK, enough on that, let's get on with this neat thing....

If you're ready to dive into using jQuery UI 1.6 (which is on RC5 now and should be out this week) and are looking for a cool slider control that will work hand-in-glove with the values in one or more HTML select boxes (and has nice themes), check out their select-to-slider plugin:

http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/


If you're not sure what the heck I mean, take a look there: the demo's show it in action. With a great deal of attention spent on making the control use progressive enhancement, you can create a slider that is bound to one select box and drag the slider's 'knob' (I like that word) to change the selected value in the select box. Want two knobs (and who doesn't)? Use two select boxes with two knobs on the slider. There's also a slick optional feature that translates select box option groups into a sort of "timeline" list below the slider. I can think of lots of uses for that.

Oh, and the knobs have a "tooltip" option, too, which looks great. Lotsa love here. Can't wait to use this in something new.

jQuery lightBox plugin - graceful lightbox

by Jack K

Posting about Thickbox reminded me of this lightbox jQuery plugin, which has become my current fav for putting together quick galleries (like for flickr feeds and such). I'm also a sucker for the nice design at the site. And, as an extra bonus, picking through the source of this page is how I originally found the idTabs plugin (way back when this plugin was originally released), which has become one of my most frequently used plugins.

Anway, back to the point, here's the jQuery lightbox plugin:

http://leandrovieira.com/projects/jquery/lightbox/

I've found it to be nicely reliable across browsers, and it "feels" lightweight, requiring minimal mucking around the in the CSS to get it working and to style it (though I've gotta say I haven't had much need to actually mod it's styling). FYI, we almost always use a CSS reset file (usually the YUI one, but sometimes just a plain old * reset for setting padding and margins to 0) and this has played very nicely with that.

jqModal, jQuery modal popups plugin

by Jack K

The jqModal is an "oldie but goodie" plugin. It's been around for a while and revved a few times and has been pretty reliable for what we've used it for.

http://dev.iceburg.net/jquery/jqModal/

I've gotta admit, initially getting it working was a bit frustrating for me at first. At the time (a while back) I had just started exploring jQuery modal plugins and wasn't really sure which would do the job. I sunk some time into this and after some initial stumbling, gave up. Then I messed with some others and was like, "fark, that sucked" (especially with cross-browser checks), and came back to this one.

Glad I did. Once I figured out how to get it set up (the css matters a lot, take a good look at the examples), it did the job and I've used it in a bunch of projects since then, which also gave me some opportunities to try more of it's features. All panned out well.

This is a nice one to use when something like jQuery Thickbox feels like overkill and you're really looking mainly to show dialogs and messages. We've had some other cases where we needed to show external sites in the modal and for those cases opted for Thickbox or the jQuery UI dialog widget, though there's a 3rd party example of opening an external site at the bottom of the jqModal examples (I haven't tried it).

jQuery pop! Simple drop down content plugin

by Jack K

jQuery pop is a simple little plugin that lets you put an up/down arrow anywhere on your page and when clicked it shows some content in a dropdown div. Handy for those times when you need a mini "menu" effect for a single item, but don't want all the overhead of a menu plugin (and don't need fly-out submenu's).

http://pop.seaofclouds.com/

I haven't actually used this one yet, but got it queued up for a little spin.

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.



1 2 >>