root / trunk / tests / lfx / test_scroll.html

Revision 6506, 4.3 kB (checked in by liucougar, 2 years ago)

added offset parameter to smoothscroll

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3<html><head>
4<title>Dojo: Test of dojo.html</title>
5<script type="text/javascript"> djConfig = { isDebug: true }; </script>
6<script type="text/javascript" src="../../dojo.js"></script>
7<script type="text/javascript">
8
9dojo.require("dojo.lfx.scroll");
10dojo.require("dojo.event.*");
11</script>
12<style type="text/css"> h2, h3 { font-size: 1em; margin-top: 2.5em; } h3 { color: black; font-weight: normal; font-style: italic; } </style>
13</head>
14<body>
15
16<!---------------------------------------------------------------------------->
17<h2><code>getScroll</code></h2>
18
19<p>Scroll top: <span id="scrollTop">0</span><br>Scroll left: <span id="scrollLeft">0</span></p>
20<table style="position:fixed;top:20px;right:20px;">
21<tr><td><input type="button" id="goToHeader0" value="scroll only the iframe (to a node in iframe)"><br>
22        <input type="button" id="goToHeader" value="scroll only the top window (to a node in iframe)"><br>
23        <input type="button" id="goToHeader1" value="scroll to a node in top window chained with (un)highlight"></td></tr></table>
24
25<script type="text/javascript">
26dojo.event.connect(dojo.byId("goToHeader0"), "onclick", function (e) {
27        var h2s = dojo.html.iframeContentDocument(dojo.byId("embed0")).getElementsByTagName('h2');
28        var h2 = h2s[h2s.length-1];
29        var anm = new dojo.lfx.smoothScroll(h2,dojo.html.iframeContentWindow(dojo.byId("embed0")),null,500);
30        anm.play();
31});
32dojo.event.connect(dojo.byId("goToHeader"), "onclick", function (e) {
33        var h2s = dojo.html.iframeContentDocument(dojo.byId("embed")).getElementsByTagName('h2');
34        var h2 = h2s[h2s.length-1];
35        var anm = new dojo.lfx.smoothScroll(h2,window,null,500);
36        anm.play();
37});
38dojo.require("dojo.lfx.html");
39dojo.event.connect(dojo.byId("goToHeader1"), "onclick", function (e) {
40        var node = dojo.byId('targetHeader1');
41        var anm0 = new dojo.lfx.smoothScroll(node,window,null,500);
42        var anm1 = new dojo.lfx.html.unhighlight(node, '#FFFFA0', 500, dojo.lfx.easeOut);
43        var anm2 = new dojo.lfx.html.highlight(node, '#FFFFA0', 500, dojo.lfx.easeIn);
44        var anm = dojo.lfx.chain(anm0, anm1, anm2);
45        anm.play();
46});
47</script>
48
49
50<iframe id="embed0" src="../test_html_content.html" width="50%" height="200px"></iframe>
51
52<!---------------------------------------------------------------------------->
53<h2><code>getScroll().offset</code></h2>
54
55<p>Scroll offset x: <span id="scrollOffsetX">0</span><br>Scroll offset y: <span id="scrollOffsetY">0</span></p>
56<p><input type="button" id="updateScrollOffset" value="Update Scroll Values"></p>
57
58
59<!---------------------------------------------------------------------------->
60<h2><code>getViewport</code></h2>
61
62<p>
63        Viewport width: <span id="viewportWidth">0</span><br>
64        Viewport height: <span id="viewportHeight">0</span><br>
65        Viewport size: <span id="viewportSize">0</span>
66</p>
67<p><input type="button" id="updateViewport" value="Update Size Values"></p>
68
69
70
71<!---------------------------------------------------------------------------->
72<h2><code>getParentByType</code></h2>
73
74<p>This <b id="bold">is <u>some <i id="italic">crazy <span style="color:red;" id="redChild">text</span></i></u></b></p>
75
76
77<iframe id="embed" src="../test_html_content.html" width="50%" height="1200px"></iframe>
78
79<!---------------------------------------------------------------------------->
80<h2 id='targetHeader1'><code>getElementsByClass</code></h2>
81
82<div style="font-weight: bold; color: red;">
83
84<h3>default (ContainsAll)</h3>
85<p class="foo1 bar1">this should be green</p>
86<p class="foo1">this should be red</p>
87<p class="bar1">this should be red</p>
88
89<h3>ContainsAll</h3>
90<p class="foo2 bar2">this should be green</p>
91<p class="foo2">this should be green</p>
92<p class="bar2">this should be red</p>
93
94
95<h3>ContainsOnly</h3>
96<p class="foo3 bar3">this should be green</p>
97<p class="foo3 bar3 baz3">this should be red</p>
98<p class="foo3">this should be red</p>
99
100
101<h3>ContainsOnly</h3>
102<p class="foo4">this should be green</p>
103<p class="foo4 bar4">this should be red</p>
104<p class="bar4">this should be red</p>
105
106
107<h3 id='targetHeader2'>ContainsAny</h3>
108<p class="foo5">this should be green</p>
109<p class="foo0 bar5">this should be green</p>
110<p class="bar0 foo0">this should be red</p>
111
112</body></html>
Note: See TracBrowser for help on using the browser.