?
Solved

cfwindow position

Posted on 2009-04-22
6
Medium Priority
?
1,197 Views
Last Modified: 2013-12-20

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

0
Comment
Question by:gdemaria
  • 3
  • 3
6 Comments
 
LVL 36

Accepted Solution

by:
SidFishes earned 2000 total points
ID: 24210322
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
 
LVL 39

Author Comment

by:gdemaria
ID: 24211396
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
 
LVL 36

Expert Comment

by:SidFishes
ID: 24211512
can't test this tonight but I think this should work

var yPos = window.event.clientY

myWindow.moveTo(910,yPos);





0
Get your Disaster Recovery as a Service basics

Disaster Recovery as a Service is one go-to solution that revolutionizes DR planning. Implementing DRaaS could be an efficient process, easily accessible to non-DR experts. Learn about monitoring, testing, executing failovers and failbacks to ensure a "healthy" DR environment.

 
LVL 36

Expert Comment

by:SidFishes
ID: 24211549
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
 
LVL 39

Author Comment

by:gdemaria
ID: 24214973


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
 
LVL 39

Author Closing Comment

by:gdemaria
ID: 31573544
Thanks for the help!  Sorry I forgot to close..
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question