columnHover
Description:
A jQuery-plugin that highlights whole columns in a table when hovering over them.
It’s supporting tables with colspans and rowspans, too!
If you need support for row highlighting through the plugin, please head over to the tableHover plugin page.
Files: (last update: 2007-08-05 - v 0.1.1)
- jquery.columnhover.js (6kb)
- jquery.columnhover.pack.js (1.4kb)
License:
The plugin is available under both MIT and GPL licenses (as jQuery itself). This means that you can choose the license that best suits your project, and use it accordingly.
Usage and Examples:
Please take a look at the demo page and the source of the jquery.columnhover.js file.
Available options:
- hoverClass - string - A CSS class that is set on the cells in the column with the mouse over. Default value: “hover”
- eachCell - boolean - Allows highlighting the column while hovering over the table body or table footer. When disabled, highlighting is allowed only through the table header. Default value: false
- includeSpans - boolean - Includes columns with the colspan attribute set in the hover and highlight process. Default value: true
- ignoreCols - array - An array of numbers. Each column with the matching column index won’t be included in the highlighting process. Index starting at 1! Default value: []
Changelog:
- v 0.1.1 - 2007-08-05
- added new option “ignoreCols”, through which columns can be excluded from the highlighting process
The plugin was successfully tested on Firefox 2, Opera 9.21 and IE 6/7.
Juan
May 30th, 2007 at 1:41 pm
Hi there, great script!! many thanks… I wonder if would be possible changing the class of the cell that we are selecting and keep the rows and the column with the rollover effect…
rw
May 30th, 2007 at 6:13 pm
Thanks Juan,
do you mean changing the class on click? If yes, that’s a good idea. If not, give more information please.
Juan
May 30th, 2007 at 7:33 pm
Thanks for the quick answer. I mean something like this: http://www.mediavilla.name/RollOverCell.jpg
rw
May 30th, 2007 at 9:37 pm
All right, I’ll add this into the code.
Juan
May 30th, 2007 at 10:30 pm
Cool mate, that would be great, thanks a lot!!
rw
June 1st, 2007 at 5:32 pm
Please take a look at the tableHover plugin. I think it does what you want.
Juan
June 1st, 2007 at 6:17 pm
That is really sweet mate… I don’t know what to say. Just beautiful. Can I send you a donation via paypal or help you with something? (I’m a designer)
rw
June 1st, 2007 at 6:34 pm
You don’t have to donate, thank you! I’m glad this is useful.
Juan
June 1st, 2007 at 6:48 pm
All the best to you.
Graham
July 31st, 2007 at 5:24 am
I love this but wondered if it’s possible to do the following:
I have a table with eight columns; the first four columns allow special filtering - thus I would like to highlight just those four columns on mouseover, instead of highlighting all eight columns. This will provide a visual indication that the first four columns have special functionality.
Thanks!
rw
August 1st, 2007 at 8:04 pm
That doesn’t sound too complicated. I’ll try implementing that.
goldlilys
August 3rd, 2007 at 9:18 pm
Hey, I’m using this for a work project right now, but it seems to not work well with IE6. The row highlighting does not show up, only the column highlighting. Even your demo doesn’t work right when viewed under IE6. Please test this out again. Once it works for IE6, this is one of the best plugins for jquery. Thanks for this.
rw
August 5th, 2007 at 3:51 pm
goldlilys: this plugin does not support row highlighting. The row highlighting on the demo page is through the CSS :hover class which IE6 is not supporting.
If you want the row highlighting in IE6, please take a look at my tableHover plugin.
rw
August 5th, 2007 at 4:54 pm
Graham: the new version should do what you want (using the ignoreCols option). Please give it a try.
Thanks.