question regarding marquee tag

[ulthane]

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.

[TechnoBear]

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.

2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true: (Level A)

Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential;

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.

[ulthane]

Thanks Techno,
i'll use JS to achieve this.

[TehYoyo]

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 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

[TechnoBear]

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.

[dresden_phoenix]

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.

[Stomme poes]

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).

[TechnoBear]

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. )

[Stomme poes]

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.

[TechnoBear]

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.

Off Topic:

If you really want to get cross, trying finding out ferry times with a screen reader...

[Stomme poes]

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...

[esn003]

Did you solve the issue?

[ulthane]

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

[esn003]

I like the js you wrote.
Can it scroll images?

[ulthane]

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>

[esn003]

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>

[TechnoBear]

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?

[Stomme poes]

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.

[esn003]

Did anyone try to place one of 'those' scrollers in a post?
My code runs everywhere.

[TechnoBear]

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.

[esn003]

That is true.

[xhtmlcoder]

The answer was; don't use the proprietary marquee it's an abomination and always was and hence why it never made the normative technical recommendations in the first place.

[Stomme poes]

and hence why it never made the normative technical recommendations in the first place.

That or politics. We see <embed> has been allowed to crawl back into the specs. :)

[xhtmlcoder]

Well, embed did have some merit at one time (even though proprietary and non standard) due to M$ failing to support OBJECT correctly. Albeit now it is pretty much a case of the HTML5 fanboys documenting it and strangely deciding; AUDIO, VIDEO and OBJECT aren't enough. LOL

[Stomme poes]

could just be, the spec must be BIGGER!



sorry had to post that cause I just discovered Brunel was like the most awesome civil engineer evar.