www.webdeveloper.com
Results 1 to 6 of 6

Thread: Positioning a div relative to screen

  1. #1
    Join Date
    Jan 2003
    Posts
    628

    Positioning a div relative to screen

    I want little 'help divs' to appear when people click on icons dotted about a page.

    Is there a way of making them appear relative to the screen?
    position:absolute makes them appear relative to the left of the page (which is constant) but also relative to the top of the page (which is not constant because it might have been scrolled)

    I want the divs to appear next to where the person clicked but I want them half way between the current top and bottom of the page (i.e. the screen).

    At the moment I have:
    function showhelp(whichdiv,e,divheight)
    {
    var divleft;
    var divtop;
    e = e || event;
    if (e.clientX > (screen.availWidth/2))
    { divleft = e.clientX - 330; }
    else
    { divleft = e.clientX + 30; }
    divtop = (screen.availHeight - divheight)/2 + document.body.scrollTop - 50;
    document.getElementById(whichdiv).style.display = 'block';
    document.getElementById(whichdiv).style.left = divleft + 'px';
    document.getElementById(whichdiv).style.top = divtop + 'px';
    }

    This works but I am having to use 'scrollTop' and not sure this will work with all browsers. Is there another way?

    Thanks for any help.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    I would grab the mouse coordinates and position the div based on that.

  4. #4
    Join Date
    Jan 2003
    Posts
    628
    Quote Originally Posted by JPnyc
    I would grab the mouse coordinates and position the div based on that.
    I am no expert but I am under the impression that, to make the div appear where I want it to appear - relative to the page/screen (as opposed to relative to its parent) I have to use position:absolute
    If I use position:absolute - detect that clientY is, for example, 600 and set the div's top to be 600 then, if the page has been scrolled a long way, the div will appear off the screen i.e. not visible.

  5. #5
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    You will be using absolute positioning, you'll simply take the mouse X and Y coords to set the value of that absolute postioning. w3schools.com has a very simple script for grabbing the coords, then you just set them to your top and left values, like you did above.

  6. #6
    Join Date
    Jan 2003
    Posts
    628
    Thanks for your reply.

    But absolute positioning seems to relate the position of the element to the absolute position of the 'page'. e.g. you click on the screen somewhere near the bottom and client.Y = say 645.

    If I pass this to my function to position the top of the div - and the page has been scrolled a long way - the div is off the top of the screen - i.e. cannot be seen without scrolling up. I am adding document.body.scrollTop to add this to client.Y but I am not sure this will work with all browsers. Is there a better way?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles