I have a page that contains javascript that I think is resizing my divs when the page is loaded. In the body of the page is a <body onLoad="onLoad();">
It is a page I inherited, I set the page/div widths in the css, when the page loads it displays correctly for as split second then resizes to way too large.
Can someone confirm whether it is the javascript causing this? thanks
It is a page I inherited, I set the page/div widths in the css, when the page loads it displays correctly for as split second then resizes to way too large.
Can someone confirm whether it is the javascript causing this? thanks
Code:
var DHTML = (document.getElementById || document.all || document.layers);
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
if(this.obj != null)
this.style = (document.getElementById(name)).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function updateLayout()
{
// Note: This ignores margins!
var left = new getObj("layoutleft");
var right = new getObj("layoutright");
var header = new getObj("layoutheader");
var content = new getObj("layoutcontent");
var footer = new getObj("layoutfooter");
var width;
var height;
var padding;
var border;
// Get the browser width and height!
if (self.innerHeight) // all except Explorer
{
width = self.innerWidth;
height = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
width = document.body.clientWidth;
height = document.body.clientHeight;
}
// Height = document height minus height of header and footer
height = height - footer.obj.offsetHeight;
// and footer top is at height - footer height
footer.style.top = height + 'px';
height = height - header.obj.offsetHeight;
// Set height of left column
left.style.height = height + 'px';
// if right column exists
if(right.obj) {
// TODO - Fix Me!
// Subtracts it's width from the document width
width = width - right.obj.offsetWidth;
// set it's left position and height
right.style.left = width + 'px';
right.style.height = height + 'px';
}
// if left column exists
if(left.obj) {
// Set top of left bar
left.style.top = header.obj.offsetHeight + 'px';
// Subtract it's width
width = width - left.obj.offsetWidth;
// Work out border and padding!
left.style.height = height + 'px';
border = left.obj.offsetHeight - left.obj.clientHeight;
padding = left.obj.clientHeight - height;
// Set it's height
left.style.height = height - (border + padding) + 'px';
// and content's left position
content.style.left = left.obj.offsetWidth +'px';
}
// Area left over is size of content area!
// Set top of content area
content.style.top = header.obj.offsetHeight + 'px';
// Height - work out border and padding
content.style.height = height + 'px';
border = content.obj.offsetHeight - content.obj.clientHeight;
padding = content.obj.clientHeight - height;
// Set the height
height = height - (border + padding);
content.style.height = height + 'px';
if(content.obj.clientHeight != 0) {
height = content.obj.offsetHeight - (border/2);// - padding;
}
// Width - work out border and padding
content.style.width = width + 'px';
border = content.obj.offsetWidth - content.obj.clientWidth;
padding = content.obj.clientWidth - width;
content.style.width = width - (border + padding) + 'px';
width = content.obj.offsetWidth - (padding + (border/2));
// See if we have wizardcontent & buttons areas
var wizardcontent = new getObj("wizardcontent");
var wizardbuttons = new getObj("wizardbuttons");
// Resize wizard content and buttons within content area!
if(wizardcontent.style != null && wizardbuttons.style != null)
{
wizardcontent.style.width = width + 'px';
height = height - wizardbuttons.obj.offsetHeight;
wizardbuttons.style.top = height + 'px';
wizardcontent.style.height = height + 'px';
border = wizardcontent.obj.offsetHeight - wizardcontent.obj.clientHeight;
padding = wizardcontent.obj.clientHeight - height;
wizardcontent.style.height = height - (border + padding + 10) + 'px';
}
else {
content.style.overflow = "auto";
}
}
/* open external links in new window, from Site Point ([URL unfurl="true"]www.sitepoint.com/)[/URL] */
function extLinks()
{
if (!document.getElementsByTagName) return;
var a = document.getElementsByTagName("a");
for (var i=0; i < a.length; i++)
{
var anchor = a[i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
function onResize()
{
// Update the layout
updateLayout();
}
function onLoad()
{
// Update the layout
updateLayout();
// Initialize the menus
if(this["initializeMenus"] != undefined)
initializeMenus();
// Ensure external links open in new windows!
extLinks();
// Set the window onresize property here - so we don't have to in the HTML body tag
// allows HTML to pass WC3 validation.
window.onresize = onResize;
// Force the ContentTable to resize - fixes problem with IE showing
// an incorrect horizontal scrollbar in content area when page is initially
// loaded.
var contenttable = new getObj("ContentTable");
if(contenttable.style != null)
{
contenttable.style.width = '98%';
}
}