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 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2011
    Location
    Mauritius
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Add onload event trigger + timer

    Hi all i have this script below that slide up and slide down a panel on click :

    <script type="text/javascript">

    // When the DOM is ready, initialize the scripts.
    jQuery(function( $ ){

    // Get a reference to the container.
    var container = $( "#panel" );


    // Bind the link to toggle the slide.
    $( ".btn-slide" ).click(
    function( event ){
    // Prevent the default event.
    event.preventDefault();

    // Toggle the slide based on its current
    // visibility.
    if (container.is( ":visible" )){

    // Hide - slide up.
    container.slideUp( 500 );
    $(this).removeClass("active");

    } else {

    // Show - slide down.
    container.slideDown( 500 );
    $(this).addClass("active");

    }
    }
    );

    });

    </script>

    What i want to do is also to make the panel slide up on page load...delay for 3 seconds then slide down..

    Being a newbie .. I have no idea on how to add this bit of code...

    Any help appreciated..

    Thks

    //Sam

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Code:
     $(window).load(function() {
        container.slideUp(500).delay(3000).slideDown(500);
     });
    I can't make out though why you want to get such a strange effect…
    I am still learning English

  • #3
    New Coder
    Join Date
    Aug 2011
    Location
    Mauritius
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi thks for the code...on page load the panel slide up but it doesn't slide down after the 3 seconds delay...

    any idea ?

  • #4
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    It is strange.
    This works correctly for me.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Noname</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    // When the DOM is ready, initialize the scripts.
     jQuery(function( $ ){
    
     // Get a reference to the container.
     var container = $( "#panel" );
    
     $(window).load(function() {
        container.slideUp(500).delay(3000).slideDown(500);
     });
    
     // Bind the link to toggle the slide.
     $( ".btn-slide" ).click(
     function( event ){
     // Prevent the default event.
     event.preventDefault();
    
     // Toggle the slide based on its current
     // visibility.
     if (container.is( ":visible" )){
    
     // Hide - slide up.
     container.slideUp( 500 );
     $(this).removeClass("active");
    
     } else {
    
     // Show - slide down.
     container.slideDown( 500 );
     $(this).addClass("active");
    
     }
     }
     );
    
     });
    </script>
    </head>
    <body>
    <a href="#" class="btn-slide">slide</a>
    <div id="panel">ftiogjior</div>
    
    </body>
    </html>
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    nadazoulou (12-02-2011)

  • #5
    New Coder
    Join Date
    Aug 2011
    Location
    Mauritius
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok got it to work..
    thks buddy.


  •  

    Posting Permissions

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