Launching CFWINDOW with a Dynamic Location

This post is more than 2 years old.

Over on cf-talk, a user asked if it was possible to use cfwindow without either centering the window or using a hard coded x, y position. Instead they wanted it relative to where the user clicked. This was rather easy to do so I thought I'd share the code.

First, we need to take a link and simply call a JavaScript function. In order to know where we clicked, we will use two event values:

This is the test <a href="" onclick="makeWin(event.pageX,event.pageY);return false;">link</a>.

The makeWin function then will do:

function makeWin(x,y) { ColdFusion.Window.create('mywin','Windows Rules','win.cfm',{x:x+25,y:y+25}); }

And, um, that's it! I thought it would be a bit more complex. The +25 on both x and y will launch the window 25 pixels to the right and down from where you clicked. Adjust accordingly to taste.

The complete template (minus win.cfm) is below:

<cfajaximport tags="cfwindow">

<script> function makeWin(x,y) { ColdFusion.Window.create('mywin','Windows Rules','win.cfm',{x:x+25,y:y+25}); } </script>

<h2>Content to push stuff down</h2>

<h2>More content to push stuff down the page vertically...</h2>

<p> This is the test <a href="" onclick="makeWin(event.pageX,event.pageY);return false;">link</a>. </p>

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Kris Korsmo posted on 1/17/2009 at 4:15 AM

Cool. Any way you could get it do "dock" to an area (say a named div) on release? The effect I'm looking for is something akin to iGoogle.

Comment 2 by Raymond Camden posted on 1/17/2009 at 4:19 AM

Do you mean: I can drag the window, but when I let go, it goes to one particular X/Y?

Comment 3 by Kris Korsmo posted on 1/17/2009 at 4:26 AM

Let's say you had 3 cfwindows: a,b and c, arranged vertically. Each window has a fixed height of 200px. If you drag window a below window c, windows b and c would each shift up by 200px and window a would align itself below. Does that make sense?

Comment 4 by Henry Ho posted on 1/17/2009 at 5:43 AM

jQuery Sortable?
http://ui.jquery.com/demos/...

I don't think it'll work for CFWINDOW. CFDIV/CFPOD, maybe.

Comment 5 by Raymond Camden posted on 1/17/2009 at 7:26 PM

Kris, yeah, maybe look at selectable from jquery. But like him, I'd be surprised if it worked with the CF stuff. Can't hurt to try though.

Comment 6 by Joel posted on 3/7/2009 at 2:24 AM

Ray..
Apparently the "event.pageX" and "event.pageY" are not valid for IE.

Can you shed some light on a fix for this?

Thanks!

Comment 7 by Raymond Camden posted on 3/7/2009 at 2:35 AM

Why am I not surprised? I googled a bit but didn't find anything obvious, and I can only test IE virtually. Anyone want to step up for this one? Of course in jQuery it would be simpler.

Comment 8 by Jay posted on 3/14/2009 at 12:21 AM

Any progress on the IE part of this. I had the same problem testing in IE, but would love to use cfwindow and have it open next to a link.

Comment 9 by Meenakshi posted on 8/17/2009 at 7:03 PM

Use event.clientX and event.clientY instead of event.pageX,event.pageY. This is working in both IE and Mozilla Firefox

<cfajaximport tags="cfwindow">

<script>
function makeWin(x,y) {
ColdFusion.Window.create('mywin','Windows Rules','win.cfm',{x:x+25,y:y+25});
}
</script>

<h2>Content to push stuff down</h2>

<h2>More content to push stuff down the page vertically...</h2>

<p>
This is the test <a href="" onclick="makeWin(event.clientX,event.clientY);return false;">link</a>.
</p>

Comment 10 by Jim Eisenhauer posted on 11/12/2010 at 10:47 PM

So simple it works great, and thank you for the amendment Meenakshi but I couldn't get it to work in IE without actually using window.event.clientX & window.event.clientY.

One last question: Any way to get this to be able to fire off more than once? It seems to only work once, and keeps the position static. The reason I ask is I have the link in two places (top and bottom) but once you click on either of the links it 'sticks' the window where you first clicked.

Comment 11 by miketothep posted on 12/1/2010 at 2:38 PM

That works great for creating a new cfwindow, but what if it already exists and is just hidden? Perhaps the user moved it, then closed it and now clicks on the "launch" link again. Is there a way to bring it back without destroying it and recreating it?

moveTo used to work in cf8, but no longer does in cf9. I've tried various flavors of setPosition and setPagePosition to no avail. Just wondering.

Comment 12 by Raymond Camden posted on 12/1/2010 at 5:54 PM

Did you try ColdFusion.Window.show()?

Comment 13 by miketothep posted on 12/2/2010 at 12:00 PM

Sure, show() brings the window back to visibility, but it's still wherever the user left it, not back at it's original position. Or am I missing something really obvious?

Comment 14 by Raymond Camden posted on 12/2/2010 at 4:46 PM

Try getting the native Window object using ColdFusion.Window.getWindowObject, then you can call the native Ext function on it - moveTo. See the Ext docs for BasicDialog.

Comment 15 by wolf183 posted on 4/26/2011 at 2:01 AM

Not sure why but this code will not work. I am using CF9 if that could be the reason. It just works as a link back to itself.

Comment 16 by Raymond Camden posted on 4/26/2011 at 2:07 AM

I just tested the script - as is - in CF901 and it worked fine. What browser... IE?

Comment 17 by Lucas posted on 12/5/2011 at 5:32 PM

Hi Ray
how i can add to onclick some parameter froma query?
because i have a href into a JS string and i can't use quote or double quote.

<cfset outString &= "<li><a href='##' onclick='makeWin(event.pageX,event.pageY);return false;' >#Left(List.nome_evento,15)#</a> </li> " >

but i need to open in window event on a particular date

Comment 18 by Raymond Camden posted on 12/5/2011 at 7:08 PM

Not quite sure what you mean. You could make the link dynamic:

This is the test <a href="" onclick="makeWin(event.pageX,event.pageY,#someCFVAR#);return false;">link</a>.