Placing the component in the center of the visible are of the screen. This helps to place the component to
the center of the screen as we scroll the page content. It supports following browsers IE 6, IE 7, FireFox, Netscape
Below function, get the page horizontal/vertical scrolling offsets of the page.
var width = 0;
var height = 0;
if (document.documentElement &&
typeof document.documentElement.clientWidth === "number")
{
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
else if (document.body && typeof document.body.clientWidth === "number")
{
width = document.body.clientWidth;
height = document.body.clientHeight;
}
else if (typeof window.innerWidth === "number")
{
width = window.innerWidth - 18;
height = window.innerHeight - 18;
}
return { width: width, height: height };
};
return function () {
// Calculate the Height/Width of the component
var componentSize = getcomponentSize(component);
// Calculate the Viewport Height/Width
var viewportSize = getViewportSize();
// Calculate the Page Scrolling
var pageScroll = getPageScrolling();
// Calculate the coordinates to center component
var pageX =
pageScroll.scrollX + ((viewportSize.width - componentSize.width) / 2);
var pageY =
pageScroll.scrollY + ((viewportSize.height - componentSize.height) / 2);
// Update component Window coordinates
component.style.top = pageY + "px";
component.style.left = pageX + "px";
};
};
return { width: component.offsetWidth, height: component.offsetHeight };
};
getPageScrolling = function ()
{
var scrollX = 0;
var scrollY = 0;
if (document.documentElement &&
typeof document.documentElement.scrollLeft === "number")
{ // IE compliant. IE compliant must be before DOM compliant since IE
// always returns 0 for the DOM compliant access. IE's hack always
// returns the correct value.
scrollX = document.documentElement.scrollLeft;
scrollY = document.documentElement.scrollTop;
}
else if (typeof window.pageYOffset === "number")
{ // Netscape compliant.
scrollX = window.pageXOffset;
scrollY = window.pageYOffset;
}
else if (document.body && typeof document.body.scrollLeft === "number")
{ // DOM compliant. IE will always return 0 in this case.
scrollX = document.body.scrollLeft;
scrollY = document.body.scrollTop;
}
return { scrollX: scrollX, scrollY: scrollY };
};
Get the viewport width/height of the screen. This returns the width/height of the visible area of the browser.
getViewportSize = function ()
{var width = 0;
var height = 0;
if (document.documentElement &&
typeof document.documentElement.clientWidth === "number")
{
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
else if (document.body && typeof document.body.clientWidth === "number")
{
width = document.body.clientWidth;
height = document.body.clientHeight;
}
else if (typeof window.innerWidth === "number")
{
width = window.innerWidth - 18;
height = window.innerHeight - 18;
}
return { width: width, height: height };
};
Function that is used to continuously update the component so that it is always centered in the current viewport.
/**
* @param component Reference to the DOM element that represents the component
* "window" that is being centered.
* @return Centering function for component window - creates a closure around the
* DOM element that should be centered in the viewport.
*/
getUpdateFn = function (component) {return function () {
// Calculate the Height/Width of the component
var componentSize = getcomponentSize(component);
// Calculate the Viewport Height/Width
var viewportSize = getViewportSize();
// Calculate the Page Scrolling
var pageScroll = getPageScrolling();
// Calculate the coordinates to center component
var pageX =
pageScroll.scrollX + ((viewportSize.width - componentSize.width) / 2);
var pageY =
pageScroll.scrollY + ((viewportSize.height - componentSize.height) / 2);
// Update component Window coordinates
component.style.top = pageY + "px";
component.style.left = pageX + "px";
};
};
Get the width/height of the specified component, that needs to placed to the center of the screen. This returns the current width/height needed to display the specified component.
/**
* @param component The component to calculate the width/height of
* @return The width/height of the specified component
*/
getcomponentSize = function (component)
{return { width: component.offsetWidth, height: component.offsetHeight };
};