Develop Reference

Using jQuery to countdown from 90 seconds beginning on the click of an element

Hi I was wondering if anyone can help me. I am trying to create a simple card game using html css and javascript. It has a 90 second timer which I want to start counting down on the first click of the card.
Any ideas how to do this?
Thank you!!

If you want to run a function after 90 seconds then
element.onclick = function () {
setTimeout(myFunctionAfter90Secs, 90 * 1000);
};
And you would define element to be the element that's clicked on (use a querySelector) and define your myFunctionAfter90Secs
If you want to display a timer then:
Html:
<div id="timer"></div>
<div id="card"></div>
<script>
var timer = document.querySelector("#timer");
var card = document.querySelector("#card");
var initialSeconds = 90;
card.onclick = function () {
var myInterval = setInterval(function() {
if (initialSeconds > -1) {
timer.innerHTML = initialSeconds;
initialSeconds--;
}
else {
clearInterval(myInterval);
}
}, 1 * 1000);
};
</script>
This will make sure your timer updates every second until it hits 0, then the reset should clear your interval but feel free to tweak the code to fix it

How do I remove a dynamically added element after 5 seconds?

I'm making a simple game where users should click flies to remove them from the screen. The user should not click the cat when it drops, and I'm hoping to make the cat gif disappear (remove itself from the DOM) after 5 seconds.
I apologize if this has been answered before. I'm having a hard time solving this as my experience is very limited. This is my first question/post ever. Thanks for any and all feedback :)!
$('.square').each(function(i){
if (($('.square').eq(i)).has(".cat")){
setTimeout(function(){
$('.square').eq(i).find('img').remove();
}, 5000);
};
^this is the code I tried to write... the .square class are the squares that make up the table like grid of divs... and the .cat class refers to an image dropped.
The problem is multiple cats can be dropped on the screen at the same time.
I need the page to recognize when a cat is dropped, set a timeout for 5 seconds when that occurs, and then remove that particular cat from the page after 5 seconds.
Thanks for the help :)!
var randomize = function (x) {return Math.floor(Math.random()*x)};
var startFunk = function(){
setTimeout(function(){
$('.square:empty')[randomize(($('.square:empty').length))].innerHTML = dropArray[randomize(dropArray.length)];
startFunk();
}, 500);
};

May help
$('.square').each(function(i){
if ($(this).find('.cat').length > 0){
$(this).find('.cat').delay(5000).fadeOut(0, function(){
// change ..^... with img
$(this).remove();
});
}
});
DEMO Here

var startFunk = function () {
setTimeout(function () {
var sqr = $('.square:empty')[randomize(($('.square:empty').length))];
sqr.innerHTML = dropArray[randomize(dropArray.length)];
sqr.has('.cat').delay(5000).empty();
startFunk();
}, 500);
};
And get rid of the $('.square').each(function(i){... part.

Javascript jump between intervals

Ok so , i'm trying to build a custom slideshow with javascript, but i would like to put a custom pause interval for each slide .
let's say i have a slideshow with 3 slides i want it to be like :
30 seconds 8 sec 8 sec
|-------------------|------|-------|
slide 1 slide2 slide3
I want to be able to give a function a list of intervals [5 , 10 , 20] and shuffles a list of slides using that interval list.
I did try to solve this using setInterval with fun , but unfortunately it'sctions calling the next function but as you know it's not scalable to many slides,
Code
// slid is a class having all slides
function bringback() {
slid.goToSlide(0);
}
function bringback2() {
slid.goToSlide(2);
setTimeout( bringback, 8000 );
}
$(document).ready(function(){
setInterval(function(){
slid.goToSlide(1);
setTimeout( bringback2, 8000 );
}, 30000);
});

Use setTimeout:
;(function(){
var intervals = [5,10,20];
(function update(next){
// Pick a slide and update the slideshow here
setTimeout(function(){
update((next + 1)%intervals.length);
}, intervals[next]*1000);
})(0);
})();
Demo
You could make it choose a random slide or just iterate through the slides in order, like so:
;(function(){
var intervals = [5,10,20];
(function update(next){
slid.goToSlide(next);
setTimeout(function(){
update((next + 1)%intervals.length);
}, intervals[next]*1000);
})(0);
})();

Custom AutoRotator on slider not trigged until hover?

I recently modified the SquareSlider (http://gilbert.pellegrom.me/recreating-the-square-slider) so that a client could have an AutoRotator on their promos, along with this they wanted the rotator to stop if somebody was hovering over it. By default the scroller rotates every 4 seconds.
// Automatic Rotation
var autoScroller = function(){
slides.removeClass('active');
currentSlide++;
if(currentSlide > slides.length - 1) currentSlide = 0;
$(slides[currentSlide]).addClass('active');
};
// Pause the Rotation on Hover, resume when not hovering
$('.square-slider').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer = setInterval( autoScroller, 4000);
});
However, after adding in the pause-on-hover it no longer autorotates when the page loads, in order to trigger the rotating you have to hover over the slider first. Any help would be greatly appreciated in getting it to AutoRotate on pageload instead of having to hover first.
Here's a link to a jsFiddle where I have recreated it.
If you load the page no autoRotating will happen until you hover over the slider first.
http://jsfiddle.net/dylanbaumann/RSP2z/

Two things:
1) Need to initialize the timer. Abraham had this one.
2) Right now your hover will affect all slideshows on the same page.
//declare the timer
var timer = setInterval( autoScroller, 4000);
//use the already defined slider variable instead of selecting all sliders
slider.hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval( autoScroller, 4000);
});

you can do
var timer = setInterval( autoScroller, 4000);
// BELOW THIS COMMENT IS THE ISSUE
$('.square-slider').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer = setInterval( autoScroller, 4000);
});
http://jsfiddle.net/RSP2z/6/

You have to define timer before clearing it. i.e. var timer = setInterval(autoScroller,4000);
Hope this helps.

javascript slowly decrease volume of audio element

audio element is playing with volume:
audio.setVolume(.20)
At a certain point I want to fade out the volume, rather than have it cut abruptly, so in essence I want
audio.setVolume(.15)
audio.setVolume(.10)
audio.setVolume(.05)
audio.setVolume(.03)
audio.setVolume(.01)
but there needs to be some very brief delay in between these changes so they are audible and I get my fade out effect. What is the proper way to do this?
thanks!

You could use a setInterval():
// Initial volume of 0.20
// Make sure it's a multiple of 0.05
var vol = 0.20;
var interval = 200; // 200ms interval
var fadeout = setInterval(
function() {
// Reduce volume by 0.05 as long as it is above 0
// This works as long as you start with a multiple of 0.05!
if (vol > 0) {
vol -= 0.05;
audio.setVolume(vol);
}
else {
// Stop the setInterval when 0 is reached
clearInterval(fadeout);
}
}, interval);

I would wrap the setTimeout inside of the function, as well as the options. Regarding the factor, 0.01 will be a safe value to decrease without you having to know or adjust the initial value.
function fadeVolume(volume, callback)
{
var factor = 0.01,
speed = 50;
if (volume > factor)
{
setTimeout(function(){
fadeVolume((audio.volume -= factor), callback);
}, speed);
} else {
(typeof(callback) !== 'function') || callback();
}
}
fadeVolume(audio.volume, function(){
console.log('fade complete');
});
Once the fade is complete, it will fire a callback that you can use to play the next song.

You can use this mouse key event too.
audio.on('keydown', function() {
// and here keep increasing or decreasing the volume, untill keyUp
})
As being viewed, its jQuery! You can use it for your work. Also, the audio tag is for the div, that contains the audio tag!