Mini-library for getting information on the Browser Chrome and display properties of the client machine. Provides the methods getAvailableScreenHeight, getAvailableScreenWidth, getColourDepth, getScrollBarThickness, getViewPortHeight, getViewPortWidth, ge

BrowserChrome.js

/**
 * Mini-library for getting information on the Browser Chrome and display properties of the client machine. Provides the methods getAvailableScreenHeight, getAvailableScreenWidth, getColourDepth, getScrollBarThickness, getViewPortHeight, getViewPortWidth, getWindowHeight, getWindowLeft, getWindowTop, getWindowWidth
 * 
 * @author http://github.com/JamieMason
 * @constructor
 */
function BrowserChrome()
{

	/**
	 * This gives access to the display settings in eg: Windows' Control Panel
	 * @member BrowserChrome
	 * @return 			The number of colours in the client machine's palette, eg: 256 colours for 18-bit, or 16,777,216 for 24-bit
	 * @type Number
	 */
	this.getColourDepth = function()
	{
		return Math.pow(2, window.screen.colorDepth);
	};

	/**
	 * The resolution of the client machine is broadly useless to us unless we're running something full screen. This value is how much space is available minus the Windows Start Menu or Apple's Dock.
	 * @member BrowserChrome
	 * @return 			The total width available to the browser and other applications
	 * @type Number
	 */
	this.getAvailableScreenWidth = function()
	{
		return window.screen.availWidth;
	};

	/**
	 * The resolution of the client machine is broadly useless to us unless we're running something full screen. This value is how much space is available minus the Windows Start Menu or Apple's Dock.
	 * @member BrowserChrome
	 * @return 			The total width available to the browser and other applications
	 * @type Number
	 */
	this.getAvailableScreenHeight = function()
	{
		return window.screen.availHeight;
	};

	/**
	 * @member BrowserChrome
	 * @return 			The browser window's distance in pixels from the left side of the client machine's display
	 * @type Number
	 */
	this.getWindowLeft = function()
	{
		return window.pageXOffset;
	};

	/**
	 * @member BrowserChrome
	 * @return 			The browser window's distance in pixels from the top of the client machine's display
	 * @type Number
	 */
	this.getWindowTop = function()
	{
		return window.pageYOffset;
	};

	/**
	 * The thickness of the scrollbars can differ depending on combinations of the OS, the OS' skin/theme, the Browser, the Browser's skin/theme and the user's own preference settings. This method takes a measurement and reports the actual value.
	 * @member BrowserChrome
	 * @return 			The width (or height for horizontal) of the scrollbars
	 * @type Number
	 */
	this.getScrollBarThickness = function()
	{
		var inner = document.createElement('p');
		inner.style.width = "100%";
		inner.style.height = "200px";
		
		var outer = document.createElement('div');
		outer.style.position = "absolute";
		outer.style.top = "0px";
		outer.style.left = "0px";
		outer.style.visibility = "hidden";
		outer.style.width = "200px";
		outer.style.height = "150px";
		outer.style.overflow = "hidden";
		outer.appendChild(inner);
		document.body.appendChild(outer);
		
		var w1 = inner.offsetWidth;
		outer.style.overflow = 'scroll';
		
		var w2 = inner.offsetWidth;
		if (w1 == w2) w2 = outer.clientWidth;
		
		document.body.removeChild(outer);
		return (w1 - w2);
	};

	/**
	 * @member BrowserChrome
	 * @return 			The width of the Browser Window, including the chrome (toolbars, status bars, scrollbars etc)
	 * @type Number
	 */
	this.getWindowWidth = function()
	{
		return window.outerWidth;
	};

	/**
	 * @member BrowserChrome
	 * @return 			The height of the Browser Window, including the chrome (toolbars, status bars, scrollbars etc)
	 * @type Number
	 */
	this.getWindowHeight = function()
	{
		return window.outerHeight;
	};

	/**
	 * @member BrowserChrome
	 * @return 			The width of the visible portion of the window available to your page.
	 * @type Number
	 */
	this.getViewPortWidth = function()
	{
		// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
		return typeof window.innerWidth !== 'undefined' ?
			window.innerWidth
			:
			// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
			typeof document.documentElement !== 'undefined' && typeof document.documentElement.clientWidth !== 'undefined' && document.documentElement.clientWidth !== 0 ?
				document.documentElement.clientWidth
				:
				// older versions of IE
				document.getElementsByTagName('body')[0].clientWidth;
	};

	/**
	 * @member BrowserChrome
	 * @return 			The height of the visible portion of the window available to your page.
	 * @type Number
	 */
	this.getViewPortHeight = function()
	{
		// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
		return typeof window.innerHeight !== 'undefined' ?
			window.innerHeight
			:
			// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
			typeof document.documentElement !== 'undefined' && typeof document.documentElement.clientHeight !== 'undefined' && document.documentElement.clientHeight !== 0 ?
				document.documentElement.clientHeight
				:
				// older versions of IE
				document.getElementsByTagName('body')[0].clientHeight;
	};

}