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>
Archived Comments
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.
Do you mean: I can drag the window, but when I let go, it goes to one particular X/Y?
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?
jQuery Sortable?
http://ui.jquery.com/demos/...
I don't think it'll work for CFWINDOW. CFDIV/CFPOD, maybe.
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.
Ray..
Apparently the "event.pageX" and "event.pageY" are not valid for IE.
Can you shed some light on a fix for this?
Thanks!
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.
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.
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>
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.
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.
Did you try ColdFusion.Window.show()?
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?
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.
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.
I just tested the script - as is - in CF901 and it worked fine. What browser... IE?
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
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>.