Search code examples
jquerywordpressadblock

Adblock for Chrome is blocking some, but not all, of my site's JQuery

I'm currently having issues in Chrome with AdBlock blocking a few lines of my site's JQuery. I've narrowed it down to the 'Malware Domains' filter list that affects it, as it works with all the other filters active when that one is disabled.

My HTML (the section that is affected) is as follows:

<div class="index-section-5 container-fluid">
    <div class="content">
        <h1>Interested?</h1>
        <p class="text">Follow the link below to register your interest in CyberKombat</p>
        <div class="button-container">
            <div class="outlined-button button register-form-button">
                <p>Register Here</p>
            </div>
        </div>
    </div>
</div>

<div class="register-interest-container">
    <div class="close-form-button register-form-close">
        <div class="close-button-line one"></div>
        <div class="close-button-line two"></div>
    </div>
    <div class="form-container">
        [contact-form-7 id="140" title="Register Form"]
    </div>
</div>

And the custom js being loaded is:

$(document).ready(function(){
    $(".menu-toggle").on('click', function() {
        $(this).toggleClass("on");
        $('.menu-section').toggleClass("on");
        $(".navigation-mobile").toggleClass('hidden');
    });

    $('.contact-map').click(function () {
        $('.contact-map iframe').css("pointer-events", "auto");
    });

    $(".register-form-button").click(function(){
        $(".register-interest-container").show();
    });

    $(".register-form-close").click(function(){
        $(".register-interest-container").hide();
    });

});

(Only the bottom two are relevant, all other JQuery works as intended)

What should happen, is when the user clicks the 'register-form-button' div, the 'register-interest-container' should appear (The CSS is initially loaded with display:none). This works in all other browsers, Chrome incognito mode, and when I disable the malware domain filter. However, with the malware domain filter on, clicking the button doesn't do anything.

The website isn't currently finished so I can't link to the actual site, but you can see the end result in the images below:

Before clicking: https://i.sstatic.net/FwkZj.png
After clicking: https://i.sstatic.net/cdz7c.png

Is there any way I can alter the JQuery to prevent Adblock from blocking it?

I've tried using .css() and .toggleClass() to make it visible by changing the css or adding a class, but neither of those worked either

The form is being generated by the 'Contact Form 7' plugin on Wordpress, which is the CMS I'm using for this site. My custom .js file is being loaded in via functions.php, as below:

wp_enqueue_script( 'custom-javascript', get_template_directory_uri() . '/js/custom-javascript.js' , array('jquery'),  false );

Any help would be greatly appreciated

Thanks

Solution

  • I managed to fix this issue this morning. I realised I was loading my cookie bar script from an external site accidentally (a previous site I worked on, forgot to change the source url) which is why that was being blocked by AdBlock. For some reason, this must have caused the other JQuery to be blocked (but only on the index page). I've now replaced the script source for my cookie bar to:

    "<?php bloginfo('stylesheet_directory'); ?>/js/jquery.cookiebar.js"

    Now not only does my cookie bar work with AdBlock enabled, but the rest of my JQuery does too.