Menu
I'm looking for an endless horizontal news style ticker. I've played around with SmoothScroll and SimpleDivScroll.
SmoothScroll doesn't seem to work well with elements of different widths and SimpleDivScroll is only compatible with jQuery 1.4+ and I'm stuck with jQuery 1.3.2.
Any other alternatives?
656
Try this:
jQuery Twitter Marquee by Takien
111
Here is a simple ticker. I haven't 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>
You can try the jQuery webTicker it is the only one to not stop the scrolling after the whole list completes. As it continously rotates your items. You can use multiple ones per page and style each one indipendently. A CSS sample is also provided on the page itself
It has not been tested with jQuery 1.3 however its fully compatible with jQuery 1.4,1.5 and 1.6
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
