Permalink
Browse files

Initial commit.

  • Loading branch information...
0 parents commit 9a0232ce76c90e292b1a125dc5bf23d3046a3082 @tuupola committed Jan 21, 2008
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<title>Viewport Selectors</title>
+<meta name="generator" content="Mephisto" />
+<link href="http://www.appelsiini.net/stylesheets/main.css" rel="stylesheet" type="text/css" />
+<link rel="stylesheet" href="http://static.taevas.ee/facebox/facebox.css" type="text/css" media="screen" title="no title" charset="utf-8">
+<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
+<script src="/mint/?js" type="text/javascript"></script>
+<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
+<script type="text/javascript">
+ _uacct = "UA-190966-1";
+ urchinTracker();
+</script>
+<script src="http://static.taevas.ee/js/jquery-1.2.2.mini.js" type="text/javascript" charset="utf-8"></script>
+<script src="http://static.taevas.ee/js/jquery.dimensions-1.2.0.mini.js" type="text/javascript" charset="utf-8"></script>
+<script src="http://static.taevas.ee/facebox/facebox.js" type="text/javascript" charset="utf-8"></script>
+<script src="jquery.viewport.js" type="text/javascript" charset="utf-8"></script>
+
+<script type="text/javascript" charset="utf-8">
+$(function() {
+ $(window).bind("scroll", function(event) {
+ var message = "";
+ $("#photos img:inviewport").each(function() {
+ message = message + $(this).attr("src") + "<br />";
+ });
+ $.facebox(message);
+ });
+});
+</script>
+
+
+<style type="text/css">
+#sidebar {
+ width: 0px;
+}
+#content {
+ width: 4750px;
+}
+</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 visible.</small>
+ <ul id="nav">
+ <li id="first"><a href="/" class="active">weblog</a></li>
+ <li><a href="/projects" class="last">projects</a></li>
+ <!--
+ <li><a href="/cv" class="last">cv</a></li>
+ -->
+ </ul>
+ </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>
+
+ <table><tr><td>
+ <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">
+ </td></tr>
+ <tr><td>
+ <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">
+ </td></tr>
+ </table>
+
+ </div>
+ <div id="sidebar">
+
+ </div>
+
+ <div id="footer">
+ </div>
+
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,46 @@
+/*
+ * Viewport - jQuery selectors for finding elements in viewport
+ *
+ * Copyright (c) 2008 Mika Tuupola
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Revision: $Id: jquery.lazyload.js 291 2008-01-18 20:26:11Z tuupola $
+ *
+ */
+(function($) {
+
+ $.belowthefold = function(element, settings) {
+ var fold = $(window).height() + $(window).scrollTop();
+ return fold <= $(element).offset().top - settings.threshold;
+ };
+
+ $.abovethetop = function(element, settings) {
+ var top = $(window).scrollTop();
+ return top >= $(element).offset().top + $(element).height() - settings.threshold;
+ };
+
+ $.rightofscreen = function(element, settings) {
+ var fold = $(window).width() + $(window).scrollLeft();
+ return fold <= $(element).offset().left - settings.threshold;
+ };
+
+ $.leftofscreen = function(element, settings) {
+ var left = $(window).scrollLeft();
+ return left >= $(element).offset().left + $(element).width() - settings.threshold;
+ };
+
+ $.inviewport = function(element, settings) {
+ return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
+ };
+
+ $.extend($.expr[':'], {
+ belowthefold : "$.belowthefold(a, {threshold : 0})",
+ abovethetop : "$.abovethetop(a, {threshold : 0})",
+ leftofscreen : "$.leftofscreen(a, {threshold : 0})",
+ rightofscreen : "$.rightofscreen(a, {threshold : 0})",
+ inviewport : "$.inviewport(a, {threshold : 0})"
+ });
+
+})(jQuery);

0 comments on commit 9a0232c

Please sign in to comment.