Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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:</p> <pre><code>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); } </code></pre> <p><a href="http://jsfiddle.net/4sjqD/" rel="nofollow">See this working jsFiddle</a> to see how it works and the CSS.</p> <p><strong>EDIT:</strong> 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!</p> <pre><code>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 &lt; entries.length; i++){ heights.push($(entries[i]).outerHeight()); } // Calculate the total height of all the entries var totalHeight = 0; for(i = 0; i &lt; heights.length; i++){ totalHeight += heights[i]; } // If it doesnt fit, scroll! if(totalHeight &gt; 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 &lt; entries.length; i++){ var previousEntryHeights = 0; for(var j = 0; j &lt; 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 &lt; entries.length; i++){ var nextEntryHeights = 0; for(var j = i; j &lt; entries.length; j++){ nextEntryHeights += heights[j]; } $(entries[i]).animate({top:-nextEntryHeights}, 15000, scrollUp); } } } // Set the marquee in motion scrollUp(); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload