Question

I’ve got a dock of icons that I would like vertically centered. This of course would vary, based on screen resolution, etc. What I’ve currently done, is got the height of a parent DIV, which is sized at 100% of the viewport:

    var pageHeight = $('#sidebar').height();

Then, I get the height of the icon container, as this is not predetermined in CSS:

    var socialDockHeight = (document.getElementById('social_dock_container').offsetHeight * numberOfIcons);

Note: this only retrieves the height of one icon, for some reason, perhaps because they are coded in an array? I then calculate the new position, and assign it to the element, via jQuery:

    var y = (pageHeight / 2) - (socialDockHeight / 2);
    $("#social_dock_container").css({ 
            top: y + "px"
    }).show();

This works great in Chrome, but not IE, FF, or Safari.

Answer 1

If you’re not going to use $(window).height(), then use $('#sidebar').outerHeight();, so you get all the other good stuff like paddings and margins on the element.

Also don’t forget about when a user resizes their window. Use .resize(); for that.