10 Sep

The Silky Smooth Marquee

As we abused the Internet back in the 90 with tags like <blink> and <marquee> the last 10 years have seen the gradual extinction of these proprietary tags until we did full circle and the marquee effect appears in CSS 3.

There's actually a very strong business case and requirement for the marquee tag - since the only the alternative is often a hacky solution (I feel) that shifts the CSS left position which, depending on your browser, will begin to eat away at your CPU.

Funnily enough, the marquee tag is pretty well supported amongst the browser, but the actual effect is poorly executed natively (which is kind of odd if it's built directly in to the browser). So let's solve this with JavaScript.

Demo

This demonstration shows 3 jQuerified marquees and 3 standard marquees. You can see how the untouched marquees are jumpy to animate, even in the later browsers such as Firefox 3 and Safari - let alone IE6.

Demonstration of jQuery Marquee

Download

Download jQuery marquee plugin

Usage

Include the latest jQuery and the plugin file via the script tag, then:

$('marquee').marquee(optionalClass);

Note that the enhanced marquee doesn't particularly have to apply to a marquee tag - but it is reading the effect details from the tag - currently it will default to behaviour = scroll, dir = left, speed = 2. There's no (current) option for setting an overall default - but I'll add this if people feel it's required.

How it Works

There's a few solutions available that create a similar effect, but this plugin does two things differently:

Progressively enhances the marquee tag making this plugin uber easy to use.
The effect is not achieved using CSS. It's created using the overflow scroll on the element, which massively reduces the work the browser has to do - i.e. there's no re-rendering due to changes in CSS, it's scrolling using native functions of the browser.

It's worth noting that behind the scenes, the marquee tag is being lifted out of the DOM and replaced with divs. However, when it's chains in jQuery, it returns the new enhanced marquee div, so you can still hook click events, or navigate the DOM element if you wish - i.e. business as usual.

However, be warned - as we are lifting the marquee's contents in to a new div, it means and predefined events or data will be lost. To avoid this, make sure the marquee plugin is called before hand.

Events

The following events can be bound to:

stop - triggers when a loop is completed
start - triggers when a loop is started
end - completely finishes the loops if set

The follow events can be triggered by the user:

pause/stop (both do the same thing)
unpause/start (both do the same thing)

Support

I've written the marquee to run on a single timer function rather than one per marquee, the idea being that you could go crazy and add lots of marquees, and this code should scale^†.

~~Also, the marquee doesn't currently support direction="up" or direction="down"...yet. Come back later and I'll upgrade if there's any interest.~~

The marquee plugin now supports all directions.

† I've not tested it with more than 3 marquees yet - feel free to test and give feedback

Other Uses

I've played around with the implementation of the marquee and I've been able to easily create the effect of the user clicking and dragging the marquee back and forth - which is very smooth (note that before I start the drag effect, I need to trigger a stop event):

$('div.demo marquee').marquee('pointer').mouseover(function () {
  $(this).trigger('stop');
}).mouseout(function () {
  $(this).trigger('start');
}).mousemove(function (event) {
  if ($(this).data('drag') == true) {
    this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
  }
}).mousedown(function (event) {
  $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
  $(this).data('drag', false);
});

You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)

164 Responses to “The Silky Smooth Marquee”

sim October 22nd, 2009 at 1:19 pm

hi all,

well, this is not working for me. I have paced my all images in a div with 2 more nested divs carrying the description and price of the image!

will this plugin work on the div, if yes, please, suggest me the solution!
Thank you!
iwanttobelieve October 23rd, 2009 at 6:48 pm

"Thanks for the script.
Would'nt it be nice to have a "seamless scroll" option for longer texts...
So one doesn't have to wait - and the texts starts again at its end"

Yes I also would like to have this feature, but nice script anyway!
Caron October 29th, 2009 at 4:29 pm

Hi !
I am currently trying to use your plugin on a set of images in divs where each div element has the property
float:left;
The plugin works fine but my elements are now unfloatable.
How can i fix this ? Any idea ??

Thanks
Rmajeed November 1st, 2009 at 12:57 pm

Hi

Thanks for the script... nice one
but my requirement is a continues vertical scroller... am using u r script, when all the text scrolled up after that to start again there is a very big white space which shouldn’t be there, when the scroller reached to the end after that immediately the first post should start without any empty spaces….

RMajeed
Thanks
H.P. November 1st, 2009 at 2:04 pm

Thanks for this fine work, we use it for the smooth animation of content boxes in our shopsystem.
Jonathan Hunt November 2nd, 2009 at 12:37 am

