jquery : dynamically assigning div height

Question

I have a div with class "divItemclass" .for this class, i have put height as auto.This div contains some data(text/ images ) .Now i want to change the class to another class when user clicks on the delete button. I am using the below code to do so

$("#divRoundItem").removeClass().addClass("divGlowToDelete").fadeIn(500);

and in my css

.divGlowToDelete
{
background-color:Red;
border:1px solid red;
height:auto;
 }

But when this happens,since i had given the height as auto .It is not showing red bg color for the entire div.If i change the height from auto to a fixed height(ex :20 px ) .It is showing red color bg as of that much height. But i cant mention a height as the length of contents comes in side the div is dynamic. How to solve this ? I think it would be good if i can take the current height of div and assign it to the new class (divGlowToDelete) at runtime (when changing the class)

How to do ? thanks in advance

Answer 1

Will it work if you set the height with jQuery after adding the new class?

$("#roundItem")
    .removeClass()
    .addClass("divGlowToDelete")
    .css("height","auto")
    .fadeIn(500);

Answer 2

You can get or set the height of the div by calling the height method.

Answer 3

It might be an idea to try setting the height of the <div> explicitly with jQuery when the page loads:

$(document).ready(function() {
    ...
    var $theDiv = $('#divRoundItem');
    $theDiv.css('height', $theDiv.height() + 'px');
    ...
});

Answer 4

Is your problem related to clearing floats?

http://www.quirksmode.org/css/clearing.html