Highlight Elements in Script.aculo.us, jQuery and MooTools

Posted on March 29, 2009, under JavaScript, jQuery, MooTools 

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]

Comment via Facebook

comments

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.