Clever Geek Handbook

AnythingSlider with dynamic height?

I am using anythingslider and the problem is.

My content items are loaded from CMS and their heights can change. I would like to set the height of the slider to the height of the tallest element, but that doesn't seem to work.

I tried like this:

var max_height = 0;
$(".canythingslider .ccontentelement").each(function() {
    var h = $(this).height();
    if(h > max_height) {max_height = h;}
});
$(".canythingslider").css("height", max_height + "px");
$(".canythingslider").anythingSlider();

Does anyone have an idea how to solve this?

+3


source to share


3 answers


I got it to work now. The resizeContents parameter for AnythingSlider should be set to false, then the above script does what I want.



+2


source


I had the same problem (CMS - TYPO3, I am trying to create a slider with ext.gridelements). For me this solution works better:

var max_height = 0;
$(".anythingslider .contentelement").each(function() {
    var h = $(this).height();
    if(h > max_height) {max_height = h;}
});
$(".anythingslider-outer").css("height", max_height + "px");
$(".anythingslider").anythingSlider(
    'expand': true
);

What I did: wrap a div around anythingslider:

<div class="anythingslider-outer">
    <ul class="anythingslider">...</ul>
</div>


This outer container gets height, now the width is flexible too. Anythingslider stretches to fit this container (with extension = true).

Better yet, this is a JavaScript solution that handles multiple sliders on the same page (not just one slider):

$("ul.anythingslider").each(function(){
    var anythingsliderContainer = $(this).closest(".anythingslider-outer");
    anythingsliderContainer.css("height", 0);
    anythingsliderContainer.find("ul.anythingslider > li").each(function(){
        if($(this).height() > anythingsliderContainer.height()){
            anythingsliderContainer.css("height", $(this).height());
        }
    });
});

$('ul.anythingslider').anythingSlider({
    'expand': true
});
+1


source


Hi if this is helpful please let me know.

`function heightLeveler (group) {

    var tallest = 0;

    group.each(function () {
        thisHeight = $(this).height();
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

heightLeveler(".canythingslider");

0


source






More articles:


All Articles