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)

130 Responses to “The Silky Smooth Marquee”

Matthew Fedak August 4th, 2009 at 5:18 pm

Thanks for this remy, I have used your marquee script before and I'm now using it again on another project. Thought I might aswell comment and say a big thanks!
Matt Cook August 10th, 2009 at 5:16 pm

Thanks for this! It was used on http://www.habitatdane.org/
kamal August 12th, 2009 at 11:17 am

thankyou but put a clear tutorial for beginner people too
MacSim August 12th, 2009 at 8:05 pm

Hi !
I am currently trying to use your plugin on a list where each li element get the property
float:left;
The plugin works fine but my elements are now unfloatable.
How can i fix this ? Any idea ??

Thanks
MacSim August 13th, 2009 at 1:32 am

Fixed thanks to Matt Cook
TheSamePayne August 21st, 2009 at 8:00 pm

I love this code! Thank you so much. One quick bug fix... or at least I think its a bug. If your using scroll="up" or "down" any text thats greater then the width of the marquee will be hidden in the overflow. It has been manually set in the code not to wrap. I can see how this makes sence for "right" and "left", but proves to be an issue on "up" and "down."

I added (($marquee.attr('direction') == 'up') ? '' : ' white-space: nowrap;') into this line of code $marqueeRedux = $marquee.after('<div ' (klass ? 'class="' klass '" ' : '') 'style="display: block-inline; width: ' width 'px; height: ' height 'px; overflow: hidden;"><div style="float: left;' (($marquee.attr('direction') == 'up') ? '' : ' white-space: nowrap;') '">' $marquee.html() '</div></div>').next() to fix this.

I hope this is the best solution... If its not let me know, thanks again!!!
Szilvi August 22nd, 2009 at 4:47 pm

Can you help me, what is wrong with this example?

If my text is shorter than the marque width, it is work fine. But if my text is longer than marque width the all is blinking.
You can see in this page: http://weszil.hu/jQuery/index.php

Thanks
Steven August 24th, 2009 at 1:33 pm

Hi, thanks for the marquee! Works great.

But just one question. I'm trying to make the marquee fit when the window is being resized. It doesn't have a fixed width. When the resize event is fired the marquee should be redrawn. Does anyone have any idea on how to do this?

<script type="text/javascript">  </script>
James August 25th, 2009 at 11:36 am

How can you get the text to repeat before the previous loop has completed.
Szilvi August 27th, 2009 at 9:02 am

Nobody meet this problem, when your text width is bigger, than marquee width and the marquee behaviour set to alternate, the moving is wrong?
Ryan August 28th, 2009 at 3:12 pm

Awsome job Remy!! This has helped me a lot. I almost resorted to Flash to resolve my CPU utilization issues but this saved the day.

I'm using it on a very dynamic page and I like to use the "destroy()" functionality, mentioned in a previous post, to remove the scroller when not needed anymore.

Have you had a chance to look into adding this functionality?
Nailz September 1st, 2009 at 8:18 am

When you drag and "mouseout", the scroll continues but as soon as you "mouseover" the text starts dragging without a mousedown event.
erdettin September 11th, 2009 at 7:32 pm

for width problem
change tags in jquery.marquee.js
line 100
tom September 18th, 2009 at 1:36 am

hi guys, great piece of code!
but I’ve got a question about customizing it, as I’ve never worked with js beforehand (just html,php,css..).
I’d like two things to happen, the first being that whatever was scrolling from right to left would already start on the left (instead of coming out of the right end),
and the other thing being – making the text scroll in a circle, instead of it waiting for it all to disappear on the left – and only then appearing on the right, i’d want the beginning to appear straight away when the end comes out of the right hand side (that is, as long as there is enough writing there).
thanks, and if you don’t feel like writing those things, could you at least direct me to a relevant tutorial? (taking notice of my lack of js knowledge)
thank you very much, tom
Stu September 24th, 2009 at 10:28 am

This is very useful - one issue for me though is the lack of support of the scrolldelay attribute of the marquee tag.. This means that there isn't a lot of control over the speed of scrolling. I have manually set the timeout on the animation to slow it down for my purposes but it would be good if the scrolldelay attribute could be used to set this value somehow..
buns September 27th, 2009 at 10:13 am

Hi! Nice plugin you made here.
I think you should really consider adding option for setting an overall default. It would allow people to use your plugin on other tags than MARQUEE, as marquee tag does not pass xhtml validation.
It's too bad valid xhtml pages have to avoid your script because of that.
Rice September 28th, 2009 at 11:50 am

It would be really cool if the white space at the end of the marquee can be removed and it constantly rotates, has anyone got this to work?
Poon Fung October 4th, 2009 at 6:52 pm

If the initial text in a marquee is empty, the marquee does not work. I think it generates some JavaScript errors. It will be useful to have a function for setting marquee text after it is initialized.
Moe October 5th, 2009 at 5:43 am

Thanks for the tutorial. Just have one question. How can you make the marquee go around only once or twice? Cheers!
Richard October 12th, 2009 at 8:18 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