Matt Kirman

jQuery Plugin: rf.Highlight

[Update] I’ve recently changed my JavaScript framework to MooTools, hence the rf.Highlight demo isn’t working properly. The plugin itself hasn’t actually changed so should still work perfectly fine on your own site.

I needed a simple implementation of the famous Yellow Fade Technique (YFT) for a new product that we are developing at Redflex. We struggled to find a YFT jQuery plugin that was simple to use, had a small file size and supported chaining. I give you rf.Highlight.

To highlight an element simply call:

$('#element').highlight();

And, of course, it is also customisable (default values are shown):

$('#element').highlight({
    color: [255, 255, 187],  // rgb color of the fade (yep, it doesn't have to be yellow!)
    duration: 400,  // duration of the fade in milliseconds
    quality: 20,  // quality of the fade (the higher the number the better)
    wait: 3000  // initial pause before the element starts to fade
});

Because it relies on RGBa browser support for the fade it is only compatible with Firefox 3, Safari 3.2+ and Google Chrome. On unsupported browsers you will get the yellow highlight to transparency but without the fancy fading transition.

Demo

Click me!
$('#highlight_demo').click(function(e){
    $(this).highlight();
});

Download rf.Highlight

Comments