Different size variables

by Ercan Cicek

HTML

<span id="wOuter">window.outerHeight: </span>
<div>This height includes the page and all visible bars (location, status, bookmarks, window title, borders)</div>
<span id="wInner">window.innerHeight / $(window).height(): </span>
<div>This height includes just the height of the viewport including the website itself</div>
<span id="docClient">document.body.clientHeight / $(document).height(): </span>
<div>This height includes the height of the document inside of the viewport</div>
<span id="scrAvail">screen.availHeight: </span>
<div>This is the height the window gets if the browser is maximized (if maximized then window.outerHeight = screen.availHeight)</div>
<span id="scr">screen.height: </span>
<div>This height matches your resolution height</div>

CSS

span {
  font-weight: bold;
}

div {
  margin-bottom: 1em;
}

JavaScript

$(function() {
	$("#wOuter").after(window.outerHeight + "px");
  $("#wInner").after(window.innerHeight + "px");
  $("#docClient").after(document.body.clientHeight + "px");
  $("#scrAvail").after(screen.availHeight + "px");
  $("#scr").after(screen.height + "px");
});