ehime Posted November 18, 2008 Share Posted November 18, 2008 I need this [code2]$(document).ready (function() { $('textarea.expanding').autogrow({ maxHeight: 100, minHeight: 30, lineHeight: 16 });})[/code] to end up as my height var for this var isExtended = 0;var height = 320;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; }); }); Link to comment Share on other sites More sharing options...
ehime Posted November 18, 2008 Author Share Posted November 18, 2008 Okay well no responses last night, but here at work this morning with a 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. The problem 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 willneed to compress these into on js plugin, (probably be formost), and great a height variable that will expand and contract with its content. This all usesJQuery btw.Source for Sidebar: var isExtended = 0;var height = 320;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() {}); Source For Expanding Menu: <!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"> <a href="#" id="sideBarTab"><img src="images/main/slide-button.png" alt="sideBar" title="sideBar" /></a> <div id="sideBarContents"> <div class="sideBarContentsInner"> <h2 class="drawer-head">side<span>bar</span></h2> <ul class="drawers"> <li class="drawer"> <h2 class="drawer-handle">...</h2> <ul><li><a href="#">...</a></li></ul> </li> </ul> </div> </div> </div> <!-- "sidebar" --></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.