Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

imported from http://remysharp.com/2009/01/26/element-in-view-event-p…

  • Loading branch information...
commit 5625cfeb0f74d105926253890f9598135ec8df4c 0 parents
@zuk authored
Showing with 165 additions and 0 deletions.
  1. +41 −0 LICENSE
  2. +64 −0 README.textile
  3. +60 −0 jquery.inview.js
41 LICENSE
@@ -0,0 +1,41 @@
+Attribution-Non-Commercial-Share Alike 2.0 UK: England & Wales
+
+http://creativecommons.org/licenses/by-nc-sa/2.0/uk/
+
+You are free:
+
+ * to copy, distribute, display, and perform the work
+ * to make derivative works
+
+
+Under the following conditions:
+
+ * Attribution — You must give the original author credit.
+ Attribute this work:
+ Information
+ What does "Attribute this work" mean?
+ The page you came from contained embedded licensing metadata,
+ including how the creator wishes to be attributed for re-use.
+ You can use the HTML here to cite the work. Doing so will
+ also include metadata on your page so that others can find the
+ original work as well.
+
+ * Non-Commercial — You may not use this work for commercial
+ purposes.
+ * Share Alike — If you alter, transform, or build upon this
+ work, you may distribute the resulting work only under a
+ licence identical to this one.
+
+With the understanding that:
+
+ * Waiver — Any of the above conditions can be waived if you get
+ permission from the copyright holder.
+ * Other Rights — In no way are any of the following rights
+ affected by the license:
+ o Your fair dealing or fair use rights;
+ o The author's moral rights;
+ o Rights other persons may have either in the work itself
+ or in how the work is used, such as publicity or privacy rights.
+ * Notice — For any reuse or distribution, you must make clear to
+ others the licence terms of this work.
+
64 README.textile
@@ -0,0 +1,64 @@
+h1. Element 'in view' Event Plugin
+*Author:* Remy Sharp
+*Pulled from:* http://remysharp.com/2009/01/26/element-in-view-event-plugin/
+
+I've been preparing a few articles for jQuery for Designers and for .net magazine and in doing so I've had to write a plugin that could prove to be useful to share.
+
+I've created an event that will trigger when the element is scrolled in to the viewport.
+
+h2. Preamble
+
+First of all, this isn't really a plugin. It's a utility of sorts. It's not really a plugin, because you don't call it. It binds on to the scroll event and does the work for you.
+
+Also, I'm aware that there is the lazyload plugin. I've not had real time to play with it, but I suspect there's some similarities, though my inview plugin is extremely stripped down (because I wrote it for a particular purpose). Also note that my code only works for vertical scroll, and not horizontal.
+
+I should also add that this utility/plugin was inspired by Dustin Diaz's detect when an element scrolls in to view code.
+Demo
+
+The example is mostly lorem text, but in the middle of the page is an element whose text reads: "You can't see me". When the element is scrolled in to view it will change to "You found me".
+
+To confirm this, open firebug while the element is out of view, and watch the element in question as you scroll it in to view.
+
+http://jsbin.com/ugupa (to edit: http://jsbin.com/ugupa/edit)
+
+h2. Download
+
+Download jQuery inview event plugin: http://remysharp.com/downloads/jquery.inview.js
+
+Or from github at: http://github.com/zuk/jquery.inview
+
+h2. Usage
+
+The script makes use of the new $.support properties - so it will only work with jQuery 1.3 upwards. If you need to use it with older versions of jQuery, drop a comment, and I'll post an alternative.
+
+The event will only fire when the element comes in to view of the viewport, and out of view. It won't keep firing if the user scrolls and the element remains in view.
+
+Bear in mind if think the element may already be in view, you may need to kick the scroll event (using $(window).scroll()). If you include this plugin last (i.e. after you've hooked in to the event), then the script will automatically trigger the scroll event - therefore sending the event to your bound element.
+
+The variable after the event argument indicates the visible state in the viewport.
+
+ $('div').bind('inview', function (event, visible) {
+ if (visible == true) {
+ // element is now visible in the viewport
+ } else {
+ // element has gone out of viewport
+ }
+ });
+
+To stop listening for the event - simply unbind:
+
+ $('div').unbind('inview');
+
+Remember you can also bind once:
+
+ $('div').one('inview' fn);
+
+h2. How it works
+
+When the window is scrolled, the event checks the position of the elements against the viewport height and the scrollTop position.
+
+However, I wanted to create a utility that would only check the elements that were registered under the 'inview' event, i.e. I didn't want to keep checking the element list if we unbind from the event.
+
+This is achieved by dipping in to the $.cache store within jQuery, and looping through, looking for the elements tied to the 'inview' event.
+
+This way the user can treat it like a native event on the page.
60 jquery.inview.js
@@ -0,0 +1,60 @@
+/**
+ * author Remy Sharp
+ * url http://remysharp.com/2009/01/26/element-in-view-event-plugin/
+ */
+(function ($) {
+ function getViewportHeight() {
+ var height = window.innerHeight; // Safari, Opera
+ var mode = document.compatMode;
+
+ if ( (mode || !$.support.boxModel) ) { // IE, Gecko
+ height = (mode == 'CSS1Compat') ?
+ document.documentElement.clientHeight : // Standards
+ document.body.clientHeight; // Quirks
+ }
+
+ return height;
+ }
+
+ $(window).scroll(function () {
+ var vpH = getViewportHeight(),
+ scrolltop = (document.documentElement.scrollTop ?
+ document.documentElement.scrollTop :
+ document.body.scrollTop),
+ elems = [];
+
+ // naughty, but this is how it knows which elements to check for
+ $.each($.cache, function () {
+ if (this.events && this.events.inview) {
+ elems.push(this.handle.elem);
+ }
+ });
+
+ if (elems.length) {
+ $(elems).each(function () {
+ var $el = $(this),
+ top = $el.offset().top,
+ height = $el.height(),
+ inview = $el.data('inview') || false;
+
+ if (scrolltop > (top + height) || scrolltop + vpH < top) {
+ if (inview) {
+ $el.data('inview', false);
+ $el.trigger('inview', [ false ]);
+ }
+ } else if (scrolltop < (top + height)) {
+ if (!inview) {
+ $el.data('inview', true);
+ $el.trigger('inview', [ true ]);
+ }
+ }
+ });
+ }
+ });
+
+ // kick the event to pick up any elements already in view.
+ // note however, this only works if the plugin is included after the elements are bound to 'inview'
+ $(function () {
+ $(window).scroll();
+ });
+})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.