source: Dev/trunk/src/client/dojox/fx/tests/test_scroll.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 8.7 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4<head>
5        <title>dojox.fx.scroll</title>
6        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true"></script>
7        <style type="text/css">
8                @import "../../../dijit/themes/tundra.css";
9                @import "../../../dijit/tests/css/dijitTests.css";
10        </style>
11        <!-- <script type="text/javascript" src="../scroll.js"></script> -->
12        <script type="text/javascript">
13                dojo.require("dojo.fx.easing");
14                dojo.require("dojox.fx.scroll");
15
16                function gotoName(name){
17                        // summary; searches for a <a name=""></a> attrib, and scrolls to it
18                        dojo.query('a[name="'+name+'"]').forEach(function(node){
19                                // first one wins
20                                var anim = dojox.fx.smoothScroll({
21                                        node: node,
22                                        win:window,
23                                        duration:300
24                                }).play();
25                                return;
26                        });
27                }
28
29                dojo.addOnLoad(function(){
30                        /*dojo.connect(dojo.byId("goToHeader0"), "onclick", function (e) {
31                                var h2s = dojo.html.iframeContentDocument(dojo.byId("embed0")).getElementsByTagName('h2');
32                                var h2 = h2s[h2s.length-1];
33                                var anm = new dojo.lfx.smoothScroll(h2,dojo.html.iframeContentWindow(dojo.byId("embed0")),null,500);
34                                anm.play();
35                        });
36                        */
37
38                        dojo.connect(dojo.byId("goToHeader"), "onclick", function (e) {
39                                var node = dojo.byId('targetHeader3');
40                                var anim0 = dojox.fx.smoothScroll({ node: node, win: window, duration:500});
41                                anim0.play();
42                        });
43
44                        dojo.connect(dojo.byId("goToHeader1"), "onclick", function(/* Event */e){
45                                var node = dojo.byId('targetHeader1');
46                                var anim0 = dojox.fx.smoothScroll({ node: node, win: window, duration:1000});
47                                anim0.play();
48                        });
49                });
50        </script>
51</head>
52<body class="tundra">
53
54        <a name="top"></a>
55        <h1 class="testTitle">dojox.fx.scroll tests</h1>
56
57        <div id="targetHeader3" style="position:absolute; left:0px; top:3000px; padding:100px;" ><h3>YOU FOUND ME!</h3>
58        <p>neat.</p>
59        </div>
60
61        <p>dojox.fx.scroll provides:</p>
62        <ul>
63           <li>dojox.fx.smoothScroll()</li>
64        </ul>
65        <p>
66        which will create and return a dojo.Animation to scroll
67        a window to a desired offset. (or a node that has overflow:auto/hidden, if you pass the domNode as the win: argument)
68        </p>
69       
70       
71        <h2><code>getScroll</code></h2>
72        <p>
73        Scroll top: <span id="scrollTop">0</span><br>
74        Scroll left: <span id="scrollLeft">0</span>
75        </p>
76
77        <table style="position:fixed;top:20px;right:20px;">
78        <tr><td>
79                <!-- <input type="button" id="goToHeader0" value="scroll only the iframe (to a node in iframe)"><br> -->
80                <input type="button" id="goToHeader" value="scroll to to far node"><br>
81                <input type="button" id="goToHeader1" value="scroll to a node in top window">
82        </td></tr>
83        </table>
84
85        <p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p>
86
87
88        <h2 id='targetHeader1'><code>getElementsByClass</code></h2>
89
90        <p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p>
91
92        <h3 id='targetHeader2'>ContainsAny</h3>
93        <input type="button" onclick="gotoName('top');" value="back to top">
94        <p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p>
95
96
97</body></html>
Note: See TracBrowser for help on using the repository browser.