This is a tutorial that will teach you how to implement the Highlight Effect in JavaScript using the famous libraries Script.aculo.us, JQuery & MooTools.

In Script.aculo.us, Effect.Highlight flashes the color as the background of the element. It is mostly used to draw attention to the part of the page where the effect is applied (could be a completed AJAX Call).

To initialize the effect we have to set the ID of the element that will be highlighted (for instance a DIV) and the right options (startcolor, endcolor, restorecolor, keepBackgroundImage).

Implementation example:

1) Include the required JavaScript files:

<script type="text/javascript" src="/js/latest-prototype.js"></script>
<script type="text/javascript" src="/js/latest-scriptaculous.js"></script>

2) The following code should be included in the BODY part of your page:

<div style="padding: 5px; border: 1px solid #cdcdcd;" id="text_area">
<a href="#" onclick="new Effect.Highlight(this.parentNode, { startcolor: '#ffff99',
endcolor: '#ffffff' }); return false;">Highlight Me!</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>

Element Method: highlight from MooTools is a shortcut method for tweening the background color. It immediately transitions an element’s background color to a specified highlight color then back to its set background color.

If no background color is set to the element, or the background is set to transparent, the default end value would be white.

Implementation example:

1) Include the MooTools Library & initialize the script:

<script type="text/javascript" src="/js/mootools-yui-compressed.js"></script>

<script type="text/javascript">

</script>

2) Include the following code in the BODY part of the page:

<div style="padding: 5px; border: 1px solid #cdcdcd;" id="text_area">
<a href="#" id="highlight_link" onclick="return false;">Highlight Me!</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>

In JQuery, we can use the highlightFade plugin to fade from one color to any other. The speed of the fading process can be specified as well as the start and end colors.

Implementation example:

1) Include the JQuery library and the highlightFade Plugin:

<script type="text/javascript" src="/js/latest-jquery.js"></script>
<script type="text/javascript" src="/js/jquery.highlightFade.js"></script>

2) Initialization:

<script type="text/javascript">
<!--
$(document).ready(function() {
$('#highlight_link').click(function(){
$('#text_area').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
});
});
-->
</script>

3) Include this code in the BODY part of your page:

<div style="padding: 5px; border: 1px solid #cdcdcd;" id="text_area">
<a href="#" id="highlight_link" onclick="return false;">Highlight Me!</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit  Duis volutpat</div>

[Read More | View Demo]

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!