jQuery “Highlight” plugin
Highlight a form field’s parent tag (or any other selector) as you tab into it.
Posted on Tuesday, February 12th, 2008 at 1:42 pm
Highlight increases usability by highlighting elements as you interact with the page.
Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.
Examples uses:
- Form-filling can be made clearer by highlighting the element around a control as you tab into it
- Table rows can be made more visible as you pass the mouse over them, or click them
- Elements can be toggled as you click them
Code example
Because of the defaults, basic usage can be as simple as:
$('form').highlight()
The method signature for Highlight is:
$(selector).highlight(parentSelector, highlightClass, startEvent, endEvent)
Demo
View the Highlight demo which has examples for forms, tables, and lists.
Hi, I thing i found little css bug,
for example when i definned the css color for table row via
tr .odd
{
background-color: aqua;
}
your style “switcher” will not switch the aqua color with highlighted color for example defined in
.highlight {
background-color: gray;
}
So the odd wors remain aqua. Can you test this ?
Thanks o lot Mike
Hi Mike,
Well at the moment the plugin adds to (not replaces) the style on the element, so it may be that you need to either
1) place the .highlight rule after (or is it before?) your .odd rule, so it has a higher precedence
2) mark .highlight’s background-color as !important (background-color: gray !important;) in the CSS
3) I could maybe look at adding a “replace” option to the plugin (but I’d rather not!)
Let me know how you get on.
Dave
Thanks for answer, Yes the !important helps. Have a Nice day Dave.
Hi there,
Thanks for the great jQuery plugin, I’m now using it on my website’s contact form!
-Adam