coordinates of a DIV

Discussion in 'ASP .Net' started by Stimp, Sep 22, 2004.

  1. Stimp

    Stimp Guest

    I know this is not really an ASP.NET question, but I usually
    get a quick reply in this group and it's a fairly broad web dev enquiry:

    How could I get the coordinates of a DIV relative to the page, in
    javascript (or even asp.net if that's possible)?

    Thanks,
    Peter
    --

    "I hear ma train a comin'
    .... hear freedom comin"
     
    Stimp, Sep 22, 2004
    #1
    1. Advertising

  2. Hi Peter,

    I think you can use:

    intY = document.getElementById('divName').style.top;
    intX = document.getElementById('divName').style.left;

    Good luck! Ken.

    --
    Ken Dopierala Jr.
    For great ASP.Net web hosting try:
    http://www.webhost4life.com/default.asp?refid=Spinlight

    "Stimp" <> wrote in message
    news:...
    > I know this is not really an ASP.NET question, but I usually
    > get a quick reply in this group and it's a fairly broad web dev enquiry:
    >
    > How could I get the coordinates of a DIV relative to the page, in
    > javascript (or even asp.net if that's possible)?
    >
    > Thanks,
    > Peter
    > --
    >
    > "I hear ma train a comin'
    > ... hear freedom comin"
     
    Ken Dopierala Jr., Sep 22, 2004
    #2
    1. Advertising

  3. Hi Peter,

    This is a difficult question, and a good one!

    Positioning in HTML can be done through any of 3 (that I can think of) ways:

    1. "Flow Layout" positioning: HTML elements are positioned using the default
    HTML rules. When using "Flow Layout" positioning, tables are generally used
    to position elements, if the rules of HTML won't allow it straight out of
    the box. For example, a table with 2 cells might be used to position 2
    images next to each other horizontally.

    2. Using Attributes: Certain HTML elements have positioning attributes. More
    of them have sizing attributes, such as width and height. Positioning
    attributes include things like alignment, and so on.

    3. CSS: CSS styles are applied which can position an element absolutely
    relative to the page, relative to its immediate container. CSS positioning
    is generally used with Pixels as the sizing unit.

    Depending upon which of these methods you use to do your positioning, you
    have several alternatives to calculate relative positions with Divs. You can
    use the offsetParent, offsetTop,. and offsetLeft properties of the Div in
    JavaScript to calculate how much the Div is offset from its parent
    container. Again, note that this would have to be applied to each successive
    parent container in order to work for the document itself. If using CSS with
    absolute positioning, the top and left styles indicate the relative position
    to the document itself. With relative positioning, you get the same results,
    but only for the immediate container.

    You may or may not have to factor in margins, etc. as well. The following
    URL will take you to an MSDN article that goes into more detail. Note that
    the article is IE-specific, but for the most part, applies to other browsers
    as well:

    http://msdn.microsoft.com/workshop/author/om/measuring.asp?frame=true

    --
    HTH,
    Kevin Spencer
    ..Net Developer
    Microsoft MVP
    I get paid good money to
    solve puzzles for a living


    "Stimp" <> wrote in message
    news:...
    > I know this is not really an ASP.NET question, but I usually
    > get a quick reply in this group and it's a fairly broad web dev enquiry:
    >
    > How could I get the coordinates of a DIV relative to the page, in
    > javascript (or even asp.net if that's possible)?
    >
    > Thanks,
    > Peter
    > --
    >
    > "I hear ma train a comin'
    > ... hear freedom comin"
     
    Kevin Spencer, Sep 22, 2004
    #3
  4. Hi Peter,

    Forgot you wanted it relative to the page. These are the lines I use to
    make sure my div is viewable no matter where the user has scrolled to on the
    page:

    intOffsetY = document.body.scrollTop;
    intOffsetX = document.body.scrollLeft;

    Good luck! Ken.

    "Ken Dopierala Jr." <> wrote in message
    news:%...
    > Hi Peter,
    >
    > I think you can use:
    >
    > intY = document.getElementById('divName').style.top;
    > intX = document.getElementById('divName').style.left;
    >
    > Good luck! Ken.
    >
    > --
    > Ken Dopierala Jr.
    > For great ASP.Net web hosting try:
    > http://www.webhost4life.com/default.asp?refid=Spinlight
    >
    > "Stimp" <> wrote in message
    > news:...
    > > I know this is not really an ASP.NET question, but I usually
    > > get a quick reply in this group and it's a fairly broad web dev enquiry:
    > >
    > > How could I get the coordinates of a DIV relative to the page, in
    > > javascript (or even asp.net if that's possible)?
    > >
    > > Thanks,
    > > Peter
    > > --
    > >
    > > "I hear ma train a comin'
    > > ... hear freedom comin"

    >
    >
     
    Ken Dopierala Jr., Sep 22, 2004
    #4
  5. Stimp

    David Jessee Guest

    checking the style only return something if you've explicitly set it. Look
    up the
    offsetLeft, offsetTop, offsetHeight and offsetWidth properties on msdn at:
    http://msdn.microsoft.com/library/d...uthor/dhtml/reference/properties/position.asp



    "Stimp" <> wrote in message
    news:...
    > I know this is not really an ASP.NET question, but I usually
    > get a quick reply in this group and it's a fairly broad web dev enquiry:
    >
    > How could I get the coordinates of a DIV relative to the page, in
    > javascript (or even asp.net if that's possible)?
    >
    > Thanks,
    > Peter
    > --
    >
    > "I hear ma train a comin'
    > ... hear freedom comin"
     
    David Jessee, Sep 22, 2004
    #5
    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. Suresh  Kumar
    Replies:
    0
    Views:
    618
    Suresh Kumar
    Jul 3, 2003
  2. Suresh  Kumar
    Replies:
    0
    Views:
    539
    Suresh Kumar
    Jul 4, 2003
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    812
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    241
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    361
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page