About:

This plugin allows you to bring spotlight on any HTML element. This plugin may be used in situations where you need to call attention to or highlight where a data value or content has changed within the interface. A particular usage would be when implementing the UI Pattern “One Second Spotlight”.

Do note that jQuery in itself has no highlight effect and the animate function does not support color animation or transition. Hence, this plugin aims at adding that functionality.

The color animation is based on jQuery Color Animations by John Resig and the color conversion functions are based on highlightFade by Blair Mitchelmore.

Requirements:

There is just the one requirement for the jSpotlight plugin and that is ofcourse jquery itself. This plugin works fine with versions of jQuery from 1.3.2 onwards to 1.4.2

Demo:

The demo can be viewed here.

Downloading jSpotlight:

The latest version of jSpotlight can be downloaded from here. The download also includes demos.

Installation:

The installation of jSpotlight is pretty straight forward. Simply include both the jQuery and jSpotlight library files as follows:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.spotlight.min.js"></script>

Default Usage:

This plugin is very simple to use, with the default options this plugin can be used in the following way:

$( '#spotlight-reciever' ).spotlight();

The result would be that the element that has to be spotlighted will have its color changed to a yellowish color, which would then fade back to the original color of the element.

Plugin Options:

jSpotlight has the following options:

  • color: A hex color code indication which color to use to highlight the element that is going to receive the spotlight.
  • mode: A string indicating whether the element with the spotlight has to be shown or hidden after the end of the transition.
  • duration: A string or number indicating how long will the transition run.
  • easing: A string indicating the easing function to be used during the transition.
  • oncomplete: A function to call once the transition is complete.

Color:

The color is given in hex code, for example, #FFFFFF or #FF0000. Default value is '#ffff99'

$( '#spotlight-reciever' ).spotlight( { color : '#FF0000' } );

Mode:

Mode can either be 'show' or 'hide'. This applies to whether the spotlighted element has to shown or hidden at the end of the transition. Default value is 'show'

$( '#spotlight-reciever' ).spotlight( { mode : 'hide' } );

Duration:

The duration is given in milliseconds. Higher value indicates slower animation, not faster one. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. Default value is 1000

$( '#spotlight-reciever' ).spotlight( { duration : 'slow' } );

Easing:

Easing specifies the easing function to use for the transition. An easing function specifies the speed at which the animation progresses at different points within the transition. The values can be 'swing', or linear. Default value is 'linear'

$( '#spotlight-reciever' ).spotlight( { easing : 'swing' } );

Oncomplete:

If supplied the oncomplete function is fired once the transition completes. The callback is not sent any arguments, but this is set to the DOM element being animated. Default value is null

$( '#spotlight-reciever' ).spotlight({ 
  oncomplete : function()
  {
    alert( 'animation complete' );
  }
});

Support:

You may post questions as comments. Please keep your questions short and concise and provide sample code if possible. I will do my best to respond to questions in no time.