PDA

View Full Version : Find center co-ordinates of browser / Viewport



akshar_jamgaonkar
28 Aug 2012, 3:19 AM
Hello Guys,
Iam displaying a pop-up wiondow, and want it to display always at the center even if i re-size the browser. I have used the .center method , which is not working if i re-size the browser. I want to get X, Y co-ordinates of the browser and to the window x , y property want to set it.

Any help would be appriciated,


Thanks,

sword-it
28 Aug 2012, 3:29 AM
Hi

you can see this link: http://sliceofcake.wordpress.com/2007/09/13/use-javascript-to-find-the-center-of-the-browser/

akshar_jamgaonkar
28 Aug 2012, 6:02 AM
Hi i checked the link you gave but the results are not accurate, when i use the code..... could you suggest as to what may be the problem. when i run the code on my monitor i get the x = 347.5 and Y = 576 , but this is not the center co-ordinates....of my monitor

redraid
28 Aug 2012, 6:20 AM
Center method works for me:


var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [{header: 'World'}],
store: Ext.create('Ext.data.ArrayStore', {})
}
}).show();

Ext.EventManager.onWindowResize(function () {
win.center();
});
?

live http://jsfiddle.net/LTv7E/1/

friend
28 Aug 2012, 6:24 AM
Take a look at Ext.EventManager.onWindowResize() (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.EventManager-method-onWindowResize).

I typically register my Window with the EventManager in the Window's afterrender event, then remove the listener before close. Here's a functional example, where you can substitute the centerMe() function for a globally scoped/shared function for efficiency.



Ext.create('Ext.window.Window', {
height: 200,
title: 'Auto-centering Window',
width: 200,
centerMe: function() {
this.center();
},
listeners: {
afterrender: function(component, eOpts) {
Ext.EventManager.onWindowResize(this.centerMe, component);
},
beforeclose: function(component, eOpts) {
Ext.EventManager.removeResizeListener(this.centerMe, component);
}
}
}).show();

akshar_jamgaonkar
28 Aug 2012, 9:48 PM
Hey redraid (http://www.sencha.com/forum/member.php?272942-redraid) and friend (http://www.sencha.com/forum/member.php?264759-friend) ... both of your solutions worked.... thanks a lot......:)