[jQuery] Adding AutoHeight for Accordion SideBar
Here at work this morning with more complete source code. Here's a
better description of what
I'm trying to accomplish. The Height variable in my Javascript code is
right now static and set at
320px vertical. [b]The problem [/b] is that since my height is
predefined, yet my internals are
dynamic because of the accordion menu, as soon as my menu accordions
out, most of my content
is then hidden. I will need to compress these into on js plugin,
(probably be foremost), and great a
height variable that will expand and contract with its content.
Source for Sidebar:
<pre>[code]
var isExtended = 0;
var height = 320; // This is the Variable that I need to be made
Dynamic
var width = 200;
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; });
});
$(document).ready(function() {
});
</pre>[/code]
Source For Expanding Menu:
<pre>[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="js/jquery.js" type="text/javascript"></
script>
<script type="text/javascript" src="js/
sidebar.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function ()
{
$('LI.drawer H2:not
(.open)').next().hide();
$('H2.drawer-handle').click
(function () {
$('LI.drawer
UL:visible').slideUp().prev().removeClass('open');
$(this).addClass
('open').next().slideDown();
});
});
//-->
</script>
</head>
<body>
<div id="sideBar">
sideBar
<div id="sideBarContents">
<div class="sideBarContentsInner">
<h2 class="drawer-head">sidebar</h2>
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle">...</h2>
<ul><li>...</li></ul>
</li>
</ul>
</div>
</div>
</div> <!-- "sidebar" -->
</body>
</html>
[/code]<pre>