SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript - finding the center of the screen

    hi

    i am trying to center a div on a page using these functions:

    function topDiv(){
    h = 420
    TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
    document.write( TopPosition );
    }

    function leftDiv(){
    w = 760
    LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
    document.write( LeftPosition );
    }

    and then trying to write it to the page using:

    <div style="position: absolute;
    top: <script language='javascript'>topDiv();</script>px;
    left: <script language='javascript'>leftDiv();</script>px;
    z-index: 1;">

    but it does not have any effect on the placement of my div.

    any help with passing these two values to the top and left properties of my div would be much appreciated, or if there is an alternative way to place a div centrally and horizontally on the screen, i'd love to hear it.

    many thanks and respect
    m a r t i n

  2. #2
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm.. does using:

    TopPosition = (screen.height - h) / 2;
    LeftPosition = (screen.width - w) / 2;

    change anything?

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't think you can put scripts inside the style="" attribute.

    Code:
    <head>
     <style>
      #centered {position:absolute; top:0; left:0; width:760; height:420}
     </style>
     <script>
      function alignDiv() {
       with (document.getElementById('centered').style) {
        top = ((screen.height) ? ((screen.height-420)/2) : 0);
        left = ((screen.width) ? ((screen.width-760)/2) : 0);
       }
      }
     </script>
    </head>
    
    <body onload="javascript:alignDiv()">
    
    <div id="centered">cough</div>
    Last edited by oblig; Aug 6, 2002 at 07:22.

  4. #4
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, the script works quite well but has a few problems.

    in any case, i need to be using screen.availHeight and screen.availwidth.

    this still does not give me the size of the vieweable area but its something i can work with.

    what i need to be able to do is pass this value to my div since a simple script wont do it.

    i'll use something like this:

    function alignDiv() {
    if (screen.availWidth <= 1025)
    {
    document.getElementById('centered').style.top = '100px';
    }
    }

    this allows me to have the site ready for usesr with 800x600 or higher screens.

    its not quite ideal since i still cant find out the size of their viewable area and i dont know if their browsers will be maximised, which is an assumption i have to make at this stage.

    thanks for the help, it has cleared up much more than my original question.

    :-)

    m a r t i n

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd use window.innerHeight and document.body.clientHeight.

  6. #6
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't forget dual head issues.


    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


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
  •