Highlight Area With mootools

10th February 2008 - 4 minutes read time

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.

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

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.

<script type="text/javascript">
window.addEvent('domready', function(){
  var fx = new Fx.Styles($('test'),{duration:2000, wait:false});
  fx.start({
    'duration':0,
    'background-color':'#000'
  }).chain(function(){
    this.start({
    'background-color':'#fff'})
  });
});
</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.

<body>
<p id="test">wibble wibble</p>
</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.

JavaScript

Add new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
4 + 3 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Related Content

Creating A Mouse "Looking" Script With JavaScript

24th November 2024

I've seen lots of "our team" pages over the years, but one of the ones that stood out to me the most were those that had an interactive element to them. For me, it adds a bit of personality to the page and makes it feel more alive than a bunch of silhouettes of the directors.

Read more

Creating A Simple Pie Chart With CSS

25th December 2022

A pie chart is a great way of showing the relationship between numbers, especially when showing percentages. Drawing a pie chart from scratch takes a fair amount of maths to get working and so people usually go for third party charting libraries in order to add charts to the page.

Read more

Getting Up And Running With Nightwatch.js

24th July 2022

Nightwatch.js is an end to end testing framework, written in JavaScript. It can be used to test websites and applications and uses the W3C WebDriver API to drive modern browsers to perform the tests.

In this article I will look at setting up Nightwatch.js in a project and getting started with writing tests.

Read more