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);
});

73 Responses to “The Silky Smooth Marquee”

Marquee de Sade | PIXEL::BLOG September 10th, 2008 at 2:20 pm

[...] someone pointed out: the <marquee> is back. or <blink>. Well not exactly, but the w3c thinks tha this might [...]
Zach Leatherman September 10th, 2008 at 2:26 pm

This reminds me of a project I wasted some time on awhile back called Malarquee. I used it to get my feet wet on mootools, then went running back to jQuery.

http://www.zachleat.com/web/2007/08/20/malarquee-bringing-back-the-marquee/

Props for giving the marquee some love!
Ajaxian » blink at the marquee one more time September 12th, 2008 at 10:32 am

[...] Sharp gives us a blast form the past for the some Friday [...]
William from Lagos September 13th, 2008 at 2:09 pm

You are indeed one sharp guy. Thanks for sharing.
Jonathan Chong September 13th, 2008 at 5:00 pm

Any chance for RSS support ala jTicker?
Chad September 19th, 2008 at 8:58 pm

I'd be interested in seeing some support for vertical scrolling!

Also any chance to have a fadein / fadeout effect???
Tim September 24th, 2008 at 6:42 pm

Your work saved me a huge headache. Much appreciated & Great job
Matthew Garber September 26th, 2008 at 7:20 pm

Absolutely worked as described and it is fantastic. Took processor utilization on our page from 70% using jQuery.animate, down to 5% using this tool.

Well done
Oskar September 30th, 2008 at 11:46 am

Hey there,

Thanks for the plugin. However, I would very much like support for at least direction up - this _could_ be perfect for a news scroller. As it is now I can't use it though which is a shame.

Let me know if it's something you're interested in adding, thanks.

Oskar
Sjoerd October 3rd, 2008 at 3:32 pm

Why is there no vertical scrolling. Its performance is 10times better than anything out there but there is no direction="up"?!
SDG October 5th, 2008 at 1:12 am

Excellent work! Up/Down; oh, yes please.
Blog Author Remy Sharp October 8th, 2008 at 9:54 am

Hi All - I've now added support for direction="up/down" - download the latest version or check out the demo at the top of this page.
» 20 jQuery Plugins for Unforgettable User Experience October 14th, 2008 at 4:05 pm

[...] 4. The Silky Smooth Marquee [...]
guha October 15th, 2008 at 6:38 pm

Remy, excellent work. Helped us greatly as we tried to find a neat way to get a horizontal marquee without too much CPU.
Fun with Overflows | jQuery for Designers - Tutorials and screencasts October 16th, 2008 at 7:10 pm

[...] Morris who's involved with/runs Geek in the Park. He asked whether the techniques I used in a jQuery marquee plugin I wrote recently could be used to smooth out CPU spikes that were occurring on his site when the [...]
John October 16th, 2008 at 8:28 pm

Thanks for this! I'm trying to implement scrolldelay="" is it supported?
Blog Author Remy Sharp October 16th, 2008 at 9:37 pm

@John - actually ... no. Somehow I missed this one. However, in a way, it is available. You need to set scrollamount to a low value - like '1'. If it's still too fast, dip in to the jquery.marquee.js file and search for '25' - increase that number until you're happy.

Note that since it's a 'single threaded' marquee, increasing this number affects all marquees on the page.
Chris October 22nd, 2008 at 8:59 pm

Putting links inside the object I want to make a marquee out of is causing strange behavior. In Firefox, it still animates properly but the link is unclickable. I can click the link in IE7 and IE6. I noticed that it creates two anchors for some reason. Any ideas?
Blog Author Remy Sharp October 22nd, 2008 at 9:07 pm

@Chris - if you can drop us a link to an example of the code or pop it on http://jsbin.com I'll take a look at the problem.
Dada October 26th, 2008 at 6:35 pm

Thanks a lot, this is super useful. One last thing that would be nice to add (and I suppose this might make things a bit complex) is "endless" marquees. Just copy the marquee as often as is needed and change the scrolling, then run them all at once.
Chris November 3rd, 2008 at 7:09 pm

Apologies, it appears the error was possibly of my own creation. I ended up setting z-index of the div containing the marquee higher than the rest of the page and that fixed the problem. Thanks for the quick response on that, Remy.
The Silky Smooth Marquee - Code Index November 8th, 2008 at 6:47 pm

