Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Set the bgcolor attribute value

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default Set the bgcolor attribute value

    Hi,

    The following doesn't work:

    Code:
    <!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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Code:
    document.getElementById("foo").setAttribute("bgColor", "#00FF00");
    or:

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

    Code:
    <!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.
    Last edited by jscheuer1; 07-22-2011 at 05:18 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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...
    Code:
    
    document.getElementById("foo").style.backgroundColor='#0f0';
    
    coothead

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Nope, doesn't work. But coothead is actually right in a way, this works in all I've mentioned:

    Code:
    <!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.
    Last edited by jscheuer1; 07-22-2011 at 05:17 PM. Reason: did more testing
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    Nope, doesn't work. But coothead is actually right in a way, this works in all I've mentioned:

    Code:
    <!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:

    Code:
    <!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!
    Last edited by Rain Lover; 07-24-2011 at 09:01 PM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    '+x+'
    isn't a valid color, it does nothing.

    Try:

    Code:
    <!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>
    Last edited by jscheuer1; 07-24-2011 at 01:50 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Rain Lover (07-26-2011)

  8. #7
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    Code:
    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.
    Last edited by Rain Lover; 07-24-2011 at 05:37 PM.

  9. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there Rain Lover,

    here is a rough and ready example for you to play with...
    Code:
    
    <!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

  10. The Following User Says Thank You to coothead For This Useful Post:

    Rain Lover (07-26-2011)

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Rain Lover View Post
    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:

    Code:
    <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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. #10
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    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!
    Last edited by Rain Lover; 07-26-2011 at 04:37 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •