DHTML Window Widget (v1.1) fixed position of popups

[Foundas]

1) Script Title: DHTML Window Widget (v1.1)

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

3) Describe problem: I have 4 popups (divbox) on a single page and i want them to all open in the same position, right after an image on the page and not relative to the window viewpoint

Can you please advice how i can achieve this?

Thanks in advance

Foundas

[jscheuer1]

Edit the main script at the end, comment out (red) the highlighted part as shown:

cleanup:function(){
	for (var i=0; i<dhtmlwindow.tobjects.length; i++){
		dhtmlwindow.tobjects[i].handle._parent=dhtmlwindow.tobjects[i].resizearea._parent=dhtmlwindow.tobjects[i].controls._parent=null
	}
	window.onload=null
}

} //End dhtmlwindow object

//document.write('<div id="dhtmlwindowholder"><span style="display:none">.</span></div>') //container that holds all dhtml window divs on page
window.onunload=dhtmlwindow.cleanup

Next, after your picture, where you want these windows showing up, put this:

<div id="dhtmlwindowholder" style="position:relative; display:inline;"><span style="display:none">.</span></div>

Now, the DHTML windows will be written there. Just make sure that you don't call anything like:

<script type="text/javascript">
var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://google.com", "Google Web site", "width=700px,height=450px,left=0px,top=0px,resize=1,scrolling=1,", "recal")
</script>

until after the added HTML code we just put in after your picture. Something like this:

<a href="#" onClick="ajaxwin=dhtmlwindow.open('ajaxbox', 'ajax', 'external.htm', 'Ajax Win Title', 'width=650px,height=400px,left=0px,top=0px,resize=0,scrolling=1'); return false">Create/ Open Ajax Window</a>

can go anywhere, but will not work until after the browser has parsed the added HTML code, so best to keep those kind of things after the added HTML code as well.

Notice how in both calls to dhtmlwindow.open() that I've set the top and left to 0px. This should make them appear right at the spot where we added the new (moved actually) dhtmlwindowholder division.

[Foundas]

Hi John,

thanks for the reply. I tried what you suggested, the window does appears where the div is defined, but if you scroll down on the page, and click the link again to open the popup, the position changes.

Foundas

[jscheuer1]

Ah, yes. That would be because the scroll distance of the page is automatically added to the window. You can alter that in your stylesheet by using the unique id of the (each) window. For example, if you use:

googlewin=dhtmlwindow.open("googlebox", "iframe", "http://google.com", "Google Web site", "width=700px,height=450px,left=0px,top=0px,resize=1,scrolling=1,")

Then googlebox is the unique id for that window, so you can put this in your stylesheet:

#googlebox {
 top: 0!important;
}

[Foundas]

thanks John,

worked like a charm

Foundas