Search jQuery

jQuery Forum

Using jQuery

mdmoura

Blur a Div on IFrame Body "focus"

in Using jQuery • 12 years ago

Hello,

I have the following HTML:

<div class="Field">
<input type="text" name="phone" />
</div>

To blur the div when the input has focus I have the following:

$('form :input').focus(function() {
$(this).closest('div.Field').addClass('Hover');
}).
blur(function() {
$(this).closest('div.Field').removeClass('Hover');
});

The problem is that now I have a div.Field with TinyMce so an iframe inside it. Something like:

<div class="Field">
<iframe>
<html>
<head></head>
<body>Focus somewhere here</body>
</html>
</iframe>

I need to blur the div when the mouse "focus" the iframe body.

And of course blur out when it doesn't.

How can I add this functionality to my code?

I tried a few changes but none of them worked.

Thanks,

Miguel

Replies(2)

Kevin B

Re: Blur a Div on IFrame Body "focus"

12 years ago

the issue is the iframe window has no access to jquery, therefore you can't use jquery to bind events to it. however, the iframe can access its parent's window and then use methods on that window object. So, you could listen for the iframe load event, and on load, navigate to the iframe's body and bind a handler to its focus event using native javascript.

-- Kevin

------------------------------------------------
http://www.tentonaxe.com - jQuery Snippets and Tutorials

mdmoura