Work
SubscribeThe 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
marqueetag 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)
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D94576330.-%3B)
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!
"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!
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
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
Thanks for this fine work, we use it for the smooth animation of content boxes in our shopsystem.
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.
Have it working in IE8 and below, but not on Firefox or Safari.
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?
Was wondering, is there a way to make it go slower than "scrollamount='1'"?
lol i'm not about the script but is about the background here.. lol .. that was so fantastic.. great job !!!
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?
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.
What is the best way to make it pause
like this example
http://www.afbdetroit.com
thanks
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
Nice piece of code but why it takes so long in IE8 to show marquee text ??
I need to replace the text on the marquee at certain event,
how i can do it?
thanks you for the plugin
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.
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.
In asp.net, after a form post-back, the marquee stops working. Anybody got a fix?
Amazing. Awesome.
Thanks