Verticle Div Centering According to innerHeight

**Vinsion** · 11-03-2005, 09:49 PM

Alright, here's the deal, I'm fairly new to JS, I've been using it for some time, but never really took the time to learn much of it. BUT, recently I've been designing a website for a company I have an internship and am running into a few problems with my JS (or so I think).

My goal is to vertically center a div within the body. The contents of the div are pretty slim so that's why I'm bothering even doing this. I've tried everything I know right including many different appoaches with CSS. For now I've settled for a JS method on doing this because in all my time making stylesheets I've never had this problem (I've never really had to vertical cent enything though).

Here's the upper half of my body code...

<body onload="valignBody('wrap')">
<div id="wrap">

And the function I'm passing this div's id to looks like this...

function padWrap(wrap) {
var free_height = (window.innerHeight / 2) - 190;
document.getElementById(wrap).style.padding-top=free_height + 'px';
}

I suspect that I'm missing something blatenly obvious, but I'm stumped, so I came here.

Thank You,

< Vinsion.NET >

**Wedgy** · 11-04-2005, 05:31 AM

Are you choosing how long the page is or do you at least have pre-knowledge of how long it is? Or does it vary according to viewer choices, such as browser window-width?

If you know already how long the page is, it seems you could just do the centering yourself. Where does the variation enter into it?

**jscheuer1** · 11-04-2005, 08:28 AM

