Layer element moved when show in another resolution screen or resize browser

[mascouta]

my question is : can javascript get the screen resolution or browser size which user use to see my site ? i want get it to set x (or y) parameter of layer element for right display. Because when i set x,y parameter of Layer,my screen resolution is 1024 x728, then i reset my screen resolution to 800x600, my layer move to horizontal !

thanks in advance.

[turkey1605]

Yes, there are ways to find both the screen res. and the window size. You can even find them out across browsers:


var winW,winH,scrW,scrH; //define variables

//Find window dimensions:

if(document.body.clientWidth){ //IE and Opera
winW=document.body.clientWidth;
winH=document.body.clientHeight;
}else if(window.innerWidth){ //NS and Mozilla
winW=innerWidth;
winH=innerHeight;
}

//Find screen dimensions:

scrW=screen.width;
scrH=screen.height;


So using this, winW and winH find the dimensions of the window and scrW and scrH find the screen size. To use it to centre-align your layer, try this (assuming your layer is called 'centLyr'):



//---------------Change layer name here\/
var centLyr=document.getElementById("centLyr"); //Gets layer
var centLyrWidth=parseInt(centLyr.style.width); //Gets width of layer

//-------------\/Can use scrW instead
var idealLeft=(winW/2)-(centLyrWidth/2); //Get ideal X co-ordinate

centLyr.style.left=idealLeft+"px"; //Positions layer horizontally


Does this help?

[mascouta]

Thanks you for your reply turkey1605.
I tried your solution but won't work, i placed the first code between <script></script> tags in HEADER of the page and placed the second code below the layer between <script></script> tags in the BODY of the page. The layer still move if i resize the browser or change resolution.

Please help me, if anyone know a solution tried before successfully please tell me.