JQuery side scroll text

Question

I have seen the Giva lab scroller marquee and SerialScroll , but can not figure out how to make it scroll the text in the div from side to side. I guess I need a different type of extension.

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

Suggestions?

Answer 1

This page has side-by-side scrolling - maybe worth checking out .

Answer 2

I decided to accept Steven Delano's answer and actually make it work. I also improved it.

My script is activated when you hover over 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 want it to automatically scroll and not wait for mouse events, you could do it .

If you want to change the scroll speed, you just need to change 10 to another number. The larger the number, the slower the scroll.

Answer 3

Yesterday I came across this message when I was looking for something like that. Although I went the other way, I figured out how to do it.

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> 

Then 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 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 here it is! Nice little side for side by side.

DISCLAIMER: I have not even tested this, and most of it is not in my power, but you should be able to work out small breaks, if any, because there is a basic concept.

Answer 4

 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 5

I am using jScroller of Marcus Bordin.

I have a sample working at the top of my blog: http://www.leniel.net/

Markus also has a separate version, which is jScroller2. This does not need jQuery.

Download is available here: http://jscroller.markusbordihn.de/download/

Answer 6

You can watch jRollingNews . You can display any RSS feed or any custom content that you want. Use your code generator, it simplifies the work, and you have a preview.

Disclaimer: I did it.