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> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery (English)" group. To post to this group, send email to jquery-en@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/jquery-en?hl=en -~----------~----~----~----~------~----~------~--~---