Relative positioning of window near mouse pointer

[bl00m00n]

1) Script Title: Window Widget v1.1

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

3) Describe problem:
I've incorporated the Window Widget v1.1 script into a site I'm building and it works great. One thing I would like to do that I'm not sure how simple it is (or possible), is to have the windows simply open up in a location relative to wherever the mouse is clicked on the screen. (I have links in various places, and basically I want the window to open just to the right and at the same height of where the user clicks, no matter where the link is.)

I've searched the posts on this forum that ask questions about window positioning, and I think this one is the closest: http://www.dynamicdrive.com/forums/s...ad.php?t=25050

Based on the advice in that thread, I tried creating anchor points that would be dynamically generated based on whereever the link happened to be relative to the page, but I couldn't get it to work. Also, it seems a little kludgy to try to figure out dynamically where an aboslute reference point is for each link... all I really want is the window to open near the mouse pointer, which would by definition be near the link it's clicking.

I'm relatively new at all this and I'm sorry if this is covered already somewhere. Can someone point me in the right direction?

[ddadmin]

You're right, displaying the window relative to the mouse cursor is even more straightforward than relative to the anchor link. In the former case, try adding a function like the below to your JavaScript:

function positionwindow(winvar, e){
	var e=e || window.event
	winvar.moveTo(dhtmlwindow.scroll_left+e.clientX+5, dhtmlwindow.scroll_top+e.clientY+5)
}

Then, inside your link where you're launching a DHTML window, after launching the window, invoke the function and pass in the variable of the DHTML window instance, along with "event", to reposition the window relative to the mouse. For example:

<script type="text/javascript">

function positionwindow(winvar, e){
	var e=e || window.event
	winvar.moveTo(dhtmlwindow.scroll_left+e.clientX+5, dhtmlwindow.scroll_top+e.clientY+5)
}

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

</script>

<li><a href="#" onClick="openwindow(); positionwindow(googlewin, event); return false">Show Window 1</a></li>

[bl00m00n]

Thank you for the (very) fast reply!

How can I modify this openwindow() function to accept arguments? The different links on my page will have different content and open windows with different names (so they can have non-uniform colors and styles, etc.).

I tried modifying the openwindow function myself thus:

function openwindow(moreboxtype,repid,displayusername){
var moreboxtypetext='"'+moreboxtype+'"'
var repidtext='"rid'+repid+'"'
var displayusernametext='"'+displayusername+'"'
morewin=dhtmlwindow.open(moreboxtypetext,"div",repidext,displayusernametext, "width=300px,height=200px,resize=1,scrolling=1")
}

...but I keep getting errors like "boxtype1 is undefined". I'm sure this a simple rookie mistake but my searching around the web has not led me to figure out my error.

Can you help?

[ddadmin]

Make sure all the parameters that dhtmlwindow.open() is accounted for (there are 5 in total, 6 if including the optional last one):

var uniquevar=dhtmlwindow.open(uniqueID, contenttype, contentsource, title, attributes, [recalonload])

With that said, your openwindow() function may look something like:

function openwindow(winname, elementid, title, url){
	winname=dhtmlwindow.open(elementid, "iframe", url, title, "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")
}