Geek Answers Handbook

Endless horizontal jQuery code

I am looking for an endless horizontal news ticket. I played with SmoothScroll and SimpleDivScroll.

SmoothScroll does not work well with elements of different widths, and SimpleDivScroll is only compatible with jQuery 1.4+, and I'm stuck in jQuery 1.3.2.

Any other alternatives?

+7
jquery jquery-plugins
source share
5 answers

Try the following:

jQuery Twitter Marquee by Takien

+7
source share

Here is a simple ticker. I have not tested it in all browsers.

<html> <head> <title>Horizontal scroller</title> <style type="text/css"> #scroller{height:100%;margin:0;padding:0;line-height:30px;position:relative;} #scroller li{float:left;height:30px;padding:0 0 0 10px;list-style-position:inside;} #scrollerWrapper{height:30px;margin:30px;overflow:hidden;border:1px #333 solid;background:#F2F2F2;} </style> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var speed = 5; var items, scroller = $('#scroller'); var width = 0; scroller.children().each(function(){ width += $(this).outerWidth(true); }); scroller.css('width', width); scroll(); function scroll(){ items = scroller.children(); var scrollWidth = items.eq(0).outerWidth(); scroller.animate({'left' : 0 - scrollWidth}, scrollWidth * 100 / speed, 'linear', changeFirst); } function changeFirst(){ scroller.append(items.eq(0).remove()).css('left', 0); scroll(); } }); </script> </head> <body> <div id="scrollerWrapper"> <ul id="scroller"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li> Maecenas sollicitudin, ante id ultrices consectetur, ipsum nisl varius ipsum, sit amet congue eros nulla vitae urna.</li> <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </li> </ul> </div> </body> </html>
+4
source share

You can try jQuery webTicker , this is the only one that will not stop scrolling after completing the entire list. Because it constantly rotates your items. You can use several pages per page and each style separately. A CSS example is also provided on the page itself.

It has not been tested with jQuery 1.3, however it is fully compatible with jQuery 1.4.1.5 and 1.6

+4
source share

Have you seen liScroll ? Depending on what you mean by “infinite”, it can do what you need (there is a gap between the last element and the wrapper).

0
source share

There is a jQuery.Marquee plugin. License: ISC.

Other available plugins are listed at https://plugins.jquery.com/tag/ticker/ .

0
source share

More articles:


All Articles