MouseOver and MouseOut with Snippet in Wordpress - javascript

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.

Related

Toggle script: change from jQuery to "normal javascript" code

I've been using a toggle script (open/close text container when clicking on a certain link) for a website that uses jQuery. In order to clean up the website I want to get rid of jQuery completely but have some problems converting the existing jQuery code into "normal javascript".
Here is the existing code:
jQuery(function($){
$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
return false; //Prevent the browser jump to the link anchor
});
});
});
Which corresponds to this HTML source code:
<h4 class="trigger toggle-transparent ">Click to show more</h3><div class="toggle_container ">
Hidden Text
</div>
I've tried the following code which doesn't give me an error but just doesn't do anything when clicking on the trigger:
var el = document.querySelectorAll('h4.trigger');
for(var i=0; i < el.length; i++){
el[i].addEventListener('click', function () {
this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
}.bind(this));
}
The only thing I really need for the code is: clicking on the class "trigger" should toggle some HTML class "active" to both the trigger element as well as the toggle_container element. The rest I'm able to change with just CSS.
The hard part of the code is that it should work for multiple toggle areas on one page separately (therefore using a class, not an id).
Any idea where my code has a problem or any (completely) different suggestions?
I have very limited experience with javascript/jQuery and feel more at home with HTML/CSS.
Thanks,
Patrick
The this.classList.toggle("active") doesn't return the element back again, but just a boolean to inform if the action was successful. Chaining happens only in jQuery and not in vanilla JavaScript.
this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
You should be using something like this instead of the above:
this.classList.toggle("active");
this.nextSibling.classList.toggle("toggle_container-active");

How to add a "pin it" button dynamically?

I'm trying to optimize my Wordpress install - and one of the culprits I'm seeing, is the "Pin It" button widget for Pinterest. I'm now trying to find a way to dynamically load the JS code (when they initially hover over the button), and then apply it to the page. So far I've only managed to get this far:
jQuery(document).on("mouseenter click",'.pinItSidebar', function() {
jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
// do something here?
});
});
I can't seem to find a function that I can call (as a callback, after the JS is loaded). Obviously I will only do this once per page load (the above is just a very basic version at the moment)
Does anyone have any suggestions on how I can achieve this? The end game of how I want it to function, is with:
Working solution:
Here is a working solution I've now got, which will allow you to load the pinterest stuff ONLY when they click the button (and then trigger the opener as well). The idea behind this, is that it saves a ton of Pinterest JS/CSS / onload calls, which were slowing the page down.
jQuery(document).on("click",'.pinItSidebar', function() {
if (typeof PinUtils == "undefined") {
jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
PinUtils.build();
PinUtils.pinAny();
});
} else {
PinUtils.pinAny();
}
});
...and just call with:
foo
Hopefully this helps save someone else some time :)
Extra tweak: I'm just playing around, to see if I can make this even more awesome :) Basically, I want to be able to decide which images are pinnable. Below this will do that for you:
jQuery("img").each(function() {
if (jQuery(this).data('pin-do')) {
// its ok, lets pin
} else {
jQuery(this).attr('nopin',"1");
}
});
All you need to do to make an image pinnable, is have the data-pin-do="1" param set the images you want to allow them to share :)

Override js-events

It's a long shot which is not that investigated yet, but I'm throwing the question while I'm looking for answers to hopefully get on the right track.
Building a Wordpress site with the theme Dante. This has an image slider function for products, handled in jquery.flexslider-min.js. In my first attempt i used wp_dequeue_script( 'sf-flexslider' ); to stop using this, and then added my own js which works perfect. The problem, however, is that in the bottom of the page there's another slider for displaying other products that uses this file, so i can not simply just dequeue this script.
I've tried to put my js-file both before and after the jquery.flexslider-min.js but this is always the primary. It there a way to, in my js-file, do something like "for obects in [specified div], skip instructions from jquery.flexslider-min.js"?
EDIT: Found this thread and tried the .remove() and the .detach() approach and add it again, but this makes no difference.
I really want to get rid of that flexslider on this particullar object. I can, of course, "hack" the output and give the flexslider item another class or something, but that would bring me so much work i don't have time for.
Maybe, You can monkey patch the flexslider behavior. There's a good tutorial here:
http://me.dt.in.th/page/JavaScript-override/
Something like:
var slider = flexSlider;
var originalSlide = slider.slide;
slider.slide= function() {
if ( some condition) {
// your custom slide function
} else {
// use default behavior
originalSlide.apply(this, arguments);
}
}

Need to disable hyperlinked background for section

