PDA

View Full Version : Set the bgcolor attribute value



Rain Lover
07-22-2011, 03:02 PM
Hi,

The following doesn't work:


<!DOCTYPE HTML>
<title>Test</title>
<embed id="foo" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />

<script type="text/javascript">
document.getElementById("foo").setAttribute("bgcolor", "#00FF00");
</script>

But if you change setAttribute to ("width", "800"), it works with no problem! What am I missing?

Any help is appreciated!
Mike

jscheuer1
07-22-2011, 03:44 PM
document.getElementById("foo").setAttribute("bgColor", "#00FF00");

or:


document.getElementById("foo").setAttribute("bgcolor", "#00FF00", 0);

The attribute is technically bgColor, not bgcolor. The first solution uses the exact case, the second (IE only) uses the 0 parameter to tell the browser to ignore case.

But browsers vary. Firefox won't accept even a width change. Opera will accept the width but not the bgColor, regardless of how its expressed. Chrome will not do the bgColor, didn't check the width in it.

Perhaps if you used an object tag (which is standard in more DOCTYPES) instead . . . but then it would be a param tag within the object tag. If I have more time I'll look into it.

Added Later:

It doesn't get better, just different:


<!DOCTYPE HTML>
<title>Test</title>
<object id="foo" data="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash">
<param name="movie" value="http://www.w3schools.com/media/bookmark.swf"></param>
</object>

<script type="text/javascript">
var bg = document.createElement('param');
bg.name = 'bgColor';
bg.value = '#00FF00';
document.getElementById("foo").appendChild(bg);
</script>

Now only Firefox, Chrome, Safari, and IE 9 will do it.

coothead
07-22-2011, 03:46 PM
Hi there Rain Lover,

the bgcolor attribute has been deprecated in favour of CSS for quite sometime now and is probably the reason that it does not work.

Try instead...


document.getElementById("foo").style.backgroundColor='#0f0';

coothead

jscheuer1
07-22-2011, 04:11 PM
Nope, doesn't work. But coothead is actually right in a way, this works in all I've mentioned:


<!DOCTYPE HTML>
<title>Test</title>
<embed id="foo" wmode="transparent" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />

<script type="text/javascript">
document.getElementById("foo").style.backgroundColor='#0f0';
</script>

But then the embed has no default background color/bgColor. And unfortunately you cannot setAttribute('wmode', 'transparent') cross browser.

But as long as you hard code it and have a fall back background-color style set in case javascript is disabled, the above works fine.

Rain Lover
07-24-2011, 12:27 PM
Nope, doesn't work. But coothead is actually right in a way, this works in all I've mentioned:


<!DOCTYPE HTML>
<title>Test</title>
<embed id="foo" wmode="transparent" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />

<script type="text/javascript">
document.getElementById("foo").style.backgroundColor='#0f0';
</script>

But then the embed has no default background color/bgColor. And unfortunately you cannot setAttribute('wmode', 'transparent') cross browser.

But as long as you hard code it and have a fall back background-color style set in case javascript is disabled, the above works fine.

Actually I'm building a widget in which users might choose a custom background color or set it to transparent.
Here's what I initially tried without the setAttribute method:


<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var x;
var y;
var z;
z = "#00FF00";
if (z == "transparent" || z == "") {
x = ""; y = "transparent";
}
else {
x = z; y = "window";
}
</script>
</head>
<body>
<embed id="foo" bgcolor="'+x+'" wmode="'+y+'" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />
</body>
</html>

But it didn't work. All I want is define three variables and change x & y based on the z value. I wonder what I did wrong.
Thanks again!

jscheuer1
07-24-2011, 01:35 PM
That last bit of code there doesn't do anything to the embed. The 'substitutions' aren't part of any script so are literal. And since a literal:


'+x+'

isn't a valid color, it does nothing.

Try:


<!DOCTYPE HTML>
<title>Test</title>
<style type="text/css">
#foo {
background-color: #000;
}
</style>
<embed id="foo" wmode="transparent" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" /><br>
<select id="choose">
<option value="#000" selected>Black</option>
<option value="#0f0">Green</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="transparent">Transparent</option>
</select>
<script type="text/javascript">
document.getElementById('choose').onchange = function(){
document.getElementById('foo').style.backgroundColor = this.value;
}
document.getElementById('choose').onchange();
</script>

Rain Lover
07-24-2011, 05:17 PM
wmode="transparent"


What if a user decides to display the flash default background color?
For example: http://rain-lover.webs.com/menu.swf

All I want is define three variables and change x & y based on the z value.

coothead
07-24-2011, 06:44 PM
Hi there Rain Lover,

here is a rough and ready example for you to play with...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>rough example</title>

<style type="text/css">
#flash{
width:800px;
margin:auto;
}
</style>

<script type="text/javascript">

var c,o,p0,p1;

function init(){
c=document.getElementById('colors').value;

document.getElementById('colors').onchange=function(){
document.getElementById('flash').removeChild(o);
c=this.value;
makeIt();
}
makeIt();
}

function makeIt(){
o=document.createElement('object');
o.setAttribute('type','application/x-shockwave-flash');
o.setAttribute('data','http://rain-lover.webs.com/menu.swf');
o.setAttribute('width',800);
o.setAttribute('height',600);

p0=document.createElement('param');
p0.setAttribute('name','movie');
p0.setAttribute('value','http://rain-lover.webs.com/menu.swf');

p1=document.createElement('param');
p1.setAttribute('name','bgcolor');
p1.setAttribute('value',c);

o.appendChild(p0);
o.appendChild(p1);

document.getElementById('flash').appendChild(o);
}

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

