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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post

    Convert auto to pixels

    Hi,
    I have a collapsible container that will go from a height of 0 to 200 pixels. One thing I want to consider is the text size being changed while the container is hidden. If the text size is increased the height will need to be increased.

    At the moment I am simply keeping the same height but once the JavaScript completes tweening I then set the containers height to auto.

    What I would like to know is if it is possible to convert auto to pixels?
    I have tried using offsetHeight but because the height is set to 0 it returns 0. Does anyone have any ideas how I can get the height of container in pixels while its height is 0.

    Thanks

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Does anyone have any ideas how I can get the height of container in pixels while its height is 0.


    Perhaps what you need to do is keep it sized normal but hidden instead of sized to 0 and then before you want to use it, you get the height, then you resize it to 0 and make it visible. Now you got the height and you're back where you want to be.

  • Users who have thanked TinyScript for this post:

    tsclan (03-31-2009)

  • #3
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    Thanks TinyScript,

    That was actually something I thought about doing not long after writing that post. Initially I had set the visibility to hidden but that just meant there was still an empty space where my div was. My first thought was to then set display to none allowing any content below it to take up the space. This worked but meant the offsetHeight wouldn't return anything as the div wasn't rendered.

    This is why I asked the original question. As it turns out there could be a CSS solution where instead of setting it to display none I will simply give it an an absolute position while hidden. This shouldn't disturb any content else where but still keep the offsetHeight readable.

    As you partly suggested I can then set the position back to relative, visibility to visible and height to 0 when I want to expand the section.

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When you look at the following example you see I cannot find a way to get the current height of the div, when it is filled with some text. If somebody could help me, It will be highly appreciated. Thank 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>


  •  

    Posting Permissions

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