tuupola / jquery_viewport

Add viewport selectors to jQuery. For example $("img:below-the-fold").something()

This URL has Read+Write access

jquery_viewport / 3x2.html
raw normal view history
9a0232ce » tuupola 2008-01-21 Initial commit. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
e407784e » tuupola 2008-01-30 Remove unesseccary word. 6 <title>Viewport Selectors Demo</title>
9a0232ce » tuupola 2008-01-21 Initial commit. 7 <meta name="generator" content="Mephisto" />
60c7bae3 » tuupola 2008-09-19 Use old stylesheet. 8 <link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
9a0232ce » tuupola 2008-01-21 Initial commit. 9 <link rel="stylesheet" href="http://static.taevas.ee/facebox/facebox.css" type="text/css" media="screen" title="no title" charset="utf-8">
10 <link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
11 <script src="/mint/?js" type="text/javascript"></script>
12 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
13 <script type="text/javascript">
14 _uacct = "UA-190966-1";
15 urchinTracker();
16 </script>
12e7ece7 » tuupola 2009-01-30 Fix problems with jQuery 1.... 17 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
9a0232ce » tuupola 2008-01-21 Initial commit. 18 <script src="http://static.taevas.ee/facebox/facebox.js" type="text/javascript" charset="utf-8"></script>
19 <script src="jquery.viewport.js" type="text/javascript" charset="utf-8"></script>
20
21 <script type="text/javascript" charset="utf-8">
22 $(function() {
5d8f2e81 » tuupola 2008-01-21 Dont show the facebox too o... 23 var previous = "";
24 $(window).bind("scroll", function(event) {
e407784e » tuupola 2008-01-30 Remove unesseccary word. 25 var message = "<h3>Images in viewport:</h3> ";
5d8f2e81 » tuupola 2008-01-21 Dont show the facebox too o... 26
f018498f » tuupola 2008-01-30 Use jQuery style selector n... 27 $("#photos img:in-viewport").each(function() {
9a0232ce » tuupola 2008-01-21 Initial commit. 28 message = message + $(this).attr("src") + "<br />";
5d8f2e81 » tuupola 2008-01-21 Dont show the facebox too o... 29 });
30
31 if (message != previous) {
32 $.facebox(message);
33 previous = message;
34 }
35 });
9a0232ce » tuupola 2008-01-21 Initial commit. 36 });
37 </script>
38
39
40 <style type="text/css">
41 #sidebar {
42 width: 0px;
43 }
44 #content {
45 width: 4750px;
46 }
47 </style>
48
49 </head>
50
51 <body>
52 <div id="wrap">
53 <div id="header">
54 <p>
55 <h1>Viewport</h1><br />
e407784e » tuupola 2008-01-30 Remove unesseccary word. 56 <small>Selectors which tell if element (or part of it) is in viewport.</small>
9a0232ce » tuupola 2008-01-21 Initial commit. 57 <ul id="nav">
58 <li id="first"><a href="/" class="active">weblog</a></li>
59 <li><a href="/projects" class="last">projects</a></li>
60 <!--
61 <li><a href="/cv" class="last">cv</a></li>
62 -->
63 </ul>
64 </p>
65 </div>
66 <div id="content">
67
68 <h2>Selector test on 3x2 grid.</h2>
69 <div class="entry" id="photos">
70
71 <p>
72 Make your browser window bit smaller than usual. Then scroll around
73 page. Small window will tell you which photos are inside the viewport.
74
75 </p>
76
77 <table><tr><td>
78 <img src="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
79 <img src="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
80 <img src="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
81 </td></tr>
82 <tr><td>
83 <img src="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
84 <img src="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
85 <img src="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
86 </td></tr>
87 </table>
88
89 </div>
90 <div id="sidebar">
91
92 </div>
93
94 <div id="footer">
95 </div>
96
97 </body>
98 </html>