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!
Related
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.
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");
I've recently installed the smooth-scroll library from cferdinandi and the smooth-scroll feature works like a charm.
The anchors added to my text using a CMS where looking like this:
<span id="authentication" class="ancre"></span>
The ID being different each time, regarding what I'm talking about in my text. And it works fine.
My problem is that the smooth-scroll library seems to remove the class when it runs, therefore my class='ancre' does not show when the anchor is called. Class being:
.ancre:target{
background-color: #131b24;
color: white;
}
So what I did it that I removed the "target" parameter of my class and added a function to my JS file to add the class after the smooth-scroll is run. It looks like this:
CSS in css/app.css
.ancre{
background-color: #131b24;
color: white;
}
JS in js/app.js
after: function () {
var className = 'ancre';
document.querySelector('.' + className).classList.remove(className);
document.getElementById(anchor.id).classList.add(className);
}
But it does not work and I just couldn't figure out why.
You can try it by pressing the buttons "2-step authentication" and/or "Mobile" on this page.
I'm not a coder, more a designer and I would be happy to get some help here.
Thank you all for your help,
Best,
Kwint
You can use the scrollIntoView javascript function without the need for a library.
https://codepen.io/gezzasa/pen/gzXPbJ/
first I had to set the containers to position: relative; and then set the anchor to position: absolute; top: 0;. with the option on the JS set to block : 'center' it will now only scroll till the anchor is in the middle of the screen.
var smoothScroll = function(e, me) is the function I declared and gets fired on the onclick of the a tag. There are different ways to run the function but this is easy enought. I passed in event on the onclick for the event(event thats fired when you click) and this to tell the script what I clicked on.
e.preventDefault() will prevent the a tag from firing its default function which will reload the page with the href provided. in this case it will append an ID without that script.
document.querySelector(me.getAttribute('href')) will get the ID that it needs to scroll to and then the scrollIntoView function will scroll according to the options that you give it.
Hope I explained it well...I don't have a ton of experience explaining JS.;
here's the structure of the code: http://jsfiddle.net/ss1ef7sq/
although it's not really working at js fiddle but the code itself is working as i've tested it locally through firefox.
this is where i've based this on: http://html.net/tutorials/javascript/lesson21.php
jquery/ajax:
$('#ep-101').click(function(){$('.main-container').load('link.html #ep101').hide().fadeIn(800);});
$('#ep-102').click(function(){$('.main-container').load('link.html #ep102').hide().fadeIn(800);});
$('#ep-103').click(function(){$('.main-container').load('link.html #ep103').hide().fadeIn(800);});
$('#ep-104').click(function(){$('.main-container').load('link.html #ep104').hide().fadeIn(800);});
$('#ep-105').click(function(){$('.main-container').load('link.html #ep105').hide().fadeIn(800);});
so my question is, is there a way to make it like a shorter code where it can just get the value of those #10ns or assuming that there will be a different page with it's own nest of unique ids without typing them individually? there's still a lot i don't understand with ajax so i'd appreciate it if anyone can help & explain at least the gist of it as well.
i've looked around online but i'm really stuck. i also at least found out that it's possible to add transitions but the way it's coded there is that it will only have the transition for the incoming page & not the one that will be replaced. i also have a prob with page loaders effects but i'll save it for when i'm stuck there as well.
thanks in advance. =)
Use classes instead of id's. Set href attribute which you want to load on click and access it via $(this).attr('href').
<a class="load-me" href="link1.html">link 1</a>
<a class="load-me" href="link2.html">link 2</a>
...
Script:
$('.load-me').click(function(e){
e.preventDefault();
$('.main-container').hide().load($(this).attr('href'), function() {
// ...
$(this).fadeIn(800);
})
});
JSFiddle
If you need the load to wait container hiding animation, you could make it other way.
$('.load-me').click(function(e){
e.preventDefault();
// get the url from clicked anchor tag
var url = $(this).attr('href');
// fade out the container and wait for animation complete
$('.main-container').fadeOut(200, /* animation complete callback: */ function(){
// container is hidden, load content:
$(this).load(url, /* load complete callback: */ function() {
// content is loaded, show container up
$(this).slideDown(200);
});
});
});
JSFiddle
I use this fancy little jQuery toggle on my site, works great. But now I have a little larger text area I want to hide, and therefore I've included it in another php file, but when the site opens\refreshes the content is briefly shown and then hidden? Have I done something wrong or does it simply not work right with includes in it ?
Show me?
<div class="content">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
var par = jQuery('.content');
jQuery(par).hide();
});
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>
Use css to hide it
.content{
display:none;
}
Also
var par = jQuery('.content');
is a jQuery object so don't need to wrap it again as
jQuery(par).hide();
Just use par.hide(); but in this case, when you will use css to hide the element, then you don't need this anymore.
That will happen. The document briefly shows all the HTML before executing the code in your ready handler. (It has nothing to do with the PHP include.) If you want an element hidden when the page loads, hide it using CSS.
#myElement {
display: none;
}
The toggle should still work correctly.
You just need to don't use jquery document ready function. just use style attribute.
Show me?
<div class="content" style="display:none">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>
If this information is sensitive/not supposed to be seen without access granted, hiding it with CSS will not fix your problem. If it's not, you can ignore all of this and just use CSS with a display: none property.
If the information IS supposed to be hidden:
You need to only load the file itself on-demand. You would request the data with AJAX, do a $('.content').html() or .append() and send the result back directly from the server to the browser using something like JSON.
You are using the "ready" function that meant it will hide the element when the document is ready (fully loaded).
You can hide it using css:
.contnet { display: none; }
how you render you site server side does not affect how the site is loaded on the browser, what affects it is how the specific browser chooses to load your javascript and html, what i would recommend is set the element to hidden with css, since that is applied before anything else. And keep you code as is, since the toggle will work anyways
You can also clean up the code a little bit.
<script>
$(document).ready(function(){
$('.content').hide();
$('#toggleMe').click(function(){
$('.content').slideToggle('fast');
});
});
</script>