Height auto ajustable to the content

[BeatLaG]

A great feature would be to let the slider adjust automatically to the height for each slide. I mean, for example. If the first slide content has a 500px height, the slider adapts the height to the slider size. Second slide has 250px height, the slider adapts it height to that size...

It is very useful when you are adding content dynamically. When you don´t know the size for each slide.

This would be a perfect feature for the slider.

Anyway, congrats for such great work!

Greetings!

[pixelmeister2]

Hi, i'm struggling with the same problem, until now i found a solution to adjust the height of sequence div via JS and JQuery. It works for me. But now i've the problem of positioning the Elements of the sequence "li", due their position is relative, and only works for me if positioned with percent values (%). As the sequence container now have different sizes, the elements appear on each page on a different position.

Any Idea on positioning the element with an fix distance related to the top ?

Here's the code to get and adjust the sequence height:

jQuery(document).ready(function(){
        /* on clicking a menu point get the hash to find the active div "contText" wich contains the Content with the most height */
    jQuery(".menu li a").click(function(){
        var hash = this.hash.substr(1);
        var path = hash + " .contText";
        var contTextH = jQuery("li#"+path+"").height();
        divH = contTextH + 200;
        if(divH < 600) {
            divH = 600;
        }
    });

    /* Animate the containerDiv to height */
    function adjHeight() {
        jQuery('#sequence').animate({
            height: [divH, 'easeOutQuart']
        }, 750, function() {
            // Animation complete.
        });
    };
});

---

My menu looks like this:

<ul class="nav menu">
    <li class="item-103"><a href="http://www.yourdomain.xx/#intro" >intro</a></li>
    <li class="item-104"><a href="http://www.yourdomain.xx/#intro2" >intro2</a></li>
    ...
</ul>

[pixelmeister2]

Finally i've got it to run properly. By adding the absolute values to my li's:

#sequence > .sequence-canvas > li {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.title {
    top: 20px;
}
/* and so on... */

in addition i had to add "preventDefault();" to my click function to prevent the browser window jump to the bottom of the page after clicking a hash link.

jQuery(".menu li a").click(function(c){
        var hash = this.hash.substr(1);
        var path = hash + " .contText";
        var contTextH = jQuery("li#"+path+"").height();
        divH = contTextH + 200;
        if(divH < 600) {
            divH = 600;
        }
        c.preventDefault(); // this prevents browser to jump to the bottom after click.
    });

I hope this works for you too. (until now i only tested it with FF 20.0.1)

Thanks for Sequence.js and keep up this nice piece of work.

Greetings Pixelmeister

[IanLunn]

Moved this to Under Consideration. I'd like to add this feature in v2 but as elements are often position: absolute the height would have to be calculated by getting position and height of every element in a step via JS, which would be a lot of overhead. Needs a better solution.