/** * adjustscreen.js * * This script provides the ability to adjust the min-height and min-width of any element or group of elements based * on the client's screen size. * * I had an abnormal case where, due to how the content was styled, when I resized the main content div with javascript, * the body of the page (which was defined as height 100%) resized down with it, leaving unused whitespace at the bottom. * Unfortunately, there wasn't an elegant css workaround to fit the body to the client's height after javascript changes, * so I created this script to force the page to the proper height with js. Naturally, users with javascript disabled * won't be affected either way. * * Note: The bottom of the script contains a window onload modifier, which automatically modifies all elements of the class * "resizeHeight" and "resizeWidth" by the screen height and width, respectively. * * @author Jess Mann - jess-mann.com * @date Jan 21st, 2008 * @version 1.0 */ /** * Gets all the elements of a given className * @param className the className to search for * @return An array of all the elements matching the given className */ document.getElementsByClassName = function(className) { var children = document.getElementsByTagName('*') || document.all; var elements = new Array(); for (var i = 0; i < children.length; i++) { var child = children[i]; var classNames = child.className.split(' '); for (var j = 0; j < classNames.length; j++) { if (classNames[j] === className) { elements.push(child); break; } } } return elements; } /** * Gets the window height, defaulting to screen height and then 480 if it cannot be determined * @return An int representing the number of pixels in the screen height */ function getScreenHeight( ) { /** Set the default screen size if NOTHING else can be determined. */ var screenHeight = 480; /** If window.innerHeight is available and reasonable (which should be true for non-IE users), then use it */ if ( typeof( window.innerHeight ) === 'number' && window.innerHeight > 0 ) { screenHeight = window.innerHeight; } /** Otherwise, check if documentElement.clientHeight is around, and prefer that. This will catch IE 6 in standards compliance mode. */ else if ( document.documentElement && document.documentElement.clientHeight ) { screenHeight = document.documentElement.clientHeight; } /** Otherwise, as a (semi) last resort, go to body.clientHeight. This will catch IE 4 */ else if ( document.body && document.body.clientHeight ) { screenHeight = document.body.clientWidth; } /** If none of that can be found, then detect the WHOLE screen size. At least it's something, right? Prefer availHeight to height */ else { /** All browsers except netscape v < 3 */ if (navigator.appName !== "Netscape" || parseInt(navigator.appVersion,10)>3) { if (screen.availHeight > 0) { screenHeight = screen.availHeight; } else { screenHeight = screen.height; } } /** Netscape 3 behaves oddly */ else if (navigator.appName === "Netscape" && parseInt(navigator.appVersion,10)===3 && navigator.javaEnabled()) { var jToolkit = java.awt.Toolkit.getDefaultToolkit(); var jScreenSize = jToolkit.getScreenSize(); screenHeight = jScreenSize.height; } } return screenHeight; } /** * Gets the window width, defaulting to screen width and then 640 if it cannot be determined. * @return An int representing the number of pixels in the screen width */ function getScreenWidth( ) { /** Set the default screen size if NOTHING else can be determined. */ var screenWidth = 480; /** If window.innerWidth is available and reasonable (which should be true for non-IE users), then use it */ if ( typeof( window.innerWidth ) === 'number' && window.innerWidth > 0 ) { screenWidth = window.innerWidth; } /** Otherwise, check if documentElement.clientWidth is around, and prefer that. This will catch IE 6 in standards compliance mode. */ else if ( document.documentElement && document.documentElement.clientWidth ) { screenWidth = document.documentElement.clientWidth; } /** Otherwise, as a (semi) last resort, go to body.clientWidth. This will catch IE 4 */ else if ( document.body && document.body.clientWidth ) { screenWidth = document.body.clientWidth; } /** If none of that can be found, then detect the WHOLE screen size. At least it's something, right? Prefer availWidth to width */ else { /** All browsers except netscape v < 3 */ if (navigator.appName !== "Netscape" || parseInt(navigator.appVersion,10)>3) { if (screen.availWidth > 0) { screenWidth = screen.availWidth; } else { screenWidth = screen.width; } } /** Netscape 3 behaves oddly */ else if (navigator.appName === "Netscape" && parseInt(navigator.appVersion,10)===3 && navigator.javaEnabled()) { var jToolkit = java.awt.Toolkit.getDefaultToolkit(); var jScreenSize = jToolkit.getScreenSize(); screenWidth = jScreenSize.width; } } return screenWidth; } /** * Adjusts the minHeight value of an element, by the id specified, according to the screen height * @param elId the id of the element * @param offset the amount to be subtracted from the screen size */ document.adjustIdHeight = function( elId, offset ) { document.getElementById(elId).style.minHeight=(getScreenHeight()-offset)+"px"; } /** * Adjusts the minWidth value of an element, by the id specified, according to the screen width * @param elId the id of the element * @param offset the amount to be subtracted from the screen size */ document.adjustIdWidth = function( elId, offset ) { document.getElementById(elId).style.minWidth = (getScreenWidth()-offset)+"px"; } /** * Adjusts the minHeight value of all elements of the class specified, according to the screen height * @param className The className of the element * @param offset the amount to be subtracted from the screen size */ document.adjustClassHeight = function( className, offset ) { var elements = document.getElementsByClassName( className ); var newHeight = getScreenHeight()-offset; for (var i = 0; i < elements.length; i++) { elements[i].style.minHeight = newHeight+"px"; } } /** * Adjusts the minWidth value of all elements of the class specified, according to the screen width * @param className The className of the element * @param offset the amount to be subtracted from the screen size */ document.adjustClassWidth = function( className, offset ) { var elements = document.getElementsByClassName( className ); var newWidth = getScreenWidth() - offset; for (var i = 0; i < elements.length; i++) { elements[i].style.minWidth = newWidth+"px"; } } /** Modify window.onload to automatically resize the height and width of all appropriately classed elements. */ var oldOnload = window.onload; window.onload = function () { if(oldOnload) { oldOnload(); } document.adjustClassHeight("resizeHeight",0); document.adjustClassWidth("resizeWidth",0); }