Open FloatingPane on center of page

Submitted by rodrigo on Thu, 11/15/2007 - 01:12.

Hi,

I am trying open floatingpane in the center of the page, but does not work. It seems that the origin of coordinates (0.0) starts after the last element on the page(IE7 and Firefox).

Look: http://webmap.sytes.net/test_floatingpane4.html

Code:
############################################


function NewFloater(){

node = document.createElement('div');
node.id = 'floater2';
dojo.body().appendChild(node);
tmp = new dojox.layout.FloatingPane({title:'FloatingTest #', dockable:true,maxable:false,closable:true,resizable:true}, node);
tmp.startup();
		
//tmp.resize({w:300,h:200});

w1 = 300;
h1 = 200;

//set width and height - bug IE7
dojo.style('floater2',"width",w1 + "px");
dojo.style('floater2',"height",h1 + "px");

var coordY = (screen.availHeight - h1) / 2 + 'px'; 
var coordX = (screen.availWidth - w1) / 2 + 'px'; 
			
//moveTo coord
dojo.style('floater2',"top",coordY);
dojo.style('floater2',"left",coordX);

}

#################################################

How to solve this?

Thank you!

Rodrigo

Login or register to post comments
Unsubscribe post

there is a function avail

Submitted by dante on Thu, 11/15/2007 - 04:20.

there is a function avail whenever you use dijit: dijit.getViewport

that will return an object with some numbers (in px) describing the viewport in a normalized way.

if your FloatingPane is width:300, you would need something like Math.floor(dijit.getViewport().w/2 - (300/2))) for your left: position.

dialog does this automatically, btw. refer to the code in _position() in dijit.Dialog if you need an example, iirc.

Thanks for reply Dante!

Submitted by rodrigo on Thu, 11/15/2007 - 18:42.

Thanks for reply Dante!

I think that the problem is in drag and drop event of floatingpane. And is missing some small adjustment in floatingpane, since Dijit.Dialog works fine.

1) If after create floatingpane, click on button "Move to Coord 0,0", will move floatingpane to below of last element loaded on page.

2) If after create floatingpane, first move floatingpane with mouse and after click on button "Move to Coord 0,0", will work fine. (tested in IE7 and firefox 2.0.0.9)

3) After perform "step 2", click on button "Move to Center Page". Floatingpane will works fine!

Rodrigo

Yeh, it's a DnD code thing.

Submitted by dante on Fri, 11/16/2007 - 02:04.

Yeh, it's a DnD code thing. I set the mover on the TitleNode in startup() (or is it postCreate()?) and because in the test they are all relatively positioned divs on the page, when you first drag them, DnD converts them to absolute positioned divs, so you see the "jump" ... if you start them as absolutely positioned elements, the "jerk" goes away, and more than likely, your move to center of page link will work out of box. its just the "initialDragStart" thing. dijit.Dialog _starts_ position:absolute ... My behavior is intentional, because maybe you want to position them temporaily (it's safer _not_ to lock the user into a particular styling schematic, and explain the relative/absolute thing, imho) ... I have an open ticket in trac to cleanup the test page so the behavior is both visible and invisible, and to explain the differences. :)

You set the mover on the

Submitted by rodrigo on Fri, 11/16/2007 - 20:41.

You set the mover on the TitleNode in postCreate()...

Following your suggestion, i added "position=absolute" in FloatingPane.js:

Code:

##############################################
postCreate: function(){

this.domNode.style.position = "absolute";  // # Altered code #

// summary: 
this.setTitle(this.title);
this.inherited("postCreate",arguments);
var move = new dojo.dnd.Moveable(this.domNode,{ handle: this.focusNode });
//this._listener = dojo.subscribe("/dnd/move/start",this,"bringToTop"); 

if(!this.dockable){ this.dockNode.style.display = "none"; } 
if(!this.closable){ this.closeNode.style.display = "none"; } 
if(!this.maxable){
this.maxNode.style.display = "none";
this.restoreNode.style.display = "none";
}
if(!this.resizable){
this.resizeHandle.style.display = "none"; 	
}else{
var foo = dojo.marginBox(this.domNode); 
this.domNode.style.width = foo.w+"px"; 
}		
this._allFPs.push(this);
},

##############################################

and...

Now works fine! :) (tested in IE7, FF 2.0.0.9 and Opera 9.24)

http://webmap.sytes.net/test_floatingpane4.html

Thanks a lot Dante!

Rodrigo

Search