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

Mouseover with three attempts

I have this code:
mug.addEventListener('mouseover', function () {
if (//I don't know what to put in here..) {
console.log('game over');
}
}
And I basically want it to say that when the user has hovered three times over an image the game is over.
Thanks!

It's very simple to do:
var mouseOverCount = 0;
mug.addEventListener('mouseover', function () {
if (mouseOverCount >= 2) {
console.log('game over');
}
mouseOverCount++;
});
I suggest you to read (or watch) some beginner programming tutorials, so you will understand basic concepts. You can find a lot of them in the internet.

How to stop a requestAnimationFrame recursion/loop?

I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play link is clicked. For animation, I use requestAnimationFrame.
I initiate it like this:
self.animate = function()
{
self.camera.lookAt(self.scene.position);
self.renderer.render(self.scene, self.camera);
if (self.willAnimate)
window.requestAnimationFrame(self.animate, self.renderer.domElement);
}
self.startAnimating = function()
{
self.willAnimate = true;
self.animate();
}
self.stopAnimating = function()
{
self.willAnimate = false;
}
When I want to, I call the startAnimating method, and yes, it does work as intended. But, when I call the stopAnimating function, things break! There are no reported errors, though...
The setup is basically like this:
There is a play link on the page
Once the user clicks the link, a renderer's domElement should fullscreen, and it does
The startAnimating method is called and the renderer starts rendering stuff
Once escape is clicked, I register an fullscreenchange event and execute the stopAnimating method
The page tries to exit fullscreen, it does, but the entire document is completely blank
I'm pretty sure my other code is OK, and that I'm somehow stopping requestAnimationFrame in a wrong way. My explanation probably sucked, so I uploaded the code to my website, you can see it happening here: http://banehq.com/Placeholdername/main.html.
Here is the version where I don't try to call the animation methods, and fullscreening in and out works: http://banehq.com/Correct/Placeholdername/main.html.
Once play is clicked the first time, the game initializes and it's start method is executed. Once the fullscreen exits, the game's stop method is executed. Every other time that play has been clicked, the game only executes it's start method, because there is no need for it to be initialized again.
Here's how it looks:
var playLinkHasBeenClicked = function()
{
if (!started)
{
started = true;
game = new Game(container); //"container" is an empty div
}
game.start();
}
And here's how the start and stop methods look like:
self.start = function()
{
self.container.appendChild(game.renderer.domElement); //Add the renderer's domElement to an empty div
THREEx.FullScreen.request(self.container); //Request fullscreen on the div
self.renderer.setSize(screen.width, screen.height); //Adjust screensize
self.startAnimating();
}
self.stop = function()
{
self.container.removeChild(game.renderer.domElement); //Remove the renderer from the div
self.renderer.setSize(0, 0); //I guess this isn't needed, but welp
self.stopAnimating();
}
The only difference between this and the working version is that startAnimating and stopAnimating method calls in start and stop methods are commented out.

One way to start/stop is like this
var requestId;
function loop(time) {
requestId = undefined;
...
// do stuff
...
start();
}
function start() {
if (!requestId) {
requestId = window.requestAnimationFrame(loop);
}
}
function stop() {
if (requestId) {
window.cancelAnimationFrame(requestId);
requestId = undefined;
}
}
Working example:
const timeElem = document.querySelector("#time");
var requestId;
function loop(time) {
requestId = undefined;
doStuff(time)
start();
}
function start() {
if (!requestId) {
requestId = window.requestAnimationFrame(loop);
}
}
function stop() {
if (requestId) {
window.cancelAnimationFrame(requestId);
requestId = undefined;
}
}
function doStuff(time) {
timeElem.textContent = (time * 0.001).toFixed(2);
}
document.querySelector("#start").addEventListener('click', function() {
start();
});
document.querySelector("#stop").addEventListener('click', function() {
stop();
});
<button id="start">start</button>
<button id="stop">stop</button>
<div id="time"></div>

Stopping is as simple as not calling requestAnimationFrame anymore, and restarting is to call it it again.
ex)
var pause = false;
function loop(){
//... your stuff;
if(pause) return;
window.requestionAnimationFrame(loop);
}
loop(); //to start it off
pause = true; //to stop it
loop(); //to restart it

var myAnim //your requestId
function anim()
{
//bla bla bla
//it's important to update the requestId each time you're calling reuestAnimationFrame
myAnim=requestAnimationFrame(anim)
}
Let's start it
myAnim=requestAnimationFrame(anim)
Let's stop it
//the cancelation uses the last requestId
cancelAnimationFrame(myAnim)
Reference

I played around with the tutorial of a 2D Breakout Game where they also used requestAnimationFrame and I stopped it with a simple return. The return statement ends function execution if the value of return is omitted.
if(!lives) {
alert("GAME OVER");
return;
}
// looping the draw()
requestAnimationFrame(draw);

I would suggest having a look at the requestAnimationFrame polyfill gibhub page. There are discussions about how this is implemented.

So, after doing some more testing, I've found out that it was, indeed, my other code that posed a problem, not the animation stopping (it was a simple recursion after all). The problem was in dynamically adding and removing the renderer's domElement from the page. After I've stopped doing that, for there was really no reason to do so, and included it once where the initialization was happening, everything started working fine.

