JQUERY height issue

JQUERY height issue

Hi friends,

I want to change content of one of div using jquery and animate the div height and width according to new height and width.


I want to change about 12 contents. Everything working fine with my code except height issue. My question is how to calculate newly loaded contents height dynamically

Please help me



I wrote code as this :

  1. $('.accMenu li').click(function(){
  2.     var win=this.title;                       
  3.         $('#mainWin').animate({"opacity":"0"},700,function(){
  4.                                                           
  5.         $('#mainWin').html("Loading");
  6.         data(win);
  7.                                                            });
  8.        
  9.       });
  10. function data(fun){
  11.     $('#mainWin').html('<div id="password" ><div class="accWinTitle">Change Password</div><table width="650" border="0" cellspacing="0" cellpadding="0" style="float:left;"><tr><td width="25" height="40">&nbsp;</td><td width="115" height="40" align="left">&nbsp;</td><td width="16" height="40" align="left">&nbsp;</td><td width="272" height="40" align="left">&nbsp;</td><td width="222" height="40" align="left">&nbsp;</td></tr><tr><td height="30">&nbsp;</td><td height="30" align="left">Current Password</td><td height="30" align="left">:</td><td height="30" align="left"><input name="textfield3" type="password" class="accTextFileld" id="textfield3" /></td><td align="left">&nbsp;</td></tr><tr><td height="30">&nbsp;</td><td height="30" align="left">New Password</td><td height="30" align="left">:</td><td height="30" align="left"><input name="textfield4" type="password" class="accTextFileld" id="textfield4" /></td><td align="left">&nbsp;</td></tr><tr><td height="30">&nbsp;</td><td height="30" align="left">Confirm Password</td><td height="30" align="left">:</td><td height="30" align="left"><input name="textfield5" type="password" class="accTextFileld" id="textfield5" /></td><td align="left">&nbsp;</td></tr><tr><td height="45">&nbsp;</td><td height="45" align="left">&nbsp;</td><td height="45" align="left">&nbsp;</td><td height="45" align="left"><input name="button" type="submit" class="accSubmitBtn" id="button" value="Save" /><input name="button2" type="submit" class="accSubmitBtn" id="button2" value="Cancel" /></td><td height="45">&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table></div>');
  12.     $('#mainWin').height('10px');
  13.     $('#mainWin').width('50px');
  14.     $('#mainWin').css('opacity',1);
  15.   
  16.     $('#mainWin').animate({'height':'300px'},1000,function(){
  17.         $('#mainWin').animate({'width':'700px'},2000);
  18.                             //alert("ALL Done");                         
  19.                                                      });
  20.     //$('#mainWin').height('0px');
  21.     //$('#mainWin').width('0px');
  22.    
  23.       
  24.     }