[...] 主页 Homepage (No Ratings Yet) Loading ... addthis_url = 'http://www.codeindex.cn/the-silky-smooth-marquee_931'; addthis_title = 'The Silky Smooth Marquee'; addthis_pub = 'grf110'; Popularity: 1 views 相关阅读 (related posts): Slick Tabbed Content Area using CSS & jQuery -- November 6, 2008Create A Keypress Navigation Using jQuery -- November 6, 2008Floating HTML Menu Using jQuery and CSS -- November 6, 2008Cool Animated Navigation with CSS and jQuery -- November 6, 2008Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery -- November 6, 2008Slideshow2 -- November 5, 2008Mac Slider Gallery -- November 5, 2008fisheye-苹果机式的导航 -- October 30, 2008图片上下滚动导航-AnimateMenu -- October 28, 2008Animate a hover with jQuery -- October 28, 2008 Tagged with: [ jquery, marquee, 滚动 ] You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
coda November 10th, 2008 at 8:27 pm

Hi Remy - I'm looking for a jQuery-powered marquee that doesn't have a delay when it reaches the end, ie. the first word (or item) continues directly after the last word, in a continuous loop. I haven't looked at your code much - have you given this any thought?
Charlie November 14th, 2008 at 1:17 am

im also trying to figure out how to make this have no delay at the end like coda.....
Max November 14th, 2008 at 4:09 am

Hi Remy, thanks a lot for making this project! This is the best and easiest to implement marquees I've seen so far. The end result is very smooth.
Max November 14th, 2008 at 12:21 pm

Hi! I have successfully implemented the script, which works perfectly every except Opera (9.27). In Opera the marquee text is moving upwards and doesn't loop. The same is happening on demo page http://remysharp.com/demo/marquee.html. Any ideas how to fix this?
Singaporean Drupal Programmer » Blog Archive » Horizontal Marquee with jQuery November 18th, 2008 at 10:10 pm

[...] http://remysharp.com/2008/09/10/the-silky-smooth-marquee/ [...]
adis November 20th, 2008 at 6:14 pm

I had a small problem with vertical scrolling marquee. Basically, only first line of text would be shown. Removing
white-space: nowrap;
did the job.

Thanks for wonderful plugin.
Ivan November 23rd, 2008 at 2:36 pm

How to change direction with button?
50+ nützliche Plugins für jQuery | Dr. Web Magazin December 14th, 2008 at 11:18 pm

[...] jQuery Marquee Eine jQuery-Alternative zur Verwendung der Variante unter CSS 3. [...]
fluidz91 December 16th, 2008 at 1:28 pm

Hi,

Very Nice plugin !
Just a question :
i tried to change the text of the marquee but couldn't achieve it.
$('marquee').text("foo") works only if i don't declare $('div.demo marquee').marquee() (original browser marquee).
Any idea how to change dynamically the marquee text ?
Pawel Krakowiak December 19th, 2008 at 9:43 am

I had a working marquee in my application, but recently I required some AJAX functionality and turned towards jQuery. After that the marquee started to misbehave in Firefox (all other browsers worked...) and your plugin saved me (as well as allowed me to get rid of marquee, of course). Big thanks!
ReKoNe January 8th, 2009 at 1:59 am

I'd be interested in binding events that would change the direction and the scrollamount.

I've used this plugin to create a vertical scrolling chatbox and I want the users to be able to scroll it up or down if they want to access any post faster.

Any idea ??
greenfield January 16th, 2009 at 8:39 pm

Remy- Thanks for this great plugin.....But does anyone know how to eliminate the delay/gap that comes at the end like coda and Charlie were talking about?
Robert January 18th, 2009 at 1:49 pm

Is it possible to only get marquee to scroll if the content overflows the width? If the string is longer than the marque width...
Beaver6813 January 19th, 2009 at 10:20 pm

Remy I sent you an email a few days ago, you haven't been active on here since october last year, is this project still active?
marquee-Ersatz (jquery) in Ordnung? - XHTMLforum January 20th, 2009 at 9:51 pm

[...] Aber darum geht es hier garnicht. Ich habe eine rein technische Frage an euch zu folgendem Script: The Silky Smooth Marquee Demoseite: jQuery Marquee Demo Quelltextausschnitt [...]
mario January 21st, 2009 at 3:59 pm

Great plug!!!

Please incorpore speed...

Good job! bye
moshe January 22nd, 2009 at 8:17 pm

thanks for this Remy!

I too would very much like to see a marquee solution that doesnt have the gap between the end of the start.
Blog Author Remy Sharp January 25th, 2009 at 5:31 pm

