← Back to branch summary

~ubuntu-branches/ubuntu/utopic/jquery-goodies/utopic-proposed

« back to all changes in this revision

Viewing changes to mousewheel/test/index.html

  • Committer: Bazaar Package Importer
  • Author(s): Marcelo Jorge Vieira (metal)
  • Date: 2011-04-15 17:28:14 UTC
  • Revision ID: james.westby@ubuntu.com-20110415172814-kvs9sfnycn3o3hk6
Tags: upstream-3
Import upstream version 3

Show diffs side-by-side

added added

removed removed

Lines of Context:
mousewheel/test/index.html
 
1
<!doctype html>
 
2
<html>
 
3
        <head>
 
4
                <title>Testing mousewheel plugin</title>
 
5
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
 
6
                <script type="text/javascript" src="../jquery.mousewheel.js"></script>
 
7
                
 
8
                <style>
 
9
                        #test1 {
 
10
                                background-color: #000;
 
11
                                width: 100px;
 
12
                                height: 100px;
 
13
                                color: #fff;
 
14
                                float: left;
 
15
                        }
 
16
                        
 
17
                        #test2 {
 
18
                                background-color: #333;
 
19
                                width: 100px;
 
20
                                height: 100px;
 
21
                                color: #fff;
 
22
                                float: left;
 
23
                        }
 
24
                        
 
25
                        #test3 {
 
26
                                background-color: #666;
 
27
                                width: 100px;
 
28
                                height: 100px;
 
29
                                color: #fff;
 
30
                                float: left;
 
31
                        }
 
32
                        
 
33
                        #test4 {
 
34
                                background-color: #000;
 
35
                                width: 100px;
 
36
                                height: 100px;
 
37
                                color: #fff;
 
38
                                float: left;
 
39
                        }
 
40
                        
 
41
                        #test5 {
 
42
                                background-color: #333;
 
43
                                padding: 5px;
 
44
                                width: 400px;
 
45
                                height: 400px;
 
46
                                color: #fff;
 
47
                                float: left;
 
48
                        }
 
49
                        
 
50
                        #test6 {
 
51
                                background-color: #666;
 
52
                                padding: 5px;
 
53
                                width: 250px;
 
54
                                height: 250px;
 
55
                                color: #fff;
 
56
                                float: left;
 
57
                        }
 
58
 
 
59
                        #test7 {
 
60
                                background-color: #000;
 
61
                                padding: 5px;
 
62
                                width: 100px;
 
63
                                height: 100px;
 
64
                                color: #fff;
 
65
                                float: left;
 
66
                        }
 
67
                        
 
68
                        #forceScroll {
 
69
                                clear: both;
 
70
                                height: 1000px;
 
71
                        }
 
72
                        
 
73
                        #logger {
 
74
                                position: absolute;
 
75
                                top: 395px;
 
76
                                left: 12px;
 
77
                                width: 380px;
 
78
                                height: 290px;
 
79
                                overflow: auto;
 
80
                        }
 
81
                </style>
 
82
                <script type="text/javascript">
 
