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.
new Effect.Highlight('id_of_element', [options]);
new Effect.Highlight(element, [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). |
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.
This paragraph exists for demo purposes. Click the link below and it will make your day bright!
Highlight me!
<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: '#fffffff' }); return false;">
Highlight me!
</a>
</p>