Spry User Guide - Support - Adobe
Spry User Guide - Support - Adobe
Spry User Guide - Support - Adobe
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
Before you begin<br />
Prepare your files<br />
Before you attach <strong>Spry</strong> effects to elements on your web pages, download and link the appropriate file.<br />
1 Locate the <strong>Spry</strong> ZIP file on the <strong>Adobe</strong> Labs website.<br />
2 Download and unzip the <strong>Spry</strong> ZIP file to your hard drive.<br />
3 Open the unzipped <strong>Spry</strong> folder and locate the includes folder. This folder contains the file necessary for attaching<br />
<strong>Spry</strong> effects.<br />
4 Add the <strong>Spry</strong>Effects.js file to your website by doing one of the following:<br />
• Copy the includes folder and paste or drag a copy of it to the root directory of your web site. This gives you all of<br />
the files necessary for creating <strong>Spry</strong> effects as well as <strong>Spry</strong> XML data sets.<br />
• To create a folder on your website (for example, a folder called <strong>Spry</strong>Assets), open the includes folder, and copy the<br />
<strong>Spry</strong>Effects.js file to the new folder.<br />
Note: If you drag the original includes folder or individual files out of the unzipped <strong>Spry</strong> folder, the demos in the <strong>Spry</strong><br />
folder won’t work properly. Copy and paste to your website instead of dragging.<br />
5 When the <strong>Spry</strong>Effects.js file is part of your website, you are ready to link it and add <strong>Spry</strong> effects to your pages. For<br />
specific instructions on adding a particular effect to a page, see the individual effects sections.<br />
Attach Effects<br />
Attach a Highlight effect<br />
The Highlight effect changes the background color of a target element.<br />
You can attach the Highlight effect to any HTML element except applet, body, frame, frameset, or noframes.<br />
1 To link the <strong>Spry</strong>Effects.js file on your web page, add the following code to the head of your document:<br />
<br />
. . .<br />
<br />
<br />
Note: The exact file path differs differ, depending on where you store the <strong>Spry</strong>Effects.js file.<br />
The <strong>Spry</strong>Effects.js file is in the includes folder of the <strong>Spry</strong> folder that you downloaded from <strong>Adobe</strong> Labs. See “Prepare<br />
your files” on page 142.<br />
2 Make sure your target element has a unique ID. The target element is the element that changes when the user<br />
interacts with the page to cause the effect.<br />
Lorem ipsum dolor sit amet, consetetur sadipscing<br />
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed<br />
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br />
3 To create the effect, add a JavaScript event that causes the effect when the user interacts with the page. For<br />
example, if you want the user to click on a sentence that causes another paragraph to highlight, you might add the<br />
following event to the sentence’s p tag:<br />
SPRY<br />
<strong>User</strong> <strong>Guide</strong><br />
142