Hi everyone,
I got a simple question, I want to add a simple scrolling up text to my website, my question is, should i use marquee tag for this? how’s the support for it?
Don’t really care about validation as long as it works out.
Wanna hear your thoughts,
Regards,
Ulthane.
I believe the major browsers still support it, although it’s a proprietary tag.
If you want to meet accessibility guidelines, then you might run into problems with it.
I keep JavaScript disabled to stop unwanted animations. If I come across a site with moving text/images I can’t stop or disable, then I find it unusable and go elsewhere.
Thanks Techno,
i’ll use JS to achieve this.
I don’t think he was saying that you should just use JavaScript instead of the tag (although the tag is outdated and not used very often). I think his point was that marquees and animations that start automatically (i.e. Videos that autoplay :mad: or music or ads or other such pop-ups) are somewhat annoying to users and that’s why he keeps JS off (and also leaves sites that have animations that don’t use JS and that he can’t stop).
~TehYoyo
What I was saying was “Don’t use moving text that can’t be paused/turned off.” This is difficult, if not impossible, to achieve consistently cross-browser with marquee, but can be done with JS, so that’s a better choice in the circumstances.
For the SitePoint HTML reference:
[marquee] is generally considered to be a very unfriendly element to use, one which presents difficulties for many users who may have difficulty tracking the text as it moves. Our advice is not to use it. JavaScript is a more suitable technique for moving text on screen - if there is a valid reason for doing this at all.
Quite simply … NO. The marquee tag is a non-standard HTML element. It is deprecated by the W3C and not advised by them for use in any HTML documents.
Also just in case the the point was missed earlier. if you decide to do this via .js, do include a method for the user to see WHOLE TEXT displayed and NOT scrolling.
Another note on marquee: Chrome browser never had full support for it. Things like rate and setting the width and wrapping I believe were poorly or not supported in Chrome.
Another option for scrolling text is Flash. This might be more useful depending on your targetted group. The ConAgra website used to use Flash to scroll a menu of options. Users without Flash got what was sitting behind it: a non-scrolling menu (another reason NoScript plugin is awesome).
This site uses JavaScript to scroll a list of disrupted ferry services, and it provides controls for pausing or moving forward and back in the list. (I still find it better to have JS disabled, especially when there are gales and twenty-odd services are all disrupted. :))
My innernets is slow. They made a big mistake with the menu on that site. I had white text on a white background waiting for the black image to load. Shame shame, never rely on an image for text contrast.
Their scroller is very jumpy for me… probably because with my connection strangely so slow, advertisement js is probably clogging mah tubes. They would have done better with a simple replace rather than a scroll, like train stations do with the old-fashioned signs.
Sorry - I was only using the site as an example of scrolling text with decent controls. I’d never hold that site up as a shining example of anything, especially not accessibility - although it’s vastly better than their previous site. 
If you really want to get cross, trying finding out ferry times with a screen reader…
Well, what I mean is I’ve seen scroll well-done on other sites (though none recently that I can think of), and scrolling also made sense (like, stock-tickery things). Sometimes it was called a Crawl.
The site you linked to probably works a lot better when the innernets dust is flowing…
Did you solve the issue?
yeah i used a .js file (1kb only in size after packing) to achieve that, it has support to stop/start the text on mouseover/out aswell as provides the ability to change the speed of text.
here it is if anyone else is interested:
function Scroller(canvasId, textId, speed, moveAmount, horizontal, mouseOver) {
this.timerID = null;
this.currPos = 0;
this.speed = speed;
this.moveAmount = moveAmount;
this.canvasId = canvasId;
this.textId = textId;
this.horizontal = horizontal;
this.mouseOver = mouseOver;
if (this.horizontal) {
this.canvasSize = document.getElementById(this.canvasId).offsetWidth;
this.textSize = document.getElementById(this.textId).offsetWidth;
} else {
this.canvasSize = document.getElementById(this.canvasId).offsetHeight;
this.textSize = document.getElementById(this.textId).offsetHeight;
}
this.start = function() {
this.registerEvents();
this.stop();
this.move(this.currPos, this.moveAmount, this.speed);
}
this.registerEvents = function() {
var context = this;
if (this.mouseOver) {
document.getElementById(this.canvasId).onmouseover = function() {
context.stop();
};
}
document.getElementById(this.canvasId).onmouseout = function() {
context.stop();
context.move(context.currPos, context.moveAmount, context.speed);
};
}
this.move = function(nextPosition, amountOfPixels, miliseconds) {
nextPosition -= amountOfPixels;
if (nextPosition == -this.textSize) {
nextPosition = this.canvasSize;
}
if (this.horizontal) {
document.getElementById(this.textId).style.right = nextPosition + 'px';
} else {
document.getElementById(this.textId).style.top = nextPosition + 'px';
}
var context = this;
this.timerID = setTimeout(function() {
context.move(nextPosition, amountOfPixels, miliseconds);
}, miliseconds);
}
this.stop = function() {
if (this.timerID !== null) {
clearTimeout(this.timerID);
if (this.horizontal) {
this.currPos = parseInt(document.getElementById(this.textId).style.right, null);
} else {
this.currPos = parseInt(document.getElementById(this.textId).style.top, null);
}
}
}
}
if (typeof(addEventSimple) == 'undefined') {
addEventSimple = function(obj, evt, fn) {
if (obj.addEventListener)
obj.addEventListener(evt, fn, false);
else if (obj.attachEvent)
obj.attachEvent('on' + evt, fn);
}
}
if (typeof(addEventSimple) == "function") {
addEventSimple(window, "load", function() {
var myScroller = new Scroller("canvas", "text", 50, 1, false, true);
myScroller.start();
});
}
I like the js you wrote.
Can it scroll images?
I didn’t write it, its a script i found on google
but yeah, there is no reason it wont be able to scroll images, just wrap anything u wanna scroll with the following html and css and it’ll work.
#canvas {height:175px;position:relative;overflow:hidden}
#text {position:relative}
<div id="canvas"><div id="text">
...
</div></div>
You can try this.
<marquee id="newsScorller" direction="up" scrollAmount="3" height="320" width="380"
onmouseover='this.scrollAmount="0"' onmouseout='this.scrollAmount="3"' bgcolor="#ffffff"
style="border: 1px solid #6a9e00; padding-left: 1px; padding-right: 1px; padding-top: 1px; padding-bottom:1px" >
<script type="text/javascript" src="http://feeds.feedburner.com/yourblog?format=sigpro"></script>
</marquee>
To what purpose? I thought we’d already established in this thread that <marquee> is a bad choice, so what does your code have to offer here? Are you suggesting it as an improvement on ulthane’s script or what?
onmouseover='this.scrollAmount="0"' onmouseout='this.scrollAmount="3"'
Ahem. Where’s the onkeyup/onfocus? With of course the inline tabindex=“0” and JS changing it from 0 to 1 as needed.
Did anyone try to place one of ‘those’ scrollers in a post?
My code runs everywhere.
Are you trying to say that your code is a better choice than JavaScript in this instance? If so, have you read the entire thread? The problems of using a <marquee> tag have already been discussed. And Stomme Poes has just pointed out that your code requires use of a mouse, and therefore cannot be used by anyone relying on keyboard navigation.