Auto Refreshing my Height var.

Auto Refreshing my Height var.

I have a pretty funky sliding/accordion(ing) menu right now as the main
navigational means of my page, unfortunately the height is set at a static
number since I cannot get a "Get Curr Height" function to work, I've tried
about a dozen different ways, and no dice each time. I am not using the
dimensions.jquery.js so I know it limits my abilities to capture height a
touch, but I would think that there is a way to do it without adding dim?

Some of the things that I tried were scrollHeight, innerHeight, and just
plain height. I must be messing up a line of code though if none of these
work.... Anyone want to throw in a couple words?


var isExtended = 0;
var width = 200;
var height = 480;
var slideDuration = 1000;
var opacityDuration = 1500;


function extendContract(){

   if(isExtended == 0){
      sideBarSlide(0, height, 1, width);
      sideBarOpacity(0, 1);
      isExtended = 1;
      // make expand tab arrow image face left (inwards)
      $('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/(\.[^.]+)$/, '-active$1');
   }
   else{
      sideBarSlide(height, 0, width, 1);
      sideBarOpacity(1, 0);
      isExtended = 0;
      // make expand tab arrow image face right (outwards)
      $('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/-active(\.[^.]+)$/, '$1');
   }

}

function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth) {
   $("sideBarContents").css ({'height': fromHeight, 'width': fromWidth});
   $("#sideBarContents").animate( { 'height': toHeight, 'width': toWidth }, { 'queue': false, 'duration': slideDuration }, "linear" );
}

function sideBarOpacity(from, to){
   $("#sideBarContents").animate( { 'opacity': to }, opacityDuration, "linear" );
}

   
$(function(){
  // Document is ready
   $('#sideBarTab').hover( function() { extendContract(); return false; },function(){});

});