SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getting the height of a div

    i am trying to get the pixel height of a div containing some text. i did not manually set the height in the style.

    i have tried the following:
    Code:
    var pHeight = document.getElementById("artComment").scrollHeight;
    document.write(pHeight);
    AND:
    Code:
    var pHeight = document.getElementById("artComment").offsetHeight;
    document.write(pHeight);
    both of the above examples worked fine in firefox but not in IE 6 or 7. IE writes a zero. firefox writes the actual height (261).

    what is going on?

  2. #2
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This looks more like a Javascript question than a CSS question. Perhaps try asking over in the Javascript forum?

    Ryan,

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The code works for me but then I know nothing of javascript so I'll move the thread anyway.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function geth(){
    var pHeight = document.getElementById("test").offsetHeight;
    alert(pHeight);
    }
    </script>
    </head>
    <body>
    <div id="test" onclick="geth()">
        <p>click me</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't know why but with your exact code - i continue to get a value of 0 for pHeight in IE.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What version of IE?

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul's demo works for me in IE 6 (Win2K) and 7 (WinXP).

    For reference, have a look at xHeight and xGetComputedStyle.

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by funkdaddy View Post
    What version of IE?
    i tried IE 6 and 7. both report 0 for the height.

    perhaps its something else in my page - here is the full code from my page (i know its pretty messy - its an old sites thats getting updated soon)


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <link rel="stylesheet" href="../../mystyle.css" type="text/css">
    <script type="text/javascript" src="./javascripts/overlib.js"><!-- overLIB (c) Erik Bosrup http://www.bosrup.com/web/overlib/?Documentation --></script>

    <title>Viewpoint Gallery</title>

    <script type="text/JavaScript">
    <!--
    function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    .artistphoto {
    margin-right: 5px;
    border: 1px solid #000000;
    }
    a {
    color: #0099cc;
    }

    body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    li{
    cursor:hand;
    cursorointer;
    }
    -->
    </style>
    </head>
    <body bgcolor="#FFFFFF" topborder=0 leftborder=0 marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" vlink="#0099cc">
    <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
    <table width="778" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="2" height="100" valign="top"><img src="TOP.GIF" alt="page header" width="780" height="100" usemap="#Map" border="0"></td>
    </tr>
    <tr>
    <td height="360" width="129" valign="top" background="http://www.sunnyview.org/home/buttons_top.gif"><img src="http://www.sunnyview.org/home/buttons_top.gif" alt="filler image and background for the navigation buttons" width="129" height="39"><br>
    <script language="JavaScript1.2" src="http://www.sunnyview.org/NewMenus.js"></script>
    <br>
    <img src="http://www.sunnyview.org/home/belowButtons.gif" alt="filler image" width="129" height="43"></td>
    <td width="651" valign="top">

    <div>

    <a href="./artCollection.cfm">Back to Artists</a>
    <h2 style="font-size:19px;">Gail Nadeau, Albany, New York</h2>


    <img name="artist" src="./Photos/Artists/GNadeau crop.jpg" style="float:left; border:1px solid #000000; margin-right:5px;">




    <div id="artComment" style="margin-bottom:15px; font-size:12px;"><p>"I started making collage in 1997, after many years of working in photography and printmaking. It was an exercise done to while away time while caretaking a loved one. The original work was done in a watercolor book 7 inches by 10 inches...</p>

    <p>The idea was to build the collage out of clippings from <i>Art in Architecture</i>, <i>Good Housekeeping</i>, and <i>House Beautiful</i>. They had to make sense. They had to have a meaning beyond "picture". I gave myself the assignment to create an image that reflected either the daily life spent in the house and garden or the evening spent in memory. If parts were missing, I was to draw them in and finish them with watercolor or pastel... The final images were representative of my frame of mind. Seven collage works were done during the period of time spent in the bungalow and became the foundation for future work.</p>

    <p>A few years later a large reproduction of the first collage was over painted with additional layers of acrylic paint and fabric. The finished image is 23 by 33 inches and hangs in the new wing of Sunnyview Rehabilitation Hospital.</p>

    <p>It would seem that gluing down pictures from magazines is a simple project, but I discovered it is not. It actually is very challenging trying to make art out of other people's imagery. In the end you want it to look as it it belongs to you..your style...your way of looking at the world."</p> </div>

    <script type="text/JavaScript">
    <!--
    if(document.getElementById)
    {
    var pHeight = document.getElementById("artComment").offsetHeight;
    alert(pHeight);
    if (document.getElementById("artComment").style.height <= 144)
    {
    document.write(pHeight);
    }
    }
    //-->
    </script>



    <table>
    <TR>
    <td valign="top" style="padding-bottom:15px;"><a href="#"><img src="./Photos/Art/Thumbs/GNadeau UntitledII.JPG" onClick="MM_openBrWindow('artinfo.cfm?artist=66&art=124','66','width=500,height=550')" style="border:2px solid #000000;"></a></td>
    <td valign="top" style="font-size:11px;">
    Untitled II<br>
    2001<br>
    mixed media on light print<br>
    30" X 22"<br>
    </td>
    </TR>
    </table>

    </div>

    </td>
    </TR>
    </table>

    </td>
    </tr>
    <tr>
    <td height="45" valign="top">&nbsp;</td>
    <td valign="top">
    <div align="center"><font face="Arial, Helvetica, sans-serif" size="1"><a href="http://www.deewebdesign.com">Designed
    by <br>
    <img src="../HOME/DWD_logo.gif" alt="site Design by Dee Web Design" width="86" height="33" border="0"></a></font></div>
    </td>
    </tr>
    <tr>
    <td height="93"></td>
    <td></td>
    </tr>
    <tr>
    <td height="1"><img height="1" width="129" src="/spacer.gif" alt="spacer.gif"></td>
    <td></td>
    </tr>
    </table>
    <map name="Map">
    <area shape="circle" coords="53,51,48" href="../HOME/home.cfm" alt="Return to the Sunnyview Home Page" title="Return to the Sunnyview Home Page">
    </map>
    </body>
    </html>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I assume the problem is that because your script is inside the table that holds the div you want measured then IE doesn't know the height until the table has finished loading. If you move your script beyond the table in the html then it will return the height.

    I'm sure Mike will have the exact details if I'm giving duff advice

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul is right-on, as usual

    A few more suggestions:

    1. I try to remove all Javascript from the HTML - at least put that code in a SCRIPT element in the HEAD and run it from the "window.onload" event. Look to see if overLIB and "NewMenus.js" are also hooking the "window.onload" event.

    2. What are you going to do with the height? Perhaps there's a CSS alternative to using Js in this case.

    3. Always use a validator.

  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)
    Code:
    <table>
    <tr>
        <td id="blahCell">
    	Some text
            <script>alert(document.getElementById("blahCell").offsetWidth);</script>
        </td>
    </tr>
    </table>
    The above will alert the correct value in browsers execept IE. It will return the td's width or height as 0. Reason for this is that IE will only render the table once its contents are rendered. This is a huge flaw in the IE rendering engine and there is nothing that can be done about it.

  11. #11
    SitePoint Zealot logitron's Avatar
    Join Date
    Feb 2006
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var pHeight = document.getElementById("artComment").style.scrollHeight;
    document.write(pHeight);
    Write it like this... Notice the <b>style</b> before scrollHeight?
    Patrick Smith
    PHP Programmer

  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)
    logitron, there is not scrollHeight property to the style object.

  13. #13
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup that seemed to do the trick.

    thanks! to answer your question though - the reason i am trying to get this value is that i have an image floated to the left of the div and i want the div containing the text to be the same height as the image.

    I was able to get the image height using coldfusion so what i have now is as follows:
    Code:
    <script type="text/JavaScript">
    <!--
    	if(document.getElementById)
    	{
    		var pHeight = document.getElementById("artComment").scrollHeight;
    		document.write(pHeight);
    		document.write("<br>");
    		
    		if (pHeight <150)
    		{
    			document.getElementById("artComment").scrollHeight = 150
    		}
    		
    	}
    //-->
    </script>
    but i dont think that the line inside the if statement is working - it says "object doesnt support this action.\

    so now how do i set the height of the div via my javascript? i tried using .style.height=150px but that only worked in IE.

    Quote Originally Posted by Paul O'B View Post
    Hi,
    I assume the problem is that because your script is inside the table that holds the div you want measured then IE doesn't know the height until the table has finished loading. If you move your script beyond the table in the html then it will return the height.

    I'm sure Mike will have the exact details if I'm giving duff advice

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi bdee1,

    Try this:
    Code:
    <script type='text/javascript'>
    function adjustDivHeight() // call this from the window 'load' event
    {
      if (document.getElementById) {
        document.getElementById('divId').style.height = document.getElementById('imgId').height + 'px';
      }
    }
    </script>
    Paul O'B probably knows a way to do it with CSS only.

  15. #15
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats it - i didn't add on the px. once i added that it seems to work in FF an IE.

    thanks!!

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are doing all this because your image is sliding out the bottom of the parent div then all you needed to do was to clear the image before the closing div of the parent with one of the many clearing techniques available (see the css faq on floats).

    However I assume you are doing something more complicated (or different) than that


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
  •