All of the fields must be filled.
You cannot swap a section with a page.
You must first select a group before adding a user to it.
Home
Login
Contact
Articles
Newsletter
With the simulation of popup windows layered in the page, the need to play with the z-index CSS property and being able to dynamically center an element, commonly a div, becomes a necessity for everyone's javascript library. In this article, we will look at a simple function which will take the user's browser dimensions and center a given element's id.
The logic behind this is very simple, we must first get the view pane dimensions, in order to calculate the height and width that we are working with. This has a few conditional factors due to the various document level variables for each browser:
|
function getViewPaneSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//FF and others
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth
|| document.documentElement.clientHeight ) ) {
//IE
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth
|| document.body.clientHeight ) ) {
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [ myWidth, myHeight ];
}
|
Aferwards, we need to know if the user has scrolled down or to the right. Since scrolling down midway to the page, the "top" is no longer 0, it is a value in pixels of how much distance has been scrolled:
|
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft
|| document.body.scrollTop ) ) {
//FF and others
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft
|| document.documentElement.scrollTop ) ) {
//IE6
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
|
Once we've got our utility functions to calculate the size of the browser and where we are in terms of scrolling, we can do some simple math to center the element:
|
function centerElement(elementId) {
var div = document.getElementById(elementId);
var w = div.offsetWidth;
var h = div.offsetHeight;
var dimensions = getViewPaneSize();
var scrollOffset = getScrollXY();
var offsetTop = parseInt((((dimensions[1] - h) / 2) + scrollOffset[1]));
if (offsetTop <= 0) {
offsetTop = 50;
}
div.style.left = ((((dimensions[0] - w) / 2) + scrollOffset[0]) + "px");
div.style.top = offsetTop + "px";
}
|
Enjoy!
