jQuery conflict in WordPress, works fine in HTML

Question

I’ve been working on a design where it worked fine in HTML, but is having a massive jQuery conflict when using within WordPress.

Here’s the entire script.js file first:

jQuery(document).ready(function($) {
    /* Parallax */
    $('.intro').parallax({imageSrc: 'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/intro.jpg', bleed: '10'});
    $('.social').parallax({imageSrc: 'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/social.jpg', bleed: '10'});
    $('.separator').parallax({imageSrc: 'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/separator.jpg', bleed: '10'});
    $('.subscribe').parallax({imageSrc: 'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/subscribe.jpg', bleed: '10'});
    $('.testimonials').parallax({imageSrc: 'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/testimonials.jpg', bleed: '10'});
    $('.contact').parallax({imageSrc: 'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/contact.jpg', bleed: '10'});
    $('.archive-header').parallax({imageSrc: 'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/blog.jpg'});
    $('.post-header').parallax({imageSrc: 'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/blog.jpg'});

    /* SMOOTH SCROLL */
    jQuery('a[href*=#]').click(function() {
        if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
            var target = jQuery(this.hash);
            target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                jQuery('html,body').animate({
                    scrollTop: target.offset().top
                }, 1200);
                return false;
            }
        }
    });

    /* Apply matchHeight to match services grid */
    var byRow = $('body').hasClass('pmenu-push');
    $('.col-md-12').each(function() {
        $(this).children('.service-box').matchHeight(byRow);
    });
    $('.col-md-12').each(function() {
        $(this).children('.blog-item').matchHeight(byRow);
    });

    /* Skillbar animation speed */
    jQuery('.skillbar').each(function(){
        jQuery(this).find('.skillbar-bar').animate({
            width:jQuery(this).attr('data-percent')
        },6000);
    });

    /* Enable Portfolio Grid */
    Grid.init();

    /* Enable Swiper for Testimonials */
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        autoplay:10000
    })

    /* Enable Slideout Menu */
    var menuLeft = document.getElementById( 'pmenu' ),
    showLeftPush = document.getElementById( 'showLeftPush' ),
    hideLeftPush = document.getElementById( 'hideLeftPush' ),
    body = document.body;

    showLeftPush.onclick = function() {
        classie.toggle( this, 'active' );
        classie.toggle( body, 'pmenu-push-toright' );
        if (classie.has(showLeftPush,"fa-bars")) {
            classie.remove(showLeftPush,"fa-bars");
            classie.add(showLeftPush,"fa-times");
        } else {
            classie.add(showLeftPush,"fa-bars");
        }
        classie.toggle( menuLeft, 'pmenu-open' );
        disableOther( 'showLeftPush' );
    };
    hideLeftPush.onclick = function() {
        classie.toggle( this, 'active' );
        classie.toggle( body, 'pmenu-push-toright' );
        classie.toggle( menuLeft, 'pmenu-open' );
        disableOther( 'hideLeftPush' );
        classie.add(showLeftPush,"fa-bars");
    };

    function disableOther( button ) {
        if( button !== 'showLeftPush' ) {
            classie.toggle( showLeftPush, 'disabled' );
        }
    }
});

And it’s working fine if I remove the following piece of code, which makes the portfolio work, from the file:

/* Enable Portfolio Grid */
Grid.init();

And pointers on how to avoid this? 🙂

Thanks for the help!

0
Hardeep Asrani 7 months 2020-12-22T13:10:28-05:00 0 Answers 5 views 0

Leave an answer

Browse
Browse