This plugin is not working for me on Firefox 3.5.4 (no scrolling) or IE8 (no content rendered at all), using jQuery 1.3.2.
Jonathan Hunt November 2nd, 2009 at 1:24 am

Have it working in IE8 and below, but not on Firefox or Safari.
Manic November 14th, 2009 at 10:58 pm

In longer content marqee in IE8 moves very very slow. I think it has a problem with white-space:nowrap included in code. Is there a solution?
Newbie November 23rd, 2009 at 8:47 pm

Was wondering, is there a way to make it go slower than "scrollamount='1'"?
eshanne November 25th, 2009 at 9:29 am

lol i'm not about the script but is about the background here.. lol .. that was so fantastic.. great job !!!
Daniele Pignedoli November 30th, 2009 at 3:45 pm

Nice plugin, indeed, but is really poor on documentation.. what are the options avaiable?
How to set the scroll up or down instead of left-to-right?
O. Esner December 2nd, 2009 at 3:20 pm

Hello,

how can I change (reset) a width of line when text has changed? If i set new (longer) text after plugin is loaded, the line is not scrolled completely.

Thanks for any reply.
Peter December 11th, 2009 at 6:09 am

What is the best way to make it pause
like this example
http://www.afbdetroit.com
thanks
Chris K December 11th, 2009 at 5:18 pm

Great script. Looks great in Safari and Firefox. I've run into a problem with IE7 and 8 though. The scrolling text I'm using exceeds the width set in the marquee and it looks like IE is constraining the width of the text to fit that width instead of keeping it on one long line. Any idea how to fix that? Here's the link:

http://associationdatabase.com/aws/HARDI/pt/sp/home_page

and the css file:

http://www.hardinet.org/screen.css
Vijendra Mishra December 15th, 2009 at 1:35 pm

Nice piece of code but why it takes so long in IE8 to show marquee text ??
Leo December 26th, 2009 at 2:24 am

I need to replace the text on the marquee at certain event,
how i can do it?
thanks you for the plugin
Keith January 5th, 2010 at 5:08 pm

Leo> I think you van use the innerText of the marquee element for that.

I was wondering if other people agree with me that it would be nice to have a more accurate control of the speed. To me it seems that on a narrow marquee 1 is too slow and 2 is too fast and the scrollamount property will not accept floating point number.
rAdmin January 10th, 2010 at 4:49 am

I was able to get it working including pause on mouseover. Thanks for creating it.

I also would like to request more speed control. 1 is just a hair fast.
I tried to hack it to .5 in the js file but it didn't render.
Huy January 20th, 2010 at 9:45 pm

In asp.net, after a form post-back, the marquee stops working. Anybody got a fix?
Charlie February 1st, 2010 at 5:01 pm

Amazing. Awesome.

Thanks
Paul Vaughan February 11th, 2010 at 3:28 pm

Hiya. I attempted to add this code to a page already running with jQuery 1.4.1, however it didn't work. Swapping 1.4.1 for 1.2.6 fixed the problem immediately.
ferit February 11th, 2010 at 3:45 pm

Great plugin, but scrollamount property 1 is just a hair fast. I tried to 0.5 in the js file but it didn't render.
mark February 11th, 2010 at 5:31 pm

3 marquees with 60 a hrefs in it - not so smooth, about the same as jStockTicker-1.1

thanks anyway.
Joseph Marinaccio February 21st, 2010 at 3:04 am

Thanks for sharing your work!
Reino February 23rd, 2010 at 1:38 pm

Great piece of work!
Forrest February 26th, 2010 at 3:35 am

I have used your marquee plugin on one site and appreciate your efforts to provide this solution.

I have encountered one problem that I have not been able to resolve. In Firefox the scrolling marquee (up) resets after the fourth item becomes visible. It works fine in all other browsers. Any idea why this might be happening and how to resolve it?

Thanks.
Christopher Evans March 10th, 2010 at 11:36 pm

I am curious though if create a header on my website with this scrolling text... if every time a visitor switches pages, I don't want the scrolling text to start over. Anyway to keep it from resetting to the beginning and just continuing where it left off? I hope my questions makes sense.
DigitalCHET March 15th, 2010 at 3:17 am

Wow...! This looks and works great, but I have a couple of questions.

I would like to begin the scroll only on mouseover from a stopped state, and once the cursor mouseouts continues until the current scroll is done then stops.

So firstly, how would this script be modified to accomplish the initial stopped state? Swapping the start and stop around in the jQuery script does not have any effect until one mouseovers.

