Spry

Attach a Highlight effect

The Highlight effect changes the background color of a target element.

You can attach the Highlight effect to any HTML element except applet, body, frame, frameset, or noframes.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document: 
    <head>
. . .
<script  src="../includes/SpryEffects.js" type="text/javascript" ></script>
</head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.

    The SpryEffects.js file is in the includes folder of the Spry folder that you downloaded from Adobe Labs. See Prepare your files.

  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect. 
    <div class="demoDiv"  id="highlight1"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
  3. To create the effect, add a JavaScript event to trigger the effect, and a script tag that creates the effect object. For example, if you want the user to click on a sentence that causes another paragraph to highlight, you might add the following event and script tag: 
    <p><a onclick="highlight1.start(); return false;" href="#">Click here to highlight the below paragraph.</a></p>
. . .
<script type="text/javascript">
var highlight1 = new Spry.Effect.Highlight('highlight1', {duration: 2000, from:'#CCCCCC', to:'#FFCC33', toggle: true});
</script>
    Note: It’s important that you add the script tag after the code for the target element. Otherwise the page will return a JavaScript error when you try to trigger the effect.

    The first argument of the Spry.Effect.Highlight method is always the target element’s ID ('highlight1' in the preceding example).

    The complete code looks as follows:

    <head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="highlight1.start(); return false;" href="#">Click here to highlight the following paragraph.</a></p>
<div id="highlight1"> 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
<script type="text/javascript">
var highlight1 = new Spry.Effect.Highlight('highlight1', {duration: 2000, from:'#CCCCCC', to:'#FFCC33', toggle: true});
</script>
</body>

Highlight effect options

The following table lists the available options for the Highlight effect.

Option

Description

duration

Duration of the effect in milliseconds. The default value is 1000.

from

Start color value in RGB color format (#RGB). This value sets the color of the first frame of the highlight. The default is the current background color of the target element.

to

End color value in RGB color format (#RGB). This value sets the color of the last frame of the highlight.

restoreColor

Color value in RGB color format (#RRGGBB or #RGB) that’s restored at the end of the effect.

toggle

Lets you create a toggle effect. The default value is false. If the value is set to true, the restoreColor option is ignored.

transition

Determines the type of transition. The default is Spry.sinusoidalTransition.

fps

Determines the number of frames per second (fps) of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect = new Spry.Effect.Highlight('targetID', {duration:1000, from:"#00ff00", to:"#0000ff"});

effect.start();