...

View Full Version : Resolved Understanding how to make this use a timer



Chris Hick
01-08-2011, 09:09 AM
<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?

seco
01-08-2011, 09:17 AM
what do you mean by timer? you want a delay in the toggle?

Chris Hick
01-08-2011, 09:23 AM
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.

devnull69
01-08-2011, 09:50 AM
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


$(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;
}
});
});

Chris Hick
01-08-2011, 09:59 AM
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.:thumbsup:

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.

devnull69
01-08-2011, 10:01 AM
lol yes I just copy/pasted it from your code which I expected to be working correctly :)

seco
01-08-2011, 02:55 PM
if you are using jquery 1.4 yo can simple do



<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



//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/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum