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
<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>
Solutions
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!