├── LICENSE.txt
├── README.markdown
├── benchmark
├── benchmark.html
└── jquery-1.10.2.min.js
├── bower.json
├── df-visible.jquery.json
├── examples
├── demo-basic.html
└── demo-container.html
├── jquery.visible.js
├── jquery.visible.min.js
└── package.json
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2012 Digital Fusion, http://teamdf.com/
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining
4 | a copy of this software and associated documentation files (the
5 | "Software"), to deal in the Software without restriction, including
6 | without limitation the rights to use, copy, modify, merge, publish,
7 | distribute, sublicense, and/or sell copies of the Software, and to
8 | permit persons to whom the Software is furnished to do so, subject to
9 | the following conditions:
10 |
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 |
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/README.markdown:
--------------------------------------------------------------------------------
1 | Element Onscreen Visibility
2 | ===========================
3 |
4 | This is a [jQuery](http://jquery.com/) plugin which allows us to quickly check if an element
5 | is within the browsers [visual viewport](http://www.quirksmode.org/mobile/viewports.html),
6 | regardless of the scroll position. If a user can see this element, the function will return true.
7 |
8 |
9 | Documentation
10 | -------------
11 | ### Basic visibility check
12 |
13 | This basic check will return `true` if the entire element is visible to the user (within the visual viewport).
14 |
15 | $('#element').visible();
16 |
17 | If you'd like to check for ANY PART of the element, you can use the following:
18 |
19 | $('#element').visible( true );
20 |
21 | The plugin ignores the elements visibility by default. E.g., `display:none`, `visibility: hidden`, `offsetWidth` or `offsetHeight` is 0).
22 | To filter on css visibility, you can use the jQuery `:visible` selector:
23 |
24 | $('#element:visible').visible();
25 |
26 | Optionally, you can specify a second parameter to the `.visible` plugin, which will check whether the element is visible, as well as
27 | whether it's within the viewport too.
28 |
29 | $('#element:visible').visible( false, true );
30 |
31 | Optionally, you can add a third parameter to specify the direction to check for visibility. This can either be 'horizontal', 'vertical' or 'both'.
32 | Default is to 'both'.
33 |
34 | $('#element').visible( false, false, 'horizontal' );
35 |
36 |
37 | Demos
38 | -----
39 |
40 | The Demos for this plugin live under the examples/ directory. Open them directly in your web browser, or view the following online examples:
41 |
42 | - [Basic Demo](http://opensource.teamdf.com/visible/examples/demo-basic.html)
43 |
44 | See the blog article:
45 |
46 | - [Checking if an element is visible on-screen using jQuery](https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery)
47 |
48 |
49 | Limitations
50 | -----------
51 |
52 | Currently, this plugin will not check for visibility in nested scrollable areas, only on the main viewport (window object).
53 |
--------------------------------------------------------------------------------
/benchmark/benchmark.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
a",n=d.getElementsByTagName("*")||[],r=d.getElementsByTagName("a")[0],!r||!r.style||!n.length)return t;s=a.createElement("select"),u=s.appendChild(a.createElement("option")),o=d.getElementsByTagName("input")[0],r.style.cssText="top:1px;float:left;opacity:.5",t.getSetAttribute="t"!==d.className,t.leadingWhitespace=3===d.firstChild.nodeType,t.tbody=!d.getElementsByTagName("tbody").length,t.htmlSerialize=!!d.getElementsByTagName("link").length,t.style=/top/.test(r.getAttribute("style")),t.hrefNormalized="/a"===r.getAttribute("href"),t.opacity=/^0.5/.test(r.style.opacity),t.cssFloat=!!r.style.cssFloat,t.checkOn=!!o.value,t.optSelected=u.selected,t.enctype=!!a.createElement("form").enctype,t.html5Clone="<:nav>"!==a.createElement("nav").cloneNode(!0).outerHTML,t.inlineBlockNeedsLayout=!1,t.shrinkWrapBlocks=!1,t.pixelPosition=!1,t.deleteExpando=!0,t.noCloneEvent=!0,t.reliableMarginRight=!0,t.boxSizingReliable=!0,o.checked=!0,t.noCloneChecked=o.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!u.disabled;try{delete d.test}catch(h){t.deleteExpando=!1}o=a.createElement("input"),o.setAttribute("value",""),t.input=""===o.getAttribute("value"),o.value="t",o.setAttribute("type","radio"),t.radioValue="t"===o.value,o.setAttribute("checked","t"),o.setAttribute("name","t"),l=a.createDocumentFragment(),l.appendChild(o),t.appendChecked=o.checked,t.checkClone=l.cloneNode(!0).cloneNode(!0).lastChild.checked,d.attachEvent&&(d.attachEvent("onclick",function(){t.noCloneEvent=!1}),d.cloneNode(!0).click());for(f in{submit:!0,change:!0,focusin:!0})d.setAttribute(c="on"+f,"t"),t[f+"Bubbles"]=c in e||d.attributes[c].expando===!1;d.style.backgroundClip="content-box",d.cloneNode(!0).style.backgroundClip="",t.clearCloneStyle="content-box"===d.style.backgroundClip;for(f in x(t))break;return t.ownLast="0"!==f,x(function(){var n,r,o,s="padding:0;margin:0;border:0;display:block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;",l=a.getElementsByTagName("body")[0];l&&(n=a.createElement("div"),n.style.cssText="border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px",l.appendChild(n).appendChild(d),d.innerHTML="
Basic element visibility checking. This example will print 'Onscreen' or 'Offscreen' depending on the location of the element at the time the detection was run.
66 | // Is this element visible onscreen?
67 | var visible = $(this).visible( detectPartial );
68 |
69 | // Set the visible status into the span.
70 | $(this).find('span').text( visible ? 'Onscreen' : 'Offscreen' ).toggleClass('visible',visible);
71 |
72 |
73 |
74 |
One
75 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
76 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
77 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
78 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
79 |
Two
80 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
81 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
82 |
Three
83 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
84 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
85 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
86 |
Four
87 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
88 |
Five
89 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
90 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
91 |
Six
92 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
93 |
Seven
94 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
95 |
Eight
96 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
97 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
98 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
99 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
100 |
Nine
101 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
102 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
103 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
104 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
105 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
106 |
Ten
107 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
108 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
109 |
Eleven
110 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
111 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
112 |
Twelve
113 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
114 |
Thirteen
115 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
116 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
117 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
118 |
Fourteen
119 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
120 |
Fifteen
121 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
122 |
Sixteen
123 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
124 |
Seventeen
125 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
126 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
127 |
Eighteen
128 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
129 |
Nineteen
130 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
131 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
132 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
133 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
134 |
Twenty
135 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
136 |
137 |
138 |
139 |
140 |
Visibility detection
141 |
'Whole Element' will check if the entire element is visible on the screen.
142 |
'Par Element' will check if any part of the element is visible on the screen.
It has an easy to override visual style, and is appropriately subdued.
37 |
Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam commodo suscipit quam. Praesent nec nisl a purus blandit viverra. Fusce vulputate eleifend sapien.
38 |
Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam commodo suscipit quam. Praesent nec nisl a purus blandit viverra. Fusce vulputate eleifend sapien.