How can I execute a setTimeout() only when the user is present (with the mouse movement) with jQuery

I have a function that updates a <div /> via AJAX:
function update() {
<!-- .ajax() -->
setTimeout(update(), 3000);}
}
What I need is that this is not executed when the user is not present on the website, so if there is no movement of the mouse (we will suppose that if move it is in the website) it will not update .mousemove(). By the way, there is any other thing that we can do to know is someone is active on the website?
How can this be done? Thank you in advance!
Edit: probably I explained bad. I need to know the way to only update when there is activity. Like Facebook does with his news feed, the front page. Thanks!

You could use a mousemove handler to track when the user last moved, and then have the process only happen if they last moved the mouse within X seconds. But of course, if the user is sitting there reading something, or if they're a keyboard-oriented kind of person, that will tend to miss that they are there... So you'd probably want to look at keydown as well.
Here's a mousemove example:
jQuery(function($) {
var count = 0, lastmove = new Date();
$(document).mousemove(function() {
++count;
lastmove = new Date();
$('#display').html("Moved " + count + " times");
});
});​
Then your update code could do this:
function update() {
if (new Date() - lastmove < 60000) { // 60 seconds
// Really do the update
}
else {
// Check back in a few seconds
setTimeout(update, 3000);
}
}
Off-topic, but you have an error in your update code. You have:
setTimeout(update(), 3000);
...which will call update immediately and then try to use its return value to schedule something to happen in three seconds. If you want the call to update to be scheduled to happen in three seconds, leave off the () after it:
setTimeout(update, 3000);

I think I might have ended up with something such as this. Avoids date arithmetic. Only cares whether there's been some activity since the last update().
window.activeFlag = false;
window.updateDelay = 3000;
$(document).bind('mousemove scroll keydown', function(){ activeFlag = true; });
function update() {
if(activeFlag) {
doWork();
activeFlag = false;
}
}
window.setTimeout(update, updateDelay);
edit: I've discovered a flaw in the code. The following is more appropriate:
window.activeFlag = false;
window.updateDelay = 3000;
$(document).bind('mousemove scroll keydown', function(){ activeFlag = true; });
function update() {
if(activeFlag) {
doWork();
activeFlag = false;
}
window.setTimeout(update, updateDelay);
}
update();

I think there is no easy way to determine if the user is present
I would use a combination of mousemove, scroll, keypress.

var bUpdate = false;
function update() {
if(bUpdate){
///perform your ajax request
}
}
$(document).mousemove(function(){
bUpdate = true;
setTimeout(function(){bUpdate=false;}, 3000);}
});

How to wait for a Java applet to finish loading on Safari?

This doesn't work in Safari:
<html>
<body>
<applet id="MyApplet" code="MyAppletClass" archive="MyApplet.jar">
<script type="text/javascript">
alert(document.getElementById('MyApplet').myMethod);
</script>
</body>
</html>
myMethod is a public method declared in MyAppletClass.
When I first load the page in Safari, it shows the alert before the applet has finished loading (so the message box displays undefined) . If I refresh the page, the applet has already been loaded and the alert displays function myMethod() { [native code] }, as you'd expect.
Of course, this means that the applet methods are not available until it has loaded, but Safari isn't blocking the JavaScript from running. The same problem happens with <body onLoad>.
What I need is something like <body onAppletLoad="doSomething()">. How do I work around this issue?
PS: I'm not sure if it's relevant, but the JAR is signed.

I use a timer that resets and keeps checking a number of times before it gives up.
<script language="text/javascript" defer>
function performAppletCode(count) {
var applet = document.getElementById('MyApplet');
if (!applet.myMethod && count > 0) {
setTimeout( function() { performAppletCode( --count ); }, 2000 );
}
else if (applet.myMethod) {
// use the applet for something
}
else {
alert( 'applet failed to load' );
}
}
performAppletCode( 10 );
</script>
Note that this assumes that the applet will run in Safari. I've had some instances where an applet required Java 6 that simply hangs Safari even with code similar to the above. I chose to do browser detection on the server and redirect the user to an error page when the browser doesn't support the applet.

Here is a generic function I wrote to do just this:
/* Attempt to load the applet up to "X" times with a delay. If it succeeds, then execute the callback function. */
function WaitForAppletLoad(applet_id, attempts, delay, onSuccessCallback, onFailCallback) {
//Test
var to = typeof (document.getElementById(applet_id));
if (to == "function") {
onSuccessCallback(); //Go do it.
return true;
} else {
if (attempts == 0) {
onFailCallback();
return false;
} else {
//Put it back in the hopper.
setTimeout(function () {
WaitForAppletLoad(applet_id, --attempts, delay, onSuccessCallback, onFailCallback);
}, delay);
}
}
}
Call it like this:
WaitForAppletLoad("fileapplet", 10, 2000, function () {
document.getElementById("fileapplet").getDirectoriesObject("c:/");
}, function () {
alert("Sorry, unable to load the local file browser.");
});

I had a similar problem some time ago and adding MAYSCRIPT to the applet tag solved my problem.
Take a peek at this page:
http://www.htmlcodetutorial.com/applets/_APPLET_MAYSCRIPT.html
Hope it helps!