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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help to animate onclick drop down DIV

    I'm using the below code to expand and collapse a DIV on alternative clicks


    Code:
    <script>
     function Tog(id){
    var x=document.getElementById(id);
    if(x) {
            if(x.style.display=='none') 
                                              { x.style.visibility='visible';
                                               x.style.display='block';
                                              }
              else{ x.style.visibility='hidden';
                      x.style.display='none';
                   }
             }
                              }
    </script>
    
    <a href="#" onclick="Tog('togme')" > Click me tog 'togme'</a>
    <div id="togme">
    Content inside this DIv will hide and show on alternative clicks
    </div>
    When you click on the link div togme drops down suddenly, I need to make it slow and animated, however I'm not able to make it animated yet.

    I tried playing around with the below code

    Code:
    <script> function show() { var curheight=0; var fullheight=document.getElementById("hidden").offsetHeight; while(curheight<fullheight) { curheight=curheight+10; document.getElementById("hidden").style.height=curheight+"px"; document.getElementById("hidden").style.display="block"; // SET DELAY HERE FOR EVERY INCREMENT IN VALUE OF NEW HEIGHT } } </script> <i onclick="show()" >Click me</i> <div id='hidden' style="display:none;"> Hide me<br> Hide me<br> Hide me<br> Hide me<br> Hide me<br> Hide me<br> Hide me<br> </div>
    Still no luck, Something is wrong with the usage of display:block , It display whole of it in a click, Help me fix this
    Last edited by javascriptnooob; 12-07-2009 at 06:32 PM.

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    I think your code is OK but you're not using a timer, so the expansion of the div happens as quickly as the processor can work, which makes it look instant.

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Help me bud, show me how.

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Tried this, no luck,
    Code:
    function update(newheight){
    document.getElementById("hidden").style.height=newheight+"px";
    document.getElementById("hidden").style.display="block";
    }
    function show() {
    var curheight=0;
    var fullheight=document.getElementById("hidden").offsetHeight;
    while(curheight<fullheight) {
    curheight=curheight+10;
    setTimeout("update(curheight)", 100);
    }
    }
    </script>

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Code:
    function show(id, fullheight) {
    var div=document.getElementById(id);
    var curheight=parseInt(div.style.height);
    var newheight=curheight+10;
    div.style.height=newheight+"px";
    if(newheight<=fullheight) {
    setTimeout("show('"+id+"',"+fullheight+")",100);
    }
    }
    
    show('hidden',200) //200px

  • Users who have thanked gusblake for this post:

    javascriptnooob (12-08-2009)

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you it worked, used visibility:hidden instead of 'display'


  •  

    Tags for this Thread

    Posting Permissions

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