Results 1 to 5 of 5

Thread: capturing the height of a div box

  1. #1
    Join Date
    Apr 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default capturing the height of a div box

    im pretty new at this. Can someone please explain why this does not work:
    function Slide(elementInside)
    {

    slider = document.getElementById(elementInside);
    var sliderHeight;
    sliderHeight = slider.style.height;

    }
    I want to be able to capture the height of any div that is passed into this function. I have the javascript, html and css in 3 different files..

    Many thanks.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Try this:
    Code:
    function Slide(elementInside){
    var slider = document.getElementById(elementInside);
    var sliderHeight = slider.style.height; //or you can take the .style out of here and add it to var slider.
    // If you want to right it add: document.write(sliderHeight);//
    }
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    raman19 (04-03-2008)

  4. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Quote Originally Posted by raman19 View Post
    im pretty new at this. Can someone please explain why this does not work:
    function Slide(elementInside)
    {

    slider = document.getElementById(elementInside);
    var sliderHeight;
    sliderHeight = slider.style.height;

    }
    I want to be able to capture the height of any div that is passed into this function. I have the javascript, html and css in 3 different files..

    Many thanks.
    The code you've provided seems to be fine except some small things like introduced an item without declaring it. Unlike you've mentioned it will not check whether the send element ID belongs to a div block or not it will try to get an element with the provided ID whether it is div, span, p or any other elements.

    I've changed the code a bit so that it will not perform any incorrect operation if the mentioned element is not present

    Code:
    function Slide(elementInside){
    	var slider = document.getElementById(elementInside);
    	if(slider){
    		var sliderHeight = slider.style.height;
    		alert(sliderHeight); //At this point you can return the height to the calling point of this function if you want.
    	}
    	return;
    }
    You can shorten the length of the above mentioned function if you want but I thought it would be better if you consider that before doing so.

  5. The Following User Says Thank You to codeexploiter For This Useful Post:

    raman19 (04-03-2008)

  6. #4
    Join Date
    Apr 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thank you both for looking at this, but i still cant get it to work. Ive included a sample of what i want to do in one simple page. I would really appreciate if you can look at it again. ive tried debugging it using firebug. It seems that the style part of boxInFunction.style.height comes up as undefined. Please help

    <!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>
    <style type="text/css">
    .box{
    height:100px;
    background-color:green;
    }
    </style>
    </head>
    <body>
    <div id="mybox" class="box" onClick="checkHeight('mybox');">
    <h1> This is my box</h1>
    </div>
    <script type="text/javascript">
    function checkHeight(boxname)
    {
    var boxInFunction =document.getElementById(boxname);
    var boxHeight = boxInFunction.style.height;
    alert(boxHeight);
    }
    </script>
    </body>
    </html>

  7. #5
    Join Date
    Apr 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    it seems that it works fine if in the original div you specify an initial style="height:0px" . then you can read and change the properties as many times as u want .. interesting

    raman

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
  •