Effect.Highlight
Core Effects > Effect.Highlight
This effect flashes a color as the background of an element. It is mostly used to draw attention to a part of the page that has been updated via JavaScript or AJAX, when the update would not otherwise be obvious.
Syntax
new Effect.Highlight('id_of_element', [options]);
new Effect.Highlight(element, [options]);
Options
| Option | Description |
|---|---|
| startcolor | Sets the color of first frame of the highlight. Defaults to ”#ffff99” (a light yellow). |
| endcolor | Sets the color of the last frame of the highlight. This is best set to the background color of the highlighted element. Defaults to ”#ffffff” (white). |
| restorecolor | Sets the background-color of the element after the highlight has finished. Defaults to the current background-color of the highlighted element (see Note). |
| keepBackgroundImage | Unless this is set to true, any background image on the element will not be preserved. |
Notes
If the restorecolor option is not given, Effect.Highlight tries to find out the current background color of the element, which will only work reliably across browsers if the color is given with a CSS rgb triplet, like rgb(0, 255, 0).
Be aware of the syntax: this effect strictly requires a new in front, otherwise you will get a javascript error.
If you specify the startcolor or endcolor using short-form notation, as in #ccf, the effect will fail silently. Use the long-form, as in #ccccff.
Also be aware that applying an effect (without setting a restorecolor), to an element that already has an highlight effect in progress, will cause the restorecolor to be set to the elements background-color at the time of the new effect, and not the original background-color. For example, click the example below 4-5 times in quick succession, and the paragraph will stay yellow as opposed to the original white.
Demo
This paragraph exists for demo purposes. Click the link below and it will make your day bright!
Highlight me!
Source code of this demo
<p id="highlight_demo" style="padding:10px; border:1px solid #ccc; background:#ffffff;">
This paragraph exists for demo purposes. Click the above link and it will make your day
bright!<br/>
<a href="#" onclick="new Effect.Highlight(this.parentNode, { startcolor: '#ffff99',
endcolor: '#ffffff' }); return false;">
Highlight me!
</a>
</p>
