Verically sliding div's content

Question

I've a structure like this:

   <div id="cont">
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
     </div>
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
     </div>
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
     </div>
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
     </div>
     ... may be more "entry" divs
   </div>

I want to scroll all of the entry classes up/down like a marquee. Problem is, all of the jQuery plugins that I've found don't work properly, they slide the whole cont div, or slide the entry classes but weirdly and undesireable.

Do you guys have any good plugin? or some code you have already created for that?

Thanks in advance!

EDIT

The container #cont should remain where it started and NOT move, only the entry div's that are in it. Rob has suggested using another div to wrap them, and then move it accordingly. The thing is, I want to trigger something like a marquee only when the entry divs are overflowing their parent's height(isn't the problem here), and I want it to start at the beginning of the div(which means, won't reveal the WHOLE div again, only the overflowing entry divs) and then only reveal the last entry div's that are hidden cause they are overflowing. and then the all animation will repeat itself(from this point, I would like to slide the whole div's content endlessly). Know any plugin that does that?

Answer 1

OK, you can't describe it, but I'm going to have a punt anyway!

It might be that you're missing a viewport around the cont div. That is, the thing that defines the size of the window on cont that you want to see.

I'd consider adding another div. E.g.

<div id="contViewport">
  <div id="cont">
     <div class="entry">
...

You can then set the properties of contViewport so that you only see a bit of it. E.g.

#contViewport {
    height:100px;
    overflow:hidden;
    border: 1px solid black;
}

And then you can add JQuery to scroll that viewport along the lines of this answer:

Scroll to bottom of Div on page load (jQuery)

I have put together a simple example of what I mean here:

http://jsfiddle.net/KeayW/

Answer 2

I have no idea what you want but you inspired me to make a fiddle. Here's a function that will scroll the cont div from the bottom of the page to the top:

function scrollUp(){
    // Get the window's height
    var windowHeight = $(window).height();
    // Get a handle on the container
    var cont = $('#cont');
    // Get the container's height
    var contHeight = cont.height();
    // Set the container to be below the viewport
    cont.css({top:windowHeight});
    // Animate the container to move up over 15 seconds, then restart the animation
    cont.animate({top:'-=' + (windowHeight + contHeight)}, 15000, scrollUp);
}

See this working jsFiddle to see how it works and the CSS.

EDIT: See the comments in this answer for an updated jsFiddle. This solution isn't as all purpose as I'd like it to be, and there's a lot of looping, but it should do the trick!

function scrollUp(){
    // Get a handle on the container
    var cont = $('#cont');

    // Get the container's height
    var contHeight = cont.height();

    // Get a handle on the child elements
    var entries = cont.find('.entry');

    // Records the heights of each entry div
    var heights = [];
    var i = 0;
    for(; i < entries.length; i++){
        heights.push($(entries[i]).outerHeight());    
    }

    // Calculate the total height of all the entries
    var totalHeight = 0;
    for(i = 0; i < heights.length; i++){
        totalHeight += heights[i];   
    }

    // If it doesnt fit, scroll!
    if(totalHeight > contHeight){
        // Change css so that entries will scroll
        entries.css('position','absolute');

        // Set the entries to be below the viewport based on height of elements above
        for(i = 0; i < entries.length; i++){
            var previousEntryHeights = 0;
            for(var j = 0; j < i; j++){
                previousEntryHeights += heights[j];
            }

            $(entries[i]).css({top:(contHeight + previousEntryHeights)});        
        }

        // Set the entries to scroll up based on height of elements below
        for(i = 0; i < entries.length; i++){
            var nextEntryHeights = 0;
            for(var j = i; j < entries.length; j++){
                nextEntryHeights += heights[j];
            }
            $(entries[i]).animate({top:-nextEntryHeights}, 15000, scrollUp);   
        }
    }
}

// Set the marquee in motion
scrollUp();