Wedgy, page height is never set (at least not the apparent page height when the page's true height is less than the height of the browser window), it always varies depending upon how high the browser viewport is. This can vary dramatically among screen resolutions/sizes and user preferences.

Vinsion, window.innerHeight is not valid in IE, the most widely used browser. With a valid doctype:

document.documentElement.clientHeight

is a good equivalent, without one:

document.body.clientHeight

each usually being zero when the other is accurate so, code like this will get you the height in most browsers and on most pages:

Code:

var winInHt=window.innerHeight? window.innerHeight : Math.max(document.body.clientHeight, document.documentElement.clientHeight)

It is usually critical for both document.body and document.documentElement that the page be loaded before you access these objects and any measurements derived from them but, I see you are already doing this 'onload' so, good work on that front.

**Vinsion** · 11-05-2005, 12:45 AM

Originally Posted by jscheuer1

Wedgy, page height is never set (at least not the apparent page height when the page's true height is less than the height of the browser window), it always varies depending upon how high the browser viewport is. This can vary dramatically among screen resolutions/sizes and user preferences.
Vinsion, window.innerHeight is not valid in IE, the most widely used browser. With a valid doctype:

document.documentElement.clientHeight

is a good equivalent, without one:

document.body.clientHeight

each usually being zero when the other is accurate so, code like this will get you the height in most browsers and on most pages:

It is usually critical for both document.body and document.documentElement that the page be loaded before you access these objects and any measurements derived from them but, I see you are already doing this 'onload' so, good work on that front.

Sweet, thanks for the feedback. Although...it seems to still not be working quite right. In responce to your question about the height of the content, it's a static page, no php here, and it's really not that tall, I believe it's exactly 380px, so unless someone's using a crazy resolution, I think it'll be fine.

Here's my updated code inside my external js file:

Code:

function valignBody(wrap) {
	var free_height = (document.body.clientHeight / 2) - 190;
	document.getElementById(wrap).style.padding-top=free_height + 'px';
}

And here's my updated code inside my html:

HTML Code:

<body onload="valignBody('wrap')">
<div id="preload"><script src="preload.js" type="text/javascript"></script></div>
<div id="wrap">

And my doctype

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sorry if I'm not giving you a lot to go on, but I don't really know what else to do. If you want to see the site itself, and the code at large, here's the url: Dieman Motorsports . Vinsion .net (of course with no spaces).
Email address removed
AIM: Mushin Vin

Once again thanks,

a bunch,

seriously.

< Vin >

Edit: Edited by WA as requested

**jscheuer1** · 11-05-2005, 05:56 AM

Well, your function:

Code:

function valignBody(wrap) {
	var free_height = (document.body.clientHeight / 2) - 190;
	document.getElementById(wrap).style.padding-top=free_height + 'px';
}

Should be, if you followed my instructions, akin to:

Code:

function valignBody(id) {
	var winInHt=window.innerHeight? window.innerHeight : Math.max(document.body.clientHeight, document.documentElement.clientHeight)
	var free_height = (winInHt/ 2) - 190;
	document.getElementById(id).style.padding-top=free_height + 'px';
}

The rest looks OK but, it is misleading to use wrap as both the label for the function's argument and the id of the division and may confuse IE due to its tendency to assume document.all as a prefix in code sometimes. So, I would change the function above as I have, using id as the label for the argument.

**Vinsion** · 11-05-2005, 07:46 AM

Originally Posted by jscheuer1

Well, your function:

Code:

function valignBody(wrap) {
	var free_height = (document.body.clientHeight / 2) - 190;
	document.getElementById(wrap).style.padding-top=free_height + 'px';
}

Should be, if you followed my instructions, akin to:

Code:

function valignBody(id) {
	var winInHt=window.innerHeight? window.innerHeight : Math.max(document.body.clientHeight, document.documentElement.clientHeight)
	var free_height = (winInHt/ 2) - 190;
	document.getElementById(id).style.padding-top=free_height + 'px';
}

The rest looks OK but, it is misleading to use wrap as both the label for the function's argument and the id of the division and may confuse IE due to its tendency to assume document.all as a prefix in code sometimes. So, I would change the function above as I have, using id as the label for the argument.

Ahhhh....whoops, I am teh dumb. Alrighty, I updated my js file, uploaded it to my server, and...nothing. I'm testing the page with Firefox 1.0.71098398238b Opera, IE, and even shelling IE with Avant browser. Nada. I tried just taking that one function out of the file entirely, and the other functions work just fine, but when I have that function in (jscheuer1's) it seems to break the JS all together.

My JS file in whole:

Code:

//Image.src Swap

function swapSrc(id,new_src) {
	document.getElementById(id).src=new_src;
}

//Vertical Centering

function valignBody(id) {
	var winInHt=window.innerHeight? window.innerHeight : Math.max(document.body.clientHeight, document.documentElement.clientHeight)
	var free_height = (winInHt/ 2) - 190;
	document.getElementById(id).style.padding-top=free_height + 'px';
}

//Email Hiding

function hideEmail(user, site, display) {
	document.write('<a href=\"mailto:' + before_at + '@' + after_at + '\">');
	document.write(display + '</a>');
}

function hideEmailwithTool(user, site, display, tool) {
	document.write('<a class=\"tool\" href=\"mailto:' + user + '@' + site + '\">');
	document.write(display + '<span>' + tool + '</span></a>');
}

I really don't know what else to do right now, I'm working on getting this function to work, and I want to get it working before I continue with the development of the rest of the site. If any of you happen to know of any other methods of getting a 380px DIV to be vertically aligned within the body (it being the only div set to render), with any coding [html, css, js, etc]...your code is welcome. Again, you can check out beta site here - http://dieman.vinsion.net

As always, I thank you guys for helping me out,

< Vin >

Chances are it's something really simple...

**muppet** · 11-21-2005, 07:19 AM

Unless I'm missing something a simple valign will do the trick

<body>
<table height=100% width=100%>
<tr>
<td valign=middle>
<div style='height:50;width:50;background-color:red'>
Test me
</div>
</td>
</tr>
</table>
</body>

If you want to dynamically place the div in the center of the viewable screen, then that will need code. I have done it in vbscript for ie, but it should be able to be done in javascript.

**jscheuer1** · 11-21-2005, 09:03 AM

Originally Posted by Vinsion

when I have that function in (jscheuer1's) it seems to break the JS all together

Ya, I made a silly error, using 'padding-top' instead of 'paddingTop'. I've really got to stop posting untested code, that would have been obvious to me right away if I had. Anyways, muppet's method looks good on paper to me but may not be applicable in a given situation due to the requirement that the table take up the entire page. Here is my code, upgraded to coexist with other elements on the page (it will cover things that are in its 'landing area') and tested in Opera8 FF1.0.7 and IE5.1+. Not sure why Opera liked a slightly different method than FF and IE when it came to adding (actually subtracting) things up:

Code:

function valignCenter(id) {
	var winInHt=window.innerHeight? window.innerHeight : Math.max(document.body.clientHeight, (document.documentElement? document.documentElement.clientHeight : 0))
	var free_height = window.opera? winInHt/ 2 - document.getElementById(id).offsetHeight : winInHt/ 2 - (document.all? document.all[id] : document.getElementById(id)).offsetHeight/2;
	with ((document.all? document.all[id] : document.getElementById(id)).style) {
	zIndex=100;
	position='absolute';
	top=free_height + 'px';
	}
}

**Vinsion** · 12-05-2005, 09:45 AM

Sweet, it's semi-working now. It vertically centers, but for some reason the horizontal center stops working, it just defualts to the left side of the window (Maybe because of my CSS centering method: margin:0px auto;) I'll play around with a few other methods of centering the div.

Also: Is there a JavaScript event called onResize()? I'm just curious as to if there is a way for me to call the vertical centering function on resize so it's always in the right place.

Thanks again.

Thread: Verticle Div Centering According to innerHeight

Thread Tools

Search Thread

Verticle Div Centering According to innerHeight

Bookmarks

Bookmarks

Posting Permissions