View Full Version : DHTML Window widget (v1.03)

09-24-2007, 10:22 PM
DHTML Window widget (v1.03)


Hello... first of all sorry for my bad english and thanks for your fantastic script.
My problem is: I have to use an "absolute" positioning of the layer (window)... is it possible


09-24-2007, 10:54 PM
The DHTML window already uses absolute positioning to position itself on the page. Not quite sure what you're asking...

09-25-2007, 08:56 AM
I use the widget opening a link like this: <a href="#" onClick="yahoowin=dhtmlwindow.open('yahoo', 'iframe', 'http://yahoo.com', 'Yahoo', 'width=500px,height=300px,left=100px,top=500px'); return false">Show Yahoo</a>

I wish to oper the window in a place non relative to the window viewpoint, but absolute... I have a big table (4800px width) and when I click on a object the window must be positioned ever at the sample place, at any resolution, at any viewpoint...

09-25-2007, 08:23 PM
Actually, what you mean then is to position the DHTML window relative to some other element on the page (ie: the table). Right now the DHTML window positions itself absolutely on the page, so depending on the screen resolution, the same coordinates of 100, 300 for example will point to different things on the page.

One way to position the DHTML window so it's relative to another element on the page is to first calculate the coordinates of this other element relative to the upper left corner of the page, and use the script's moveTo() function to move to those coordinates. The below example moves a DHTML window instance so it's positioned right on top of a paragraph:

<p id="test">
This is some textThis is some textThis is some textThis is some textThis is some textThis is some text

<!-- 1) DHTML Window Example 1: -->

<script type="text/javascript">

var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://images.google.com/", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")

dhtmlwindow.getposOffset=function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
return totaloffset;

var anchorelement=document.getElementById("test")

googlewin.moveTo(dhtmlwindow.getposOffset(anchorelement, "left"), dhtmlwindow.getposOffset(anchorelement, "top"))


Here the DHTML window is positioned relative to/ on top of the paragraph with id="test". The code in red is the function you want to add to your page, then use it according to the lines that follow.

09-25-2007, 10:14 PM
Thanks for your help and for your prompt reply... in this way I open the window automatically when page is loaded... now I wish to open the window by clicking on a link... is it possible? Something like <a href="#" onClick="yahoowin=dhtmlwindow.open('yahoo', 'iframe', 'http://yahoo.com', 'Yahoo', 'width=500px,height=300px,left=100px,top=500px',id=test); return false">

09-26-2007, 01:21 AM
Of course. For neatness, try putting all the code you wish to run into a function, something like:

function loadwindow(){
yahoowin=dhtmlwindow.open('yahoo', 'iframe', 'http://yahoo.com', 'Yahoo', 'width=500px,height=300px,left=100px,top=500px');
var anchorelement=document.getElementById("test")
yahoowin.moveTo(dhtmlwindow.getposOffset(anchorelement, "left"), dhtmlwindow.getposOffset(anchorelement, "top"))

<a href="#" onClick="loadwindow(); return false">Test</a>

Don't forget that the function in red needs to be defined on the page as well.

09-26-2007, 09:31 AM
Thanks for your reply but now I've another problem

The function work when I'm at the beginning of the table, but don't work if I scroll the table (my web site is a portal with horizontal scrolling, the table is 4280px width)...

I need of a function that position the dhtmlwindow inside the element "id", always in the same place at any resolution and in any viewpoint... is it possible?

Sorry for my english, it's difficoult for me to express the problem

Thanks very much

09-27-2007, 05:17 AM
Are you asking how to keep the DHTML window always in view even if the user scrolls the page horizontally? With the code I posted above, the window is already positioned inside element "id" so to speak, in that they both appear in the same coordinates on the page. Of course, when you scroll the page, both the DHTML window and element "id" will not be visible...

09-27-2007, 09:30 AM
Thanks for your reply but my problem is: when I scroll the page and I click on the link that open the dhtmlwindow, the window appear not at the same place... if resolution change or viewpoint change, window appears in different places starting from the "id" element.
Now I wish that if I set the position of the window at left:200 top:400, the window must appear always at left:200 and top:400 from the beginning of the page or from the "id" element... actually, with the code that you posted, left and top parameter are ignored and the window appear in different places by changing viewpoint or resolution...

I wish to express me better but my english is not good... sorry :(

Thanks for your help

09-28-2007, 07:57 AM
Hmm do you happen to have a URL to the problem page? With the code I posted above, the DHTML window is positioned exactly where element "id" is, so top/left settings are ignored. I thought that was what you needed, relative positioning versus absolute positioning. With the later, as mentioned, left:200 and top:200 will point to a different element on the page depending on the screen resolution.

09-28-2007, 08:32 AM

Try to click on the talk bubbles near the munch picture (scream)... next try to move the horizontal scrollbar and click again... dhtmlwindow appear in a different place every time

Thanks for your help

09-29-2007, 07:14 PM
UP... please help me :)

10-01-2007, 07:34 AM
Please remove that music player on that page, at least temporarily while you're testing things out. At least for me, it's slowing the browser down, not to mention driving me crazy :)

I've looked at your page. Another approach that might work is this. Instead of the function you currently have:

function loadwindowframmenti(e){
yahoowin=dhtmlwindow.open('frammenti', 'iframe', 'http://www.randone.com/wordpress/frammenti_ver10.php?cat=2', 'frammenti notturni', 'width=271px,height=262px');
var anchorelement=document.getElementById("index-37_")
alert(dhtmlwindow.getposOffset(anchorelement, "left"))
yahoowin.moveTo(dhtmlwindow.getposOffset(anchorelement, "left"), dhtmlwindow.getposOffset(anchorelement, "top"))

Try changing that to:

function loadwindowframmenti(e){
yahoowin=dhtmlwindow.open('frammenti', 'iframe', 'http://www.randone.com/wordpress/frammenti_ver10.php?cat=2', 'frammenti notturni', 'width=271px,height=262px');
var e=window.event || e
yahoowin.moveTo(e.clientX, e.clientY)

And for the link that uses this function, make the small adjustment in red:

<a href="#" onclick="loadwindowframmenti(event); return false"><img src="test_files/index_37.jpg" alt="" id="index_37" border="0" height="108" width="192"></a>

What this does is position the DHTML window at precisely where the mouse is when you clicked on the link. This may be a better way to ensure the DHTML window is in view regardless of the user's resolution.

10-01-2007, 10:55 AM
WOW... now it work perfectly... thanks very much for your help :)

10-15-2009, 05:31 PM
Hey DDadmin.
It seems I have a similar issue, hope you can help me out here.
I would like to have the pop-up window always centered in the middle of the page, so I use this (in red):

<a href="#" onClick="ajaxwin=dhtmlwindow.open('ajaxbox', 'ajax', 'nosotros.php', 'Agamon', 'width=620px,height=380px,center=1,resize=0,scrolling=0'); return false" class="b">&#187; saber mas</a>

Problem is that, when I have two pop-ups at the same page, the first clicked on works fine, but the second moves to another place that is surely not the middle. How come ?

I have not changed anything in the windowfiles.js

10-15-2009, 06:53 PM
chechu: It should work in both cases actually. Have you modified the .js file in anyway? A link to the problem page might help.

10-15-2009, 07:44 PM
Hey admin.
I did not change the .js, only changed the word "close" into "cerrar" and its function.

This is the example page: example (http://www.hetbestevoordeel.be/agamon/index1.php)
Click on "saber mas" (about Agamon) and at the bottom right "mas" (Nuestros colaboradores).

10-15-2009, 10:49 PM
Most likely the reason is due to the fact that you're using the same variable names ("ajaxwin" and "ajaxbox") for both instances of the DHTML window. They should be unique, or the parts in red below, for each call:

onClick="ajaxwin=dhtmlwindow.open('ajaxbox', 'ajax', 'nosotros.php', 'Agamon', 'width=620px,height=380px,center=1,resize=0,scrolling=0'); return false"

So for the second occurrence of the above for example, try using "ajaxwin2" and "ajaxbox2".

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm