ajax div resize issue?

**enzedbro** · 06-16-2008, 01:01 PM

Hi ,

I am a coding novice and have a 5 page site loading external pages with ajax into a div called dMiddle. When the page loads the css is not working and my footer is overlapping the content of dMiddle. Once I click a link it resizes to the correct size. I have my pageholder set to auto height and values for other divs but I assume it's the javascipt function causing the problem. Here is the code:

function fnReset(){ //this fnReset() call is found in the simpleAjax.js
document.getElementById('dTorso').style.height="auto";
document.getElementById('dLeft').style.height="auto";
document.getElementById('dMiddle').style.height="auto";
document.getElementById('dRight').style.height="auto";
var disMaxHt=Math.max(parseInt(document.getElementById('dTorso').scrollHeight),parseInt(document.getElem entById('dLeft').scrollHeight),parseInt(document.getElementById('dMiddle').scrollHeight),parseInt(do cument.getElementById('dRight').scrollHeight));
document.getElementById('dTorso').style.height=disMaxHt + "px";
document.getElementById('dLeft').style.height="100%";
document.getElementById('dMiddle').style.height="100%";
document.getElementById('dRight').style.height="100%";
}

any suggestions would be greatly appreciated!

**jscheuer1** · 06-16-2008, 04:48 PM

A better solution would be to redesign the page so that its layout is not dependant upon javascript. However, if in fact this routine from your post makes things right when run from the AJAX script, you could add it to your onload events and it might then take care of things onload as well.

If you have no other onload event(s), you could just add one to your existing body tag, ex:

Code:

<body onload="fnReset();">

Now, without seeing the page I can't be sure of everything you have going on there, so there could be other issues.

**enzedbro** · 06-17-2008, 05:35 AM

...there must be other issues. I had a js file linked via a url ref and now I have it in the root folder but still no joy. I tried the onload idea but it seems to have no effect. Thanks for the advice. I'll keep investigating....

**jscheuer1** · 06-17-2008, 05:47 AM

Please post a link to the page on your site that contains the problematic code so we can check it out.

**enzedbro** · 06-18-2008, 08:18 AM

http://www.7018qca.com/innes%5Falast...ile/index.html

here's the link, it's a fictional site for an assignment. Because of my limited knowledge of js the problem could be anywhere....

**jscheuer1** · 06-18-2008, 02:14 PM

I thought you were saying that the page didn't load correctly at first, but that it then was fine once content was imported. I'm seeing the opposite problem. Removing all height dimension from dTorso (not setting any to begin with or at any point in the process of adding content) seems like a viable approach.

A division with a set width will automatically get taller or shorter to match the requirements of its content, even when that content changes - as long as there are no constraints on its height from a parent element or its own styles or attributes.

In any case, in IE 7, when I hit 'news' dTorso was cut off by dSubFooter at the bottom. In IE developer extension, I simply removed the dTorso's style height completely and everything looked fine after that. So, as I say, just don't set height for dTorso, ever.

Thread: ajax div resize issue?

Thread Tools

Search Thread

ajax div resize issue?

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions