Click highlighting

This page is already the example for the effect. Click anywhere to see a red dot grow from where you clicked. The dot stays until you release the mouse. All you need to do is include clickhighlight.js and call its init() method.

<script src="clickhighlight.js"></script>
<script>clickhighlight.init();</script>

Browsers that do not support CSS transitions will not get any effect but won't break or throw errors either.

The way to customise the look and feel of the effect is to send parameters when intialising:

clickhighlight.init({
  size:        '300px', // the maximum size of the dot
  duration:    '2s',    // duration of the effect (seconds) 
  colour:      'green', // the dot colour - RGBA = transparency 
  nohighlight: 'notme'  // class of elements not highlighted
});

As you can see there is a class name you can apply to elements you don't want the highlight effect to be applied to. By default, adding a nohighlight class to an element will make sure the effect does not happen (as shown in the links on this page). By default, the highlight effect does not interfere with click events. However on IE and Opera you need to set this class as they don't support CSS pointer events like Webkit and Gecko.

The effect is driven by CSS transitions. If your browser does not support them then there will not be any effect as the script uses feature detection. If you are looking for a jQuery solution with support for older browsers, check ClickEcho.