@Beaver6813 - I did get your email, but I've been particularly busy of late. The plugin needs to have a kind of destroy option that will remove the element from it's listener. I will pick this up again, but there's a few big projects I'm working on that have to come first.

You could try the IRC (http://www.mibbit.com/chat/ select Freenode server and #jquery channel) to see if someone could have a crack for you in the mean time?
Sean January 25th, 2009 at 8:12 pm

Great plugin!

That tip about changing the scroll speed lower than "1" was great (setting the animateMarquee timeout to a higher value -- I use 50 right now). It scrolls so smoothly!
Joey January 31st, 2009 at 6:56 pm

where am I supposed to put the "$('marquee').marquee(optionalClass);"?????
moshe February 1st, 2009 at 11:55 am

one other thing - is there a way to make the marquee start at the top of the div - instead of starting with a big gap - as the standard marquee does?

thanks again Remy
Steve February 10th, 2009 at 4:41 pm

Apparently this isn't quite idiot proof. I need some step by step instructions on how to implement this into my web page. Thanks.
christopher Jack February 19th, 2009 at 5:44 pm

Thanks so much
Doris February 19th, 2009 at 11:38 pm

when running marquee with direction up/down I get this ugly gap in endless mode, has somebody a solution to that?
Michael February 21st, 2009 at 5:27 pm

The same as Coda, I was wondering if there is a way to achieve an endless marquee that would begin immediately after the end of the last word. My usage of this is 750p wide so the gap is quite big.
moshe March 2nd, 2009 at 3:02 am

thanks again remy.
I have 2 scrolling marquees at: http://tinyurl.com/bw633b
on IE7, they seem to have different widths (even though, before the jQuery kicks in, they look the same width).

Any ideas?
Thanks!
Umar March 6th, 2009 at 10:04 pm

hello,

exactly what i was looking for .. Can any one tell me that i want marquee to be stoped when the page loads and on mouseover i want to start....

Thanks!
hups March 10th, 2009 at 1:30 pm

hello i have this great plugin how can i make this automatic refresh ?

sorry for bad english
Jeremiah March 13th, 2009 at 12:08 pm

How would you get a vertical marquee to pause when the text reaches the center?

mcpuddin March 13th, 2009 at 3:12 pm

To change the speed of the marque, just change the scrollamount attribute in the marquee tag itself. for example, here is my vertical marquee:


    <marquee behavior="scroll" direction="down" scrollamount="1" height="100" width="350">
		<div id="result" ></div>
    </marquee>

To support vertical dragging, I modified the horizontal marquee event positioning as follows:


$('marquee').marquee('pointer').mouseover(function () {
  $(this).trigger('stop');
}).mouseout(function () {
  $(this).trigger('start');
}).mousemove(function (event) {
  if ($(this).data('drag') == true) {
	this.scrollTop = $(this).data('scrollY')   ($(this).data('y') - event.clientY);
  }
}).mousedown(function (event) {
  $(this).data('drag', true).data('y', event.clientY).data('scrollY', this.scrollTop);
}).mouseup(function () {
  $(this).data('drag', false);
})

moshe March 19th, 2009 at 1:29 am

in an "up direction" marquee, is there a way to have the the text start at the top? i.e. not have the initial gap?

also, between cycles of the marquee text - can the gap be removed somehow?

THANKS!
Addam March 25th, 2009 at 1:12 pm

Has anyone gotten vertical dragging to work?
Danny Croft April 7th, 2009 at 2:59 pm

Doesn't anyone validate there code anymore? http://twurl.nl/gforfk 15 errors! Mostly all down to the marquee tag.
Blog Author Remy Sharp April 7th, 2009 at 3:13 pm

@Danny - don't you think you missing the point a bit? The marquee tag is depreciated, which of course the errors flag up when validating (there was one additional where I was missing the xmlns attribute in the head element which I've fixed).

If you want perfectly validating code AND you want to use a marquee, then clearly this isn't the route you want to take.

The idea of this code is that it progressively enhances the marquee tag (which is no longer valid, but supported in major desktop browsers) and makes it a smoother implementation than the native ones.
fod April 10th, 2009 at 12:02 pm

nice job, you saved me a headache ;]
Patrick Collins April 21st, 2009 at 9:49 am

Hi, how can I update the text displayed inside the marquee later on? Before I would call $("div.ticker marquee").html("some new text...") however this no longer works because I assume you change the structure of the elements somewhat? Thanks, Pat
harold April 23rd, 2009 at 8:53 pm

i update the text doing this:
zzzzzz

so i must call:
$('#item3_text').text('lol');

