Results 1 to 3 of 3

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

  1. #1
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

  2. #2
    Join Date
    Jun 2007
    Location
    England
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Your answer

    Yes, there are ways to find both the screen res. and the window size. You can even find them out across browsers:
    Code:
    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'):

    Code:
    //---------------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?

  3. #3
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •