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.

Demo and Example page.

Files: (last update: 2007-08-05 - v 0.1.1)

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.

14 Responses to “columnHover”

  1. 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…

  2. Thanks Juan,

    do you mean changing the class on click? If yes, that’s a good idea. If not, give more information please. ;)

  3. Thanks for the quick answer. I mean something like this: http://www.mediavilla.name/RollOverCell.jpg

  4. All right, I’ll add this into the code.

  5. Cool mate, that would be great, thanks a lot!!

  6. Please take a look at the tableHover plugin. I think it does what you want.

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

  8. You don’t have to donate, thank you! I’m glad this is useful.

  9. All the best to you.

  10. 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!

  11. That doesn’t sound too complicated. I’ll try implementing that.

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

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

  14. Graham: the new version should do what you want (using the ignoreCols option). Please give it a try.
    Thanks.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Syntax Highlighting: You can use [js] .. [/js] and [html] .. [/html] for posting code snippets.