2012-11-02 51 views
1

我需要動態改變一個Div的高度,基於滑動在不用重新加載另一個DIV另一元件的向下的高度,雖然向下滑動我需要改變另一個格相對的高度滑下高度

即當我點擊滑下元素的元素必須滑下去,另一個div的同一實例的高度必須向下設置好的隨着高度滑蓋向上滑動,

這裏是我的代碼

$(window).load(function() { 
var mainheight = $('.main-content-area').height(); 
var sideheight = $('.side-bar').height(); 
if(mainheight > sideheight) { 
$('.side-bar').css('height', mainheight + 10); 
} 
else $('.sidebar').css('height', 'auto'); 
    //Slide toggle for the a page 
$('.toggle-row h3').click(function() { 
    $(this).next('.row-content').slideToggle(300); 
    $(this).children('.right-arrow').toggleClass('down-arrow'); 
    if (mainheight > sideheight){ 
     $('.side-bar').css('height', mainheight +10); 
    } 
    else { 
     $('.side-bar').css('height', sideheight); 
    } 
}); 


}); 
+0

什麼問題? :-) – Abhilash

+1

http://jsfiddle.net/9dL9V/1/這個小提琴可以給你一個關於如何實現它的想法。 –

回答

1

你可以用jQuery UI來實現這個:

資源:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 

HTML:

<div class="mydiv" style="background-color:red;"></div> 
<div class="mydiv" style="background-color:green;"></div> 
<div class="mydiv" style="background-color:blue;"></div> 

CSS:

div.mydiv { height:100px; width:100px; float:left; } 

的jQuery:

$('.mydiv').each(function() { 
    var mydiv = $(this); 
    var slider = $("<div id='slider'></div>").insertAfter(mydiv).slider({ 
     animate: true, 
     orientation: "vertical", 
     range: "min", 
     min: 0,  
     max: 400, 
     value: mydiv.width() + 1, 
     slide: function(event, ui) { 
      mydiv.width(ui.value - 1); 
     } 
    }); 
}); 

小提琴:http://jsfiddle.net/BerkerYuceer/bTtJ5/