How to set the height of a wrapping div to prevent jumps in the content after a responsive slider/ticker?

Question

I have made a super simple ticker/slider thingie with a few lines of code only, and it is somewhat responsive.

See the code at jsBin and the Demo (Resize your screen and watch the ticker resize nicely.)

the basic HTML structure is:

<div id="tickerwrap">
    <ul id="ticker">
        <li>Item 1</li>
        <li>Item 2</li>
        etc.
    </ul>
</div>
<div>Another div content</div> 

And the jQuery is just:

function ticker () {
    $('#ticker li:first').slideUp (function () {
        $ (this).appendTo ($ ('#ticker')).slideDown ();
    });
}

setInterval (function (){ ticker (); }, 2500);

My problem is calculating the height of the wrapper div (#tickerwrap)...

1. How to prevent the "jump" when it is followed by another div? See this demo.

2. How to calculate or set the height of the div when adding it to the DOM?

I have tried to add ticker.stopPropagation(); and ticker.preventDefault(); but it's no good.

I want the height/position to be responsive, too.

Answer 1

Without making assumptions about the number or height of the ticker items (except we assume that there are more than 2), you pretty much need to use javascript to set the size of #tickerwrap. To make it responsive to window resizes, use jQuery's .resize() with a time-delay.

So, add this code (See the demo):

function sizeTickerwrap () {
    var tickerUL        = $('#ticker');
    var numTickerItems  = tickerUL.children ('li').length;
    if (numTickerItems  < 3)
        return;

    //-- The second item will not be in a slide animation.
    var itemHeight      = tickerUL.children ('li:eq(1)').outerHeight (true);
    //-- Adjust for the containing <ul>
    var wrapHeightAdjst = tickerUL.outerHeight (true) - tickerUL.height ();

    $("#tickerwrap").height (numTickerItems * itemHeight + wrapHeightAdjst);
}

//-- Initial call after a settling delay
setTimeout (sizeTickerwrap, 1200);

$(window).resize ( function () {
    /*-- Time-delay the resize response to give browser a chance to settle
        and avoid bogging down the UI.
    */
    this.resizeTimer    = this.resizeTimer || null;
    if (this.resizeTimer)
        clearTimeout (this.resizeTimer);

    this.resizeTimer    = setTimeout (sizeTickerwrap, 200);
} );