i hopes works for you
harold April 23rd, 2009 at 8:54 pm

another issue is recover the id, so i did this:
$('#item3').marquee('pointer').mouseover(function() {
$(this).trigger('stop');
}).mouseout(function() {
$(this).trigger('start');
}).css({ color: 'red', border: 'solid 1px black' }).attr("id", 'item3');

note that i must re-add the "id"
JayB April 26th, 2009 at 8:56 pm

Marquee works great. Although, I'm trying to have it randomly throw in a new/different line of text at the end of each loop and before the next iteration begins and I'm having difficulty getting it to do so. I'm still relatively new to jQuery, but do any gurus have a suggestion?

Any help would be greatly appreciated
David May 1st, 2009 at 5:15 pm

Hi

Frequently if the scroll text would stop for a few seconds and then continue scrolling again. Is this something that can be tweaked or something that we really can't do anything about it?

I use this to show 2 big scrolling text - one along the top scrolling horizontally and one scrolling vertically just below.
ben May 8th, 2009 at 1:30 pm

Great bit of code took me a few hours to wrap my head around it...... THANKS
Mark E May 13th, 2009 at 4:28 am

Patrick Collins: I tried this, it seems to work. I put an ID on the marquee...

<marquee id="myContents" behavior="scroll">Good morning!!!</marquee> <button onclick="$('#myContents').html('Good night');">Go to bed</button>
Nobula May 20th, 2009 at 6:56 am

Hey there, I read that you were busy with pressing projects. It seems there are a lot of people seeking a way to have a "gapless" endless marquee. Has ANYONE found a solution to this yet? It would be a an absolute God-send if someone could share.

Of course, none of this would be possible without your fine work Remy. I will be forever in your debt for this amazing little plug-in. Hopefully, you'll find time to either post a fix or at least point us in the right direction. (I'm not smart enough to understand what 'destroy the element in the viewer' means).

Thanks again!
bquakkel May 22nd, 2009 at 3:28 pm

This really is a slick piece of code here!!! Thanks a lot for writing this for everyone.

I am kind of desperate because I've been looking for an ajax friendly marquee. Is there a way to modify this code to execute an ajax command after each cycle?

thanks
bq
honzaB May 31st, 2009 at 2:39 pm

Hi, thanks for this! Really helpful piece of code.

I was just wondering if there's any way to restart the marquee after it has finished (for example by finishing the loop=1)? Triggering 'start' again does not seem to work as well as setting data 'loops' or 'last'..
Gary McAllister June 3rd, 2009 at 1:30 pm

Nice implementation, although the marquee doesn't resize for 100% widths.
Guillermo June 19th, 2009 at 3:40 pm

Hi. I´m implementing this marquee and it work properly in Opera. But this morning i notice that not in IE. Because when the content touchs the top, the cycle starts ones again.

IE is saying 'the object doesnt recognize this property or method' when writing:
$('#header #logo marquee').marquee('pointer'); or just
$('marquee').marquee();

So if this method is not working i have the bug i said on top. Please guide me.
Guillermo June 19th, 2009 at 4:30 pm

Solved loading the 1.3.2 version of Jquery. Why is not working with 1.2.6? It does in your demo page.
mastermind June 25th, 2009 at 6:47 am

I Could not use your plugin within joomla. Could you show me how to do it?
John June 25th, 2009 at 3:39 pm
I have a marquee inside a table cell. Before using this plugin, I had the marquee width of 100% and it would be as wide as the table cell. Now the 100% takes the width of the text used in the marquee.

Is there a quick fix to all my marquee width to be the width of the table cell again? The cell width varies based upon how wide the browser is currently set to.
```
<td style="padding: 0px;" width="90%"><font color="#ff8f69" size="3" style="vertical-align: top; padding-top: 0px; margin-top: 0px;">
     <div class="demo">
     <marquee direction="left" behavior="scroll" scrollamount="2" width="100%"><strong><center>
       PROTOTYPE   PROTOTYPE   PROTOTYPE </center></strong>
     </marquee></div></font>
   </td>
```
Any help is much appreciated. Thanks!
John June 25th, 2009 at 3:59 pm

I found a fix, if anyone else has this issue. Just take out the width="100%" from the marquee. Then in your styles, place width: 100%; there. Mine was div.demo marquee { width: 100%; }

remy sharp's b:log

The Silky Smooth Marquee

Demo

Download

Usage

How it Works

Events

Support

Other Uses

73 Responses to “The Silky Smooth Marquee”

Post Meta

Related Posts

Popular Today

Noteworthy