LED Marquee CSS error

[turner3d]

I'm the author of the recently-added LED Marquee script (http://javascript.internet.com/text-effects/led-marquee.html)

In the CSS tab, you guys modified the original style for the containing div. Unfortunately, the changes not only defeat the purpose of the containing div, but they can break the script depending on the user-set width of the marquee. Here's what has been added:


#ledContainer {
background-color: #fff;
padding: 5px;
width: 300px;
}


Originally, I had added a container div with 5px padding and a background-color of #000 - this was so that the digits didn't go directly to the edge of the display area... they look better with a little black around them. In fact, the only purpose of the containing div is to add a little black around the edges - it doesn't really need to be there otherwise. With the posted CSS, it will force the marquee to have a 5px white border directly against the digits, no matter what the background color of the page.

The functional problem is that width of the inner div, id="ledmarquee", is set by the script based on how many characters the user has it set to show. Setting the container div to a static 300px width will break the layout if they change the "mwidth" variable to show more characters. While users should feel free to edit their container based on how they want the display to look, it shouldn't be defined with a white background color by default, and definitely shouldn't be set to a 300px width.

If ledContainer is to be defined in the CSS, it should be:


#ledContainer {
background-color: #000;
padding: 5px;
}


If the width of ledContainer must be preset, it should be done at the end of the marqueeInit() function like so:

document.getElementById("ledContainer").style.width=(10+mwidth*16)+'px';

Thanks!
Curt Turner

[LeeU]

Thanks, Curt. I'll check into it. I had created the div in order to contain the script within the demo area but didn't catch the other part.

[LeeU]

I took care of it, Curt. I only made the changes to the code for the demo. The rest is as you wrote it. Thanks. Keep sending them ...

[turner3d]

Thanks, Lee - it looks better in the demo, but the source code css tab still has the 300px #fff stuff in it. :)

[turner3d]

I actually just figured out a way to get rid of the ledContainer div completely. It still has a border, auto-adjusts its width, and will fit in the demo area. Changes to the css:

#ledmarquee{
height:26px;
visibility:hidden;
background-color:#000;
border:5px solid #000;
}


Changes to the js (near the end of marqueeInit()) - replace ledmarquee div width setting to:

if(document.all){
divWidth=mwidth*16+10;
}else{
divWidth=mwidth*16;
}
document.getElementById("ledmarquee").style.width=divWidth+'px';

[LeeU]

Thanks, Lee - it looks better in the demo, but the source code css tab still has the 300px #fff stuff in it. :)
Got it. I had only changed one file. It should be fine now.