Develop Reference

MouseOver and MouseOut with Snippet in Wordpress

I am having issues with implement something with JavaScript using Snippets in WordPress Theme. I am using Elementor to edit pages, I think is relevent to mention.
This is what I am doing; trying to implement MouseOver and MouseOut in a landing page, so the user can play videos only if they have mouse over one section that contains specific video while they're scrolling. I think is relevent to mention too, that the videos are background (like a header with background video) in each section, so, if is better to put them just like a "pure video" (not background) to not have problems with deep selection classes, would appreaciate the advice too.
Here is my code:
<?php
add_action( 'wp_head', function () { ?>
<script>
let clip = document.querySelectorAll('.elementor-background-video-hosted .elementor-html5-video');
console.log(clip);
for ( let i = 0; i < clip.length; i++) {
clip[i].addEventListener('mouseover', function() {
console.log(clip[i]);
clip[i].play();
})
clip[i].addEventListener('mouseout', function() {
clip[i].pause();
})
}
</script>
<?php } );
The thing is that when I try to see something in console (that's why I have some console.log), dont' even show me the NodeList, it's empty, also the MouseOver and MouseOut is not working, I don't know if I am selecting the wrong class (I checked lot of times) or if my code is wrong.
[EDIT]
An image of the html structure to understand better if I am using the right class.
Link to image
I'll really appreciate all the help.

Manipulate mouse cursor with javascript

I'm doing a presentation in my University about click-jacking, and i saw a very great example that i wanted to create however i didn't know how. The concept is very hard i think please check this video to understand more:
https://www.youtube.com/watch?v=O83P0umh0b0
Basically, on this video the cursor is manipulated, whenever the user point it to the play button, it will be pointed automatically to an advertisement below.i have tried to look for something similar I couldn't find anything. Please can anyone can provide me an example like this one.
I have tried this code, but as you can see the video, the mouse appear in two places. However, with the code that i tried, it just handle clicks!
<div id="firstData">Here is a text first to be hover</div>
<div id="secondData">Here is a text Two</div>
window.addEventListener("click", clickjacking, false);
function clickjacking() {
document.getElementById('secondData').click();
}

I didn't watch the video but here's something to look at. Note, use mouseover not hover.
document.getElementById("firstData").addEventListener("mouseover", clickjacking, false);
document.getElementById("firstData").addEventListener("mouseout", function() {
document.getElementById("secondData").style.backgroundColor = "inherit";
});
function clickjacking() {
document.getElementById("secondData").style.backgroundColor = "red";
}

While background div with video finishes loading, show entire div with loading

I have a div that has a background video whos size is roughly 6mb. I want to show the entire page until that video finishes loading.
I've seen in plenty websites, specially the ones of movies (recent ones) they have background video, and before they show the page, there's like a loading screen.
How can I achieve this? I've been searching around but so far, no luck. Is there a specific name for this technique if you can call it like that?

You can use jquery to achieve this like follows:
$(window).load(function() {
$('PUT_ID_OF_VIDEO_CONTAINER_HERE').hide();
});

I would suggest using the callback on jQuery load() like this >>>
<div id=videoHolder></div>
<div id=loadrHolder></div>
<script>
$( document ).ready(function() {
$('#videoHolder').hide();
$('#videoHolder').load( "myVideo.mp4", function() {
$('#videoHolder').show();
$('#loadrHolder').hide();
});
});
</script

If you are using a library like jquery.videoBG (http://syddev.com/jquery.videoBG/) to show the video, I think you could modify the code to show your page when the video has been loaded.
HTML:
<body>
<div id="dvLoading">Loading...</div>
<div id="dvContent" style="display:none"></div>
</body>
Javascript in library:
$video.bind('canplaythrough',function() {
$('#dvLoading').hide();
$('#dvContent').show();
});
You can find a listing of the events for the video element here: http://www.w3schools.com/tags/ref_av_dom.asp

Improve the triggering of animated gifs

UPDATE: Now solved my problem by using an alternative method (see accepted answer for details).
Standard wordpress install, I have 4 navigation "buttons" along the bottom of the page. Each button consists of 2 animated gifs triggered by mouse-enter and mouse-out events. The idea is to have a puppet animal bounce up on hover, and then pop back down again when you move the mouse away (it's for a kids' nursery school)...
You can see what I'm trying for a limited time here:
Here's an example of the code I'm using:
<div id="foo">
<a href="mysite.com"
onMouseOver="document.images['tiger'].src='http://mysite.com/early/wp-content/themes/new/images/tigerup.gif'"
onMouseOut="document.images['tiger'].src='http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif'"
onFocus="if(this.blur)this.blur()">
<img src="http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif" name="tiger" border="0"> </a>
While it does work, it is not as reliable as I want. Sometimes the mouseover event fails to trigger the first gif animation, so any ideas to improve the effect would be much appreciated - thanks.

Credit to Mark Kramer for the solution - Stop a gif animation onload, on mouseover start the activation.
<script type="text/javascript">
$(document).ready(function()
{
$("#imgAnimate1").hover(
function()
{
$(this).attr("src", "/images/tigerup.gif");
},
function()
{
$(this).attr("src", "/images/tigerdown.gif");
});
});
</script>
And then adding the images like this:
<img id="imgAnimate1" src="/images/tigerdown.gif" alt="" >

after a click-event: how do i add somehting to a URL via javascript?

i wanted to find a simple method to get a custom preview-image to my videos within my blog by hiding them and make them visible right after click on the preview-image. the user Dominic Green helped me to get it nearly started.
the problem is: the video already starts to play (even if it is hidden) in autoplay-mode right after the pageload (you can hear the sound in the background) but i want to have the autoplay to start right after click on the preview-image...
in this example i already added "autoplay=1" manually but i want to add this line via javascript to the video-URL right after the click!
here's the example how i did it so far (click on the flower-images will make the video visible): http://brayaz.de/test/example.html
i'm absolutely not into javascript so any help would be great!
thanks!

Just change the source of the iframe to include the autoplay :
$(document).ready(function(){
$(".video").hide();
$(".loader").on('click', function(){
$(this).hide();
elm = $(this).siblings(".video")
elm.show();
var iframe = elm.find('iframe');
iframe.prop('src', iframe.prop('src')+'&autoplay=1');
});
});
FIDDLE

HTML Code
<param name="myvideo" value="http://www.youtube.com/v/v_MVwUqrwDc?rel=0">
JQuery
$('param[name="myvideo"]').val(function(i, oldVal) {
return oldVal + (oldVal.indexOf('?') ? '&autoplay=1' : '?autoplay=1');
});