Positioning a DIV relative to another

Discussion in 'Javascript' started by laredotornado@zipmail.com, Oct 22, 2007.

  1. Guest

    Hi,

    I have a 16x16 image that will be dragged around the screen as part
    of a larger DIV. When someone clicks on the image, I'd like another
    DIV (id="newDiv") to appear directly beneath the image. The DIV with
    id="newDiv" is initially hidden. How do I do this?

    One thing to note, "newDiv" is not in the same DIV as the image, so it
    does not get moved around while the image does.

    Thanks, - Dave
    , Oct 22, 2007
    #1
    1. Advertising

  2. Pete Guest

    In article <>,
    <> wrote:
    >Hi,
    >
    >I have a 16x16 image that will be dragged around the screen as part
    >of a larger DIV. When someone clicks on the image, I'd like another
    >DIV (id="newDiv") to appear directly beneath the image. The DIV with
    >id="newDiv" is initially hidden. How do I do this?
    >
    >One thing to note, "newDiv" is not in the same DIV as the image, so it
    >does not get moved around while the image does.
    >


    I'm not exactly a javascript veteran myself [and I've been encountering
    oddities of my own, as you might see from another post], so don't place
    too much faith in this, but I have a feature on one of my pages that's
    a little bit similar.

    I have a large group photo, and a rectangle can be placed around any
    of the people by clicking on their name (below the image). I just use
    a div -- transparent with a border -- for this.

    To get the div to be able to be placed *over* the image, rather than
    relative to it, I give its class a style that includes 'position=absolute'.
    Then I can just do a moveTo(<appropriate coordinates>).

    To determine those coords, I need to know the position of the object
    it is to be associated with (an imagemap area in this case). This
    doesn't seem to be directly available for most objects, so I have
    a function [found on the Web] like:

    function findPosn(elem) {
    var x=0, y=0;
    if (typeof(elem.offsetParent) == 'undefined') return [elem.x, elem.y];
    var currobj = elem;
    while(currobj) {
    x += currobj.offsetLeft;
    y += currobj.offsetTop;
    currobj = currobj.offsetParent;
    }
    return [x, y];
    }

    This 'walks up' the DOM adding up the relative offsets at each level of
    the tree to get the actual true position in the window.

    Hope that's meaningful.

    -- Pete --

    --
    ============================================================================
    The address in the header is a Spam Bucket -- don't bother replying to it...
    (If you do need to email, replace the account name with my true name.)
    Pete, Oct 23, 2007
    #2
    1. Advertising

  3. Guest

    On Oct 22, 7:31 pm, (Pete) wrote:
    > In article <>,
    >
    > <> wrote:
    > >Hi,

    >
    > >I have a 16x16 image that will be dragged around the screen as part
    > >of a larger DIV. When someone clicks on the image, I'd like another
    > >DIV (id="newDiv") to appear directly beneath the image. The DIV with
    > >id="newDiv" is initially hidden. How do I do this?

    >
    > >One thing to note, "newDiv" is not in the same DIV as the image, so it
    > >does not get moved around while the image does.

    >
    > I'm not exactly a javascript veteran myself [and I've been encountering
    > oddities of my own, as you might see from another post], so don't place
    > too much faith in this, but I have a feature on one of my pages that's
    > a little bit similar.
    >
    > I have a large group photo, and a rectangle can be placed around any
    > of the people by clicking on their name (below the image). I just use
    > a div -- transparent with a border -- for this.
    >
    > To get the div to be able to be placed *over* the image, rather than
    > relative to it, I give its class a style that includes 'position=absolute'.
    > Then I can just do a moveTo(<appropriate coordinates>).
    >
    > To determine those coords, I need to know the position of the object
    > it is to be associated with (an imagemap area in this case). This
    > doesn't seem to be directly available for most objects, so I have
    > a function [found on the Web] like:
    >
    > function findPosn(elem) {
    > var x=0, y=0;
    > if (typeof(elem.offsetParent) == 'undefined') return [elem.x,elem.y];
    > var currobj = elem;
    > while(currobj) {
    > x += currobj.offsetLeft;
    > y += currobj.offsetTop;
    > currobj = currobj.offsetParent;
    > }
    > return [x, y];
    >
    > }
    >
    > This 'walks up' the DOM adding up the relative offsets at each level of
    > the tree to get the actual true position in the window.
    >
    > Hope that's meaningful.
    >
    > -- Pete --
    >
    > --
    > ===========================================================================­=
    > The address in the header is a Spam Bucket -- don't bother replying to it....
    > (If you do need to email, replace the account name with my true name.)


    Hey Pete, This function works great! 5 stars. - Dave
    , Oct 23, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rob R. Ainscough
    Replies:
    2
    Views:
    1,665
    Rob R. Ainscough
    Feb 7, 2006
  2. Chris
    Replies:
    10
    Views:
    1,096
    Chris
    Mar 1, 2004
  3. Sentient Fluid

    Absolute/relative positioning of div's

    Sentient Fluid, Sep 1, 2004, in forum: HTML
    Replies:
    6
    Views:
    820
    Sentient Fluid
    Sep 4, 2004
  4. joker197cinque
    Replies:
    1
    Views:
    506
  5. libsfan01

    positioning div relative to window

    libsfan01, Aug 28, 2006, in forum: Javascript
    Replies:
    4
    Views:
    200
    totalstranger
    Aug 29, 2006
Loading...

Share This Page