redraw div after ajax update

jman78 · Jan 18, 2008

I need to update the div height after an ajax update. Currently in IE 7, the div retains its current height until the browser window is resized. Is there a workaround available to fix this behavior?

Thanks!

Jason

kaht · Jan 18, 2008

set the height style of the div

Code:

document.getElementById("divId").style.height = "69px";

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

cbalke · Jan 22, 2008

in a related question, how would you dynamically update the height of that div based on the height of another div?

in my example, i have a content div and a background div strictly for the content(it's a translucent box). when the content div height changes, i want the background div height to change automatically to compensate for the new height.

any help on this one would be greatly appreciated! thanks!

dwarfthrower · Jan 22, 2008

Code:

document.getElementById("div1Id").style.height = document.getElementById("div2Id").style.height;

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}
Webflo

kaht · Jan 23, 2008

dwarfthrower, that won't necessarily work. obj.style.height (or width) is only a readable value if it's already been set by javascript. If the height or width has not been set by javascript yet, referencing these properties will yield no values. Here's an example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

window.onload = function () {
   document.getElementById("div2").style.height = "100px";
   document.getElementById("div2").style.width = "100px";
}

function od() {
   var d1 = document.getElementById("div1");
   var d2 = document.getElementById("div2");
   alert("div1 dimensions: " + d1.offsetWidth + " x " + d1.offsetHeight);
   alert("div2 dimensions: " + d2.offsetWidth + " x " + d2.offsetHeight);
}

function sd() {
   var d1 = document.getElementById("div1");
   var d2 = document.getElementById("div2");
   alert("div1 dimensions: " + d1.style.width + " x " + d1.style.height);
   alert("div2 dimensions: " + d2.style.width + " x " + d2.style.height);
}

</script>
<style type="text/css">

div#div1 {
   height:100px;
   width:100px;
   background-color:red;
   margin-bottom:20px;
}

div#div2 {
   background-color:blue;
   margin-bottom:20px;
}

</style>
</head>
<body>

<div id="div1"></div>

<div id="div2"></div>

<input type="button" value="get dimensions with offset" onclick="od()" />
<input type="button" value="get dimensions with style" onclick="sd()" />

</body>
</html>

div1 pulls it's dimensions from it's css declaration, and div2 pulls it's dimensions from the javascript that runs when the page loads. If you click "get dimensions with style" button you'll see that div1 does not provide any values. However, if you click the "get dimensions with offset" button, you'll get dimensions of both boxes.

So, always make sure to use offsetHeight and offsetWidth to pull the dimensions from an object.

Two things to point out when using these methods:

1) they will also take border sizes into consideration, so if you would have had a 10 pixel wide border around the divs, the dimensions would have been 120 x 120

2) when pulling these values from a div and assigning them to another div, you need to specify what units of measurement you are using (pixels). Since these functions return integers, you'll have to append that to the end of the string, otherwise it won't work in standards-compliant browsers (in other words, not IE):

Code:

document.getElementById("someDiv").style.height = document.getElementById("someOtherDiv").offsetHeight [!]+ "px"[/!]

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

redraw div after ajax update

jman78

Programmer

kaht

Programmer

cbalke

Technical User

dwarfthrower

Programmer

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor