Align content vertically JavaScript

Question

Hy,

Basically what I want to achieve is to align some content vertically, in my case name & job.

The issue here is, when resizing the window, I want the content to stay in the middle. I found a small script but I cannot get it to work, still learning the basics of JS.

My markup is the following:

Navigation
Vertically content
Footer (position: absolute; bottom: 0;) // is aligned to bottom.

I created a JSFiddle (http://jsfiddle.net/marianstroiu/khm52p0a/1/), so can you see what I'm talking about.

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('v-content');
                    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.onload = function() {
            setContent();
        }
        window.onresize = function() {
            setContent();
        }

Thank you!

possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — giorgio, Jan 09 '15 at 12:27
I tried, but not solution there. I'm looking for a JS approach. Thank you though! — mstroiu, Jan 09 '15 at 12:39
Just out of curiosity: why would you rather have a JS approach then a CSS approach? As whenever a css solution is available it'll pretty much always be preferable above a js apporach, isn't it? — giorgio, Jan 09 '15 at 14:53
No, I was comparing just now and the CSS solution is the best approach! Thank you again! — mstroiu, Jan 09 '15 at 16:13

score 1 · Accepted Answer · answered Jan 09 '15 at 13:04

1

You are using bootstrap sticky-footer template that add bottom margin and footer to the body element so you should substract 2 * 60 pixel from window height. Here is modified jsfiddle

answered Jan 09 '15 at 13:04

Olim Saidov

2,796
1
25
32

Thank you, that works fine. But I found another solution, and I think is better. http://emergentweb.com/test/valign.html – mstroiu Jan 09 '15 at 13:06

Align content vertically JavaScript

1 Answers1