jQuery scroll text side-to-side

Question

I've seen Giva labs' marquee scroller and SerialScroll but can't figure out how to get it to scroll text in a div from side to side. My guess is I need some other type of extension.

Basically, I have a div of width 100px and text that spans 200px and instead of scrolling it all the way through like a marquee, I want to scroll it left until it reaches the end and then bring it back right. So, side-to-side scrolling.

Suggestions?

Answer 1

This page has a marquee scrolling side to side - might be worth checking out.

Answer 2

I decided to take Stephen Delano's answer and actually get it working. I also made improvements on it.

My script activates on hovering over with it with the mouse.

Here is my JSFiddle.

And here is just the script:

$('.scroll-box').mouseenter(function () {
            $(this).stop();
            var boxWidth = $(this).width();
            var textWidth = $('.scroll-text', $(this)).width();
            if (textWidth > boxWidth) {
                var animSpeed = textWidth * 10;
                $(this).animate({
                    scrollLeft: (textWidth - boxWidth)
                }, animSpeed, function () {
                    $(this).animate({
                        scrollLeft: 0
                    }, animSpeed, function () {
                        $(this).trigger('mouseenter');
                    });
                });
            }
        }).mouseleave(function () {
            var animSpeed = $(this).scrollLeft() * 10;
            $(this).stop().animate({
                scrollLeft: 0
            }, animSpeed);
        });

If you wanted to have it auto-scroll and not wait for any mouse events you could do this.

If you would want to change the speed of the scroll, you'd just have to change the 10 to another number. The bigger the number, the slower the scroll.

Answer 3

I came across this post yesterday when I was looking for something to do the same thing. Although I went a different route, I figured out how to get this accomplished.

First, you need your markup. We are going to use DIV tags for this example:

<div class="scroll-box">
  <div class="scroll-text">This is the text that is too long to fit in the box</div>
</div>

Next, we need to style it:

.scroll-box {
  width: 100px;
  height: 1.2em;
  overflow: hidden;
  position: relative;
}
.scroll-text {
  position: absolute;
  white-space: nowrap;
}

Now we need some jQUery:

$(document).ready(function() {
  $('.scroll-box').bind('marquee', function() {
    var boxWidth = $(this).width;
    var textWidth = $('.scroll-text', $(this)).width();
    if (textWidth > boxWidth) {
      var animSpeed = textWidth - boxWidth * 20; // 50 pix per sec
      $(this)
        .animate({scrollLeft: textWidth - scrollWidth}, animSpeed)
        .animate({scrollLeft: 0}, animSpeed, function() {
          $(this).trigger(marquee);
        });
    }
  }).trigger('marquee');
});

And there you have it! A nice little side-to-side marquee.

DISCLAIMER: I didn't even test this, and most of it is off the top of my head, but you should be able to work out the minor kinks if there are any because the basic concept is there.