And secondly, how to modify it to continue until the end of the current scroll after mouseout?

Unfortunately, my proficiency level with jQuery is only amateurish so I would very much appreciate assistance.

Thanks in advance.
Ronny Sherer June 13th, 2010 at 7:24 am

The it is a bit too fast for me, so I modified the class:
Added parameter 'stepDelay' to the function:
$.fn.marquee = function (klass, stepDelay) {

At the function beginning added parameter check which sets the default value:
if (stepDelay == undefined || isNaN(parseInt(stepDelay, 10)) || stepDelay <= 0) stepDelay = 25;

Finally replace the timeout of 25 (line 91) by stepDelay.
setTimeout(animateMarquee, stepDelay);

Use it like:
$('#myMarquee').marquee('pointer', 60);

Enjoy
Rafi August 10th, 2010 at 7:47 pm

Hi,
Does it support dynamically changes? if i'd like to do the following while it's running:
document.getElementById("marquee1").direction = 'left'; //this is not working

how can I do that??

Thanks, Rafi
p.s: grate code
bijay August 19th, 2010 at 5:16 am
Hi, i have used jquery 1.4.1.js and jquery.marquee.js plugin.. My problem is , the scrolling text on Firefox browser doesn't work except on the 1st image, but when i see on safari the scrolling text on all the images are working fine.
my code is like this
```
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/jquery.marquee.js"></script>
<script type="text/javascript">
   $(function () {
       $('div.caption marquee').marquee();
});
</script>
```
on the head page
So ,my question is--
Is those plug ins i am using is not a Firefox compatibility?
Hoping to get your assistance..
Cheer's!
lol768 August 19th, 2010 at 12:24 pm

Hi

Thanks for this. I am interested in stopping the marquee when moused over and vice versa. Your demo includes this but I don't want the dragging functionality.

Thanks in advance. Have tried onmouseover etc.
TheEagle August 30th, 2010 at 8:06 pm

I'm trying to use it with Divs and images inside.But I have problem in FireFox:The loop restart instead of being continuous as in IE browser.
Eric Newman September 3rd, 2010 at 9:53 pm
So this thing is great, but one problem I had, was restarting the marquee after a single loop. I really wanted it to loop continuously, but with different data on each pass. Setting it loop once gave us a good "end" event to trap, and reset the content. But a start event wouldn't restart it. My fix for now was to implement a new event, called "looped" and modify the plugin to generate this event every time it reaches the end. This way, I could let it loop continuously, and still have a mechanism to add the new content in. (The content is too large for me to add it all in at once.)

I added one line as follows:
```
                    if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {

                        $marqueeRedux.trigger('looped'); // Ejn mod for looping

                        if (marqueeState.behavior == 'alternate') {
                            marqueeState.dir *= -1; // flip
                        }
```
at line 53. Then in my page, I added a bind method :

$('div.mymarquee').bind('looped', function(event) { .... });

I hope this helps someone. Please consider adding some mechanism, if not this one to allow restarting after a single loop completes.
Fred September 29th, 2010 at 2:12 pm

Hi,

looks great but I haven't figured out how to get it work with img tags. e.g. 2 or more images will show below each other.

pumpCurry October 6th, 2010 at 2:53 am

Hello.
I tried Eric Newman's "looped event" modify. very yum but I have new problem.

code:

        $('#mymarquee').bind('looped', function(event) {
            $(this).trigger('stop');
            $(this).scrollLeft = 0; // reset position if moved
            $(this).find("p:first").text("looped :D");
        });

html body:

<marquee id="mymarquee" behavior="scroll" direction="left" width="300" scrollamount="3"><p>hoge</p></marquee>

I hoped change p-tag text to "looped", it worked
but I hoped change marquee status to stop(paused) , it NOT work cannot stop it.

If you know of how to fix, please tell me. thanks.

TerryH October 16th, 2010 at 12:17 am

I really wish this had the continuous loop. It plays my 6 pictures then large white space until it ends then starts over again. Messy. I think someone fixed this above but its very unclear to me what to do. The examples are not clear. He says he added one line but shows a several lines that I do not have in mine so it is unclear what was done and where. Sorry, I'm not a jQuery guru. If someone has a clear example as to a never ending looping row of pictures with no begininning and end white space, I would greatly appreciate the info.
Regards
TerryH October 16th, 2010 at 12:43 am

Eric Newman, I'm thinking you may have a fix I need but it is totally unclear where you put it. Why not someone show the whole code with the new piece so a novice can do this.
No solutions yet.....

Remey, nice script but I guess I can't use it unless I can figure out a seamless loop. Should we walk away?
TerryH October 19th, 2010 at 12:13 am

Wanted to use it but found another that has the seamless loop in it.

Thanks anyhow.
zmrcic November 10th, 2010 at 12:46 pm

its working fine in Mozilla but not IE my IE version is 8.0.6001.18.702
ewg November 10th, 2010 at 4:52 pm

Line 100 contains an invalid display property value. Reads "block-inline", W3C says "inline-block".

http://www.w3.org/TR/css3-box/#the-lsquo
Max November 12th, 2010 at 1:06 pm

is possible to avoid dragging? i want that text inside < p >.....< /p > to wrap please help me
Gary November 25th, 2010 at 3:46 pm

There appears to be an issue dragging links. Is there a way to disable the default drag behavior for elements in the marquee?

Everything works ok when the dragging is on text (except text sometimes highlights instead of dragging), but when a link or other draggable item is clicked things go a little wrong.
Giancarlo December 23rd, 2010 at 6:00 pm

I am using this to marquee and scroll my Hot Searches Results. Way better effect then just the simple marquee HTML tag. Thanks.

A problem I was facing was having the text "Searches:" display inline with the marquee. I was able to edit the JavaScript jquery.marquee.js file and add a margin:-16px 0 0 0 !important CSS rule to override the block display.

It now shows as ex. "Searches: marquee string one, marquee string two, marquee string three"

Whereas before it displayed;
"Searches:

marquee string one, marquee string two, marquee string three"

One minor thing I am currently facing is the z-index display of the marquee element in Internet Explorer. It renders fine in Firefox.

The marquee scroll displays on top of the text "Searches:" as it scrolls. So far I've tried appending z-index CSS Properties to no success.

Any suggestions to have the text "Searches;" wrapped in a span element show on top of the marquee element and the marquee element scroll and tuck away behind the span element?

What I have used as a workaround was add a CSS rule to the JavaScript jquery.marquee.js file of padding-left then shortened the width of the marquee.

While it not displays as I wanted, it still bugs me about the z-index and If I did not do the workaround the marquee would still be displaying and overlapping my text.
Newbie December 31st, 2010 at 2:12 pm

Hi I am a newbie in web design ! I use wp . I don't know how should I implement this useful script ! it's very nice of u to let me know how to do (step by step)

1ce again ThanQ 4 the great script
Dan February 3rd, 2011 at 2:53 am

Hey Remy,

I'm having trouble implementing multiple instances of this for a single page.

Code snippet is here: http://pastebin.com/wapYQAsp

Looping through placeholders, grabbing content from a JS Object, and then creating a marquee for each placeholder in a loop.

Scrolling works fine, but 'stop'/'start' events are only being triggered for the last instance to be created.
Farhad Uddin February 4th, 2011 at 3:48 pm

So this thing is great, but one problem I want increase the marquee slide amount on click in a button. Please give me advice or sample code how can change scroll speed by click event

Thanks
Farhad Uddin
Jon Sanders February 21st, 2011 at 10:07 pm

I've installed this on my site, and almost all is perfect. One thing I'm getting is that no text appears if I zoom out a bit using my Ctrl key and my mouse's scroller. A customer told me they saw nothing, so I tried to replicate what they saw and found this bug. Zooming in doesn't affect it, just out. When zoomed out, I wait and wait, but nothing appears. Only when I click on it and drag the text out, does it come... but it still won't scroll by itself.

Any advice? I can throw you the exact code I'm using, but I believe it's apparent by seeing the main page of http://www.jamball.com

Thanks a ton for this script. It's great. I felt the html way of doing it was going to give my visitors seizures or something, as choppy as it was. Yours is smooooth.
Joerg March 2nd, 2011 at 12:33 pm

I like this script very much, but I wonder if it's possible to start with an already "filled" marquee: I have a vertical rss-scroller and it's starting with a completely empty newsarea, then starting to scroll in from the very bottom. For me it would be nicer to see the marquee filled with the first visible news and scrolling goes up from that "filled viewports" position.
Michael March 18th, 2011 at 12:18 pm
Hello,
I made a button to hide the scroller, and I would like to have the marquee stop when the div is hidden, I tried this code but it doesn't stop the marquee:
```
$('.hide_button').click(function()
		{
			$('div.demo).hide();
			$('div.demo marquee').trigger('stop');
		}
	);
```
Does anyone know how to do?
Thanks much!