Question

Iam trying to position a control at the centre of a web page depending on the resolution of the page.

The left property I am assigning it in a css class and adding it as follows-
Style class-

.PanelStyle
{
   left:100px;
   top:120px;
   border:2px solid #CCC;
   border-radius: 4px 4px 0 0;
}

oPanel.addStyleClass("PanelStyle");//oPanel is my control.

This is working perfectly fine.But Instead of hard coding the pixel value for left property I want to assign it dynamically depending on the resolution .For which I am doing something like below

var leftoffset = Math.floor($(window).width()-400)/2+ "px";//400 is my control width
leftoffset = leftoffset.toString(); 
oPanel.style.left=leftoffset ;  

But this is not reflected in the web page.

I also tried simply adding the left property value without calculation like

oPanel.style.cssText="left : 100px";        

but no use.
Kindly tell me why inline object.style.left/object.style.cssText=cssString is not working here?

Answer 1

Try like this:

$(oPanel).css("left",Math.floor($(window).width()-400)/2+"px");

or if '400' is your control’s width, then:

$(oPanel).css("left",Math.floor($(window).width()-$(oPanel).width())/2+"px");