Best Period Picker

Viewport - simple jQuery plugin adding selectors and events for finding and handling elements in viewport version 0.0.1

1

Viewport - is simple jQuery plugin adds custom pseudo-selectors and handlers for simple element detection inside or outside of viewport.

How to use?

Viewport depends on jQuery, include them wherever you want:

<span class="nt"><script </span><span class="na">src=</span><span class="s">"jquery.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"jquery.viewport.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>

Now you able to use these pseudo-selectors anywhere in your code:

<span class="nx">$</span><span class="p">(</span> <span class="s2">":in-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":above-the-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":below-the-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":left-of-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":right-of-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":partly-above-the-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":partly-below-the-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":partly-left-of-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":partly-right-of-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":have-scroll"</span> <span class="p">);</span>

A bit closer

Let's see each group of pseudo-selectors a little closer.

Element fully fits into the viewport

<span class="nx">$</span><span class="p">(</span> <span class="s2">":in-viewport"</span> <span class="p">);</span>

This pseudo-selector returns true if element is inside and fully fits inside the viewport and returns <i>false</i> if any side of element extends beyond the viewport.

Any side of element extends beyond the viewport

<span class="nx">$</span><span class="p">(</span> <span class="s2">":above-the-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":below-the-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":left-of-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":right-of-viewport"</span> <span class="p">);</span>

These pseudo-selectors returns <i>true</i> if the corresponding side of the element extends beyond the viewport, so if element's top side extends beyond the viewport's top border, this code:

<span class="nx">$</span><span class="p">(</span> <span class="s2">"element-selector"</span> <span class="p">).</span><span class="nx">is</span><span class="p">(</span> <span class="s2">":above-the-viewport"</span> <span class="p">);</span>

will return <i>true</i>.

Any part of the element is within the viewport

<span class="nx">$</span><span class="p">(</span> <span class="s2">":partly-above-the-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":partly-below-the-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":partly-left-of-viewport"</span> <span class="p">);</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">":partly-right-of-viewport"</span> <span class="p">);</span>

Unlike previous group, these returns <i>true</i> if any part is within viewport, but, returns <i>false</i> if element fully fits into the viewport. Same, <i>false</i> value returns if element fully extends beyond the viewport.

Threshold parameter

Everything, listed earlier, pseudo-selectors have optional parameter, "threshold".
Threshold extends the viewport area with it's value.

<span class="nx">$</span><span class="p">(</span> <span class="s2">":in-viewport(20)"</span> <span class="p">);</span>
Element have scroll

<span class="nx">$</span><span class="p">(</span> <span class="s2">":have-scroll"</span> <span class="p">);</span>

This pseudo-selector returns <i>true</i> if element have scrollbars, actually, it returns <i>true</i> if content's dimensions exceeds element's dimensions.
In Viewport plugin, this pseudo-selector uses for determining element's viewport, mostly, element's viewport - is parent element having the scrollbars.

It is necessary to clarify that, depending on the context, the viewport can be any DOM element, whose content size exceeds his own.

Element's position tracker

If you need continuous tracking of element's position, you can call plugin, on it.

<span class="nx">$</span><span class="p">(</span> <span class="s2">".some-element"</span> <span class="p">).</span><span class="nx">viewportTrace</span><span class="p">(</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">state</span> <span class="p">){</span>     <span class="c1">//your callback code</span>  <span class="p">},</span> <span class="p">{</span>     <span class="s2">"threshold"</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>     <span class="s2">"allowPartly"</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>     <span class="s2">"allowMixedStates"</span><span class="o">:</span> <span class="kc">false</span>  <span class="p">});</span>

The callback function is required, if you'll try to call plugin without callback function, exception will be generated.
Element's state returns in callback parameter.

Plugin options

threshold

Threshold parameter was described above.

allowPartly

By default element can have 5 states:

<code> <ul>      <li>inside</li>      <li>above</li>      <li>below</li>      <li>left</li>      <li>right</li>  </ul>
Note, that any type of above and below states have priority above left and right states.

Turning on allowPartly option extends range of returning states with following:

<code><ul>      <li>partly-above</li>      <li>partly-below</li>      <li>partly-left</li>      <li>partly-right</li>  </ul>

allowMixedStates

Turns on mixing of different element-states. As previously, above and below states have priority above others, and "full" states goes before "partly" states, so return value looks like:
above right
or
right partly-below

Untie tracker

If there is no more need to track element, you can use "destroy" parameter.

<span class="nx">$</span><span class="p">(</span> <span class="s2">".some-element"</span> <span class="p">).</span><span class="nx">viewportTrace</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">);</span>

Tags



Changelog


Similar plugins

Switchy

This is a tiny jQuery plugin which can be used as both a switch or a slider.

Listbox.js

Listbox.js is a simple jQuery plugin that provides a more powerful alternative to the standard...

jQuery Touch Hooks

Hook into jQuery fix hook API to copy over touch event properties into jQuery.Event.

jQuery SumoSelect

SumoSelect is a jquery plugin which beautifully renders a single or multiple HTML select element....

Bootstrap Tags Input

jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

ImgAreaSelect – image selection/cropping plugin

ImgAreaSelect is a plugin for selecting a rectangular area of an image. It allows web developers...

multiselect

This is a user-friendlier drop-in replacement for the standard <select> with multiple...

jQuery Grab-Gets

jQuery plugin for grabbing GET parameters from url and put, select and check elements of selected...

Selectify

Selectify is a UI overlay for select elements which does not screw up your events.

Shuttle

A jQuery plugin that is a shuttle box ui.

Mobiscroll Select Scroller

Renders a scrollable list from HTML selects for easy data picking on touch devices. It comes with...

jQuery Populate

A small yet useful jQuery plugin that populates select elements with option nodes.

Bic Calendar Full

A jQuery and Twitter Bootstrap 3 full calendar with the option of select data ranges, mark events...

Simple Combobox

A combobox plugin

Mighty Form Styler for jQuery

Mighty Form Styler for jQuery replaces you form select element with a html ul list so you can...

Brute Select

Simple select implementation with customizable styles. It retains default browser behavior for...

Load Later

jQuery plugin for partial loading non essential DOM elements

jQuery TextEntered Event

This plugin causes text fields and textareas to fire a jQuery event, textentered, when a user...

jQuery Scrollfire

Allows useful callbacks to be fired upon elements scrolling into and out of view from both the top...
comments powered by Disqus