Highlight Area With mootools

10th February 2008

Creating a simple highlight effect is quite easy when you use the JavaScript framework mootools.

The first thing to do is grab the mootools library from the site and link it in your web page. You can select different components with mootools, but if you grab the whole thing you can start to play with whatever you want. Put this line of code in the head section of your web page.

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

For this example I want the highlight to occur when the page has finished loading. So I use the window.addEvent function to add an action for the 'domready' event to the window object of the page.

  1. window.addEvent('domready', function(){
  2. alert('dom ready');
  3. }

The next step is to create the highlight. This is done by creating a Fx.Styles object and then chaining the colour change. First we change it to black, and then we use the chain command and add another colour change back to white. You can change this to any colour that you like. The duration is also set in the first section of the chain so that it immediately turns to black and then fades slowly to white. Place the following code in the head section underneath the mootools include.

  1. <script type="text/javascript">
  2. window.addEvent('domready', function(){
  3. var fx = new Fx.Styles($('test'),{duration:2000, wait:false});
  4. fx.start({
  5. 'duration':0,
  6. 'background-color':'#000'
  7. }).chain(function(){
  8. this.start({
  9. 'background-color':'#fff'})
  10. });
  11. });
  12. </script>

The final step is to create the element that will be used by the script. You can use any element that is visible on the screen (even the body) but for this example we will use a paragraph.

  1. <body>
  2. <p id="test">wibble wibble</p>
  3. </body

This effect can be used on any web page where you want to draw the users attention to something. This might be an updated section of the page, or a text area on a form.

The reason I have used the Fx.Styles object is so that it is easy to extend the functionality of the highlight. If you also wanted to change the colour of the text along with the background you only have to add in the relevant styles.

Add new comment

The content of this field is kept private and will not be shown publicly.