Can the boxes grow from the bottom rather than from the top?

[cesar-mso]

Hi everyone

I'm trying to align the boxes so that, instead of "growing" from the top, they do this from the bottom. I've read as much as I can and tried several solutions but nothing I feel provides me what I need.

To paint a picture, check the example (https://css-tricks.com/examples/MovingBoxes/). The boxes with content are all aligned to the top of the container, the box to the sides are made smaller while the one in focus is in full view, all aligned to the top.

Basically I'm looking to turn this upside-down, e.g. to have all boxes, both the smaller and the full view, to be aligned to the bottom of the images.

Is this possible? Any and all help is highly appreciated!! :)

PS: I've added an image to show what I mean, wasn't aware the I could (first timer!! :P)

[Mottie]

Hi @cesar-mso!

It really isn't possible with css with the way the plugin is set up... the ul element has a position:absolute applied to it while the li's inside do not have any position setting. If set to position:relative they can not be set to the bottom. You can set them to the bottom using position: absolute, but then everything breaks because absolute positioning breaks the panels out of the document flow & breaks the height calculation.

It is possible to set a margin-top on each panel using jQuery (see demo), but it's not really smooth. Also upon initialization, panels start at the top and animate into position after a short delay... you can get rid of this by setting the initAnimation option to false.

$(function(){

    var setMargin = function( event, mb, curPanel ) {
        // adjust this setting to move the bottom of the boxes up or down
        var positionAdjustment = 5;

        setTimeout( function() {
            var height = mb.heights[ curPanel - mb.adj ] - positionAdjustment;
            mb.$panels.each( function( indx ) {
                $( this ).stop( 'custom', false ).animate({
                    'margin-top' : indx === curPanel - mb.adj ? 0 : height - mb.heights[ indx ] * mb.options.reducedSize
                }, {
                    duration : event.type === 'initialized' ? 0 : mb.options.speed,
                    queue : 'custom'
                });
            });
            mb.$panels.dequeue( 'custom' );
        }, mb.options.delayBeforeAnimate + 10 );
    };

    $('#slider').movingBoxes({
        startPanel      : 1,      // start with this panel
        wrap            : false,  // if true, the panel will infinitely loop
        buildNav        : true,   // if true, navigation links will be added
        navFormatter    : function(){ return "●"; }, // function which returns the navigation text for each panel
        initialized     : setMargin,
        beforeAnimation : setMargin
    });

});

Overall, it's not an ideal solution, and really this project is really out-dated. I will continue to answer questions, but I don't have the time to maintain it.

[cesar-mso]

Hi Mottie!

Thank you for the quick reply and detailed explanation, highly appreciated!! I completely understand the status of this project, I didn't intend this to really be an "issue" but cound't find any other way to ask a question.

You did however verify what I thought from my testing. Thank you for the sample code, I'll try to implement and adjust to see how it works on my project, hopefully it will fit.

Thank you again for the reply and hard work!! :)