Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

Thread: Set the bgcolor attribute value

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

    Default

    Quote Originally Posted by coothead View Post
    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
    Working code as always! Thanks!

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

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

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

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

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Give this a shot:

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

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

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

    Thumbs up

    Thanks so much, John and coothead!
    Your answers and solutions gave me some good ideas.

    Best regards
    Mike

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
  •