83
                        $(function() {
 
84
                                $('#userAgent').html(navigator.userAgent);
 
85
                                
 
86
                                
 
87
                                $('#test1')
 
88
                                        .mousewheel(function(event, delta) {
 
89
                                                if (delta > 0)
 
90
                                                        log('#test1: up ('+delta+')');
 
91
                                                else if (delta < 0)
 
92
                                                        log('#test1: down ('+delta+')');
 
93
                                                
 
94
                                                log('pageX: ' + event.pageX + ' pageY: ' + event.pageY );
 
95
                                        });
 
96
                                
 
97
                                $('#test2')
 
98
                                        .mousewheel(function(event, delta) {
 
99
                                                if (delta > 0)
 
100
                                                        log('#test2: up ('+delta+')');
 
101
                                                else if (delta < 0)
 
102
                                                        log('#test2: down ('+delta+')');
 
103
                                                return false; // prevent default
 
104
                                        });
 
105
                                
 
106
                                $('#test3')
 
107
                                        .hover(function() { log('#test3: mouseover'); }, function() { log('#test3: mouseout'); })
 
108
                                        .mousewheel(function(event, delta) {
 
109
                                                log('#test3: I should not have been logged');
 
110
                                        })
 
111
                                        .unmousewheel();
 
112
                                
 
113
                                var testRemoval = function(event, delta) {
 
114
                                        log('#test4: I should not have been logged');
 
115
                                };
 
116
                                
 
117
                                $('#test4')
 
118
                                        .mousewheel(function(event, delta) {
 
119
                                                if (delta > 0)
 
120
                                                        log('#test4: up ('+delta+')');
 
121
                                                else if (delta < 0)
 
122
                                                        log('#test4: down ('+delta+')');
 
123
                                                return false;
 
124
                                        })
 
125
                                        .mousewheel(testRemoval)
 
126
                                        .mousewheel(function(event, delta) {
 
127
                                                if (delta > 0)
 
128
                                                        log('#test4: up ('+delta+') from 2nd handler');
 
129
                                                else if (delta < 0)
 
130
                                                        log('#test4: down ('+delta+') from 2nd handler');
 
131
                                                return false;
 
132
                                        })
 
133
                                        .unmousewheel(testRemoval);
 
134
                                
 
135
                                $('#test5')
 
136
                                        .mousewheel(function(event, delta) {
 
137
                                                if (delta > 0)
 
138
                                                        log('#test5: up ('+delta+')');
 
139
                                                else if (delta < 0)
 
140
                                                        log('#test5: down ('+delta+')');
 
141
                                                
 
142
                                                event.stopPropagation();
 
143
                                                event.preventDefault();
 
144
                                        });
 
145
                                
 
146
                                $('#test6')
 
147
                                        .mousewheel(function(event, delta) {
 
148
                                                if (delta > 0)
 
149
                                                        log('#test6: up ('+delta+')');
 
150
                                                else if (delta < 0)
 
151
                                                        log('#test6: down ('+delta+')');
 
152
                                                
 
153
                                                event.stopPropagation();
 
154
                                                event.preventDefault();
 
155
                                        });
 
156
 
 
157
                                $('#test7')
 
158
                                        .mousewheel(function(event, delta) {
 
159
                                                if (delta > 0)
 
160
                                                        log('#test7: up ('+delta+')');
 
161
                                                else if (delta < 0)
 
162
                                                        log('#test7 down ('+delta+')');
 
163
                                                
 
164
                                                event.preventDefault();
 
165
                                        });
 
166
                                
 
167
                                function log(msg) {
 
168
                                        $('#logger').append(msg+'<br>').scrollTop(999999);
 
169
                                };
 
170
                        });
 
171
                </script>
 
172
        </head>
 
173
        <body>
 
174
                <h1 id="banner">jQuery mousewheel.js - Test</h1>
 
175
                <h2 id="userAgent"></h2>
 
176
                
 
177
                <ul>
 
178
                        <li><strong>Test1</strong> is just using the plain on mousewheel() with a function passed in and does not prevent default. (Also logs the value of pageX and pageY event properties.)</li>
 
179
                        <li><strong>Test2</strong> should prevent the default action.</li>
 
180
                        <li><strong>Test3</strong> should only log a mouseover and mouseout event. Testing unmousewheel().</li>
 
181
                        <li><strong>Test4</strong> has two handlers.</li>
 
182
                        <li><strong>Test5</strong> is like Test2 but has children. The children should not scroll until mousing over them.</li>
 
183
                        <li><strong>Test6</strong> is like Test5 but should not scroll children or parents.</li>
 
184
                        <li><strong>Test7</strong> is like Test6 but has no children. It will propagate the event and scroll test 6 as well.</li>
 
185
                </ul>
 
186
                
 
187
                
 
188
                <div id="test1"><p>Test1</p></div>
 
189
                <div id="test2"><p>Test2</p></div>
 
190
                <div id="test3"><p>Test3</p></div>
 
191
                <div id="test4"><p>Test4</p></div>
 
192
                <div id="test5">
 
193
                        <p>Test5</p>
 
194
                        <div id="test6">
 
195
                                <p>Test6</p>
 
196
                                <div id="test7"><p>Test7</p></div>
 
197
                        </div>
 
198
                </div>
 
199
                
 
200
                <div id="logger"></div>
 
201
                
 
202
                <div id="forceScroll"></div>
 
203
        </body>
 
204
</html>