In a comment on a previous post I wrote about Enhancing CFWindow with JavaScript, Nathan asked the question:

"I like the center feature but if you want to move the window to a little below center what function do you call to center then move it down 20 px?"

The answer is to use the Ext.BasicDialog.center() function, then get the windows Ext.Element object using the Ext.BasicDialog.getEl() function. The Ext.Element object has the getX() and getY() methods, which will give you access to the windows X and Y coordinates. You can use those, in combination with the Ext.BasicDialog.moveTo() function, to move the window to your desired position relative to the center.

In the example below, I have created a simple JavaScript function that does that. Click here to try it out.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>
<title>Reposition A CFWindow From Center</title>
   <script language="JavaScript">
   rePositionWindow = function(windowName){
   
   //Get window object    
   myWindow = ColdFusion.Window.getWindowObject(windowName);
   
   //use the centerfunction to center the window.    
   myWindow.center();
   
   //get the Windows Element object    
   winEl = myWindow.getEl();
   
   //move the window down 20 pixels from it's current position    
   myWindow.moveTo(winEl.getX(),winEl.getY()+20);
   }
   </script>
</head>
<body>

<!--- Button to call the function --->
<input type="button" value="reposition" onclick="rePositionWindow('MyWindow');">

<!--- set up the window. --->
<cfwindow
   name="MyWindow"
   center="true"
   closable="false"
   draggable="true"
   height="200"
   initShow="true"
   minHeight="100"
   minWidth="200"
   modal="false"
   refreshOnShow = "false"
   resizable="true"
   title="My Window"
   width="400">

   Click the button to move this window to 20px below the center
   </cfwindow>

</body>
</html>

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
JayB's Gravatar I was looking for some ideas for a "roving cart" for a store I'm building.I had a look at this today and i made a few additions... seems to work nicely. I thought I'd post in case anyone else was looking for similar functionality...

The only thing I haven't got working which I'd like to implement is maintaining state between catalog sections (via session vars?) Haven't quite wrapped my head around that yet...

code follows

<!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...;

<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.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.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:50px;">
<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>
<p>
By Jay Bigam (aka SidFishes)
May 28, 2009

</p>
   
   
<p>This snippet provides a cfwindow which scrolls with the page. I developed this for a shopping cart.
It allows customers to see what's in their cart while scrolling on long shopping pages.
Requires an additional file called windowContent.cfm (see commented section in head)</p>

<p>
The original rePositionWindow set the vertical position on load and then stopped. By using the
setInterval function in windowContent.cfm, we call rePositionWindow every 1 second. Since rePositionWindow
finds the current Window Element object relative to the viewport, we can apply myWindow.moveTo(X,Y) and it will
also be relative to the viewport. The rest is just getting the window to show and hide as required.
</p><p>
In the example I pass a url variable on creation of the window to get cart information.
The cfwindow would allow you to delete items from the cart via an ajax call (shown as alert()'s in the example
Because of the setInterval call we are not able to offer any input boxes as these lose focus every second, which
makes entry impossible. For my purposes, delete via ajax is fine.</p>

<p>This has been tested in FF3, IE7 and Safari 3.11 (for pc) </p>
<p>
see http://www.danvega.org/blog/index.cfm/2008/3/7/Add... for adding buttons to cfwindow<BR>
see http://www.coldfusionguy.com/ColdFusion/blog/index...
for original rePositionWindow function
</p>
<strong>important:must include the button.js src to access addButton</strong>

<p>I'm looking</p>

</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="205"   
         x="910"
         >
</cfwindow>   
<cfset ajaxonload("init")>
</bodY>
</html>
# Posted By JayB | 5/28/08 8:07 PM
JayB's Gravatar obviously (perhaps) the script source path for button.js would vary
# Posted By JayB | 5/28/08 8:09 PM
JayB's Gravatar just noticed my throw together divs in the example were a bit out of whack in FF and Safari...If you edit out all the non-div text (all the <P>'s and <H>'s etc) it will layout properly for the example...

you will have to play around with position based on your layout...

additionally, this does not detect browser resolution ...I expect it wouldn't be that hard to dynamically set the moveTo(X,Y) but I didn't go that far. If your site is set for a specific min width, hard coding the values should be fine... (the example is for w=1024)
# Posted By JayB | 5/28/08 8:20 PM
 
Home | Blog | Portfolio | Contact | © 2001 - 2007 The ColdFusion Guy - Scott Bennett. All rights reserved.
BlogCFC was created by Raymond Camden. This blog is running version 5.9.