-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathVsWatcher_fixed.html
129 lines (109 loc) · 17 KB
/
VsWatcher_fixed.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">
<html>
<head>
<title>VisibilityWatcher demo #1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/asdui1.4b.css" type="text/css" media="all" />
<style>
body { font-family: Arial, Helvetica; background-color: #C0C0C0; padding-top:60px; }
p {}
div#header5status { position:fixed;top:2px; left:2px; background-color:#F0F0F0; border:2px solid black; }
div#header5status2 { position:fixed;top:32px; left:2px; background-color:#F0F0F0; border:2px solid black; }
div#headerstatus { position:fixed;top:62px; left:2px; background-color:#F0F0F0; border:2px solid black; }
div#header5status2.visible,
div#header5status.visible { background-color:#80FF80; }
.explanation { background-color: #FFFFFF; border: 2px dashed black; }
.fixbar{width:600px;height:100px;background:#ddd;border:1px solid #f00;margin:0 auto}
.fixed{position:fixed;top:0;left:50%;margin-left:-301px}
</style>
<script type="text/javascript" src="js/jquery1.91.min.js"></script>
<script src="js/asdui.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
$.fn.isOnScreen = function(x, y){
if(x == null || typeof x == 'undefined') x = 1;
if(y == null || typeof y == 'undefined') y = 1;
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var height = this.outerHeight();
var width = this.outerWidth();
if(!width || !height){
return false;
}
var bounds = this.offset();
bounds.right = bounds.left + width;
bounds.bottom = bounds.top + height;
var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
if(!visible){
return false;
}
var deltas = {
top : Math.min( 1, ( bounds.bottom - viewport.top ) / height),
bottom : Math.min(1, ( viewport.bottom - bounds.top ) / height),
left : Math.min(1, ( bounds.right - viewport.left ) / width),
right : Math.min(1, ( viewport.right - bounds.left ) / width)
};
return (deltas.left * deltas.right) >= x && (deltas.top * deltas.bottom) >= y;
};
})(jQuery);
$(function(){
new ZUI.VsWatcher('#first',{
delta_px:50,
onLeft: function(){
$('#gotop').addClass('topshow');
$('#fixbar').addClass('fixed');
},
onEnter: function(){
$('#gotop').removeClass('topshow');
$('#fixbar').removeClass('fixed');
}
});
$('#gotop').on('click',function(){
$("html").animate({ scrollTop: 0 }, 400);
});
$(window).on('scroll',function(){
console.log($('#ttt').isOnScreen());
});
});
</script>
</head>
<body>
<h1 id="first">VisibilityWatcher demo #1</h1>
<div class="fixbar" id="fixbar"></div>
<p class="explanation">
Here's visibility detection demo using both event and polling methods.<br/>
When the paragraph header #5 is scrolled into screen, its status will turn green.<br/>
Multiple elements detection is also done on each paragraph header.
</p>
<h2>My little text #1</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Sed non risus.<br/> Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.<br/> Cras elementum ultrices diam.<br/> Maecenas ligula massa, varius a, semper congue, euismod non, mi.<br/> Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.<br/> Duis semper.<br/> Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.<br/> Pellentesque congue.<br/> Ut in risus volutpat libero pharetra tempor.<br/> Cras vestibulum bibendum augue.<br/> Praesent egestas leo in pede.<br/> Praesent blandit odio eu enim.<br/> Pellentesque sed dui ut augue blandit sodales.<br/> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.<br/> Mauris ac mauris sed pede pellentesque fermentum.<br/> Maecenas adipiscing ante non diam sodales hendrerit.<br/> Ut velit mauris, egestas sed, gravida nec, ornare ut, mi.<br/> Aenean ut orci vel massa suscipit pulvinar.<br/> Nulla sollicitudin.<br/> Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula.<br/> Pellentesque rhoncus nunc et augue.<br/> Integer id felis.<br/> Curabitur aliquet pellentesque diam.<br/> Integer quis metus vitae elit lobortis egestas.<br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Morbi vel erat non mauris convallis vehicula.<br/> Nulla et sapien.<br/> Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam.<br/> Mauris ullamcorper felis vitae erat.<br/> Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.<br/> Aliquam convallis sollicitudin purus.<br/> Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus.<br/> Fusce vulputate sem at sapien.<br/> Vivamus leo.<br/> Aliquam euismod libero eu enim.<br/> Nulla nec felis sed leo placerat imperdiet.<br/> Aenean suscipit nulla in justo.<br/> Suspendisse cursus rutrum augue.<br/> Nulla tincidunt tincidunt mi.<br/> Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus.<br/> Curabitur eu amet.<br/>
</p>
<h2>My little text #2</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Sed non risus.<br/> Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.<br/> Cras elementum ultrices diam.<br/> Maecenas ligula massa, varius a, semper congue, euismod non, mi.<br/> Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.<br/> Duis semper.<br/> Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.<br/> Pellentesque congue.<br/> Ut in risus volutpat libero pharetra tempor.<br/> Cras vestibulum bibendum augue.<br/> Praesent egestas leo in pede.<br/> Praesent blandit odio eu enim.<br/> Pellentesque sed dui ut augue blandit sodales.<br/> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.<br/> Mauris ac mauris sed pede pellentesque fermentum.<br/> Maecenas adipiscing ante non diam sodales hendrerit.<br/> Ut velit mauris, egestas sed, gravida nec, ornare ut, mi.<br/> Aenean ut orci vel massa suscipit pulvinar.<br/> Nulla sollicitudin.<br/> Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula.<br/> Pellentesque rhoncus nunc et augue.<br/> Integer id felis.<br/> Curabitur aliquet pellentesque diam.<br/> Integer quis metus vitae elit lobortis egestas.<br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Morbi vel erat non mauris convallis vehicula.<br/> Nulla et sapien.<br/> Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam.<br/> Mauris ullamcorper felis vitae erat.<br/> Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.<br/> Aliquam convallis sollicitudin purus.<br/> Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus.<br/> Fusce vulputate sem at sapien.<br/> Vivamus leo.<br/> Aliquam euismod libero eu enim.<br/> Nulla nec felis sed leo placerat imperdiet.<br/> Aenean suscipit nulla in justo.<br/> Suspendisse cursus rutrum augue.<br/> Nulla tincidunt tincidunt mi.<br/> Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus.<br/> Curabitur eu amet.<br/>
</p>
<h2 id="ttt">My little text #3</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Sed non risus.<br/> Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.<br/> Cras elementum ultrices diam.<br/> Maecenas ligula massa, varius a, semper congue, euismod non, mi.<br/> Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.<br/> Duis semper.<br/> Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.<br/> Pellentesque congue.<br/> Ut in risus volutpat libero pharetra tempor.<br/> Cras vestibulum bibendum augue.<br/> Praesent egestas leo in pede.<br/> Praesent blandit odio eu enim.<br/> Pellentesque sed dui ut augue blandit sodales.<br/> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.<br/> Mauris ac mauris sed pede pellentesque fermentum.<br/> Maecenas adipiscing ante non diam sodales hendrerit.<br/> Ut velit mauris, egestas sed, gravida nec, ornare ut, mi.<br/> Aenean ut orci vel massa suscipit pulvinar.<br/> Nulla sollicitudin.<br/> Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula.<br/> Pellentesque rhoncus nunc et augue.<br/> Integer id felis.<br/> Curabitur aliquet pellentesque diam.<br/> Integer quis metus vitae elit lobortis egestas.<br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Morbi vel erat non mauris convallis vehicula.<br/> Nulla et sapien.<br/> Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam.<br/> Mauris ullamcorper felis vitae erat.<br/> Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.<br/> Aliquam convallis sollicitudin purus.<br/> Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus.<br/> Fusce vulputate sem at sapien.<br/> Vivamus leo.<br/> Aliquam euismod libero eu enim.<br/> Nulla nec felis sed leo placerat imperdiet.<br/> Aenean suscipit nulla in justo.<br/> Suspendisse cursus rutrum augue.<br/> Nulla tincidunt tincidunt mi.<br/> Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus.<br/> Curabitur eu amet.<br/>
</p>
<h2>My little text #4</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Sed non risus.<br/> Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.<br/> Cras elementum ultrices diam.<br/> Maecenas ligula massa, varius a, semper congue, euismod non, mi.<br/> Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.<br/> Duis semper.<br/> Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.<br/> Pellentesque congue.<br/> Ut in risus volutpat libero pharetra tempor.<br/> Cras vestibulum bibendum augue.<br/> Praesent egestas leo in pede.<br/> Praesent blandit odio eu enim.<br/> Pellentesque sed dui ut augue blandit sodales.<br/> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.<br/> Mauris ac mauris sed pede pellentesque fermentum.<br/> Maecenas adipiscing ante non diam sodales hendrerit.<br/> Ut velit mauris, egestas sed, gravida nec, ornare ut, mi.<br/> Aenean ut orci vel massa suscipit pulvinar.<br/> Nulla sollicitudin.<br/> Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula.<br/> Pellentesque rhoncus nunc et augue.<br/> Integer id felis.<br/> Curabitur aliquet pellentesque diam.<br/> Integer quis metus vitae elit lobortis egestas.<br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Morbi vel erat non mauris convallis vehicula.<br/> Nulla et sapien.<br/> Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam.<br/> Mauris ullamcorper felis vitae erat.<br/> Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.<br/> Aliquam convallis sollicitudin purus.<br/> Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus.<br/> Fusce vulputate sem at sapien.<br/> Vivamus leo.<br/> Aliquam euismod libero eu enim.<br/> Nulla nec felis sed leo placerat imperdiet.<br/> Aenean suscipit nulla in justo.<br/> Suspendisse cursus rutrum augue.<br/> Nulla tincidunt tincidunt mi.<br/> Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus.<br/> Curabitur eu amet.<br/>
</p>
<h2 id="watched">My little text #5</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Sed non risus.<br/> Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.<br/> Cras elementum ultrices diam.<br/> Maecenas ligula massa, varius a, semper congue, euismod non, mi.<br/> Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.<br/> Duis semper.<br/> Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.<br/> Pellentesque congue.<br/> Ut in risus volutpat libero pharetra tempor.<br/> Cras vestibulum bibendum augue.<br/> Praesent egestas leo in pede.<br/> Praesent blandit odio eu enim.<br/> Pellentesque sed dui ut augue blandit sodales.<br/> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.<br/> Mauris ac mauris sed pede pellentesque fermentum.<br/> Maecenas adipiscing ante non diam sodales hendrerit.<br/> Ut velit mauris, egestas sed, gravida nec, ornare ut, mi.<br/> Aenean ut orci vel massa suscipit pulvinar.<br/> Nulla sollicitudin.<br/> Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula.<br/> Pellentesque rhoncus nunc et augue.<br/> Integer id felis.<br/> Curabitur aliquet pellentesque diam.<br/> Integer quis metus vitae elit lobortis egestas.<br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Morbi vel erat non mauris convallis vehicula.<br/> Nulla et sapien.<br/> Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam.<br/> Mauris ullamcorper felis vitae erat.<br/> Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.<br/> Aliquam convallis sollicitudin purus.<br/> Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus.<br/> Fusce vulputate sem at sapien.<br/> Vivamus leo.<br/> Aliquam euismod libero eu enim.<br/> Nulla nec felis sed leo placerat imperdiet.<br/> Aenean suscipit nulla in justo.<br/> Suspendisse cursus rutrum augue.<br/> Nulla tincidunt tincidunt mi.<br/> Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus.<br/> Curabitur eu amet.<br/>
</p>
<h2>My little text #6</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Sed non risus.<br/> Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.<br/> Cras elementum ultrices diam.<br/> Maecenas ligula massa, varius a, semper congue, euismod non, mi.<br/> Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.<br/> Duis semper.<br/> Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.<br/> Pellentesque congue.<br/> Ut in risus volutpat libero pharetra tempor.<br/> Cras vestibulum bibendum augue.<br/> Praesent egestas leo in pede.<br/> Praesent blandit odio eu enim.<br/> Pellentesque sed dui ut augue blandit sodales.<br/> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.<br/> Mauris ac mauris sed pede pellentesque fermentum.<br/> Maecenas adipiscing ante non diam sodales hendrerit.<br/> Ut velit mauris, egestas sed, gravida nec, ornare ut, mi.<br/> Aenean ut orci vel massa suscipit pulvinar.<br/> Nulla sollicitudin.<br/> Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula.<br/> Pellentesque rhoncus nunc et augue.<br/> Integer id felis.<br/> Curabitur aliquet pellentesque diam.<br/> Integer quis metus vitae elit lobortis egestas.<br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Morbi vel erat non mauris convallis vehicula.<br/> Nulla et sapien.<br/> Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam.<br/> Mauris ullamcorper felis vitae erat.<br/> Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.<br/> Aliquam convallis sollicitudin purus.<br/> Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus.<br/> Fusce vulputate sem at sapien.<br/> Vivamus leo.<br/> Aliquam euismod libero eu enim.<br/> Nulla nec felis sed leo placerat imperdiet.<br/> Aenean suscipit nulla in justo.<br/> Suspendisse cursus rutrum augue.<br/> Nulla tincidunt tincidunt mi.<br/> Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus.<br/> Curabitur eu amet.<br/>
</p>
<a href="javascript:;" class="vs_top" id="gotop"><span class="arrT"></span><p>top</p></a>
</body>
</html>