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;
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:
Post a Comment