Develop Reference

Stopping my embedded Youtube Videos on click

I've been struggling with this for a while now and I've tried a number of solutions but I'm totally stuck on this:
I have a number of embedded videos from YouTube on my Site and I have navigation buttons. I want the videos to be paused as soon as any of the buttons are clicked, no matter how many of them are playing at that time. I embedded them the classic way by using the iframe code that YouTube gives you when clicking "embed" and gave them the ".yt" class.
My function currently looks like this:
$(function () {
$('#shadingleft').on('click', function () {
rotateLeft();
reset();
selector = selector - 1;
if (selector <= -1) {
selector = 9;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingright').on('click', function () {
rotateRight();
reset();
selector = selector + 1;
if (selector >= 10) {
selector = 0;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingtop').on('click', function () {
rotateUp();
$('.clicked').toggleClass('clicked');
})
$('#shadingbottom').on('click', function () {
rotateDown();
$('.clicked').toggleClass('clicked');
})
$('.art').on('click', function () {
$(this).toggleClass('clicked');
})
});
As you can see I already managed to toggle the highlighted ".art" elements in my gallery using toggleClass. Unfortunately it doesn't seem to work for playing and pausing videos.
Whenever one of the four "shading..." elements is clicked I want my ".yt" elements to stop playing the embedded video.
Thanks for helping!

This is a actually a big limitation with iframes. Most browsers won't allow a page's scripts to interact with the content of its iframes for security reasons. So chances are that there is no way at all to do that.
One way you could stop videos would be to reload the youtube iframe entierly, but that would put it back to 00:00 as if it was never played.
Another would be to try and fetch the video stream from youtube on your server and then displaying it in a player of your own on your page. (Which is obviously way more complicated than using an iframe)

How to iterate through set of elements and check each if loaded before go to the next?

I guess I need some help with this. I have the following code that checks if an iframe (containing a google doc viewer document) on my page is loaded and if not reloads it until it finally has happened to be loaded.
function reloadIFrame() {
// force iframe to reload
document.getElementsByClassName("preview-frame").src=document.getElementsByClassName("preview-frame").src;
}
timerId = setInterval("reloadIFrame();", 2000);
jQuery( document ).ready(function() {
jQuery('.preview-frame').on('load', function() {
clearInterval(timerId);
console.log("Finally Loaded");
});
});
In case someone is interested why: this is indeed needed because the Google Doc Viewer tends to not fully load the content (and then interrupts process) once in while and so you have only an 80% chance that content is actually shown instead of blank space.
The above code works fine but now I have the situation to have several iframes on my page.
What I want to achieve is kind of a loop that for each element starts a new interval until its content is loaded and then goes to the next one, until all iframes are reliably loaded and content is really displayed.
Someone with a helping hand how to achieve this? Thanks so much in advance!

You could make a new function and give the element you need to load as a parameter. Also call the callback after the element was loaded:
function loadIframe(iframeElement, callback) {
function reloadIFrame() {
// force iframe to reload
iframeElement.src = iframeElement.src;
}
timerId = setInterval("reloadIFrame();", 2000);
jQuery( document ).ready(function() {
jQuery(iframeElement).on('load', function() {
clearInterval(timerId);
callback(iframeElement);
});
});
}
// Here you can call the function
var iframes = document.getElementsByClassName("preview-frame");
for (var i = 0, len = iframes.length; i < len; i++) {
loadIframe(iframes[i], function(element){
console.log(element, 'finally loaded');
});
}

How to manually show tab loading indicator via javascript?

I'm talking about an icon that is displayed on a tab during page loading.
Chrome:
Firefox (with TreeTab plugin):
You get the idea. I want to make it seem like the page is loading, when it's already loaded. Some event fires is javascript and then the tab looks like it's being loaded. Is there a way to do that?
One way I can think of is to replace a favicon with a spinner, but I'm not sure if it's possible to change on the fly and even if it is, it would be a hassle to make it cross-browser.

I don't think it is a good idea to do it, you'll make your users do a lot of useless requests, and this kills trees : /
IMO, it's better to do all you have in the page itself, and let the browser's UI do his own stuff.
But since I liked the challenge, here is one hacky way :
Loading an iframe will trigger this icon in both chrome and Firefox[1], so you could ,
append an iframe in the document,
set its src to some huge document,
onload of the iframe, set it again with a ? cache hack,
regularly check if the duration has elapsed so you can remove the iframe's src.
[1] It seems that Firefox does trigger the icon only if it was triggered when the document was still loading.
In code :
// how to use :
showTabLoader(25000);
// takes duration in ms as only parameter
function showTabLoader(duration) {
if (!duration) return;
var now = performance.now();
// To avoid flickering, you need some big document
// Please change this url in your script, wikimedia may not be happy with us.
var url = 'https://upload.wikimedia.org/wikipedia/commons/3/35/Viborg_Katedralskole_Symmetrical.jpg';
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.onload = function() {
if (performance.now() - now < +duration) {
this.src = url + '?' + Math.random();
}
};
var check = function(time) {
if (time - now > +duration) {
iframe.src = '';
iframe.parentNode.removeChild(iframe);
return;
}
requestAnimationFrame(check);
}
requestAnimationFrame(check);
iframe.src = url;
}

I recently thought of the same idea. A neat option is to use a dynamic favicon instead of hacking in hidden requests, which is a really bad idea in my opinion. I found this example. It's to much code to include here and doesn't work in iframes so no way of showing it directly on Stackoverflow. Instead i describe the idea behind.
https://www.cssscript.com/favicon-loading-indicator-favloader/
The idea is simple. Replace the favicon in an interval with the loading animation icons. A favicon cannot be GIF so you have to load each image step by step with JS. When you are done, simply replace it back with the original favicon.
For me this works at least in all chrome based browsers. Firefox throw some errors in this example, but i guess it can be fixed.

Alternitive:
There is no function that shows the actual loading process of the webpage. But you can do it manually, like you said!
The event below starts to run when the page is fully loaded, even after all the images are loaded:
$(window).on('load', function() {
// do stuff
});
So what you could do is set up your html like this:
<div class="preloader">
// your loader here, animations, video, gif, anything you want
</div>
<div class="main" style="display: none;">
// the page
</div>
and your jquery like this:
$(window).on('load', function() {
setTimeout(function() {
$('.preloader').css('display', 'none');
$('.main').css('opacity', '1');
}, 5000); // <-- 5seconds
});
And there you have your manual loading function! Works perfect.
Example website: ifly50
EDIT:
added code snippet
Code snippet:
$(window).on('load', function() {
setTimeout(function() {
$('.preloader').css('display', 'none');
$('.main').css('display', 'block');
}, 3000); // <-- 3 seconds
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preloader">loading</div>
<div class="main" style="display: none;">main</div>

Function firing before images has finished loading

I'm trying to get a pre loader screen to work but am hitting a roadblock.
My goal: To have the loading animation/divs dissapear when the image has finished loading.
I've tried to accomplish this with a simple .ready function and still the function that removes the loading animation fires white the image is still loading and the viewer will see the image load in real time.
$("#defaultImage").ready(function(){
TweenMax.to(["#backgroundLoad","#loadBoxes"],1,{alpha:0,delay:0.75});
console.log('Page has loaded');
});
Is this incorrect? I thought that this will wait for the entire page(images included) to load and then fire the function inside it.
I've tried the below too and it doesn't seem to fire the console.log at all
document.getElementById("defaultImage").onload = function (){
console.log('Page has loaded');
};
Pen in question below. You can see the issue if you view it in debug view and do a hard refresh.
http://codepen.io/mhcreative/pen/GoxLPo?editors=0011
Any help would be much appreciated.
Thanks, All.

Here try this if you still want it natively.
$(document).ready(function(){
var img = new Image(); // Create new img element
img.addEventListener("load", function() {
TweenMax.to(["#backgroundLoad","#loadBoxes"],1,{alpha:0,delay:0.75});
}, false);
img.src = 'src/to/img'; // Set source path
$("#defaultImage").append(img); //append loaded image inside div
});

displaying image onLoadevent

I want to display a gif image for a few seconds before my home page is being displayed. I tried onLoadEvent with no success. Can someone suggest me the solution using CSS or JAVASCRIPT?

It's hard to tell exactly what you are looking for but this will show an image and hide it after 5 seconds on page load.
window.onload = function () {
var imgContainer = document.getElementById('ImgContainer');
imgContainer.style.display = 'block';
setTimeout(function () {
imgContainer.style.display = 'none';
}, 5000);
};
Here is a link to a JSFiddle example.
JSFiddle

Create a div that fills the entire browser window with the image inside the div. In the bodys onload event (or if you are using jQuery $(document).ready) remove the div from the DOM.