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(){});
});