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.

Tutorial for totaling table columns using jQuery

by Jack K

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.

jQuery Object Cache plugin

by Jack K

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.

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.

Tip for opening jQuery thickbox programmatically

by Jack K

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.

1 2 3 4 5 >>