</head>
<body>

<div>
<select id="colors">
<option value="000000">black</option>
<option value="ff0000">red</option>
<option value="0000ff">blue</option>
<option value="00ff00">green</option>
<option value="ff9933">yellow</option>
</select>
</div>

<div id="flash"></div>

</body>
</html>

cothead

jscheuer1
07-25-2011, 02:42 AM
What if a user decides to display the flash default background color?
For example: http://rain-lover.webs.com/menu.swf

Set that as its background-color in the style. In the case of the demo from my last post, that was black:


<style type="text/css">
#foo {
background-color: #000;
}
</style>

For your menu it would be #414141.

You can aslo make it the value of an option in the select menu. You could call it Default. In my demo (where it was black) I called it Black.

Did you try my demo?

Rain Lover
07-26-2011, 04:28 PM
For your menu it would be #414141.

I wonder how you found the menu color code and how an average widget user can do that?


Did you try my demo?

Of course I did and it works with no problem. Thank you! :)

Rain Lover
07-26-2011, 04:35 PM
Hi there Rain Lover,

here is a rough and ready example for you to play with...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>rough example</title>

<style type="text/css">
#flash{
width:800px;
margin:auto;
}
</style>

<script type="text/javascript">

var c,o,p0,p1;

function init(){
c=document.getElementById('colors').value;

document.getElementById('colors').onchange=function(){
document.getElementById('flash').removeChild(o);
c=this.value;
makeIt();
}
makeIt();
}

function makeIt(){
o=document.createElement('object');
o.setAttribute('type','application/x-shockwave-flash');
o.setAttribute('data','http://rain-lover.webs.com/menu.swf');
o.setAttribute('width',800);
o.setAttribute('height',600);

p0=document.createElement('param');
p0.setAttribute('name','movie');
p0.setAttribute('value','http://rain-lover.webs.com/menu.swf');

p1=document.createElement('param');
p1.setAttribute('name','bgcolor');
p1.setAttribute('value',c);

o.appendChild(p0);
o.appendChild(p1);

document.getElementById('flash').appendChild(o);
}

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

</head>
<body>

<div>
<select id="colors">
<option value="000000">black</option>
<option value="ff0000">red</option>
<option value="0000ff">blue</option>
<option value="00ff00">green</option>
<option value="ff9933">yellow</option>
</select>
</div>

<div id="flash"></div>

</body>
</html>

cothead

Working code as always! Thanks! :)

jscheuer1
07-26-2011, 05:00 PM
Maybe the average user doesn't have to. You provide it in the select or whatever. You can find it like I did. I did a screen capture and used my image editor to find the value. Or, since you're presumably making the .swf, you should already know.

This is only necessitated by the fact that you cannot reliably change the wmode cross browser on the fly once the embed has been rendered.

If you have no need of that, something different could be arranged.

Or, if you only have need of this while your visitor picks and chooses the look and feel, you can do it my way for that, but then present them with finished code that employs/doesn't employ wmode="transparent" as their preference indicates.

Are they uploading their own .swf? If so, you would have to give them a default background view and an altered background view unless you have something server side that can get the default background color from the .swf for you.

As long as you don't mind refreshing the page for each change, the .swf's own native background could be used (wmode="transparent" skipped for 'default').

Using the object tag as coothead suggests, and as I mentioned earlier might be able to be made to work. But it seems to me to be inherently less cross browser and might be more difficult to make work (the embed tag has issues in that regard too, but I think I have those worked out). Have you tried out his code? I haven't yet. Perhaps later.

So what exactly are you doing? Are you giving the user choices and then giving them code to insert into their page on that basis? If so, do they get to upload their own .swf? Or is something else going on here?

Rain Lover
07-26-2011, 08:21 PM
Are you giving the user choices and then giving them code to insert into their page on that basis? If so, do they get to upload their own .swf?

The widget includes the embed code. All the user needs to do is insert the SWF URL and the desired width, height and bgcolor, i.e. the widget user prefernces.

jscheuer1
07-27-2011, 03:14 AM
Give this a shot:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#create').submit(function(e){
e.preventDefault();
var embedStr = '<embed' + (this.bg.value === 'default'? '' : ' wmode="transparent"') +
(this.bg.value === 'default'? ' ' : ' style="background-color: ' + this.bg.value + ';" ') +
'src="' + this.url.value + '" width="' + this.width.value + '" height="' + this.height.value + '" type="application/x-shockwave-flash" />';
$('#foo').empty().append(embedStr);
$('#bar').empty().append('<textarea cols="50" rows="5">' + embedStr + '</textarea>');
$('#code').show();
});
});
</script>
<style type="text/css">
#code {
display: none;
}
</style>
</head>
<body>
<div id="foo"></div>
<form id="create">
SWF URL: <input type="text" name="url"> use web address - http://www.w3schools.com/media/bookmark.swf<br>
Width: <input type="text" name="width"> use whole number, number only - 400<br>
Height: <input type="text" name="height"> use whole number, number only - 49<br>
Background Color: <input type="text" name="bg"> use valid css color name - red, or - #ff0, etc. or for native background color use - default<br>
<input type="submit" value="Go"><span id="code">&nbsp;&nbsp;&nbsp;Code:</span>
</form>
<div id="bar"></div>
</body>
</html>

Rain Lover
07-27-2011, 02:41 PM
Thanks so much, John and coothead! :)
Your answers and solutions gave me some good ideas.

Best regards
Mike