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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts

    Understanding how to make this use a timer

    Code:
        <script type="text/javascript">
        $(document).ready(function(){
            $(".trigger").click(function(){
                $(".panel").toggle("fast");
                $(this).toggleClass("active");
                return false;
                }
            });
        });
        </script>
    This is the jQuery code, I have right now. I have been trying to set it to use a timer after the click that will cause the menu to return to it original state. I have had no luck. Is there anyway one of you could explain to me how I can go about this?
    Last edited by Chris Hick; 01-08-2011 at 09:08 AM.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #2
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    what do you mean by timer? you want a delay in the toggle?

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    I want the menu to display when clicked then after a certain amount of time it goes back to normal.

    For instance lets say, I click this grey box that says menu.. then a table like menu displays right next to it. Right now it just stays there. I would like after a certain amount of time that it returns to only displaying the grey box.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Right now you toggle the elements of class ".panel". So what you want is
    - Find out if it's currently active
    - If it's active, deactivate automatically after x seconds
    Code:
        $(document).ready(function(){
            $(".trigger").click(function(){
                $(".panel").toggle("fast");
                $(this).toggleClass("active");
                if($(this).hasClass("active")) {
                   window.setTimeout(function() {
                      $(".panel").toggle("fast");
                      $(this).toggleClass("active");
                   }, x * 1000);   // replace your x here
                }
                return false;
                }
            });
        });

  • Users who have thanked devnull69 for this post:

    Chris Hick (01-08-2011)

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Ah, why did I not think of the If statement.. This is much appreciated, Devnull69. I should always remember that if something starts, I have to end it.

    But I will say that you have a curly bracket that causes it not to work.(The one after the return false; statement.) I removed it in my code and it works perfectly.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    lol yes I just copy/pasted it from your code which I expected to be working correctly

  • #7
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    if you are using jquery 1.4 yo can simple do

    Code:
      <script type="text/javascript">
        $(document).ready(function(){
            $(".trigger").click(function(){
    
                $(".panel").show("fast").delay(2000).hide("fast");
    
            });
        });
        </script>
    You can change the delay time "1000 = 1 sec" and effect with

    Code:
    //slide effect
    $(".panel").slideDown("fast").delay(4000).slideUp("fast");
    
    //fade effect
    $(".panel").fadeIn("fast").delay(2000).fadeOut("fast");
    or go crazy and play with the css and animation effects. but yeah, 1.4 has delay which is awesome.

    here is an example with the fade
    http://www.blueicestudios.com/delay/


  •  

    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
    •