Skip to content

Instantly share code, notes, and snippets.

@yckart
Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yckart/49004c0c8b03ed05e53f to your computer and use it in GitHub Desktop.
Save yckart/49004c0c8b03ed05e53f to your computer and use it in GitHub Desktop.
A simple function to get the viewport-dimensions, including some pre-calculated values.
Property Description
ww Window Width
wh Window Height
dw Document Width
dh Document Height
pw Page Width
ph Page Height
fw Factor Width (A value between 0-1, which represents the percentage-value)
fh Factor Height (A value between 0-1, which represents the percentage-value)

If you need just the document width/height, check my tweet sized port of James Padolseys approach https://gist.github.com/yckart/10988011

$.viewport = (function () {
var $WINDOW = $(window);
var $DOCUMENT = $(document);
return function () {
var ww = $WINDOW.width();
var wh = $WINDOW.height();
var dw = $DOCUMENT.width();
var dh = $DOCUMENT.height();
return {
ww: ww,
wh: wh,
dw: dw,
dh: dh,
pw: dw - ww,
ph: dh - wh,
fw: ww / dw,
fh: wh / dh
};
};
}());
var viewport = (function () {
var html = document.documentElement;
var body = document.body;
function getWindowWidth() { return html.clientWidth; }
function getWindowHeight() { return html.clientHeight; }
function getDocumentWidth() { return Math.max(body.scrollWidth, html.scrollWidth, body.offsetWidth, html.offsetWidth, body.clientWidth, html.clientWidth); }
function getDocumentHeight() { return Math.max(body.scrollHeight, html.scrollHeight, body.offsetHeight, html.offsetHeight, body.clientHeight, html.clientHeight); }
return function () {
var ww = getWindowWidth();
var wh = getWindowHeight();
var dw = getDocumentWidth();
var dh = getDocumentHeight();
return {
ww: ww,
wh: wh,
dw: dw,
dh: dh,
pw: dw - ww,
ph: dh - wh,
fw: ww / dw,
fh: wh / dh
};
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment