viewport utilities module
- .viewport() 1.8+
- .mq() 1.6+
- .aspect() 1.7+
- verge's viewport methods represent the CSS viewport and thus match
- At certain zooms the viewport dimensions given by verge may be 1px off the expected
@mediavalue due to native rounding. For greater precision (at a slight speed tradeoff) consider actual.
vergeviewportW // -> viewport width in pixels
vergeviewportH // -> viewport height in pixels
Get both CSS viewport dimensions as an object with width and height properties.
vergeviewportW === vergeviewportwidth // always truevergeviewportH === vergeviewportheight // always true
.viewportW() syntax is slightly faster.
Test if any part of an element (or the first element in a matched set) is in the current viewport. Returns boolean.
vergeinViewportelem // true if elem is in the current viewportvergeinViewportelem 100 // true if elem is in the current viewport or within 100px of itvergeinViewportelem -100 // true if elem is in the current viewport and not within 99px of the edge
vergeinViewportelem === vergeinXelem && vergeinYelem // always true
Substitute inViewport with: inY on vertical sites, inX on horizontal ones.
- On pages without horizontal scroll, inX is always
- On pages without vertical scroll, inY is always
- If the viewport width is
documentwidth, then inX is always
Test if any part of an element (or the first element in a matched set) is in the same x-axis section as the viewport. Returns boolean.
vergeinXelem // true if elem is in same x-axis as the viewport (exact)vergeinXelem 100 // true if elem is in same x-axis as the viewport or within 100px of itvergeinXelem -100 // true if elem in is the viewport and not within 99px of the edge
Test if any part of an element (or the first element in a matched set) is in the same y-axis section as the viewport. Returns boolean.
vergeinYelem // true if elem is in same y-axis as the viewport (exact)vergeinYelem 100 // true if elem is in same y-axis as the viewport or within 100px of itvergeinYelem -100 // true if elem in is the viewport and not within 99px of the edge
Get the horizontal scroll position in pixels. (Like
window.scrollX, but cross-browser.)
vergescrollX // -> horizontal pixels scrolled
Get the vertical scroll position in pixels. (Like
window.scrollY, but cross-browser.)
vergescrollY // -> vertical pixels scrolled
Test if a media query is active.
vergemq'(min-color:2)' // -> booleanvergemq'tv' // -> boolean
Get an a object containing the properties
height with respect to the top-left corner of the current viewport, and with an optional cushion amount. Its return is like that of the native getBoundingClientRect.
The optional cushion parameter is an amount of pixels to act as a cushion around the element. If none is provided then it defaults to
0 and the rectangle will match the native rectangle. If a cushion is specified, the properties are adjusted according to the cushion amount. If the cushion is positive the rectangle will represent an area that is larger that the actual element. If the cushion is negative then the rectangle will represent an area that is smaller that the actual element.
vergerectangleelement // rectangle objectvergerectangleelement 100 // rectangle object adjusted by 100 pixels
Get the aspect ratio of the viewport or of an object with width/height properties.
vergeaspect // -> viewport aspect ratiovergeaspectelement // -> element aspect ratiovergeaspectscreen // -> device aspect ratio1 < vergeaspect // => landscape orientation
$ ender build verge
$ npm install$ grunt jshint:src