Linear scrolling text with jQuery
You don’t need to use an obsolete “marquee” tag to get a scrolling text effect; You can clean your HTML and use a cross-browser solution, try the following jQuery code that I wrote…
to create advanced horizontal/vertical scrolling text
take a look at jQuery Scroller Plugin at
http://maxvergelli.wordpress.com/jquery-scroller-plugin-scrolling-made-easy/
Happy scrolling!
Max 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple jQuery scrolling function by Max Vergelli</title>
<style type="text/css">
div.scroller{
position:relative;
height:24px;
width:200px;
display:block;
overflow:hidden;
border:#CCCCCC 1px solid;
}
div.scrollingtext{
position:absolute;
white-space:nowrap;
font-family:'Trebuchet MS',Arial;
font-size:18px;
font-weight:bold;
color:#000000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scrollingtext').bind('marquee', function() {
var ob = $(this);
var tw = ob.width();
var ww = ob.parent().width();
ob.css({ left: -tw });
ob.animate({ left: ww }, 20000, 'linear', function() {
ob.trigger('marquee');
});
}).trigger('marquee');
});
</script>
</head>
<body>
<div class="scroller">
<div class="scrollingtext">
scrolling text scrolling text scrolling text scrolling text scrolling text
</div>
</div>
</body>
</html>
Advertisement
Like this:
One blogger likes this post.
Share on Facebook
Thanks for code
Very usefull
unforunnately, I dont now how to make it stop on mouse hover
Look here http://maxvergelli.wordpress.com/2010/09/17/scrolling-text-with-jquery-how-to-pause-or-resume-scrolling-on-mouseover-mouseout-control-velocity-and-direction/
perfecto!
Thanks…This is cool… how do I get it to 1. scroll a list inline and 2. so it looks like a continuous loop?
Hello,
Nice script. It’s working fine.
Just one question: is it possible to have the scrolling text begin immediately after the end of the last word, as if there was no end ?
Thanks!
Can this be used to scroll and array of users?
Example: Picture of user 1, name of user 1, last post of user 1, Picture of user 2, ect..
For problems with larger text (jumps to start), just change
ob.animate({ left: ww }, 20000, ‘linear’, function() {
to for example
ob.animate({ left: -(3 * ww) }, 80000, ‘linear’, function() {
hope it helps someone
niceeeee
i’ll try….best alternate method of outdated marquee
thnx
How to change the background color of text marquee..its transparent and I want my fonts RED and background Black…
Also how to add mouseover and mouseout as you mentioned, please do let me know I am not an expert in Html…
Hi
how to change to alternate marque style like it should go left to right and right to left
Thanks,
Sisir
How to make marquee stop on mouse-over?
The jquery site is still down & I would like to try out scroller
thx bro,
very usefull coding
Hi, it took me more time to write this message than to install and make it work on my site! Thanks a lot
This is good question