An introduction to Highlight

Overview

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.

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

Basic Usage

The basic form for using Highlight is:

$(selector).highlight(parentSelector, highlightClass, startEvent, endEvent)

Highlight works by adding a class to a parent element to the one that was targeted.

For example, a text field might be contained by a li element, and this li element would have the default "highlight" class added to it as the text field was focused, and removed when it was blurred.

By default, Highlight chooses defaults for common usage, so it's easy to target elements with just the basic command, for example...

$('form').highlight()

...would set up a form to receive focus and blur events on all its controls, and highlight (add a class to a parent element) any controls' contained by list-item elements.

Default tags and classes

Highlight has some defaults for the more commonly-targeted HTML elements, as shown below:

selector parentSelector highlightClass startEvent endEvent
form li 'highlight' focus blur
table tr 'highlight' mouseover mouseout
ul, ol li 'highlight' mouseover mouseout

These can easily be overridden, as shown in the next section.

Customizing which elements are targeted and which classes are applied

In order to highlight a different parent element, you would just add it as the first argument:

$('form').highlight('div')

If you wanted to specify a different highlight class, you would specify that as the second argument:

$('form').highlight('div', 'some-class')
$('form').highlight(null, 'some-class')

Customizing when highlighting occurs by changing the event type

In order to customize the events that cause elements to highlight, and de-highlight, you change the third and forth arguments to the start and end event names.

$('#element').highlight('div', 'some-class', 'mouseover', 'mouseout')

You can also choose to toggle the highlight, and you do this by only specifying one event:

$('#element').highlight('div', 'some-class', 'mousedown')

 

Example of highlight working within a form

Form controls

The following code is used to achieve the form interaction below. 

form.highlight()

Highlight is automatically set up to bind to focus and blur events, and automatically targets any form controls, such as text fields or radio buttons.

Tab into, or select the form fields to see the control's parent li element receive the highlighting class.

Example of highlight working within tables

Table rows

The following code is used to highlight the table rows.

$('#table1').highlight()

Move your mouse over the table to see the table rows receive the highlighting class.

   
   
   
   
   

Table cells

The following code is used to highlight the table cells as the mouse passes over them.

$('#table2').highlight('td')

Move your mouse over the table to see the table cells receive the highlighting class.

   
   
   
   
   

Toggling table rows

The following code is used to toggle table rows off and on as you click them.

$('#table3')
	.highlight('tr')
	.highlight('tr', 'highlight-selected', 'mousedown');

Click the table rows to toggle the highlighting class.

   
   
   
   
   

Example of highlight working on list items

List items

The following code is used to highlight a list's elements as the mouse passes over them.

$('#list1').highlight(null, 'list-highlight')

Move your mouse over the list to see the list items receive the highlighting class

  • Item 1
  • Item 2
  • Item 3
  • Item 4

List items' containing element

The following code is used to highlight sub-lists' immediate parent lists as the mouse passes over them.

$('#list2').highlight('ul', 'list-highlight')

Move your mouse over the sub-list items to see their immediate parent ul receive the highlighting class

  • Item 1
    • Item 1
      • Item 1
      • Item 2
      • Item 3
      • Item 4
    • Item 2
    • Item 3
    • Item 4
  • Item 3
  • Item 4
  • Item 4

Download Highlight here

Download

Download jquery.highlight.js.

Feedback

If you have any comments, or wish to report any bugs or unexpected behaviour, please do so using the commenting system on the project's blog page.

I can't promise to answer questions on usage (that's what this help is for!), but I'll do my best to fix bugs.

Cheers,

Dave