changing the height of div

Discussion in 'JavaScript' started by learnerabn, Aug 17, 2010.

0
  1. #1
    Hi all,
    I want to change the height of the div tag's content dynamically
    how can i do this?

    Thanks in advance.
     
    learnerabn, Aug 17, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    Here is an example how to do it:

    
<html>

<head>
  <title>Changing height</title>
</head>

<script type="text/javascript">
function change_height(div){
    document.getElementById(div).style.height = "200px";
}
</script>

<body>

<div id="div1" style="border: 1px solid #000000; width: 200px; height: 100px">It is div 1</div>
<input type="button" value="Change div 1 height" onclick="change_height('div1');" />

<div id="div2" style="border: 1px solid #000000; width: 200px; height: 150px">It is div 2</div>
<input type="button" value="Change div 2 height" onclick="change_height('div2');" />

</body>

</html>
    Code (JavaScript):
     
    s_ruben, Aug 17, 2010 IP
  3. learnerabn

    learnerabn Peon

    Messages:
    131
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks for your reply first,
    But i'm having dynamic text.
    The div height should changed dynamically so that the text should fix in the div exactly.
    how can i do this.
     
    learnerabn, Aug 17, 2010 IP
  4. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #4
    Can you write here an example what you want? I think you need something like this:

    
<html>

<head>
  <title>Changing height</title>
</head>

<script type="text/javascript">
function change_height(div){
    alert("The height of "+div+" is "+document.getElementById(div).offsetHeight+" px.");
}
</script>

<body>

<div id="div1" style="border: 1px solid #000000; width: 400px">Div1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<script type="text/javascript">change_height("div1");</script>

<div id="div2" style="border: 1px solid #000000; width: 400px">Div2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<script type="text/javascript">change_height("div2");</script>

</body>

</html>
    Code (JavaScript):
     
    s_ruben, Aug 18, 2010 IP