locked
how can decrease div height with javascript? RRS feed

  • Question

  • hi there

    i write some code to increase my div's height over time like below :

    var  hei= document.getElementById("div1").style.height;
                   
            function Close()
            {
                if( hei> 50)
                {
                    document.getElementById('div1').style.height =  hei + 'px';
                                   
                     hei=  hei- 5  ;
                
                    setTimeout('Close()', 5000);
                }
            }

     

    <body>
        <div id="div1" style="width:800px; height: 400px; background-color: #C0C0C0; margin: 50px auto auto auto;"></div>
       
        <form>
            <input type="button" value="Close up box!" onclick="Close()"/>
        </form>
    </body>

     

    but it didn't work :(

    pls help me where of my code is wrong ?

    thnks

    Saturday, July 3, 2010 7:22 AM

All replies

  • Try something like this:

    var hei=parseInt(document.getElementById("div1").style.height);
    var intervalid=window.setInterval('Close();',5000);

    function Close()
    {
       if(hei>50)
       {
           document.getElementById("div1").style.height=hei+'px';
           hei=hei-5;
       }
       else
       {
           window.clearInterval(intervalid);
       }
    }

    Note that the two main differences here are:

    1. The declaration of the hei variable uses the parseInt function
    2. The setInterval function is used instead of the setTimeout. This is more efficient in your case because it is one less method to be executed each time the Close() method is called (although if you prefer, I think your code will work as it was before with setTimeout once you add the parseInt method)

    I don't know where you call the Close() method from, but I am assuming that the point at which it gets called is after the declaration and initialization of the hei variable. In my code, the Close method get called by the setInterval method, so I call it (indirectly, but it still gets called) on line 2 of my code, but I didn't see any code in yours that calls it. Good Luck!


    Nathan Sokalski
    njsokalski@hotmail.com
    http://www.nathansokalski.com/

    "Banafsheh" wrote in message news:d217c8a8-011f-4161-ab25-c088adab65e3@communitybridge.codeplex.com...

    hi there

    i write some code to increase my div's height over time like below :

    var  hei= document.getElementById("div1").style.height;

            function Close()
            {
                if( hei> 50)
                {
                    document.getElementById('div1').style.height =  hei + 'px';

                     hei=  hei- 5  ;

                    setTimeout('Close()', 5000);
                }
            }



    <body>
        <div id="div1" style="width:800px; height: 400px; background-color: #C0C0C0; margin: 50px auto auto auto;"></div>

        <form>
            <input type="button" value="Close up box!" onclick="Close()"/>
        </form>
    </body>



    but it didn't work :(

    pls help me where of my code is wrong ?

    thnks


    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/
    Tuesday, July 13, 2010 4:42 AM