jQuery Spotlight Plugin: jSpotlight

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.

Ovais is a storage architect with keen focus on reliability, efficiency and performance of OLTP databases, more specifically MySQL. He currently works at Uber on ensuring storage reliability and scalability. Previously, he helped different web properties scale their MySQL infrastructure. He also worked at Percona as a Senior MySQL consultant and at a few other startups in various capacities.

  • cadet018

    An only demo will be highly appreciated so that we know what we are downloading.

  • cadet018

    An only demo will be highly appreciated so that we know what we are downloading.

  • The download contains a demo page as well,. but I will have the demo page up on the site too, soon,.

  • The download contains a demo page as well,. but I will have the demo page up on the site too, soon,.

  • Majid Khan

    Hi Ovais,
    It is bad practice if you keep a copy of the download on your site.. most porbably you wont be updating it so people will end up with old versions.. you should link to the original download page on the blog.. nice one by the way. It would have been nice if you could mention a few practical examples of where I can use this plugin though…

  • Majid Khan

    Hi Ovais,
    It is bad practice if you keep a copy of the download on your site.. most porbably you wont be updating it so people will end up with old versions.. you should link to the original download page on the blog.. nice one by the way. It would have been nice if you could mention a few practical examples of where I can use this plugin though…

  • Hi Majid,
    I plan on keeping all the downloads on my site and I plan on providing updates to any plugin that I develop, if it need any. I did think about hosting it on github or sourceforge though. This plugin may be used in situations where you need to call attention to where a data value or content has changed within the interface. I will try to give more examples in this post, currently I am working on a file-manager., so I will update this post as soon as I am done with that.

  • Hi Majid,
    I plan on keeping all the downloads on my site and I plan on providing updates to any plugin that I develop, if it need any. I did think about hosting it on github or sourceforge though. This plugin may be used in situations where you need to call attention to where a data value or content has changed within the interface. I will try to give more examples in this post, currently I am working on a file-manager., so I will update this post as soon as I am done with that.

  • Pingback: Tweets that mention jQuery Spotlight Plugin: jSpotlight — tech@ovais.tariq -- Topsy.com()

  • Pingback: “Spotlight” HTML elements – jQuery spotlight plugin | Webification()

  • Pingback: jQuery Spotlight Plugin: jSpotlight | ovais.tariq » KHMER855.COM()

  • Pingback: jQuery Spotlight Plugin: jSpotlight | ovais.tariq » WB Tips()

  • Pingback: Bluehost web hosting – a big no no for websites with decent traffic! | ovais.tariq()

  • Pingback: Pay First Signup Later | Amember Clickbank Payment Plugin to Increase Your Conversions()

  • Retro Jordan

    Following your remarkable post, I find out it is of the unique remarks and absolute ideas.Think that I will certainly get which I want through your post.Greatest wishes to you!

  • Pingback: The Golden Age()