jquery-dev

Slider plugin that coordinates with HTML select boxes

Jack K — Wed, 21 Jan 2009 18:56:50 +0000

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.

Original post blogged at www.jquery-dev.com.

Tutorial for totaling table columns using jQuery

Jack K — Tue, 09 Dec 2008 19:27:43 +0000

Here's a tutorial that shows one way to calculate totals for a set of columns in an HTML table:

http://beckelman.net/post/2008/11/13/Totals-and-Averages-of-Column-Data-on-Client-Side-Using-JavaScript-and-jQuery-Demo.aspx

This is the kind of thing that often shows up as a requirement in reporting tables and gives you a little jquery sample code for getting them in place.

Original post blogged at www.jquery-dev.com.

jQuery Object Cache plugin

Jack K — Tue, 09 Dec 2008 19:25:51 +0000

The jQuery Object Cache plugin showed up on my radar a few days ago. It's a neat little plugin that would come in handy if you've got some jQuery selectors that you find you're re-using often on a page and would like to toss them into a cache instead of refetching them each time you need them:

http://www.decodeuri.com/2008/11/20/new-jquery-plugin-object-cache

I could see using this on smaller projects, but more than likely we'd end up using it on larger projects where a page has a lot of dynamic activity going on in the browser. Usually we just set a local var using something like:

var $listItems = $('#list li');

and then we reuse the $listItems var, but Object Cache would allow us to stuff the results of the selector into a cache, so we wouldn't have to grab them from the DOM again.

Original post blogged at www.jquery-dev.com.

jQuery lightBox plugin - graceful lightbox

Jack K — Sat, 06 Dec 2008 00:38:58 +0000

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.

Original post blogged at www.jquery-dev.com.

Tip for opening jQuery thickbox programmatically

Jack K — Sat, 06 Dec 2008 00:32:27 +0000

jQuery Thickbox has been around for a while and we've used it in a bunch of projects and every time I decide I want to open a thickbox programmatically, instead of via the usual binding method, I have to fish for how to do it. The last time I went fishing, I found this and decided to post about it, thinking, "hey, if I post about it, I might actually remember where to find it next time I go fishing". OK, yeah, I'll probably still have to google for it, but anyway, here's the link:

http://blog.gridworlds.com/js/working-with-thickbox

Look down the page for "Calling Thickbox via JavaScript". Bingo.

Original post blogged at www.jquery-dev.com.

jqModal, jQuery modal popups plugin

Jack K — Tue, 02 Dec 2008 21:08:02 +0000

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).

Original post blogged at www.jquery-dev.com.

jQuery pop! Simple drop down content plugin

Jack K — Tue, 02 Dec 2008 17:32:06 +0000

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.

Original post blogged at www.jquery-dev.com.

jQuery emptyonclick Plugin - form field watermarks

Jack K — Tue, 25 Nov 2008 23:49:07 +0000

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.

Original post blogged at www.jquery-dev.com.