我的网站上有一个滑块。
这个jsfiddle描述了它的基本工作方式-
我已经编写了将父代的高度设置为内容div的高度的代码。这很好用,直到我介绍了一些没有固定高度的内容,并且在页面上显示该高度时,其高度可能会增加。有没有办法,只要它内部的内容增加或减少它的高度,我就可以动态地更改其父div的高度。
HTML -
<div id="slider_container">
<div id="slider">
<div id="slide1">
Has content that might increase the height of the div....
</div>
<div id="slide2">
Has content that might increase the height of the div....
</div>
<div id="slide3">
Has content that might increase the height of the div....
</div>
</div>
</div>
<input type="button" value="Next" id="btnNext">
<input type="button" value="Previous" id="btnPrev">
<input type="button" value="Add text" id="btnAddText">
<div class="footer">
I appear after the largest container, irrespective of which one is present....
</div>
JavaScript的-
var currSlider = 1;
$('#btnNext').click(function(){
debugger;
var margin = $('#slider').css('margin-left');
if(parseInt(margin) <= -400) {
return;
}
currSlider++;
// Moving the slider
$('#slider').css('margin-left', parseInt(margin) - 200 + 'px');
// Resetting the height...
$('#slider').height($('#slide' + currSlider).height());
});
$('#btnPrev').click(function(){
debugger;
var margin = $('#slider').css('margin-left');
if(parseInt(margin) >= 0) {
return;
}
currSlider--;
// Moving to the previous slider
$('#slider').css('margin-left', parseInt(margin) + 200 + 'px');
// Resetting the height...
$('#slider').height($('#slide' + currSlider).height());
});
$('#btnAddText').click(function() {
$('#slide' + currSlider).text('Hello World'.repeat(100));
});
String.prototype.repeat = function(times) {
return (new Array(times + 1)).join(this);
};
我希望这个“答案”能使您朝正确的方向前进。由于我现在没有时间充分了解此内容,因此我希望向您发送正确的信息。如果您确实知道如何正确执行此操作,请向我发送一条消息,因为我真的很想知道^ _ ^
有关如何使用的示例:(DOMSubtreeModified
从我读到的内容来看,它在IE中不起作用。因此,该propertchange
事件)
$('#slide1').on('DOMSubtreeModified propertychange', function() {
console.log('test',this);
});
另一种选择是使用MutationObserver:
由于我完全误读了原始帖子,因此最好的答案毫无用处。但是由于这个问题实际上真的很容易解决(或者……至少我希望我这次能理解这个问题),所以我认为我会发布一个适用于这种情况的答案:一个包含不同高度的滑块。
原始滑块有什么问题?您将内容移出了容器,这使其隐藏了。但是,由于容器只有固定的宽度,因此仍会占用容器的高度。“ #slider”上的固定高度不会阻止容器从“#slide- *”中拾取高度。如果您设置了容器的高度...一切都很好:-)
这是隐藏的幻灯片的轮廓,已移出“画布”:http : //i.gyazo.com/f2404e85263a7209907fdbc8f9d8e34e.png
我没有通过完成代码来修复您的小提琴。我只是重写了它,以便为您提供易于维护的滑块。这是一个带有工作滑块的小提琴,您可以在其中添加和删除幻灯片中的内容:http : //jsfiddle.net/3JL2x/3/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句