Firefox: set innerHTML of Marquee-Tag

uwe.braunholz · May 19, 2006

Hello,

I want to set the text of a marqee dynamical. So I created the
following code:
****snip****
<style>
#noticeMarquee
{
background-color:#ff00ff;
color:#ffffff;
display:none;
padding: 2px;
font-size:10pt;
}
</style>
<script type="text/javascript">
function showMarquee(text){

var elem = document.getElementById("noticeMarquee");

if(text==""){
elem.style.display = "none";
}
else{
elem.firstChild.innerHTML = text;
elem.style.display = "block";
}
}
</script>
</head>
<body>
<marquee id="noticeMarquee"></marquee>
<div onclick="showMarquee('this is the text')">clickme</div>

***snap***

This works fine in IE, but Firefox does only display the box of the
marquee, not the text I set it to.

I tried it with innerText or adding childnodes and stuff like that. But
it seems like firefox does not update the marquee.

Hopefully someone can help me this this!

Thank you!

Regards,
Uwe Braunholz

Martin Honnen · May 19, 2006

I want to set the text of a marqee dynamical.

function showMarquee(text){

var elem = document.getElementById("noticeMarquee");

if(text==""){
elem.style.display = "none";
}
else{
elem.firstChild.innerHTML = text;

Why elem.firstChild.innerHTML, why not elem.innerHTML?

But I am not sure DOM manipulation of marquee works, marquee support in
Mozilla is a hack mostly meant to work for those pages where marquees
are used in markup.

Gérard Talbot · May 20, 2006

Hello,

I want to set the text of a marqee dynamical. So I created the
following code:
****snip****
<style>
#noticeMarquee
{
background-color:#ff00ff;
color:#ffffff;
display:none;
padding: 2px;
font-size:10pt;

Why do you need to use pt? Why not %tage or em? pt is best for print
media, not for screen.

W3C Quality Assurance tip for webmasters:
Care With Font Size: Recommended Practices
http://www.w3.org/QA/Tips/font-size#goodpractice

"Do not specify the font-size in pt, or other absolute length units.
They render inconsistently across platforms and can't be resized by the
User Agent (e.g browser).
Use relative length units such as percent or (better) em"

}
</style>
<script type="text/javascript">
function showMarquee(text){

var elem = document.getElementById("noticeMarquee");

if(text==""){
elem.style.display = "none";
}
else{
elem.firstChild.innerHTML = text;

If you only want to set the text node, then you do not need innerHTML
and you should use
elem.firstChild.nodeValue = text;
If you use innerHTML to change the text node, then you do not need to
refer to the firstChild. Whatever you do, I don't see how or why you
would need to use innerHTML to change the text node.

elem.style.display = "block";

I do not understand the need to toggle the display from none to block
and vice versa if there is a text node or not. It kinda makes no sense
to me.

}
}
</script>
</head>
<body>
<marquee id="noticeMarquee"></marquee>
<div onclick="showMarquee('this is the text')">clickme</div>

***snap***

This works fine in IE, but Firefox does only display the box of the
marquee, not the text I set it to.

You have not provided sufficient amount of code to understand what
you're doing actually in terms of webpage context. Giving an url would
have been helpful.

I tried it with innerText or adding childnodes and stuff like that. But
it seems like firefox does not update the marquee.

innerText is a MSIE-specific DOM attribute not supported by Firefox.
innerText is not a W3C DOM attribute.

Hopefully someone can help me this this!

Thank you!

Regards,
Uwe Braunholz

Complete example with explanations is available here:
DHTML Demonstrations Using DOM/Style:Stock Ticker
http://developer.mozilla.org/en/docs/DHTML_Demonstrations_Using_DOM/Style:Stock_Ticker

Gérard

Uwe · May 23, 2006

Thank you Martin and Gérard,

i am sorry, if the sample is a bit tiny. But thats what I acctually do:
I want to call the function (showMarquee) from another frame to set a
dynamical-read text to the marquee. This is meant to be some kind of
"notice trigger". Thats why it is display none, if there is no text to
display.

Sorry for my bad sample. I did not remove the firstChild while
preparing my sample. With that I tried to set the text of an innertag.

Unfortunately the nodeValue does not change a thing in Firefox. It
won't display the text anyway.

Perhaps there is another solution (without using a tiker-js).

Thank you!
Uwe

Thomas 'PointedEars' Lahn · May 25, 2006

<style>

The required `type' attribute is missing:

#noticeMarquee
{
background-color:#ff00ff;
color:#ffffff;

background-color:#f0f; /* or fuchsia */
color:#fff; /* or white */

display:none;
padding: 2px;
font-size:10pt;

`pt' is a unit of length suited for printouts, not for the screen; what is
displayed large enough with your _font_ resolution (Windows default for
1024x786: 96 ppi) may be unreadable or huge for other people. Use `%',
`em' or `px' instead. In that order of preference, because `px' prevents
the text from being scaleable in IE < 7 (a bug).

See also: [de] http://dciwam.de/faq/gute-websites/einheit-pt

}
</style>
<script type="text/javascript">
function showMarquee(text){

var elem = document.getElementById("noticeMarquee");

if(text==""){
elem.style.display = "none";
}
else{
elem.firstChild.innerHTML = text;

`innerHTML' is proprietary, so you are mixing two DOMs here,
which is unwise at best. Firefox supports the `textContent'
property of W3C DOM Level 3 Core, DOM Level 2-conforming UAs
support the nodeValue property of a Node object.

See also: said:
[...]
<marquee id="noticeMarquee"></marquee>

I go with Martin's assessment. The `marquee' element is proprietary.
It creates invalid HTML, and should not be scripted, or used at all.

<URL:http://validator.w3.org/>

PointedEars

P.S.
de.comp.lang.javascript exists. (If you want to subscribe, please
read first.

I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Javascript, Firefox, InnerHTML and AJAX	6	Jul 27, 2007
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Slideshow not working properly	2	Jan 7, 2023
innerHTML?	2	Dec 9, 2005
Help with Visual Lightbox: Scripts	2	May 3, 2023
How do I hide the modal after 5 seconds?	4	Jun 1, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022

Firefox: set innerHTML of Marquee-Tag

uwe.braunholz

Martin Honnen

Gérard Talbot

Uwe

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads