DHTML Window widget (v1.03)

[artnico]

DHTML Window widget (v1.03)

http://dynamicdrive.com/dynamicindex8/dhtmlwindow/

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

Thanks
Regards
Nicola

[ddadmin]

The DHTML window already uses absolute positioning to position itself on the page. Not quite sure what you're asking...

[artnico]

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...

[ddadmin]

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
</p>

<!-- 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;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

var anchorelement=document.getElementById("test")

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

</script>

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.

[artnico]

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">

[ddadmin]

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.

[artnico]

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
Nicola

[ddadmin]

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...

[artnico]

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
Nicola

[ddadmin]

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.