asked on

iFrame focus

Hi everyone!
A simple question here, how can I write something like 'if iframe is focused change background color'?
The javascript commands to change the background color are working but if focused not.

In css I would write something like this for a normal form but I quess
that is not possible for an iframe, right?

input:focus, textarea:focus
{
background-color: #CCCCCC;
color:#000000;
}

Chinmay Patel

Hi CodeArt,
No. With Iframe you will have to do something like this :
<iframe src="page.htm" onfocus="this.style.backgroundcolor:#CCCCCC">
Also I doubt that this will not get you right results. Better way to achieve results here would be to change the page which you are loading in IFRAME
like
<body onmouseover="this.style.backgroundcolor:#CCCCCC">
Regards,
Chinmay

CodeArt

ASKER

Many thanks Chinmay, I tried your suggestions but I don't seem to get it in working order.
I will explain better, it is an iframe with designMode on so that the user can type rich text.
On load it will create already the following elements

iframe.designMode="on";
iframe.open();
iframe.write('<head><style type="text/css">body{ background-color:#FFFFFF; font-family:arial; font-size:13px; }</style></head>');
iframe.close();

Now I need to write something for the onFocus of the iFrame so that I can execute
iframe.body.style.backgroundColor="#CCCCCC";

Chinmay Patel

after
iframe.write('<head><style type="text/css">body{ background-color:#FFFFFF; font-family:arial; font-size:13px; }</style></head>');
put
iframe.write('<head><style type="text/css">body{ background-color:#FFFFFF; font-family:arial; font-size:13px; }</style></head><body onmouseover="this.style.backgroundcolor:#CCCCCC">');

CodeArt

ASKER

Thanks Chinmay, although your solution looks very logical I didn't get it to work in all attempts.
Maybe it has to do with the fact that my browsers are safari, firefox, chrome. I don't know.
In the end I decided to come up with with another idea

function onFocus()
{
iframe.addEventListener("blur", blur, true);
iframe.addEventListener("focus", focus, true);
}

function focus()
{
iframe.body.style.backgroundColor="#CCCCCC";
iframe.body.style.color="#000000";
}

function blur()
{
iframe.body.style.backgroundColor="#FFFFFF";
iframe.body.style.color="#666666";
}

It works great for the iFrame but when I click on the WYSIWYG toolbar it is set to blur because it is on top of the iFrame in a div.
Of course I can attach a focus command to the toolbar div, to set the iframe to focus
but then the backrgound color flickers one milisecond on /off :(

ASKER CERTIFIED SOLUTION

Chinmay Patel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial