View Full Version : Popup from Iframe to Position in Parent window not working

09-23-2008, 06:29 PM
1) Script Title:
Dyanmic DHTML Popup Window

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm

3) Describe problem:

function openmypage(){
recipebox=parent.window.dhtmlwindow.open('recipebox', 'iframe', 'windowfiles/external.htm', '#3: Ajax Win Title', 'width=500px,height=300px,left=100px,top=500px')
var anchorelement=document.getElementById("videoproducts")
recipebox.moveTo(dhtmlwindow.getposOffset(anchorelement, "left"), dhtmlwindow.getposOffset(anchorelement, "top"))

What I am trying to do is there is a link in an iframe of a window, and I would like it to display the popup window in the parent window, which I have done.

The second thing I am trying to do is place it in a position relative to a div that is in the parent page, when I try to do that the page that should be remaining in the iframe expands to the whole page.

Any Ideas on how to make this work properly?

09-23-2008, 06:39 PM
Fixed the problem with the iframe breaking... new problem now

The window is popping up and appearing in the right spot INITIALLY

but if I scroll down a bit from the top of the page and click the link again the box goes with it.

I need it to stay at the spot that the element is at so it pops up the same distance away from the top and left parts of an element and not the distance away from the top and left of the window

Here is what I got

function openmypage(){
recipebox=parent.window.dhtmlwindow.open('recipebox', 'iframe', 'windowfiles/external.htm', '#3: Ajax Win Title', 'width=500px,height=300px,left=100px,top=500px')
var anchorelement=parent.document.getElementById("videoproducts")
recipebox.moveTo(anchorelement.offsetLeft, anchorelement.offsetTop)

09-24-2008, 10:04 AM
There's been a few threads on how to position the DHTML window relative to some element on the page. For example, please see my response in this thread: http://www.dynamicdrive.com/forums/showthread.php?t=25050

09-24-2008, 02:40 PM
I have tried much of the code in that post before I posted my question, I was unable to get it to do what I wanted.

I need the window to appear from an iframe to a specific point of a div in the parent window all the time no matter where the window itself is scrolled to at the time.

I have reviewed the comments in the post and the persons final solution (make the window pop up next to the mouse) will not work for me because it will still make the window position change depending on where the mouse is and there is an image that is clicked on that creates the popup so there is a lot of room for different positions that I do not want.

Not to mention the code seems to be not working at all in IE

The code I have gotten from that post has only gotten the window to appear where the div is positioned if the page is scrolled all the way at the top of the page. If the page is scrolled at the bottom of the page and the button is clicked it causes the page to expand as well as position the window in a different spot in the content and I don't want it to do that.

09-24-2008, 08:12 PM
I should also mention that the site is aligned centrally so that when you resize the window from the left and the right the page content usually shifts around as well

I was able to put an 'onresize' attribute to the body tag of the page to make it update the position of the window but it still doesn't always put it in the same place

09-24-2008, 11:40 PM
Do you have a link to the problem page? If so, please be detailed in exactly where on the page you're trying to position the DHTML window relative to.

09-25-2008, 02:00 PM
Sorry but this is a website that is still in development and is not available publicly right now.

I understand that any help you can give is limited by this but I hope my explanations were thorough enough

09-25-2008, 09:47 PM
But... the strangest thing...

In the google chrome browser, the popup works perfectly

In firefox, the only problem is that it doesnt move correctly when the page is stretched from side to side

In IE, the popup does not move away from the top left corner... ever...

Code to bring up the window in the iframe

recipebox=parent.window.dhtmlwindow.open('recipebox', 'ajax', 'windowfiles/external3.html?recipeID=33', '', 'width=520px,height=570px,left=100px,top=500px')
var anchorelement=parent.document.getElementById("videolist")
recipebox.moveTo(anchorelement.offsetLeft, anchorelement.offsetTop)

Code to reposition it in the parent window

<script type="text/javascript">
function resizepopup()
var anchorelement=document.getElementById("videolist")
recipebox.moveTo(anchorelement.offsetLeft, anchorelement.offsetTop)

Code I had to change in the javascript to make the move to work for scrolling up and down

moveTo:function(t, x, y){ //move window. Position includes current viewpoint of document
this.getviewpoint() //Get current viewpoint numbers
t.style.left=(x=="middle")? this.scroll_left+(this.docwidth-t.offsetWidth)/2+"px" : this.scroll_left+parseInt(x)+"px"
t.style.top=(y=="middle")? this.scroll_top+(this.docheight-t.offsetHeight)/2+"px" : parseInt(y)+"px"