you are here: codestackercodes [RSS] → tag align [RSS]

vertical align with javascript

source: http://snipplr.com/view/9321/vertically-align-within-browser-window/

<div id="verticalContainer">
	This text will always be vertically centered inside the browser window
</div>

<script type="text/javascript">
	function getWindowHeight() {
		var windowHeight = 0;
		if (typeof(window.innerHeight) == 'number') {
			windowHeight = window.innerHeight;
		}
		else {
			if (document.documentElement && document.documentElement.clientHeight) {
				windowHeight = document.documentElement.clientHeight;
			}
			else {
				if (document.body && document.body.clientHeight) {
					windowHeight = document.body.clientHeight;
				}
			}
		}
		return windowHeight;
	}

	function setContent() {
		if (document.getElementById) {
			var windowHeight = getWindowHeight();
			if (windowHeight > 0) {
				var contentElement = document.getElementById('verticalContainer');	// Be sure to specify the correct ID

				var contentHeight = contentElement.offsetHeight;
				if (windowHeight - contentHeight > 0) {
					contentElement.style.position = 'relative';
					contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
				}
				else {
					contentElement.style.position = 'static';
				}
			}
		}
	}

	window.onresize = function() {
		setContent();
	}

	window.onload = function() {
		setContent();
	}
</script>
Displaying 1 Code