Saturday, June 16, 2012

JavaScript - position div ( block / box ) in the center of the page - compute top & left position

Position a box in the middle of the screen (horizontal and vertical) using JavaScript.
The following function dynamically computes (using the height and width of the browser and of the box to be centered) the left and top size in pixels to be used for positioning the box.

function computePositionLeftTopElement(_element_width, _element_height) {
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    if(_element_height < screenHeight) {
        var layerContentPositionTop = Math.round((screenHeight - _element_height) / 2);
    } else {
        var layerContentPositionTop = 0;
    }
    if(_element_width < screenWidth) {
        var layerContentPositionLeft = Math.round((screenWidth - _element_width) / 2);
    } else {
        var layerContentPositionLeft = 0;
    }
    return [layerContentPositionLeft, layerContentPositionTop];
}

To place the box as a layer over the page content, the CSS properties can be used:
position:fixed;
z-index:10;

No comments: