Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    automatically centering external layer

    We are trying to automatically center this Foundation layer, when the screen resolution is bigger then the layer size. Foundation layer's positioning is determined by external #foundation class, so it needs to be overwritten when screen resolution is different. But this script is not working. Any help would be appreciated.


    function init() {

    var foundWidth = parseInt(document.all.foundation.style.width)
    var foundHeight = parseInt(document.all.foundation.style.height)
    if (parseInt(foundWidth) <= 800) {
    foundWidth = 800
    } else if ( (parseInt(foundWidth) > 800) && (parseInt(foundWidth) <= 1024) ) {
    foundWidth = 1024
    } else {
    foundWidth = foundWidth
    }
    if (parseInt(foundHeight) <= 600) {
    foundHeight = 600
    } else if ( (parseInt(foundHeight) > 600) && (parseInt(foundHeight) <= 768) ) {
    foundHeight = 768
    } else {
    foundHeight = foundHeight
    }
    var zeroX=((ScreenWidth-foundWidth)/2);
    var zeroY=((ScreenHeight-foundHeight)/2);
    if (zeroX >= 0) {
    document.all.foundation.style.left=zeroX;
    } else {
    document.all.foundation.style.left=0;
    }
    if (zeroY >= 0) {
    document.all.foundation.style.top=zeroY;
    } else {
    document.all.foundation.style.top=0;
    }
    document.all.foundation.style.visibility="visible";
    }
    </script>

    <link href="../oamn_styles.css" rel="stylesheet" type="text/css">
    /* this is the description of external #foundation style:
    #foundation
    {
    position:absolute;
    width:1024;
    height:729;
    z-index:1;
    background-color: #FFFFFF;
    border: none;
    visibility: visible;
    left: 0;
    top: 0;
    }
    */
    </head>

    <body onLoad="init()">

    <div id="foundation">

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    First at all this script will work only for IE (document.all) but if this will not bother you...

    Now, there are different methods to manage the styles, and it is according to the way style if defined.

    If inside the tag
    <div style="width:200"></div>
    to retreive the attribute's value use the style method, to change on-the-fly use the same, but

    If there is a <style></style> defined in head or external, the method to retreive changed in currentStyle and to change it remains the same, style.

    Now, you can

    1. either use

    document.all.foundation.currentStyle
    instead of
    document.all.foundation.style

    but only when you get the current style, while in the lines when you change it keep the

    document.all.foundation.style

    2. or

    move your height and width inside the div's tag and erase them from the external CSS

    #foundation
    {
    position:absolute;
    z-index:1;
    background-color: #FFFFFF;
    border: none;
    visibility: visible;
    left: 0;
    top: 0;
    }

    and
    <div id="foundation" style="width:1024; height:729">
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    ...If you want a cross-browser compatible NS6+ solution, replace

    document.all.foundation
    with
    document.getElementById('foundation')
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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