need help changing background color of an iframe

Question

shaggysc96 0 Newbie Poster

17 Years Ago

I do not much understand what is going on. The iframe is transparent in all browsers but IE. I need to change the background color in IE, of my iframe and cannot figure it out. My code is below. It is pulling from an external file exfile.js. Nothing i have tried will change the background color, HELP!

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#F9F7C3">
<!-- ImageReady Slices (POAHome.psd) -->

<table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td colspan="3">
			<a href="index.cfm"><img src="images/POAHome_01.gif" alt="" width="435" height="200" border="0" usemap="#Map"></a></td>
		<td colspan="3">
			<img src="images/POAHome_02.gif" width="365" height="200" alt=""></td>
	<tr>
    <td colspan="6"><iframe id="tickermain" src="exfilejs.cfm

exfilejs.cfm

<script language='JavaScript1.2'>

//IFRAME TICKER- By Dynamic Drive (http://www.dynamicdrive.com)

//configure delay between changing messages (3000=3 seconds)
var delay=3000

var ie4=document.all

var curindex=0
var totalcontent=0

function get_total(){
if (ie4){
while (eval('document.all.content'+totalcontent))
totalcontent++
}
else{
while (document.getElementById('content'+totalcontent))
totalcontent++
}
}

function contract_all(){
for (y=0;y<totalcontent;y++){
if (ie4)
eval('document.all.content'+y).style.display='none'
else
document.getElementById('content'+y).style.display='none'
}
}

function expand_one(which){
contract_all()
if (ie4)
eval('document.all.content'+which).style.display=''
else
document.getElementById('content'+which).style.display=''
}

function rotate_content(){
get_total()
contract_all()
expand_one(curindex)
curindex=(curindex<totalcontent-1)? curindex+1: 0
setTimeout('rotate_content()',delay)
}

window.onload=rotate_content

</script>

<body>
<div id='content0' style='display:none;backgroundColor:"#ccff6"'>

<cfoutput query='getinfo'>
#thedesc#

</div>

<div id='content1' >

#thedesc2#

</div>

<div id='content2' style='display:none'>
</div>
</cfoutput>
</body>
</html>

can I use this function somehow to change the background color??
function change_background() {
document.frames.tickermain.document.body.style.backgroundColor="#ccff6";
// use the frames collection to access the document contained in the IFRAME.
}

[IMG]http://sitepointstatic.com/forums/images/statusicon/user_offline.gif[/IMG]

javascript

6 Contributors
8 Replies
2K Views
2 Years Discussion Span
Latest Post 15 Years Ago Latest Post by essential

hengzhe 0 Newbie Poster

15 Years Ago

This works on both Firefox and IE.

function test(){
var iframe=document.getElementById('test');
iframe.contentWindow.document.body.style.backgroundColor="green";

}

<iframe src="b.htm" id="test" onload="test()"></iframe>

Make sure you call the function that changes the background of
the iframe when the content of the iframe is fully loaded.
In this case,it is called when the iframe fully loads its content from b.htm.

essential 84 Posting Shark

15 Years Ago

@hengzhe,

is that what you call it, a Cross-Browser compatible!?

That declaration of yours won't last long enough to handle what is on up ahead:
tsk...tsk...tsk...

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */

/* ]]> */
</style> 
<script type="text/javascript">
/* <![CDATA[ */
var ff;
var ie;
var xFrame = ( function( bgColour ) {
   var bgColour = bgColour || null;
   return function xFrame( iframe ) {   
   var iframe = null || iframe;
      for ( i = 0; !!( iframe[ i ] ); i++ ) {
      iframe = (( "contentDocument" in iframe[ i ] ) ? iframe[ i ].contentDocument : (( "contentWindow" in iframe[ i ] ) ? iframe[ i ].contentWindow : iframe[ i ] ));
     iframe = (( ie ) ? iframe.document.all.tags("body").item( 0 ) : (( ff ) ? iframe.document.getElementsByTagName("body")[ 0 ] : iframe.document.body ));
         try {
         iframe.style.backgroundColor = bgColour; 
         } catch( e ) {
         iframe.setAttribute( "style", "background-color : " + "#00FF00" );
         }   
      } return;
   } 
} )
/******************************
 * This notice must stay intact for use - 

 * http://www.daniweb.com/
******************************/
( function() {

return "#00FF00";
 }());
onload = ( function() { 
ie = !!( document.all && !!!( ff = !!document.getElementById ));
var iFrame = (( ie ) ? document.all.tags( "iframe" ) : (( ff ) ? document.getElementsByTagName("iframe") : (( frames ) ? frames : 0 )));
xFrame( iFrame ); 
} );

/* ]]> */
</script>
</head>
<body>
<div id="main">
<iframe id="iframes" src="iframe.html"></iframe>
</div>
</body>
</html>

