source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/anim/scroll.html @ 5259

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/anim/scroll.html@5259
Revision 5259, 16.0 KB checked in by domlowe, 12 years ago (diff)

adding yui javascript
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <title>YUI Library Examples: Animation Utility: Animated Scrolling</title>
5    <meta http-equiv="content-type" content="text/html; charset=utf-8">
6        <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
7
8<style>
9    /*Supplemental CSS for the YUI distribution*/
10    #custom-doc { width: 95%; min-width: 950px; }
11    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
12    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
13</style>
14
15<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
16<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
17<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
18<link href="assets//anim.css" rel="stylesheet" type="text/css">
19
20</head>
21<body id="yahoo-com" class=" yui-skin-sam">
22<div id="custom-doc" class="yui-t2">
23<div id="hd">
24        <div id="ygunav">
25                <p>
26            <em>
27                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> 
28            </em>
29                </p>
30                <form action="http://search.yahoo.com/search" id="sitesearchform">
31            <input name="vs" type="hidden" value="developer.yahoo.com">
32            <input name="vs" type="hidden" value="yuiblog.com">
33                    <div id="sitesearch">
34                        <label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
35                            <input type="text" id="searchinput" name="p">
36                            <input type="submit" value="Search" id="searchsubmit" class="ygbt">
37                    </div>
38                </form>
39    </div>
40        <div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
41        <div id="pagetitle"><h1>YUI Library Examples: Animation Utility: Animated Scrolling</h1></div>
42</div>
43<div id="bd">
44
45        <div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
46
47        <div id="yui-main">
48                <div class="yui-b">
49                  <div class="yui-ge">
50                          <div class="yui-u first example" id="main">
51
52        <h2>Animation Utility: Animated Scrolling</h2>
53
54        <div id="example" class="promo">
55        <p>
56        <p>This demonstrates how to animate the <code>scroll</code> of an element.</p>
57<p>Click the arrows to scroll the content up or down.</p>
58        </p>   
59
60        <div class="module example-container ">
61                        <div class="hd exampleHd">
62                        <p class="newWindowButton yui-skin-sam">
63                <a href="scroll_clean.html" target="_blank">View example in new window.</a>
64            </p>
65                </div>          <div id="example-canvas" class="bd">
66
67               
68        <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
69       
70        <div id="demo" class="yui-module">
71    <div class="yui-hd">
72        <h4>Animation Demo</h4>
73        <span class="yui-scroll-controls">
74            <a title="scroll up" class="yui-scrollup"><em>scroll up</em></a>
75            <a title="scroll down" class="yui-scrolldown"><em>scroll down</em></a>
76        </span>
77    </div>
78    <div class="yui-bd yui-scroll">
79        <p>This an example of what you can do with the YUI Animation Utility.</p>
80        <p><em>Follow the instructions above to see the animation in action.</em></p>
81        <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
82        Waarom gebruiken we het?
83
84        Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p>
85
86    </div>
87</div>
88
89<script type="text/javascript">
90YUI({base:"../../build/", timeout: 10000}).use("anim-scroll", "anim-easing", function(Y) {
91    var node = Y.get('#demo .yui-bd');
92    var anim = new Y.Anim({
93        node: node,
94        to: {
95            scroll: function(node) {
96                return [0, node.get('scrollTop') + node.get('offsetHeight')]
97            }
98        },
99        easing: Y.Easing.easeOut
100    });
101
102    var onClick = function(e) {
103        var y = node.get('offsetHeight');
104        if (e.currentTarget.hasClass('yui-scrollup')) {
105            y = 0 - y;
106        }
107
108        anim.set('to', { scroll: [0, y + node.get('scrollTop')] });
109        anim.run();
110    };
111
112    Y.all('#demo .yui-hd a').on('click', onClick);
113});
114
115</script>
116       
117        <!--END SOURCE CODE FOR EXAMPLE =============================== -->
118       
119               
120                </div>
121        </div>                 
122        </div>
123               
124        <h3>Setting up the HTML</h3>
125<p>First we add some HTML to animate.  We'll add a bunch of arbitrary content to demonstrate the scroll effect.</p>
126<textarea name="code" class="JScript" cols="60" rows="1">
127<div id="demo" class="yui-module">
128    <div class="yui-hd">
129        <h4>Animation Demo</h4>
130        <span class="yui-scroll-controls">
131            <a title="scroll up" class="yui-scrollup"><em>scroll up</em></a>
132            <a title="scroll down" class="yui-scrolldown"><em>scroll down</em></a>
133        </span>
134    </div>
135    <div class="yui-bd yui-scroll">
136        <p>This an example of what you can do with the YUI Animation Utility.</p>
137        <p><em>Follow the instructions above to see the animation in action.</em></p>
138        <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
139        Waarom gebruiken we het?
140
141        Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p>
142
143    </div>
144</div>
145</textarea>
146
147<h3>Creating the Anim Instance</h3>
148<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate.</p>
149
150<textarea name="code" class="JScript" cols="60" rows="1">
151var node = Y.get('#demo');
152
153var anim = new Y.Anim({
154    node: node,
155    duration: 1.5,
156    easing: Y.Easing.easeOut
157});
158</textarea>
159
160<h3>Changing Attributes</h3>
161<p>Depending on which control is clicked, we may be scrolling up or down, so an event handler will update the <code>to</code> attribute's <code>scroll</code> behavior before calling <code>run</code>.</p>
162<textarea name="code" class="JScript" cols="60" rows="1">
163var onClick = function(e) {
164    var y = node.get('offsetHeight');
165    if (e.currentTarget.hasClass('yui-scrollup')) {
166        y = 0 - y;
167    }
168
169    anim.set('to', { scroll: [0, y + node.get('scrollTop')] });
170    anim.run();
171};
172</textarea>
173
174<h3>Running the Animation</h3>
175<p>Finally we add an event handler to run the animation. Both of our controls use the same handler, so we can use the <code>Y.all</code> method to assign the handler to both.</p>
176<textarea name="code" class="JScript" cols="60" rows="1">
177Y.all('#demo .yui-hd a').on('click', onClick);
178</textarea>
179
180<h3>Full Script Source</h3>
181<textarea name="code" class="JScript" cols="60" rows="1">
182YUI().use('anim', function(Y) {
183    var node = Y.get('#demo .yui-bd');
184    var anim = new Y.Anim({
185        node: node,
186        to: {
187            scroll: function(node) {
188                return [0, node.get('scrollTop') + node.get('offsetHeight')]
189            }
190        },
191        easing: Y.Easing.easeOut
192    });
193
194    var onClick = function(e) {
195        var y = node.get('offsetHeight');
196        if (e.currentTarget.hasClass('yui-scrollup')) {
197            y = 0 - y;
198        }
199
200        anim.set('to', { scroll: [0, y + node.get('scrollTop')] });
201        anim.run();
202    };
203
204    Y.all('#demo .yui-hd a').on('click', onClick);
205});
206</textarea>
207
208                                </div>
209                                <div class="yui-u sidebar">
210                                       
211                               
212                                        <div id="examples" class="mod box4">
213                        <div class="hd">
214                                                <h4>
215    Animation Utility Examples:</h4>
216                        </div>
217                                                <div class="bd">
218                                                        <ul>
219                                                                <li><a href='../anim/basic.html'>Basic Animation</a></li><li><a href='../anim/easing.html'>Animation Easing</a></li><li><a href='../anim/colors.html'>Animating Colors</a></li><li><a href='../anim/alt-iterations.html'>Alternating Iterations</a></li><li><a href='../anim/anim-xy.html'>Animating XY Position</a></li><li><a href='../anim/curve.html'>Animating Along a Curved Path</a></li><li class='selected'><a href='../anim/scroll.html'>Animated Scrolling</a></li><li><a href='../anim/reverse.html'>Reversing an Animation</a></li><li><a href='../anim/end-event.html'>Using the End Event</a></li><li><a href='../anim/anim-chaining.html'>Chaining Animations Using the <code>end</code> Event</a></li>                                                 </ul>
220                                                </div>
221                                        </div>
222                                       
223                                        <div class="mod box4">
224                        <div class="hd">
225                                                <h4>More Animation Utility Resources:</h4>
226                        </div>
227                        <div class="bd">
228                                                <ul>
229                                                        <!-- <li><a href="http://developer.yahoo.com/yui/anim/">User's Guide</a> (external)</li> -->
230                                                <li><a href="../../api/module_anim.html">API Documentation</a></li>
231</ul>
232                        </div>
233                                        </div>
234                          </div>
235                </div>
236               
237                </div>
238        </div>
239
240
241<div class="yui-b toc3" id="tocWrapper">
242<!-- TABLE OF CONTENTS -->
243<div id="toc">
244       
245<ul>
246<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Base - Functional Examples" href="../../examples/base/index.html">Base</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
247</div>
248</div>
249        </div><!--closes bd-->
250
251        <div id="ft">
252        <p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
253        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
254            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
255            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
256            <a href="http://careers.yahoo.com/">Job Openings</a></p>
257        </div>
258</div>
259<script src="../../assets/dpSyntaxHighlighter.js"></script>
260<script language="javascript"> 
261dp.SyntaxHighlighter.HighlightAll('code'); 
262</script>
263</body>
264</html>
265<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:30 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.