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>
    
  • 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:

    1. Listen for clicks inside the elements you wish to "smother"
    2. 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!

    Tags: Javascript / PHP / Html

    Similar questions

    how to create a section inside a section with theme options customizer
    it is very difficult to find an online article, or even in the WP codex, to create a section inside a section for the theme options. the below screenshot shows what i am trying to create: i have the simple code below creating such, but i am not sure how to create a section inside a section. any help would be greatly appreciated, and help a future d...
    I am trying to add a section to my wordpress child theme on the customize section, for some reason it doesnt work
    I got this child theme I made based on twentythirteen and I am trying to add a section. it always comes up with this error: Fatal error: Class 'WP_Cutsomize_Colour_Control' not found in /home3/ab78267/public_html/TalkAboutIt/wp-content/themes/Talk_About_It/functions.php on line 15 the following is my php cod ein the functions.php file: I have also ...
    WordPress Customizer: Issue when open a section from a link in other section
    I have added 2 sections in Customizer, Section A and Section B for example. Section A is in Panel X and Section B isn't in any panel. In Section A, I put a link: <a href="#" class="go-to-section-b">Click here to show Section B</a> I can show Section B with my Jquery script: but the issue is when I click back button, it goes back to Pane...
    Wordpress: adding an if-statement to a single post page ignores my section, but displays what is in the section
    I'm sorry for the blurry title. I have a custom post type called 'service'. single-service.php now always adds the same form (made in Contactform7) to each service in a nice section that looks a bit different than the rest of the page. This works fine, but I want to have a possibility to use different forms for different services, or to have a serv...
    Add Control Section Only For The Top Section - Elementor
    I'm trying to add a custom tab to only for the top Section widget, but when I call start_controls_section, the settings shows up for both top Section and inner Sections. I tried to dig in the Javascript side as well but no success. Is there a way to create a settings tab only for the top section but not for inner sections? Thank you,
    How to have second section float below the first section?
    I have the following HTML markup, where I have successfully made the first section sticky. What I want is the second section to be sticky as well but stay below the first one. Suppose I scroll and the first section is sticky the second should be sticky and float below the first one. How can I make the second section also float below the section-1. ...

    Also ask

    We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.