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 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.

Answer 3

col3LongText: function()
{
    var $flightsPanel = $('#flightsPanel');
    $('.scrollBox', $flightsPanel).mouseover(function() 
    {
        var boxWidth = $(this).width();
        var textWidth = $('.deal-name', $(this)).width();

        if (textWidth > boxWidth) 
        {    
            var animSpeed = textWidth - boxWidth; // 50 pix per sec
            $('.deal-name', $(this)).animate({textIndent: -animSpeed}, 2000);
        }

     }).mouseout(function() {
        $('.deal-name', $(this)).stop().css({textIndent: 0});     
     })

}

Answer 4

use the jQuery Scroller plugin

Try out a demonstration at http://www.vegabit.com/jquery_scroller/