SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Determining the height of a div or font

    Is there a way to determine the actual pixel height of a div? That would be the pixel height of the div after it has been stretched vertically with rows of text.

    If not, is there any way to determine the actual pixel height of a font that isn't defined in pixels?

    - Grant

  2. #2
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, you need to make sure the div has an ID
    <div id='getsize'>

    Then you need to get the object by it's ID, I suggest this function I tossed together as it's cross-browser

    Code:
    function Get_Object(name) {
      if (document.getElementById) {
        return document.getElementById(name);
      } else if (document.all) {
        return document.all[name];
      } else if (document.layers) {
        if (document.layers[name]) {
          return document.layers[name];
        } else {
          return document.layers.testP.layers[name];
        }
      }
    }
    then call it like this:

    divobj=Get_Object('getsize');

    then comes actually getting the height and width.

    height=divobj.style.pixelHeight;
    width=divobj.style.pixelWidth;

    This only works in recent browsers though, older browsers may choke on this... Netscape 4 for example would be divobj.clip.height and divobj.clip.width respectively, while some other older browsers would use divobj.offsetHeight.

    I'd probably write a function to test for the right version:

    if (divobj.style.pixelWidth) {
    return divobj.style.pixelWidth;
    } else if (divobj.offsetWidth) {
    return divobj.style.offsetWidth;
    } else if (divobj.clip.width) {
    return divobj.clip.width;
    } else return -1;

    that -1 for error handling is a good idea all around - not enough error handling out there. May slow you down with if statements, but what do you want, speed or reliability?

    Mind you, this is untested, but to my knowledge should work.

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure it's necessary to check for Netscape 4 and IE 4 though. It just adds bloat to the JavaScript code and this only because 0,00000000000000000000004% still use these browsers.

    This should be enough
    Code:
    document.getElementById("myElm").offsetWidth; // offsetHeight

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should STILL at least check document.all - if for no other reason than all the apple folks who throw hissie fits when IE 5.2 doesn't display it right (and there's more of those than you'd think...)

    in addition, IE in quirks mode, Opera mobile and Opera 8.5 and earlier all choke on offsetWidth (last time I checked) as a property of an 'common' element (although it works in 8.5 as a property of document.body???)

    and let's face it, anything that would need this kind of information is, well, bloat to begin with... in for a dime, in for a dollar I always say.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Ok, this is exciting. I've been trying to trick CSS into behaving dynamically with the em unit but I'm having nothing but trouble with that. I'd love to give this a try and see how it works.

    I know absolutely nothing about Javascript. What do I need to put on my page to have the pixel height of my div returned to the page so I can apply that returned pixel value to the height of another div?

    I'd like to incorporate the returned value into the server-side scripting language that I use, but it parses all of its own tags before anything else on the page so I don't think I'll be able to.

    - Grant

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried this and it returns nothing to the page:

    <div id="test" style="height:10px">&nbsp;</div>
    <script type="text/javascript">
    function Get_Object(test) {
    if (document.getElementById) {
    return document.getElementById(test);
    } else if (document.all) {
    return document.all[test];
    } else if (document.layers) {
    if (document.layers[test]) {
    return document.layers[test];
    } else {
    return document.layers.testP.layers[test];
    }
    }
    }
    divobj=Get_Object('test');
    height=divobj.style.pixelHeight;
    </script>

    Can someone help me clean this up?

    - Grant

  7. #7
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow
    Should STILL at least check document.all - if for no other reason than all the apple folks who throw hissie fits when IE 5.2 doesn't display it right (and there's more of those than you'd think...)
    IE 5.2, the very dead Mac browser also supports document.getElementById
    Quote Originally Posted by deathshadow
    in addition, IE in quirks mode, Opera mobile and Opera 8.5 and earlier all choke on offsetWidth (last time I checked) as a property of an 'common' element (although it works in 8.5 as a property of document.body???)
    How about a small testcase showing this issue?

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tonearm
    Can someone help me clean this up?
    You might be trying accessing the div before it is rendered. You can either have the JavaScript below the div, or better, access it after the document has loaded. Example:
    Code:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    window.onload = function()
    {
    	var oDiv = document.getElementById("myDiv");
    	alert(oDiv.offsetHeight);
    }
    </script>
    </head>
    
    <body>
    <div id="myDiv">
    	blah
    </div>
    
    </body>
    </html>

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pepejeria,

    That seems to work great, but how can I use the returned value to declare the margin-top of a div instead of seeing it in an "alert"?

    - Grant

  10. #10
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, some very basic JavaScript knowledge would help here... You need to ave the height in a variable. Then you can set that variable like this
    Code:
    document.getElementById("myOtherDiv").style.marginTop = iOtherDivsHeight;

  11. #11
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have this inside head and style:

    <script type="text/javascript">
    window.onload = function()
    {
    var spacer = document.getElementById("top_navigation");
    document.getElementById("heading").style.marginTop = spacer.offsetHeight;
    }
    </script>

    but my "heading" h1 has no margin-top. Can you point out my error?

    - Grant

  12. #12
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Following works fine for me (note that I added px after the height)
    Code:
    <script type="text/javascript">
    window.onload = function()
    {
    	var spacer = document.getElementById("top_navigation");
    	document.getElementById("heading").style.marginTop = spacer.offsetHeight + "px";
    }
    </script>
    
    <div id="top_navigation">
    	blah
    </div>
    <div id="heading">
    	header
    </div>

  13. #13
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like the heading div's height is being set, not its margin-top. Do you see a 100px margin-top for the heading div with this code:

    <html>
    <head>
    <title>Title</title>
    <style type="text/css">
    <!--
    div.box {height:100px;border-color:black;border-width:1px;border-style:solid}
    -->
    <script type="text/javascript">
    window.onload = function()
    {
    var spacer = document.getElementById("content");
    document.getElementById("heading").style.marginTop = spacer.offsetHeight + "px";
    }
    </script>
    </style>
    </head>
    <body>
    <div class="box" id="heading">heading</div>
    <div class="box" id="content">spacer</div>
    </body>
    </html>

    - Grant

  14. #14
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You currently have the script tag inside the style tag... Thats the issue

  15. #15
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok got it. That's very nice but is there a way to apply the style before the page loads? It currently loads without the style and then when the page is finished loading it pops into place.

    - Grant

  16. #16
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, instead of using window.onload, you have the script tag right after the divs
    Code:
    <div id="top_navigation">
    	blah
    </div>
    <div id="heading">
    	header
    </div>
    <script type="text/javascript">
    var spacer = document.getElementById("top_navigation");
    document.getElementById("heading").style.marginTop = spacer.offsetHeight + "px";
    </script>

  17. #17
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem with that is it will wait until the top_navigation div is drawn to correct the content div and the content div loads first. I'm guessing that would end up popping into place like before, although definitely sooner than before.

    I doubt there is a way to get around that but let me know. I really appreciate all your help.

    - Grant


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
  •