Sort of a noob, but know enough to be dangerous. I'm working with a very jerry-rigged Wordpress site and have created this featured work gallery section that works fine except for one issue: If a user accidentally clicks the background behind the tiles, everything disappears. See for yourself:
http://neighboragency.com/#/what-we-do/
I know why this is happening, and it's because I've built this section into a function for which that behavior is preferred on other parts of the site (see "Who We Are" section). What I'm hoping to be able to do is disable the background as an active link for this particular section. Code for that particular section is below. I'm hoping there's something I can apply to the opening tag that disables that background? Or am I going to have to dig into other files? I'm not as comfortable with JQuery so hoping it can be done within this chunk of code somehow. Thanks in advance!
<ul id="list-members">
<?php
//The Query
$items = get_posts('cat=6');
$count = count($items);
$cnt = 0;
//The Loop
if ( $count > 0 ) : foreach($items as $item) :
setup_postdata($item);
$custom_values = get_post_meta($item->ID, 'position', true);
?>
<li>
<div class="entry-content">
<div class="entry-content-col1">
<div class="list-detail">
<?php the_content();?>
</div>
</div>
</div>
</li>
<?php
$cnt++;
endforeach;
endif;
?>
</ul>
Whenever an event like a "click" happens you are able to listen to it, inspect information about it, and then take some actions depending on what that information was. Since you are already using jQuery take a look at the API docs for the jQuery Event object - all of that info is available to you if you set a listener to find it.
There is almost certainly more elegant solutions for your specific page, but one straight forward way to do it would be to listen for clicks on the area in question and prevent that event from propagating.
So for a very basic solution load your page and enter this into the JS console:
Listen for clicks inside the elements you wish to "smother"
When that event occurs prevent it from propagating by calling .preventDefault() on the event object passed into the handler function.
$("ul#list-members .entry-content-col1").click(function (e) {
e.preventDefault();
return false;
});
The above solution isn't great because its targeting multiple areas. If you can add some specificity to the markup like giving the area you are concerned with a unique class or ID name you can then target it more effectively.
In your custom JS file there is a function that uses the selector #list-members. This works fine on the "Who we are" section but on your "What we do" section, the same selector is being targeted. I would suggest using a different selector that only appears in the "What we do" section. Try changing the selector on line 120 to be more specific like this.
$('#post-6 #list-members li').on('click', function(){
var arrow = $(this).find('.entry-content-arrow');
if( $(this).find('.toggle-down').length > 0 ) {
$(this).find('.list-info').slideUp('slow');
$(this).find('.list-detail').slideDown(500, function(){
arrow.removeClass('toggle-down').addClass('toggle-up');
changeInteriorH(2);
if($(this).find('p:first').is(':empty')){
$(this).find('p:first').remove();
}
});
} else {
$(this).find('.list-info').slideDown('fast');
$(this).find('.list-detail').slideUp(500, function(){
arrow.removeClass('toggle-up').addClass('toggle-down');
changeInteriorH(2);
});
}
});
For your CSS changes:
It looks like there are two CSS styles that are implying that area is clickable. On line 887 of style.css you'll see
#list-members li:hover {
background-color: #4D3A2B;
}
You need to make that more specific just like we did with your JS. Try
#post-6 #list-members li:hover {
background-color: #4D3A2B;
}
for your selector. On line 860 of the same file change
#list-members li,
#list-partners li {
to
#post-6 #list-members li,
#post-6 #list-partners li{
so that the cursor does not show up on the background.
I'm not sure why you changed the delay on your JS function above but that's why things slowed down. That was not necessary and was probably not helpful.
If my answer solves your problem, please give it an up-vote. Thanks!

Unable to show the div on body load

This is my code posted in a jsfiddle Demo.
As you can see when you click on the
Hyderabad.
Visakhapatnam.
Then a Horizontal Image slider is shown ( YOu can slide throgh the Pictures )
Now my requirement is I need to also show the Image slider on body load itself also
I have tried using body onload function to show the div , and also in Jquery ready function , and by commenting all the hide() functions in javascript , but none of them really worked .
Could anybody please tell me what is the way to do this .
I just tested it.. first I thought that you should just do this:
jQuery(document).ready(function() {
$fp_galleries.first().click();
});
but poorly this will only show the first image and not all images.
I don't know why but it looks like you should do this.
$(window).load(function() {
/* your code */
$fp_galleries.first().click();
});
Maybe because you need to wait until the images are loaded.
perhaps use document on ready to call the function: http://api.jquery.com/ready/
$(document).ready(function() {
openGallery(galleryname){
})
;
The problem is not that it is hidden, its rather that the content are only generated by som javascript when the user clicks one of your links.
You could add something like
$("li",$fp_galleries).first().click()
at the bottom of your script.
This will trigger the click event on one of the links.

Categories

Resources