Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to get pixel height of a div?

    Hello...

    Just curious on what I am doing wrong: I want to get the pixelHeight of a div called content and assign it to a variable. Then I want to use that variable as the css top position property for another div.

    I'm new to Javascript, but am learning it.

    Right now I am just having trouble assigning the variable. I get 'undefined' when I try to output the variable to the browser.

    Here's the code :
    Code:
    <script language="javascript">
    
    var divh = document.getElementById('top').style.pixelHeight;
    
    </script>
    </head>
    <body>
    <!-- output divh -->
    <script language="javascript">
    document.write(divh);
    </script>
    this gives me

    undefined

    in my browser

    What am I doing wrong??

    Thanks
    Kevin

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    var divh = document.getElementById('top').style.height;
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Single Paradox...

    But I still get an undefined error...


    Code:
    <script language="javascript">
    var divh = document.getElementById('top').style.height;
    //test = "hi there";
    
    </script>
    </head>
    <body>
    <!--
    Start Header Layout
    -->
    <script language="javascript">
    document.write(divh);
    </script>
    <div id="layout" class="layout">
    <div id="upperleftcorner" class="upperleftcorner"></div>
    <div id="upperrightcorner" class="upperrightcorner" ></div>
    <div id="top" class="top" ></div>

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Part of your problem is that you're trying to reference divs that don't exist yet. Your JavaScript is being evaluated inline as it is read. Your divs haven't been created yet and can't be accessed through the DOM yet. You may be able to access them with inline JavaScript if your JavaScript appears after your divs are declared in the HTML.

    Also the code given earlier will only give you the height if you have already defined it through CSS. You can get the actual height of the div whether or not you have set it through CSS like this:
    Code:
    var divh = document.getElementById('top').offsetHeight;

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there amnesia,

    and a warm welcome to these forums.

    Here is a working example...
    Code:
    <script type="text/javascript">
    <!--
    onload=function() {
    
    var divh = document.getElementById('top').offsetHeight;
    
         alert(divh +"px");
    
     }
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="top" class="top" >
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. 
    Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti 
    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. 
    Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
     nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt 
    turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, 
    accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing, 
    est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
    </div>
    coothead

  • #6
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank You!

    This helped me figure this out!

    thank you alot! This is a great forum, glad I found it.

    here is how I did it:

    Code:
    <script language="javascript">
    var divh = document.getElementById('leftmenucontent').offsetHeight;
    var ttldiv = divh + 1;
    document.write ('<div id = "bottommudules" style = "position: absolute; height: 50px; width: 975px; left: 0px; top:' + ttldiv  + 'px; z-index: 12; background-color: #CCCCCC;>"')
    alert(ttldiv);
    	
    </script>
    Thanks again
    Kevin
    Last edited by amnesia; 08-21-2005 at 03:29 AM.

  • #7
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I cannot get actual height of a div when I add innerHTML

    As you can see from the example
    • Element.height
    • Element.heightoffset
    • Element.clientHeight
    • Element.style.height

    don't return me the actual height after changing the content of a div. I just cannot believe it is impossible not to be able to retrieve the height after the browser processed the HTML. Help would be appreciated in any way. Thanks in advance.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function getElementFromEvent(e)
    	{
    		var targetElement
    		if (!e) var e = window.event
    		if (e.target) targetElement = e.target
    		else if (e.srcElement) targetElement = e.srcElement
    		if (targetElement.nodeType == 3) // deal with Safari bug
    		targetElement = targetElement.parentNode
    		getElementProperties(targetElement);
    	}
    	
    function getElementProperties(targetElement)
    	{
    		targetClass=targetElement.className;
    		if (!targetClass=="controls"||targetClass=="") {
    			targetTagType=targetElement.tagName;
    			targetId=targetElement.id;
    			targetHeight=targetElement.height;
    			targetOffsetHeight=targetElement.heightoffset;
    			targetClientHeight=targetElement.clientHeight;
    			targetStyleHeight=targetElement.style.height;
    			targetComputedStyleHeight=getStyle(targetId,"height");
    
    			alert("You clicked on a " + targetTagType + " element.\nId = " + targetId + "\n\nHeight = " + targetHeight + "\nHeight Offset = " + targetOffsetHeight + "\nClient Height = " + targetClientHeight + "\nStyle Height = " + targetStyleHeight + "\nComputed Style Height = " + targetComputedStyleHeight)
    		}
    	}
    
    function getStyle(targetElement,styleProp)
    	{
    		if (targetElement) {
    			if (targetElement.currentStyle) return targetElement.currentStyle[styleProp];
    			else if (window.getComputedStyle) return document.defaultView.getComputedStyle(targetElement,null).getPropertyValue(styleProp);
    		}
    	}
    
    var gv_NrOfLines=0;
    
    function addTekst()
    	{
    		gv_NrOfLines+=1;
    		updateValue(document.getElementById("chkAddUp").checked);
    	}
    
    function removeTekst()
    	{
    		gv_NrOfLines-=1;
    		if (gv_NrOfLines<0) gv_NrOfLines = 0;
    		updateValue(document.getElementById("chkAddUp").checked);
    	}
    
    function updateValue(addOnTop)
    	{
    		var currentLineTekst = "Some new Text.";
    		document.getElementById("divId").innerHTML="";
    		if (addOnTop) {
    			for (lineIndex=gv_NrOfLines;lineIndex>0;lineIndex--)
    			{
    				document.getElementById("divId").innerHTML+="("+lineIndex+" of "+(gv_NrOfLines-1)+") "+currentLineTekst+"<br>";
    			}
    		}
    		else
    		{
    			for (lineIndex=0;lineIndex<gv_NrOfLines;lineIndex++) {
    				document.getElementById("divId").innerHTML+="("+lineIndex+" of "+(gv_NrOfLines-1)+") "+currentLineTekst+"<br>";
    			}
    		}
    	}
    </script>
    </head>
    
    <body onmousedown="getElementFromEvent(event)">
    
    <h2>This is a header</h2>
    <p id="pId">This is a paragraph. Click on this paragraph, the header, the div or the image to see different height property values.</p>
    <input id="btnaddTekst" class="controls" value="add Tekst" type="button" onMouseDown="addTekst();">
    <input id="btnremoveTekst" class="controls" value="remove Tekst" type="button" onMouseDown="removeTekst();">
    <input id="chkAddUp" class="controls" type="checkbox" checked="checked">Add on Top/Bottum
    <div id="divId">Some Text in a div with id = divId</div>
    <p><img id="imgId" alt="Add youre image."></p>
    
    </body>
    </html>
    Last edited by magiel; 11-28-2009 at 09:30 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •