Friday, September 12th, 2008
blink at the marquee one more time
Category: JavaScript
, jQuery
Remy Sharp gives us a blast form the past for the some Friday fun.
First, he shows his Marquee plugin that gives you the marquee effect. Why would you do this when the marquee tag itself is widely adopted?
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).
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.
It is simple to use, and gives you hooks to do more:
JAVASCRIPT:
-
-
// Hello World
-
$('marquee').marquee();
-
-
// Adding fun
-
$('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);
-
});
-
Or, you could get into a lot of trouble and reimplement blink:
JAVASCRIPT:
-
-
$(function () {
-
setInterval(function () {
-
$('blink').each(function () {
-
this.style.visibility = this.style.visibility == 'hidden' ? 'visible' : 'hidden';
-
});
-
}, 1000);
-
});
-
2.5 rating from 44 votes
Just remember that for accessibility concerns, it is strongly recommended (see WCAG) not to use either blink or markee, nor try to make equivalent effect.
Benoît
It’s no where near the 1st of April - I don’t get it. Is this for real?
Nice! looking for this. Thanks
A valiant effort at reviving/updating the marquee tag. I don’t think I would ever use the marquee tag again even with this sexy new version, simply because of the horrible memories!