Setting Height

[alfred3x]

I've got a couple of AJAX calls on a page. They populate separate but related divs. I'd like both divs to be the same size, so I call this function from both returning functions:

	reSize: function () {
		var htCat = xHeight(sn_crumbs.elCategories);
		var htTtl = xHeight(sn_crumbs.elTitles);
		var maxHt = Math.max(htTtl, htCat);
		console.log('pre height: ' + htCat + ', ' + htTtl + ' max: ' + maxHt);
		xHeight(sn_crumbs.elCategories.style.height, maxHt);
		xHeight(sn_crumbs.elTitles.style.height, maxHt);
		htTtl = xHeight(sn_crumbs.elTitles);
		htCat = xHeight(sn_crumbs.elCategories);
		console.log('post height: ' + htCat + ', ' + htTtl + ' max: ' + maxHt);
	}

I'm getting this reply (one page):

pre height: 275, 0 max: 275
post height: 275, 0 max: 275
pre height: 275, 0 max: 275
post height: 275, 0 max: 275

So it doesn't look like the height is being updated.

Any help appreciated.
- AAA

[alfred3x]

OK, there were a number of problems with the above code, and I've nailed most of it, I think. But the underlying problem which persists is that I'm populating the divs' innerHTML, then immediately want to get the size of the div with the newly added content.

The browser hasn't had a chance to process the new innerHTML content.

So, is there a way to do that?

Thx,
- AAA

[MikeFoster]

Hi AAA,

I've seen this issue before, especially in Firefox. You might have to use setTimeout to run the resize function a few milliseconds after the innerHTML assignment.

[SimplyFu]

when div is hidden, height will be zero, I don't know whether you have your style changed before reading height value.

[alfred3x]

Thx for the help, guys. The issue still isn't resolved...

It has kind of morphed over time, though...

The problem now is:

Once the height is set, it stays set, until the page is reloaded. But since we're using AJAX, the page doesn't get reloaded anytime soon. So, how can I reset the height (so that it grows organically, based on content) before pumping new content into innerHTML?

Thanks again for the help,
- AAA

[alfred3x]

OK, found the solution:

height: auto;

This allows the div to resize based on the contents.

Thanks for your help,
- AAA