I have this event to turn my music of by fading it out
$(bgMusic).on('timeupdate', function () {
var vol = 1,
interval = 250;
if (bgMusic.volume == 1) {
var intervalID = setInterval(function () {
if (vol > 0) {
vol -= 0.05;
bgMusic.volume = vol.toFixed(2);
} else {
clearInterval(intervalID);
}
}, interval);
}
});
I now want the same thing for turning the music on.
I have tried creating the opposite like this:
$(bgMusic).off('timeupdate', function () {
var vol = 0,
interval = 250;
if (bgMusic.volume == 0) {
var intervalID = setInterval(function () {
if (vol < 0) {
vol += 0.05;
bgMusic.volume = vol.toFixed(2);
} else {
clearInterval(intervalID);
}
}, interval);
}
});
Where am I going wrong?
If you change:
if (vol < 0) {
to:
if (vol < 1) {
... I think the volume should gradually increase until it meets it maximum value of 1, hence giving you the "fade in" effect you ask for.
Not sure about your code but I think you don't want to use the off function in your second example.
jQuery off:
Description: Remove an event handler.
So try your second code with on to, since you want to register to the event, not remove it.
since your vol is 0 , it doesnot goes inside the if condition.. if (vol < 0) {...
it should be
if (vol < 1) {
vol += 0.05;
bgMusic.volume = vol.toFixed(2);
} else {
clearInterval(intervalID);
}
Related
I must be doing something wrong. Trying to set arrow hotkeys for videos to skip through the timeline and adjust the volume. Console logs return the desired new values, but they are not set.
document.onkeydown = function(e) {
var vid = document.getElementsByTagName('VIDEO');
if (vid.length) {
var vol = vid[0].volume;
var time = vid[0].currentTime;
var start = vid[0].seekable.start(0) + 10;
var end = vid[0].seekable.end(0) - 10;
if (e.keyCode === 37) {
if (start < time) {
time = time - 10;
console.log(time);
}
e.preventDefault();
}
if (e.keyCode === 38) {
if (vol < 1.0) {
vol = vol + 0.1;
console.log(vol);
}
e.preventDefault();
}
if (e.keyCode === 39) {
if (time < end) {
time = time + 10;
console.log(time);
}
e.preventDefault();
}
if (e.keyCode === 40) {
if (0.0 < vol) {
vol = vol - 0.1;
console.log(vol);
}
e.preventDefault();
}
}
};
You are not updating the vid.
Let's take an instance for volume updation.
What's happening here is you are taking value out of vol[0].volume into another variable 'volume' and upon event you are updating volume as a variable not vid, which you are using actually. Same goes for other keys (start, end and time).
Update vid as well.
There is an object.
There is this method that initializes the timer in another method within the same object.
initstep1() {
var totAns = TriviaGame.corAnswered + TriviaGame.incorAnswered;
//for (let v=0;v<TriviaGame.arrayOfSelected.length;v++){TriviaGame.arrayOfSelected.pop();}
//for (let u=0;u<TriviaGame.arrayOfIntervals.length;u++){clearInterval(TriviaGame.arrayOfIntervals[u]);TriviaGame.arrayOfIntervals.pop();}
$("#maincontact0").css("display", "none");
$("#maincontact2").css("display", "none");
$("#maincontact1").css("display", "flex");
if (totAns != 10) {
TriviaGame.populatePromptContent();
} else {
TriviaGame.initstep3();
}
if (TriviaGame.corAnswered == 0 && TriviaGame.incorAnswered == 0) {
TriviaGame.giveQuestionsClickEvents();
TriviaGame.giveAnswersClickEvents();
}
$("#maincontact1qr").text() == 30;
TriviaGame.timerOnTheRight();
}
It's called timerOnTheRight...
Here it is...
Never gets cleared no matter what I do.
timerOnTheRight() {
//for (let u=0;u<TriviaGame.arrayOfIntervals.length;u++){clearInterval(TriviaGame.arrayOfIntervals[u]);TriviaGame.arrayOfIntervals.pop();}
console.log(TriviaGame.arrayOfIntervals);
let countDown1 = 30;
var thisVeryTimer = setInterval(function() {
countDown1--;
if ($("#maincontact1qr").text() != 1) {
$("#maincontact1qr").text(countDown1);
}
if ($("#maincontact1qr").text() < 11) {
$("#maincontact1qr").css("color", "orange");
}
if ($("#maincontact1qr").text() < 4) {
$("#maincontact1qr").css("color", "red");
}
if ($("#maincontact1qr").text() == 1) {
TriviaGame.arrayOfCurrent[0].timespent = "Yes";
clearInterval(thisVeryTimer);
TriviaGame.initstep2();
}
}, 600);
}
Make sure the conditional is correct, and the inside the conditional block is working when conditioning is met. You should console out thisVeryTimer to make sure it is the same interval id.
Another issue should be the scope of the variable.
clearInterval(thisVeryTimer);
Try to move the above code out of the interval block.
My goal is, if a page contains the specified button, click it, and increase the amt_clicked by 1. When amt_clicked is greater than 15, wait for 60 seconds and reset amt_clicked. I have no idea how do this if statement. Example:
var amt_clicked = 0;
while (1) {
while (amt_clicked < 15) {
if (button found) { // this is where I am lost
iimPlay("TAG POS={{amt_clicked}} TYPE=BUTTON ATTR=TXT:Get");
amt_clicked++;
}
}
iimPlay("WAIT SECONDS=60");
amt_clicked = 0;
}
This will run 20 times per second, using the window.setInterval() function:
var amt_clicked = 0;
var amt_cooldown = 1200;
setInterval(function(){
if (amt_cooldown === 0)
amt_cooldown = 1200;
else if (amt_cooldown < 1200)
amt_cooldown -= 1;
else if (amt_clicked > 15) {
amt_clicked = 1;
amt_cooldown -= 1;
} else {
amt_clicked -= 1;
//Click
}, 50);
You can use combination of setInterval and setTimeout.
I have added comments to code for you to understand.
var amt_clicked = 0;
var setTimeoutInProcess = false;
//processing the interval click function
setInterval(() => {
checkButtonAgain();
}, 200);
function checkButtonAgain() {
var element = document.getElementById('iNeedtoBeClicked');
//if clicked 15 times then need to wait for 60 seconds
if (amt_clicked === 15) {
if (!setTimeoutInProcess) {
setTimeoutInProcess = true;
setTimeout(function() {
//resetting the amt-clicked
amt_clicked = 0;
setTimeoutInProcess = false;
}, 60000);
} else {
console.log('waiting');
}
} else if (typeof(element) != 'undefined' && element != null) {
//triggering click and increasing the amt_clicked
element.click();
amt_clicked++;
}
console.log(amt_clicked);
}
<button id="iNeedtoBeClicked">Click ME Button</button>
I've got a script that is a simple countdown.
You can put in a number press SET and then click START and the number will count down.
I use this in the gym, but I forget to press the SET button a lot after entering the new count.
Is it possible to let jquery take the form input or do I have to use a SET button?
var CCOUNT;
$(document).ready(function() {
$('#btnct').click(function() {
CCOUNT = $('#seconds').val();
cdreset();
});
});
var t, count;
function cddisplay() {
document.getElementById('timespan').innerHTML = count;
}
function countdown() {
// starts countdown
cddisplay();
changeColor(CCOUNT);
if (count === 0) {
// time is up
} else {
count--;
t = setTimeout(countdown, 1000);
$("#onebuttons").attr('disabled', 'disabled');
}
}
function cdpause() {
// pauses countdown
clearTimeout(t);
$("#onebuttons").removeAttr('disabled');
}
function cdreset() {
// resets countdown
cdpause();
count = CCOUNT;
cddisplay();
$("#onebuttons").removeAttr('disabled');
}
function changeColor() {
if (count <= 1000 && count > 29) {
document.getElementById('timespan').style.color = "#00CC00";
} else if (count <= 29 && count > 9) {
document.getElementById('timespan').style.color = "#F87217";
} else if (count <= 9 && count > 3) {
document.getElementById('timespan').style.color = "#ff0000";
} else if (count === 3) {
var audio = document.createElement("audio");
audio.src = "3-2-1-0.m4a";
audio.play();
}
if (count === 0) {
document.getElementById('timespan').style.color = "#ffffff";
}
if (count < 10) {
$("#timespan").fadeOut('slow', function() {
$("#timespan").text(count);
$("#timespan").fadeIn();
});
}
}
yes, just let the call out of the on click method
like this
var CCOUNT;
$(document).ready(function() {
CCOUNT = $('#seconds').val();
cdreset();
});
It will make your method fire at the time the page finnish loads
I have a timer that starts counting up when the page is loaded. I want it to stop when the user scrolls to the bottom of the page. Here is the jQuery I've written:
function timerTick(time, stop)
{
if(stop == false)
{
setInterval(function ()
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}, 100);
}
else //behavior is the same if i remove the else block
{
return;
}
}
$(document).ready(function () {
var time = 0;
var stop = false;
timerTick(time, stop);
//check if we're at the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
stop = true;
}
});
});
The timer counts up perfectly, the problem is I can't get it to stop. If I replace the stop = true; line with alert('abc');, the alert shows up when the user reaches the bottom. So all of the pieces are working, just for some reason setting stop to true doesn't stop the timerTick function from going into the if(stop == false) block.
Can someone tell me what I'm doing wrong?
Edit: I made a jsFiddle.
You have to clear interval as soos as user reach the end of page. Otherwise it will continue executing.
Try:
var intervalId;
function timerTick(time, stop)
{
if(stop == false)
{
intervalId=setInterval(function () //Set the interval in a var
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}, 100);
}
else //behavior is the same if i remove the else block
{
return;
}
}
$(document).ready(function () {
var time = 0;
var stop = false;
timerTick(time, stop);
//check if we're at the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
stop = true;
clearInterval(intervalId);//HERE clear the interval
}
});
});
DEMO
to determine bottom of the page you could try this
if(window.innerHeight + document.body.scrollTop >= document.body.offsetHeight) {
stop = true;
}
Update:
you need to make your variable stop global, declare it outside of documnet.ready function.
setInterval function returns number that you can later pass into clearInterval to stop the timer.
Declare
var Timeout=0;
check
if(stop == false)
inside the setInterval function
like
Timeout=setInterval(function ()
{
if(stop == false)
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}
else
{
clearInterval(Timeout);
}
}, 100);