Marquee not working in Google Chrome?

Question

The code for bouncing in marquee is not working in Google Chrome browser...Why is it so?
The code is:

 <marquee height=200 width=1200 behavior=alternate>...</marquee>

What behavior will work in Google Chrome?

Solution 1

From w3.org :

No, really. don't use it.

Note also that marquees always have been found offensive by most users. That's why you probably shouldn't try to emulate this behavior using JavaScript or by other means.

Solution 2

Here, you want to use JavaScript to achieve that instead:

http://jscroller2.markusbordihn.de/example/alternate/

The best way is to use the above library. This site provides examples and documentation on exactly how to implement it from scratch. The linked example achieves similar to what you wanted with the <marquee> tag with is now deprecated.

Good luck!

Solution 3

The code certainly is correct. The problem probably is that the width is way to much. If the text is not wider than the width, why should the text move?

Check out this minimal working example on jsfiddle.

For demonstration purposes I added a green border to see how the marquee works. When changing the height you can watch the whitespace grow, but the text remains in only one line.

Just play around with the width and height.

<marquee style="border: 1px solid green; width: 200px; height: 50px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
    pellentesque malesuada nunc a placerat. Nulla facilisi. Maecenas facilisis
    consequat semper. Nullam eget dui libero. Maecenas eget est pretium arcu
    malesuada elementum. Proin quis quam auctor dolor pharetra blandit eget id
    tellus. Nunc at mattis nunc. In hac habitasse platea dictumst. Phasellus eu
    quam ac tellus tempor ornare id id nisi. Suspendisse vitae est elit, eu
    placerat risus. Nulla fringilla cursus libero sed imperdiet. Morbi et turpis
    diam, in commodo diam. Vivamus volutpat laoreet nibh, a facilisis augue
    tincidunt ac. Nulla at mi tortor.
</marquee>

---

Please keep in mind that the marquee tag is not a part of the standard anymore, as stated by the others. Maybe you could check out some JavaScripts having even more features than this obsolete tag.

Comments

[Chris Forrence]

+1 for providing an alternative to <marquee>

[Shanpriya]

Ohhh...ok thank u now i can understand it.

[Florian Margaine]

There are cases where a marquee is definitely wanted though. Emulating the last news or last stock exchange market figures comes to mind. Or when the customer absolutely wants this feature. In this case, a JavaScript solution should be used.

[Denys Séguret]

I'm sure it's bad UI even for stock exchange. It's just some nostalgic mocking of interfaces of a time in which it was technically needed.

[Jan]

If my answer solved your question, consider marking it as an “accepted answer” or provide more details in your question to get more help. Don't know how to accept an answer? See meta.stackexchange.com/a/5235

[Ian Campbell]

Well, when CSS3 is widely supported this functionality will be back in action with properties like marquee-direction, so the concept seems useful enough.

[Jukka K. Korpela]

Not an answer to the question asked. Should have been posted as a comment if at all.

[Denys Séguret]

@JukkaK.Korpela Click the link. You'll see that's the official answer from the w3.org. You may disagree with the standard committee as much as you like but don't say it's not an answer. Because it's their answer. And don't forget the question is "Why is it so?"

[Jukka K. Korpela]

1) What you quote is wiki, not an official statement. 2) W3C is not a “standard committee”. 3) While marquee is declared obsolete in HTML5 CR, the document also specifies how browsers are expected to support it. 4) “Don’t use it” is an opinion, not an answer to the question why it does not work (in a particular situation). 5) As explained in the answer to the old question, the correct answer is that this is a browser bug related to a particular attribute value.

[Denys Séguret]

W3C. Now stop trolling please.