jquery: how to loop a div

Question

using jquery, how can i auto scroll a div continuously? like the news and features section of this website: http://animalsasia.org/. And also when you hover over the slider it stops the scrolling until you hover away.

is there a jquery plugin that will do that? Any help would be much appreciated.

Answer 1

If you inspect the element, you can see that it's changing the top position of the elements.

As the list starts, item 1 is within the bounds of the container.

------
item 1
item 2
item 3
------
item 4

As the ticker progresses, it moves item 1 outside of the bounds of the container

item 1
-----
item 2
item 3
item 4
------

As item 1 is moved out of bounds, it then moves it to the bottom of the container and continues moving the other items up

-----
item 2
item 3
item 4
-----
item 1

It's fairly trivial to implement yourself, but jquery vticker should contain the functionality you desire.

Answer 2

You can use the marquee html tag( non standart but should work almost everywhere ) , or check this jquery plugin:

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

Answer 3

I wrote some working example. There is live example on JsFiddle. The idea is to create container with position=relative, and put div with text into it. Also, we need to create a copy of text to avoid empty space when last part of text is showing. jQuery animate() function will do the rest.

HTML:

<div class="news_container">
    <div class="news">
       <div class="text">
           Long text
        </div>   
    </div>
</div>

CSS:

.news_container {
  border: 1px solid black;
  width:150px;
  height: 300px;   
  overflow: hidden;
  position: relative;
  padding: 3px;
}

.news {
  position: absolute; 
  left: 0px;
  top: 0px;
}

JavaScript:

(function($, undefined) {
  $.fn.loopScroll = function(p_options) {
    var options = $.extend({
        direction: "upwards",
        speed: 60
    }, p_options);

    return this.each(function() {
      var obj = $(this).find(".news");
      var text_height = obj.find(".text").height();
      var start_y, end_y;
      if (options.direction == "downwards") {
        start_y = -text_height;
        end_y = 0;
      } else if (options.direction == "upwards") {
        start_y = 0;
        end_y = -text_height;
      }

      var animate = function() {
        // setup animation of specified block "obj"
        // calculate distance of animation    
        var distance = Math.abs(end_y - parseInt(obj.css("top")));

        //duration will be distance / speed
        obj.animate(
          { top: end_y },  //scroll upwards
          1000 * distance / options.speed,
          "linear",
          function() {
            // scroll to start position
            obj.css("top", start_y);
            animate();    
          }
        );
      };

      obj.find(".text").clone().appendTo(obj);
      $(this).on("mouseover", function() {
        obj.stop();
      }).on("mouseout", function() {
        animate(); // resume animation
      });
      obj.css("top", start_y);
      animate(); // start animation       
    });
  };
}(jQuery));

$(".news_container").loopScroll();

Options:

• direction ("downwards" or "upwards") - direction of text movement;
• speed - speed of movement.

Here is example of using this plugin with options:

$("#example3").loopScroll();
$("#example4").loopScroll({ speed: 120 });
$("#example1").loopScroll({ direction: "downwards" });
$("#example2").loopScroll({ direction: "downwards", speed: 30 });

Answer 4

Looks like a set of DIV positioned absolutely within the container. They're probably using a setInterval timer to modify the top position of each of the DIVs by a fixed amount every few milliseconds. Once a DIV scrolls completely off the top (the top position is the negative of the DIV height) they probably reposition it at the bottom of the stack. Having enough DIVs to fill the entire container plus some, give the illusion of continuous scrolling because you don't see them pop off the top and back on to the bottom.