The script.aculo.us library is a cross-browser library that aims to improving the user interface of a website. In this article, we will demonstrate the Highlight effect. This effect is used for making the element smoothly highlight with the customizable colors. We can adjust the duration of the effect as well.
Syntax:
Effect.Highlight( 'id_of_element', [options] )
or
Effect.Highlight( element, [options] )
Options: It has four objects as mentioned above and described below:
- startcolor: It is used to set the color of the first frame of the effect. The default value is ”#ffff99”.
- endcolor: It is used to set the color of the last frame of the effect. The default value is ”#ffffff”.
- restorecolor: It is used to set the background color of the element after the effect has finished. The default value is the current background-color of the element.
- keepBackgroundImage: It is used to set whether any background image on the element will be preserved or not.
To demonstrate the use of this function, we have written a small piece of code. In which we have written a small JavaScript function named ShowEffect method which uses the Highlight method of this library. The examples below demonstrate the method.
Example 1:
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js"> </script> <script type="text/javascript"> function ShowEffect(element) { // Using the Highlight effect with // the base options of the // Effect class new Effect.Highlight(element, { duration: 1, from: 0, to: 1.0 }); } </script> </head> <body> <h1 style="color: green;"> neveropen </h1> <h2>script.aculo.us Highlight Effect</h2> <button onclick="ShowEffect('hideshow')"> Click me to Highlight the line! </button> <br /> <br /> <div id="hideshow"> LINE TO HIGHLIGHT </div> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js"> </script> <script type="text/javascript"> function ShowEffect(element) { // Using the Highlight effect with // the startcolor and endcolor // options of the effect new Effect.Highlight(element, { startcolor: '#ff0000', endcolor: '#ffff00' }); } </script> </head> <body> <h1 style="color: green;"> neveropen </h1> <h2>script.aculo.us Highlight Effect</h2> <button onclick="ShowEffect('neveropen_1')"> Click me to Highlight the line! </button> <br /> <br /> <div id="neveropen_1"> neveropen </div> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
