jquery ui resizable not working inside iframe

Question

I have a html document with an iframe in it. It loads a local document. I would like to make elements in the iframe document resizable with jQuery UI. The javascript thath calls the resizable plugin is run from the parent document.

It seems to almost work. The handles appear around te element and the create event fires, but when I actually try to resize, nothing happens. It is not until my cursor leaves the iframe that the element responds. I can not get it to respond while my mouse is actually inside the iframe.

I am considering scrapping this approach and injecting a script tag into the iframe document with the resizable code. But before I travel down this road, is there something i have missed or am not considering?

Answer 1

I'm pretty sure that some browsers does not allow inherit style/dom changes to iFrame content (?). How ever, you can use jQuery .load() function since your content is called from same domain / local. And when loading it when jQuery, you're attaching it to your dom directly and can manipulate it just like you want