cfwindow position


I use the following code to open a pop-up window on my page.

This line

   myWindow.center();

centers the window both vertically and horizontally in the window.
The vertical centering is a problem when the page is really tall, the window opens way down the page.

I am trying to find a way to position (move) the window to around the cursor click location.

Any ideas?



popWindow = function(url,title) {
 var winName = 'popGlobal';
 
 if (title) {popGlobal_title.innerHTML=title;}
 
 ColdFusion.navigate(url,winName);
 ColdFusion.Window.show(winName);
 
 myWindow = ColdFusion.Window.getWindowObject(winName); 
 myWindow.center();
}
 
 
<cfwindow name="popGlobal" draggable="true" modal="true" resizable="true" initshow="false" height="500" width="760" center="true" bodyStyle="overflow:hidden"/>

Open in new window

LVL 39
gdemariaAsked:
Who is Participating?
 
SidFishesCommented:
hey gd...

this is something i put together for a "roving cart" to move a cfwindow up and down the page. Don't think its exactly what you want (?) but you might get an idea from it

I expect you could get the mouse click co-ordinates in js and use them for the moveTo params
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--- 
 
 
 
---- windowContent.cfm ---
<cfoutput>
<script type="text/javascript">
var showCfWin = #url.showCfWin#
if(showCfWin==true){
	setInterval("rePositionWindow('detail')",1000);
	}
</script>
<h3>CartID: #url.vCartID#</h3>
 
<button onclick="alert('Deleted Itemid1');">X</button> Item 1<br>
<button onclick="alert('Deleted Itemid2');">X</button> Item 2<br>
<button onclick="alert('Deleted Itemid3');">X</button> Item 3<BR> 
</cfoutput> 
--------------------------
 
--->
	
<script type="text/javascript" src="http://10.10.10.225/CFIDE/scripts/ajax/ext/package/button/button.js"></script>
 
<script language="JavaScript">
var showCfWin = true
function init(){
	//called from ajaxonload
		myWindow = ColdFusion.Window.getWindowObject('detail');
		myWindow.addButton({
		text:"Hide Cart",
		cls:"x-btn-text-icon",
		handler:hideWin         
      })
    }
    
function hideWin()
	{
		myWindow = ColdFusion.Window.getWindowObject('detail');
		myWindow.moveTo(910,205);
		myWindow.hide()
		showCfWin = false
	}
	
	function showWin()
	{	
		showCfWin=true;
		myWindow = ColdFusion.Window.getWindowObject('detail');
		 ///hide so first appearance doesn't cause flashing'
	    myWindow.hide();
	    myWindow.moveTo(910,205);
	    myWindow.show();
	}
	
   rePositionWindow = function(windowName){
   //Get window object    
   myWindow = ColdFusion.Window.getWindowObject(windowName);
   ///hide so appearance doesn't cause flashing'
   myWindow.hide();
   myWindow.center();
   //get the Window Element object    
   winEl = myWindow.getEl();
   if (showCfWin==false){
   myWindow.moveTo(910,205);
   myWindow.hide();
   }
   else{
   	myWindow.hide();
   myWindow.moveTo(910,205);
   myWindow.show();
   }
   }
</script> 
</head>
 
<bodY>
<div style="display:block;width:1100px;border:1px dashed;height:190px;padding:10px;">
<h1>Welcome to our store</h1>
This is our lovely banner. 
</div>
<div style="width:1100px;">
<div style="float:right;width:198px;border:1px dashed;text-align:center;height:2000px;">
<button onClick="showWin();">Show Cart</button>
</div>
 
<div style="height:2000px;width:898px;display:block;border:1px dashed;padding:25px;">
	
<h2>Roving Cart</h2>
 
</div>
</div>
<cfset vCartID = left(createuuid(), 10)>
<cfwindow closable="true" initShow="false" name="detail" title ="Your Cart"
			source="windowContent.cfm?vcartid=#vCartID#&showCfWin=true"
			Width="190"	
			height="300"
			y="225"	
			x="910"
			>
</cfwindow>	
 <cfset ajaxonload("init")>
</bodY>
</html>

Open in new window

0
 
gdemariaAuthor Commented:
Hi Sid, thanks for the info...

So, I guess the solution is that moveTo function.  I wasn't aware that existed.  Then I just need to figure out how to calculate the x,y coordinates.   I wonder if moveTo allows you to only enter the Y coordinate to leave X where it is :)

Thanks, I will check into the rest ...
0
 
SidFishesCommented:
can't test this tonight but I think this should work

var yPos = window.event.clientY

myWindow.moveTo(910,yPos);





0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
SidFishesCommented:
to trigger it... hmm

<body onClick="rePositionWindow();">

probably have to write a handler to deal with window not open instance... my code uses settimeout and sets new yPos every x seconds, which allows for autoscrolling at the user moves down a lengty page

also should mention that the initial idea was from a blog post by Scott Bennett (SBennett on EE) altho I changed it a -lot-


0
 
gdemariaAuthor Commented:


Thought I should add this related link.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24347706.html?cid=239#a24211704

I've asked in the javascript area how to determine the x,y coordinates from the link location..


Looks like from this response capturing the event from the link may work..
0
 
gdemariaAuthor Commented:
Thanks for the help!  Sorry I forgot to close..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.