We help IT Professionals succeed at work.

iFrame focus

CodeArt
CodeArt asked
on
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;
}
Comment
Watch Question

Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

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




Author

Commented:
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 PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
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">');


Author

Commented:
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 :(
Chief Technology Ninja
Distinguished Expert 2018
Commented:
How about separating toolbar and the text area? Have two different DIVs and then apply the functions to only the second Div? getting it?