javascript - collapsing vertical menu while using css tables -


i have 3 column layout made css tables each column can fill browser perfectly. first column menu , need hide / move left on click , middle column fill in space. should not move out of screen leave little bit exposed user can click area have animate in.

heres fiddle...http://jsfiddle.net/vjmfq/

right noticed first column wont move unless either display:none content inside or animate content width 0px(but want column little exposed dont want eliminating content).

i tried animating inner contents width down when animate width comes in both sides, trick wouldnt work, example , inner content should butt against right side of first column if use float:right messes content in middle column, content in first row against side using margin-left...and if animate width down doesnt animate left side, width gets smaller both sides @ same time.

$(document).ready(function() { $(".two").click( function(event){ event.preventdefault(); if ($(this).hasclass("isdown") ) {     //show before animation!     $(".one").stop().animate({width:"197px"}, 170);     $(".one div").stop().animate({width:"137px"}, 310, function(){      });     $(this).removeclass("isdown"); } else {     //hide after animation!     $(".one").stop().animate({width:"10px"}, 310);     $(".one div").stop().animate({width:"5px"}, 310, function(){      });     $(this).addclass("isdown"); } return false; }); }); 

like said can moving without content inside reducing width code supplied trying content inside doesnt work.

i love able first column marginleft:-185px , pull middle section on doesnt move column think because of css table layout

ok, think widths. need remove width div.two, , in animate functions, make sure end div.one being 50px (margin-left) wider div.one div. @ least, seems work me. http://jsfiddle.net/vjmfq/1/


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -