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

JQuery, .attr - Remember state using cookies after page reload

I wrote a function that changes logo to minimised version of it when I click on a button by changing attribute of an image. Also, after another click on the same button, logo switches back to original.
Everything is as I expected but I have a problem when I refresh the page. When I refresh the page, the browser just switches the logo back to original. So, I want the browser to remember if logo is switched and remember that state after reload of page. Please see my code below. I've seen similar solutions here but I don't know how to implement it in my code.
How can I set and use cookies for this?
$('#changeLogo').click(function() {
if ($(".logo").attr('src') === "files/img/logo-min.png") {
$(".logo").attr('src', "files/img/logo.png");
}
else {
$(".logo").attr('src', "files/img/logo-min.png");
}
});

Localstorage is a better option for this:
$(function(){
$('#changeLogo').click(function() {
var logoSrc;
if ($(".logo").attr('src') === "files/img/logo-min.png") {
logoSrc = "files/img/logo.png";
}
else {
logoSrc = "files/img/logo-min.png";
}
$(".logo").attr('src', logoSrc);
localStorage.setItem("logoSrc", logoSrc);
});
if ( typeof localStorage.logoSrc !== "undefined" )
$(".logo").attr('src', localStorage.logoSrc);
});

$(document).ready(function(){
var logo = localStorage.getItem('logo');
if(logo != null){
$(".logo").attr('src', logo);
}
$('#changeLogo').click(function() {
if ($(".logo").attr('src') === "files/img/logo-min.png") {
$(".logo").attr('src', "files/img/logo.png");
}
else {
$(".logo").attr('src', "files/img/logo-min.png");
}
localStorage.setItem('logo',$(".logo").attr('src'));
});
});
Set src in localStorage and on page load get the value and set the src again to logo.

You can set cookies using javascript api: https://www.w3schools.com/js/js_cookies.asp
Or use an easier api like this:
https://github.com/js-cookie/js-cookie
So in the if/else you can save the currently used link of the logo to a cookie:
//set
Cookies.set('logo-path', 'files/img/logo-min.png');
//get
Cookies.get('logo-path');
You could also utilize local storage (https://www.w3schools.com/html/html5_webstorage.asp) but it is not guaranteed that it will work on older browsers.

If you want to use cookies, you can use the JQuery plugin http://plugins.jquery.com/cookie/
Then :
$(document).ready(function(){
if (typeof $.cookie('logo') === 'undefined')
$.cookie('logo', "files/img/logo-min.png");
$('#changeLogo').click(function() {
if ($.cookie('logo') === "files/img/logo-min.png") {
$.cookie('logo', "files/img/logo.png");
} else {
$.cookie('logo', "files/img/logo-min.png");
}
$(".logo").attr('src', $.cookie('logo'));
});
});

Fullscreen mode working localhost but not on firebase server

I have a site located at 'http://motostats.live/' and im working on a fullscreen mode which can be accessed at the top right of the page. I was using jquery and the fullscreen API to get into fullscreen which worked fine locally, also tryed angular-fullscreen again and worked fine, but soon as i uploaded to firebase free hosting it creates some frameset which i cannot drill into? well i believe this makes my fullscreen code break. Anyone got some ideas? here was my original code:
function exitFullscreen(){
$('.container').css({maxWidth: '1500px'});
var el = $('html');
if (el.exitFullscreen) {
el.exitFullscreen();
} else if (el.msExitFullscreen) {
el.msExitFullscreen();
} else if (el.mozCancelFullScreen) {
el.mozCancelFullScreen();
} else if (el.webkitExitFullscreen) {
el.webkitExitFullscreen();
}
vm.fullscreen = false;
}
function goFullscreen(){
var el = $('html');
$('.container').css({maxWidth: '100%'});
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
}
vm.fullscreen = true;
}
Link to the github of angular-fullscreen: https://github.com/fabiobiondi/angular-fullscreen
Also here is the top of my page once loaded and online with firebaseapp

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.

Code not working in google chrome but works fine with Mozilla

i am working on this fiddle with cookies. Here is the link. but it works fine with Mozilla for the first time. when i delete all the cookies but when ever i reopen the page it goes directly to the second div which has to be displayed after the button click from the first div. as well as the second div must be shown and first div must be hidden when refreshed. and even this does not work for chrome in any ways. any idea or suggestions to improve. thanks in advance.
here is my code:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
$.cookie('shown', true);
});
$(function() {
if ($.cookie('shown')) {
$('#sbut1').click()
}
});

Update:
there was a slight syntax error in my answer (forgot closing parentheses for IIFE). Anyway, here's an updated fiddle, and (for completeness) here's the code. I've optimized it some more, but it's basically the same thing:
$(function()
{
(function(sbut1)
{
(function(log1, cont1)
{
sbut1.on('click',function()
{
cont1.show();
log1.hide();
$.cookie('shown', true);
$(this).off('click');
});
}($('#log1'), $('.cont1')));
if ($.cookie('shown'))
{
sbut1.trigger('click');
}
}($('#sbut1')));
});
There's a couple of things that might seem irrelevant (like binding and unbinding the event listeners), but the comments in the fiddle explain why I'm doing this. The main reason is to clean up any references to the DOM, in order for them to be flagged for garbage collection.
Again, this code works just fine for me in both FF and chrome
In response to my last comment, same thing, only vanillaJS:
window.addEventListener('load', function l()
{
var cookie = (function(trueUndef)
{
var clean = (localStorage || document.cookie);
return function(name, val)
{
if (val === trueUndef)
{
if (clean === localStorage)
{
return clean.getItem(name);
}
val = clean.split(name + '=')[1];
return val ? val.match(/^[^;]+/)[0] : trueUndef;
}
if (clean === localStorage)
{
return clean.setItem(name, val);
}
return !!(clean = name + '=' + val);
};
}()),
sbut1 = document.getElementById('sbut1');
sbut1.addEventListener('click', (function clickHandler(log1, cont1)
{
return function(i)
{
log1.style.display = 'none';
for(i=0;i<cont1.length;i++)
{
cont1[i].style.display = 'block';
}
cookie('foo', true);
sbut1.removeEventListener('click', clickHandler, false);
};
}(document.getElementById('log1'), document.getElementsByClassName('cont1'))), false);
if (cookie('foo') === 'true')
{
sbut1.dispatchEvent(new Event('click'));
}
window.removeEventListener('load',l, false);
}, false);
I've had a look at your fiddle, and changed the code to this:
$(function()
{
$('#sbut1').click(function()
{
$('.cont1').show();
$('#log1').hide();
$.cookie('shown', true);
});
if ($.cookie('shown'))
{
$('#sbut1').click()
}
});
Which works like a charm, for me (with option no wrap - in head) as you can see here
Just a side-note, you're using a lot of DOM selectors, which is calling functions all over the place, and queries the DOM way too much. Your code could be a lot more efficient if you assigned a reference to these DOM nodes somewhere:
$(function()
{
(function(sbut1, log1, cont1)
{
sbut1 = sbut1 || $('#sbut1');//safety-net
log1 = log1 || $('#log1');
cont1 = cont1 || $('.cont1');
sbut1.click(function()
{
cont1.show();
log1.hide();
$.cookie('shown', true);
});
if ($.cookie('shown'))
{
sbut1.click();
}
}($('#sbut1'), $('#log1'), $('.cont1')));
});
The IIFE is optional, of course, but it wraps the DOM references in a scope, so they're only available to those parts of your script that actually need them.
There's a lot of ways to improve on this code, still, but excess DOM queries are easy to avoid, so I thought I'd suggest you taking care of those.