Develop Reference

Html5 Video Play on Hover Stops Working When Dynamic Content is Loaded

I have a WordPress site with video products, this code adds a function so that when the mouse hovers over the video thumbnail it starts playing, and when the mouse leaves the video it pauses. It works just fine on the initial page load, but additional content loaded via ajax does nothing.
I'm new to Javascript but I do understand why my code stops working when additional content is loaded via ajax. I just don't know how to make it work. :) I have searched for answers and came across something about using an "on" state, but couldn't figure out how to utilize that with my code.
$(document).ready(function() {
var figure = $(".video").hover( hoverVideo, hideVideo );
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).pause();
}
});
I know it's not working because the new content isn't "ready" or the script isn't aware of the new content because the page didn't load. So... how do I make this work with dynamic content? Thanks in advance!

I was able to figure it out.
$(document).on({
mouseenter: function () {
$('video', this).get(0).play();
},
mouseleave: function () {
$('video', this).get(0).pause();
}
}, '.video');
Using $(document).on instead of $(document).ready allows it to work for any previous or future loaded ".video" classes to be modified.
The using mouseenter and mouseleave events instead of .hover

Javascript Video Button

I'm a bit of a novice when it comes to Jquery.
I'm trying to pause/play a video by clicking the video itself and also by click a play/pause button.
Now, I've managed to get it working as desired when the user clicks the video.
But I can't get it to work using the button as well.
This what I've tried so far:
$("video").trigger("play");//for auto play
$('video, #pausebutton').click(function() {
if ($('video').hasClass('pause')) {
$("video").trigger("play");
$(this).removeClass('pause');
$("#artwork").removeClass('fadein')
$(this).addClass('play');
$("#pausing").html("▐▐");
} else {
$("video").trigger("pause");
$(this).removeClass('play');
$(this).addClass('pause');
$("#artwork").addClass('fadein');
$("#pausing").html("►");
}
});
The pause button does actually pause the video, but it doesn't resume play when clicked for a second time. It also ignores the other attributes such as add and removing classes etc. Just to clarify, all these things work when the video is clicked directly.
Any help would be appreciated.
Cheers

It's the use of this inside the event handler, when the button is clicked this is the button, not the video, and the classes are set on the button instead of the video
$("video").trigger("play"); //for auto play
$('video, #pausebutton').click(function () {
if ($('video').hasClass('pause')) {
$("video").trigger("play");
$('video').removeClass('pause');
$("#artwork").removeClass('fadein')
$('video').addClass('play');
$("#pausing").html("▐▐");
} else {
$("video").trigger("pause");
$('video').removeClass('play');
$('video').addClass('pause');
$("#artwork").addClass('fadein');
$("#pausing").html("►");
}
});
FIDDLE

Javascript Fade

$(window).load(function() {
$(".screenLoading").fadeOut('slow');
})
setInterval("loadCont()", 500);
//Loaded
function loadCont(){
$('.container').fadeIn('slow');
return;
}
function loadLogin() {
$('.container').fadeOut('slow', function() {
$('.log').fadeIn('slow');
});
}
I have the javscript code above and am trying to mimic the effect at http://orinukas.com/SoduBendrija/ .
When I click on the right upper link named 'Nariams', the content with headings and paragraph should fade out and the Sign Up form should fade in.
When I click on that link, content fades, sign up form fades in and content fades in too.
I don't want content to fade in.

I have gone through the code which you pasted in http://pastebin.com/gQC5MBWL .
i found one issue in this you are using
setInterval("loadCont()", 500);
//Loaded
function loadCont(){
$('.container').fadeIn('slow');
return;
}
setInterval is calling itself again and again(this will show the content again if you will hide it) so remove this or use setTimeout instead of using setInterval.
Thanks

Replace the below code with you loadLogin function. This should work as wanted.
function loadLogin() {
$('.container').fadeOut('slow');
$('.log').fadeIn('slow');
}

how to stop jquery animation when my page is not active

I would like to stop my jquery animation when I open new tab in browser. Every time when I leave my page for a while and I come back after some time, my jquery slider goes crazy and it change slides like insane, because I didn't stop it. Do you have some solution?

In JavaScript:
window.addEventListener('focus', function() {
// code to start
});
window.addEventListener('blur', function() {
// code to stop
});
With jQUery:
$(window).bind('focus', function() {
// code to start
});
$(window).bind('blur', function() {
// code to stop
});

I read somewhere about this and it's called animation queue buildup. Instead of trying to stop animation when opening new tab, put stop() just before starting an animation.
This will ensure that previous animation is killed before continuing....
for example:
$('.some-selector').stop().slideUp();
Hope this helps...

jQuery Not Executing Function As Expected

Im sure I have some problems with my code. Im not sure how to mix the raw javascript with my jquery. Here is the relevant code in my js file:
$(document).ready(function() {
$('#show-video').click(function(event) {
jQuery('.player-hold').slideDown("slow");
$('#book').slideDown('slow', function() {
playVideo();
});
jQuery('.features').slideUp("slow");
});
});
function onPlayerStateChange(newState) {
if(newState == 0) {
jQuery('.player-hold').slideUp("slow");
jQuery('.features').slideDown("slow");
}
}
function playVideo() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
ytplayer.setPlaybackQuality("highres");
ytplayer.cueVideoById("PoTa2FTmDWk");
}
Basically I have a div with a link to view a video. When the link is clicked the video (previously display none) is shown and the div containing the link hidden. This works fine. The last part is once the video ends the video slidesaway and the div container comes back, which all works. The problem is, once the video is shown I want to execute play video. This is not working.
Im sure its an easy fix/nooby mistake.
PS. If I remove the jquery and add the function playVideo(); on click to the anchor, it plays the video as expected but loses the sliding functionality.

You are using an odd mix of $( and jQuery( in your code. You should choose one or the other. $( is preferred unless it conflicts with another library. In the case of a conflict, just jQuery( and use noconflict().