if you need a deeper stance, let me know about it.

essential

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rgtaylor -2 Junior Poster in Training · Answer 1 · 2007-03-28T09:24:44+00:00

OK, I am hoping your code above is broken because of the way you copied it.... BUT... IE defaults a webpage to a white background... Body tag's background is NOT an inherited value... other browsers make everything or almost everything an inherited value... who's right, who's wrong according to the standard... it doesn't matter...

Your included document need to set the background color for the body tag... Then it will be included in the iframe with that color... if you make 1 CSS that is common to both pages, and set a class to use your desired color and then set the parent document's div or table or cell or whever AND the the included documents body tag to be that class... problem is solved...

You can also just alter the CSS for background-color for the body tag if you want the whole page altered... The use the same CSS for both pages and you only change 1 place to change them all...

You can use javascript to set the color but again, set the body tags background-color CSS property for the included document...

The iframe takes the color of the included documents <body> tag... so this should be a good place for you to start...

vijay_thulkar 0 Newbie Poster · Answer 2 · 2009-07-20T14:04:42+00:00

hello,

I m using iframe in joomla 1.5.8 to Display my form.
i m using style="background-color: #FFFFCC" in iframe tag.
It shows color in Mozilla But not in IE.
Help Needed.

Troy III 272 Posting Pro · Answer 3 · 2009-07-29T08:00:44+00:00

I do not much understand what is going on. The iframe is transparent in all browsers but IE. I need to change the background color in IE, of my iframe and cannot figure it out. My code is below. It is pulling from an external file exfile.js. Nothing i have tried will change the background color, HELP!
------------------------
can I use this function somehow to change the background color??
function change_background() {
document.frames.tickermain.document.body.style.backgroundColor="#ccff6";
// use the frames collection to access the document contained in the IFRAME.
}

[IMG]http://sitepointstatic.com/forums/images/statusicon/user_offline.gif[/IMG]

rgtaylor is right when saying: "OK, I am hoping your code above is broken because of the way you copied it.... BUT... IE defaults a webpage to a white background... Body tag's background is NOT an inherited value... other browsers make everything or almost everything an inherited value... who's right, who's wrong according to the standard... it doesn't matter..."

On the way back to generation 3 and lower browsers the default background color of the page was transparent by default. If no body color was specified -you could se through the page body. Meaning you could see the "chrome" of the browser. Or to put it right the window color (default window color). Later generation browsers default to white.

The problem is that when not specified all other browsers except ie, report the unspecified color as "transparent" - which is incorrect and untrue. Since it's actually white! IE reports it for what it actually is: [#ffffff]. Because if it were really transparent - you should be stearing at the #d4d0c8 color, or any other system default color. Anyway IE have chosen not to inherit bgcolor. If the main-body of the frame-document does not have it specified, so it will cover.

Now to make it simple, clean, nice and readable, you could use something like this:

var color= "#ccff66" // (1) see footnote!

function bgf(){
   if(frames){
      for(var i=0; i<frames.length; i++){
         frames[i].document.body.style.backgroundColor = color
         }
      }
   }

onload=bgf

p.s.:
In case you'd like to use the main page current bgcolor for (all) your iframe(s) regardless, you should add this:

if(!color){
var db=document.body
color=(db.currentStyle||window.getComputedStyle(db,null)).backgroundColor
color = color.replace(/"/g,"") // this line is for opera minor bugfix
}

But for this to take effect, you'll have to empty the variable value of the "color", and leave it as empty string: var color="" -----------------
*[1] change iframe(s) desired color here. Leave it empty to inherit the main-page current body color.

essential 84 Posting Shark Featured Poster · Answer 4 · 2009-07-29T10:33:58+00:00

Hi TroyIII,

No one has the standard when it comes to coding, things varies from the way we use them and the way we implement those lines. What matter's most is that our code can be maintained easily and operable in all modes of browsers. I respect your lines, as well your coding style, the fact that this is the only way we can put signature in our work.

-essential

Troy III 272 Posting Pro · Answer 5 · 2009-07-29T13:33:18+00:00

I respect your skills too, and I think you are more advanced coder than I am, -just junger. :p

I prefer bref, super-compact, and powerfull clear coding. -I still have a fresh memory of the "dial-up era" when few bytes meant more visits to your page. That's my "signiture", but that's more often just a coding aim, otherwise I let it fail me.
p.s.:
~ (and) I hate the word "standars" ~

Regards.

essential 84 Posting Shark Featured Poster · Answer 6 · 2009-07-29T14:24:33+00:00

Hi TroyIII,

No please don't say that. I believed that we both have the same level of skills, and have the same intention (goal) of achieving and providing better support in web productivities.

The only difference, is that we build different lines' ( techniques ) inside our code works. But then again, no one is above anyone, we're just here to help...

keep safe and GodBlesS...
-essential