Basically I have a div id 'register_stretcher' and within this div I have a dropdown select control. If the user chooses the option 'Other', the 'Other' text input field appears. For this to display correctly the 'register_stretcher' div needs to be extended in height by 30px.

 

What I do first of all is get the initial height of the 'register_stretcher' div (this is created dynamically). then depending on what option is selected by the user, the div is resized accordingly. Not sure what I have done wrong here:

 

jQuery(document).ready(function(){
  orig_height=jQuery("#register_stretcher").height();
 });
 
 jQuery(\'#visit_source\').change(function(){
  if(jQuery(this).val() === "other"){
   jQuery("#register_stretcher").height(orig_height+30);
   jQuery("#other_reason_label").show();
   jQuery("#other_reason_input").show();
  }
  else{
   jQuery("#register_stretcher").height(orig_height);
   jQuery("#other_reason_label").hide();
   jQuery("#other_reason_input").hide();
  }
 });

 

Works in Firefox/Chrome but not IE7/8. In IE it seems to not get the value of orig_height.