jquery_viewport/3x2.html at master · 1337/jquery_viewport · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Viewport Selectors Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
            type="text/javascript"></script>
    <script src="jquery.viewport.js" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8">
        $(function () {
            $(window).bind("scroll", function () {
                var message = "Images in viewport: ";

                $("#photos img:in-viewport").each(function () {
                    message = message + '- ' + $(this).attr("src") + '\n';
                });
                console.log(message);
            });
        });
    </script>
    <style type="text/css">
        * {
            font-family: sans-serif;
        }
        img {
            display: block;
        }
    </style>
</head>

<body>
<div id="wrap">
    <div id="header">
        <p>
        <h1>Viewport</h1><br/>
        <small>Selectors which tell if element (or part of it) is in viewport.
        </small>
        </p>
    </div>
    <div id="content">
        <h2>Selector test on 3x2 grid.</h2>
        <div class="entry" id="photos">
            <p>
                Make your browser window bit smaller than usual. Then scroll
                around
                page. Small window will tell you which photos are inside the
                viewport.

            </p>
            <p>
                <img src="img/bmw_m1_hood.jpg" width="765" height="574"
                     alt="BMW M1 Hood">
                <img src="img/bmw_m1_side.jpg" width="765" height="574"
                     alt="BMW M1 Side">
                <img src="img/viper_1.jpg" width="765" height="574"
                     alt="Viper 1">
                <img src="img/viper_corner.jpg" width="765" height="574"
                     alt="Viper Corner">
                <img src="img/bmw_m3_gt.jpg" width="765" height="574"
                     alt="BMW M3 GT">
                <img src="img/corvette_pitstop.jpg" width="765"
                     height="574" alt="Corvette Pitstop">
            </p>
        </div>
</body>
</html>