blinker / firefox.plugin / data / jquery.withinViewport.js @ a03cd52e
History | View | Annotate | Download (3.404 KB)
| 1 | a03cd52e | Thies Pfeiffer | /**
|
|---|---|---|---|
| 2 | * Within Viewport jQuery Plugin
|
||
| 3 | *
|
||
| 4 | * @description Companion plugin for withinViewport.js
|
||
| 5 | * @author Craig Patik, http://patik.com/
|
||
| 6 | * @version 0.0.3
|
||
| 7 | * @date 2014-03-03
|
||
| 8 | */
|
||
| 9 | |||
| 10 | (function($) { |
||
| 11 | /**
|
||
| 12 | * $.withinViewport()
|
||
| 13 | * @description jQuery method
|
||
| 14 | * @param {Object} [settings] optional settings
|
||
| 15 | * @return {Collection} Contains all elements that were within the viewport
|
||
| 16 | */
|
||
| 17 | $.fn.withinViewport = function(settings) { |
||
| 18 | if (typeof settings === "string") { settings = {sides: settings}; } |
||
| 19 | |||
| 20 | var opts = $.extend({}, settings, {sides: "all"}), elems = []; |
||
| 21 | |||
| 22 | this.each(function() { |
||
| 23 | if (withinViewport(this, opts)) { |
||
| 24 | elems.push(this);
|
||
| 25 | } |
||
| 26 | }); |
||
| 27 | |||
| 28 | return $(elems); |
||
| 29 | }; |
||
| 30 | |||
| 31 | // Main custom selector
|
||
| 32 | $.extend($.expr[":"], { |
||
| 33 | "within-viewport": function(element) { |
||
| 34 | return withinViewport(element, "all"); |
||
| 35 | } |
||
| 36 | }); |
||
| 37 | |||
| 38 | /**
|
||
| 39 | * Optional enhancements and shortcuts
|
||
| 40 | *
|
||
| 41 | * @description Uncomment or comment these pieces as they apply to your project and coding preferences
|
||
| 42 | */
|
||
| 43 | |||
| 44 | // Shorthand jQuery methods
|
||
| 45 | //
|
||
| 46 | $.fn.withinViewportTop = function(settings) { |
||
| 47 | var opts;
|
||
| 48 | |||
| 49 | if (typeof settings === "string") { settings = {sides: settings}; } |
||
| 50 | |||
| 51 | opts = $.extend({}, settings, {sides: "top"}), elems = []; |
||
| 52 | |||
| 53 | this.each(function() { |
||
| 54 | if (withinViewport(this, opts)) { |
||
| 55 | elems.push(this);
|
||
| 56 | } |
||
| 57 | }); |
||
| 58 | |||
| 59 | return $(elems); |
||
| 60 | }; |
||
| 61 | |||
| 62 | $.fn.withinViewportRight = function(settings) { |
||
| 63 | var opts;
|
||
| 64 | |||
| 65 | if (typeof settings === "string") { settings = {sides: settings}; } |
||
| 66 | |||
| 67 | opts = $.extend({}, settings, {sides: "right"}), elems = []; |
||
| 68 | |||
| 69 | this.each(function() { |
||
| 70 | if (withinViewport(this, opts)) { |
||
| 71 | elems.push(this);
|
||
| 72 | } |
||
| 73 | }); |
||
| 74 | |||
| 75 | return $(elems); |
||
| 76 | }; |
||
| 77 | |||
| 78 | $.fn.withinViewportBottom = function(settings) { |
||
| 79 | var opts;
|
||
| 80 | |||
| 81 | if (typeof settings === "string") { settings = {sides: settings}; } |
||
| 82 | |||
| 83 | opts = $.extend({}, settings, {sides: "bottom"}), elems = []; |
||
| 84 | |||
| 85 | this.each(function() { |
||
| 86 | if (withinViewport(this, opts)) { |
||
| 87 | elems.push(this);
|
||
| 88 | } |
||
| 89 | }); |
||
| 90 | |||
| 91 | return $(elems); |
||
| 92 | }; |
||
| 93 | |||
| 94 | $.fn.withinViewportLeft = function(settings) { |
||
| 95 | var opts;
|
||
| 96 | |||
| 97 | if (typeof settings === "string") { settings = {sides: settings}; } |
||
| 98 | |||
| 99 | opts = $.extend({}, settings, {sides: "left"}), elems = []; |
||
| 100 | |||
| 101 | this.each(function() { |
||
| 102 | if (withinViewport(this, opts)) { |
||
| 103 | elems.push(this);
|
||
| 104 | } |
||
| 105 | }); |
||
| 106 | |||
| 107 | return $(elems); |
||
| 108 | }; |
||
| 109 | |||
| 110 | // Custom jQuery selectors
|
||
| 111 | $.extend($.expr[":"], { |
||
| 112 | "within-viewport-top": function(element) { |
||
| 113 | return withinViewport(element, "top"); |
||
| 114 | }, |
||
| 115 | "within-viewport-right": function(element) { |
||
| 116 | return withinViewport(element, "right"); |
||
| 117 | }, |
||
| 118 | "within-viewport-bottom": function(element) { |
||
| 119 | return withinViewport(element, "bottom"); |
||
| 120 | }, |
||
| 121 | "within-viewport-left": function(element) { |
||
| 122 | return withinViewport(element, "left"); |
||
| 123 | } |
||
| 124 | // Example custom selector:
|
||
| 125 | //,
|
||
| 126 | // "within-viewport-top-left-45": function(element) {
|
||
| 127 | // return withinViewport(element, {sides:'top left', top: 45, left: 45});
|
||
| 128 | // }
|
||
| 129 | }); |
||
| 130 | }(jQuery)); |