Add onload event trigger + timer

nadazoulou · 12-02-2011, 05:11 AM

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

Amphiluke · 12-02-2011, 05:59 AM

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…

nadazoulou · 12-02-2011, 06:10 AM

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 ?

Amphiluke · 12-02-2011, 06:18 AM

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>

nadazoulou · 12-02-2011, 06:43 AM

Ok got it to work..
thks buddy.