Results 1 to 9 of 9

Thread: Verticle Div Centering According to innerHeight

  1. #1
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Verticle Div Centering According to innerHeight

    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 >

  2. #2
    Join Date
    Nov 2005
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote 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
    Last edited by ddadmin; 10-01-2008 at 08:04 AM.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking

    Quote 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...

  7. #7
    Join Date
    Nov 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote 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';
    	}
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •