Question

I have this very usefull little piece of javascript that centers mig div. By i would like to make it apply to 3 divs on the same site, without repeating the same piece of code 3 times.

Any ideas on how to do it?
Putting all 3 divs into 1 divs that takes care of it, is not and option.

<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('outer');
                var contentHeight = contentElement.offsetHeight;

                if (windowHeight < 570) {
                    contentElement.style.position = 'relative';
                    contentElement.style.top = '30px';
                }
                else 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();
    }
    //-->
    </script> 

Regards Troels

Answer 1

You don’t need to check if document.getElementById exists. It has been supported since the Roman Empire.

Pass the id or the actual element that has to be centered to your function. That removes the dependency on a fixed element (#outer) in your case and makes it more flexible. Also try to name your functions to be indicative of what they are actually doing. setContent is a very generic name and doesn’t indicate the centering aspect anywhere.

function centerElementWithId(id) {
    ..
    var contentElement = document.getElementById(id);
    ..
}

Then call it thrice,

centerElementWithId('outer')
centerElementWithId('secondDiv')
centerElementWithId('thirdDiv');