www.webdeveloper.com
Results 1 to 11 of 11

Thread: Get hight + margins from object?

  1. #1
    Join Date
    Mar 2004
    Posts
    18

    Get hight + margins from object?

    Is there a way to get the height of an object, INCLUDING it's margins? All I can find is properties that exclude the margins...

  2. #2
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,120
    I think obj.offsetHeight(anything offset Height,Width,Left,Top) do calculate margins.
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  3. #3
    Join Date
    Mar 2004
    Posts
    18
    No, regretfully it doesn't

    Code:
    <div style='height: 100px; margin: 50px;'>hello world</div>
    <script>alert(document.getElementsByTagName('div').item(0).offsetHeight);</script>
    Returns "100".

  4. #4
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,120
    I think I understand what you are trying to do(hopefully)
    you want the absolute position,if there is margin then that should be added to its top location.
    For that you will need to do a calculation of offsetHeight + offsetTop
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Element dimensions</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    <!--
    function Dimension(elmID) {
    var elmHeight, elmMargin;
    if(document.all) { // IE
    	elmHeight=document.getElementById(elmID).currentStyle.height;
    	elmMargin=parseInt(document.getElementById(elmID).currentStyle.marginTop)+parseInt(document.getElementById(elmID).currentStyle.marginBottom)+"px";
        }
    else { // Mozilla
    	elmHeight=document.defaultView.getComputedStyle(document.getElementById(elmID), '').getPropertyValue('height');
    	elmMargin=parseInt(document.defaultView.getComputedStyle(document.getElementById(elmID), '').getPropertyValue('margin-top'))+parseInt(document.defaultView.getComputedStyle(document.getElementById(elmID), '').getPropertyValue('margin-bottom'))+"px";
        }
    alert("Height="+elmHeight+"\nMargin="+elmMargin);
    }
    //-->
    </script>
    
    <style type="text/css">
    <!-- 
    div {
    height:20px;
    margin:7px;
    } 
    -->
    </style>
    
    </head>
    <body>
    <div id="div1" onclick="Dimension(this.id);">Fang</div>
    </body>
    </html>

  6. #6
    Join Date
    Mar 2004
    Posts
    18
    Bedankt Fang!

    That is what I was looking for. At least, I was already looking into currentStyle and getComputedStyle, but I was hoping there was a more direct approach.
    Does this also work in Opera etc?

    Does anybody know why it is so complicated to calculate the space and object is occupying (i.e. box size including margins)? Is there a special reason W3C/EMCA didn't offer a direct approach?

  7. #7
    Join Date
    Mar 2004
    Posts
    18
    Khalid,

    This is for a 3-part (header/body/footer) layout I am making. The total fist exactly in the window viewport, the header and footer shrink and expand to fit their contents, and the body has an overflow:auto style and is sized to take the rest of the window viewport.
    I want to be able to use margins between the body and both the other elements, so I need to calculate the header and footer height including any margins...
    I will go with Fang's solution unless somebody has a better approach.

    Thanks, Peter

  8. #8
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,120
    Fangs solution will do the same as what I suggested above. try that
    I am sure it will solve the issue
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  9. #9
    Join Date
    Mar 2004
    Posts
    18
    I am starting to understand the problem with margins... They collapse between elements! That is, they are not added together in between elements, but the biggest one is used. See the following sample.

    Code:
    <div id='main' style='height: 200px; margin: 25px; background-color: yellow;'>dummy contents</div>
    <div id='foot' style='height: 100px; margin: 50px; background-color: green;'>hello world</div>
    Now, the margin between the two elements is not 25+50, but it's just 50...

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Well...not exactly... A lot of CSS attributes are trully "activated" only if object is positioned somehow (absolute or relative)

    See this:
    <body leftmargin="0" topmargin="0">
    <div id='main' style='position:absolute; height: 200px; margin: 25px; background-color: yellow;border: 1px solid #000000;'>dummy contents</div>
    <div id='foot' style='position:absolute; height: 100px; margin: 50px; background-color: green;border: 1px solid #000000;'>hello world</div>
    </body>

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654

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