<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Spry Effects</title> <link href="effects.css" rel="stylesheet" type="text/css" /> <link href="../css/screen.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../../includes/SpryEffects.js"></script> <script type="text/javascript" src="effects.js"></script> </head> <body> <noscript><h1>This page requires JavaScript. Please enable JavaScript in your browser and reload this page.</h1></noscript> <div id="wrap"> <h1 id="albumName">Effects Demo <span class="return"><a href="../index.html">Back to Demos</a></span> <span class="source"><a href="source.html">View Source </a></span></h1> <div class="container" id="product_box"> <!-- NOTE: nested divs required for slide effect--> <div class="content_panel" id="content_box"></div> </div> <div id="text_pane">Click on the buttons to see the effects. Most buttons toggle the effects, so click again to reverse the effect. </div> <div class="navigation_pane" id="effectsControls"> <div class="effectsTransport_1" id="effectsTransport"><a href="#" onclick="runEffect('Fade', 'product_box', {duration: 1000, from: 100, to: 0, toggle: true}, 'Makes an HTML element appear or fade away.');" title="Fade">Fade</a></div> <div class="effectsTransport_2" id="effectsTransport"><a href="#" onclick="runEffect('Blind', 'product_box', {duration: 1000, from: '100%', to: '0%', toggle: true}, 'Simulates a window blind up/down. The contents of the affected HTML element stay in place.')" title="Blind">Blind</a></div> <div class="effectsTransport_3" id="effectsTransport"><a href="#" onclick="runEffect('Slide', 'product_box', {duration: 1000, from: '100%', to: '0%', toggle: true}, 'Simulates a window scroll. The contents of the affected HTML element are scrolled up/down.')" title="Slide">Slide</a></div> <div class="effectsTransport_4" id="effectsTransport"><a href="#" onclick="runEffect('Squish','product_box', {duration: 1000, from: '100%', to: '0%', toggle: true}, 'Moves an HTML element into or extends it from its upper left corner.');" title="Squish">Squish</a></div> <div class="effectsTransport_5" id="effectsTransport"><a href="#" onclick="runEffect('Grow', 'product_box', {duration: 1000, from: '100%', to: '0%', toggle: true}); ExampleHelpText('Shrinks or grows the specified html element.');" title="Grow">Grow</a></div> <div class="effectsTransport_6" id="effectsTransport"><a href="#" onclick="runEffect('Shake', 'product_box', {duration: 1000},'Moves the specified HTML element left and right in a rapid manner.');" title="Shake">Shake</a></div> <div class="effectsTransport_7" id="effectsTransport"><a href="#" onclick="runEffect('Highlight', 'text_pane', {duration: 1000, from: '#000000', to: '#805600', restoreColor: '#805600', toggle:true}, 'Flashes a color as the background of an HTML element.')" title="Hilite">Hilite</a></div> <div class="effectsTransport_8" id="effectsTransport"><a href="#" onclick="runEffect('FadeBlind', 'product_box', {duration: 1000, from: 100, to: 0, toggle: true}, 'Combined fade and blind effect.');" title="Fade Blind">Fade & Blind</a></div> <div class="effectsTransport_9" id="effectsTransport"><a href="#" onclick="runEffect('FadeSlide', 'product_box', {duration: 1000, from: 100, to: 0, toggle: true}, 'Combined fade and slide effect.');" title="Fade Slide">Fade & Slide</a></div> <div class="effectsTransport_10" id="effectsTransport"><a href="#" onclick="runEffect('Pulsate', 'product_box', {duration: 1000, from: 100, to: 0, toggle: true},'Pulsate effect.')" title="Pulsate">Pulsate</a></div> <div class="effectsTransport_11" id="effectsTransport"><a href="#" onclick="runEffect('Puff', 'product_box', {duration: 1000, from: 100, to: 0, toggle: true}, 'Puff effect.')" title="Puff">Puff</a></div> <div class="effectsTransport_12" id="effectsTransport"><a href="#" onclick="runEffect('DropOut', 'product_box', {duration: 1000, from: 100, to: 0, toggle: true} ,'Combined appear and slide effect.')" title="DropOut">DropOut</a></div> <div class="effectsTransport_13" id="effectsTransport"><a href="#" onclick="runEffect('Fold', 'product_box', {duration: 1000, from: 100, to: 0, toggle: true} ,'Fold effect.')" title="Fold">Fold</a></div> <div class="effectsReload_0" id="effectsReload"><a href="#" onclick="ReloadDocument()" title="Reload">Reload</a></div> </div> </div> </body> </html>