positioning a jquery dialog that is inside an iframe realtive to the parent window

Question

hallo all

i have a site which has a very big scroll on it, and there is an iframe in the middle set to have no scroll and its height is 3000

anyway the document being opened in the iframe has a jquery dialog in it.

when im looking at the top of the parent and click a button inside the iframe that opens the dialog the dialog opens at the middle of the iframe and i cant see it...

thats because its doing its calcualtions based on the document not the top document

how can i change that?

so if my scroll was all the way down in the parent the dialog inside the iframe will open at the bottom of the iframe where i can see it.. in other words realtive to positon of parent document.

this is how i open my dialog:

generalDialog.dialog({
   bgiframe:false, height:p_height, width:480, modal:true, autoOpen:false, hide:'fadeout', show:'slide', closeOnEscape:true}); generalDialog.dialog("open");

thanks in advance

Answer 1

you should use self.parent to refer to the document object in which your iframe is contained when doing the calculations, else the calculations are based on the document object inside the iframe. This is what is currently causing your dialog to be in the center of the document object in the iframe and not the document object of the parent page containing the iframe. hope that make sense :)

Answer 2

i got it to work!

this is what you need to change in the jquery dialog plugin its a very good change because it makes the dialog work from an iframe as well as just a regular page

(this will only work if you are on the same domain )

this are the lines you need to change:

this one: pTop = doc.scrollTop()

to this: pTop = $(top.document).find("html").scrollTop()

and this one: pTop += (wnd.height() - this.uiDialog.outerHeight()) / 2;

to this: pTop += ($(top.document).find("html").attr("clientHeight") - this.uiDialog.outerHeight()) / 2;

that fixes it.