Develop Reference

jQuery in-viewport not detecting multiple videos

I am using the jQuery plugin isInViewport jQuery isInViewport to control the playing and pausing of two videos on a single page once they're scrolled in & out of view.
The only way I was able to get it to work was explicitly checking each video ID with two if-statements.
The following works:
$(window).scroll(function() {
if ( $("video#one").is( ':in-viewport')) {
$("video#one")[0].play();
} else {
$("video#one")[0].pause();
}
if ( $("video#two").is( ':in-viewport')) {
$("video#two")[0].play();
} else {
$("video#two")[0].pause();
}
});
However, that's inefficient. I may add more videos down the road. Doesn't make sense to have to adjust the JS each time I change videos.
This is what I am going for.. however, once video 1 is scrolled into view, it triggers the second video (which is off-screen) to begin playing as well.
$(window).scroll(function() {
$("video").each(function() {
if ( $("video").is( ':in-viewport')) {
$("video")[0].play();
} else {
$("video")[0].pause();
}
});
});
How can I adjust the each function to play & pause my videos on 1 page, regardless of how many there are?

The problem is most likely in your each function you are referring to ALL videos again and again. You should be able to solve this by using THIS instead.
$(window).scroll(function() {
$("video").each(function() {
if ( $(this).is( ':in-viewport')) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
});
});

Why is Jquery .click() firing multiple functions?

I've been making a game to practice programming, and I am having trouble using the Jquery .click() function. I have two buttons in my code, the start button and the attack button. When I click the start button, the .click() function fires the code for the other button as well, which causes my main menu to freeze up and not draw the game screen. I've used separate id's for the buttons, but they both seem to recognize the click on the start button. I can't get it to work in JSFiddle, but all the code is there. Can someone please tell me how to use multiple buttons?
//start button
$('#startButton').click(function() {
stage.state = "battle";
stage.update();
})
//attack button
$('#attack').click(firstTurn());
//attack button code
function firstTurn() {
console.log("firstTurn Fired");
if(p1.speed > opp.speed){
turn = 1;
} else{
turn = 0;
}
battle();
};
function battle(){
var battling = 1;
while(battling == 1) {
if(turn == 0) {
p1.health = p1.health-opp.attack;
$("#textBox").append('<p>'+opp.name+' hit you for '+ opp.attack+' points.</p><br/>');
draw();
sleep(1000);
console.log("attacked");
} else{
opp.health = opp.health-p1.attack;
$('#textBox').append('<p> You hit '+opp.name+' for '+p1.attack+' points.</p><br/>');
draw();
sleep(1000);
}
}
};
https://jsfiddle.net/memersond/m3gvv8y6/

$('#attack').click(firstTurn());
Should be:
$('#attack').click(firstTurn);
You want to pass the function as a reference, not have it executed immediately.

$('#attack').click(firstTurn());
This causes firstTurn() to be called when the listener is initiated, use one of the alternatives:
$('#attack').click(firstTurn );
$('#attack').click(function() {
firstTurn()
});

Jquery Code Sinppets to Solve

Can anybody tell me what are the possible solutions for these??
Question 1: A web page as a form with the id "my_form" and a few elements with the class "excluded" applied. How can you make a copy of the form and get rid of all elements with the excluded class, only from the new copy of the form?
Question 2: Examine this code snippet. What do you think it's supposed to do? Why doesn't it work? How would you fix it?
$("li").each(function () {
if ($(this).find("ul")) {
$(this).css("background-color", "gray");
} else {
$(this).css("background-color", "white");
}
});
Question 3: A user is complaining that audio is playing even after hitting the play/pause button. Given the below implementation, why would that happen? How would you fix it?
// Pause Button Implementation:
$("#togglePlayPause").on("click", function () {
if (audio.paused === true) {
audio.play();
} else {
audio.pause();
}
});
// when the current audio has played all the way through, read the next element.
audio.addEventListener("ended", function () {
if (audio.paused === false) {
var nextElement = _getNextElement();
// scroll the page so that the next element we're reading is at the top of the browser window.
$(window).animate(scrollTop: nextElement.offset().top, 400, function () {
_playElementAudio(nextElement);
});
}
});
Any help will be appreciated..

Question 1
$("#form").not(".excluded").clone().appendTo("#anotherForm");

end javascript function after 10 seconds

I found a javascript snow script. Here is the fiddle: http://jsfiddle.net/wj2K4/
(very nice)
Its only a gimmick and I don't want it dominating the page, so I want to turn it off after 10 or 30 seconds.
I reckon killing the script would be the easiest way, but I can't find a suitable command. (or similar question on stack)
setTimeout() & setInterval() is not what I am looking for.
Ideas?
This code is pointless but I cant post the question without it:
function doStart() {
if (!s.excludeMobile || !isMobile) {
if (s.freezeOnBlur) {
s.events.add(isIE?document:window,'mousemove',doDelayedStart);
} else {
doDelayedStart();
}
}
// event cleanup
s.events.remove(window, 'load', doStart);
}

Use s.stop(); to stop snow animations. See the code below, I used setTimeout to stop the animation
function doStart() {
if (!s.excludeMobile || !isMobile) {
if (s.freezeOnBlur) {
s.events.add(isIE?document:window,'mousemove',doDelayedStart);
} else {
doDelayedStart();
}
}
// event cleanup
s.events.remove(window, 'load', doStart);
setTimeout(function(){s.stop();},15000); //stop after 15 seconds
}
Demo: http://jsfiddle.net/muthkum/wj2K4/1/

Script just stops

I have a JavaScript script that will hopefully have multiple divs fade in/out every couple of seconds. Only one will be visible at once. I've created the following to do the job:
var tmnlSpDelay = 5000;
var $currentVis = null;
tmnlFadeIn = function ($re) {
$re.css("display", "inline");
$re.fadeIn('slow', "");
$currentVis = $re;
setTimeout("tmnlSpinner();", tmnlSpDelay);
}
tmnlSpinner = function () {
var $random_elem = $('.topcontent').eq(Math.floor(Math.random() * $('.topcontent').length));
if ($currentVis != null) {
$currentVis.fadeOut('slow', "function() { tmnlFadeIn($random_elem) }");
} else {
tmnlFadeIn($random_elem);
}
}
$(document).ready(function () {
tmnlSpinner();
});
As you can see, I'm utilizing jQuery as well to help me. The problem is after it has ran once and runs tmnlSpinner again (except, because it has already run once, currentVis is no longer null). When it runs the fadeOut on $currentVis, it just stops working. Google Chrome isn't giving me any feedback on any kind of error. Does anybody see any issues?

Remove the quotes around "function() { tmnlFadeIn($random_elem) }". You're passing a string where you should pass a callback.