0

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!

4
  • 1
    What's the conflict message you're getting? Is this file loaded with wp_enqueue_script() with jQuery passed as a dependency? Jul 5 '15 at 23:01
  • Yes, I loaded it with wp_enqueue_script, and I also passed jQuery as a dependency. :) Where can I check the conflict error message? :) Jul 6 '15 at 23:19
  • 1
    When you said there's "a massive jQuery conflict" I assumed you were referencing something in particular. Is that not the case? Also, is the script that defines Grid (and parallax()) also enqueued with the right dependencies? Jul 6 '15 at 23:37
  • I was able to solve it. The debugging showed that the Grid was undeclared so I added Grid.init(); to its portfolio.js file itself, and it worked after that. Thanks a lot. :) Jul 8 '15 at 3:13
0

Note: This is my solution from 5 years back:

I was able to solve it. The debugging showed that the Grid was undeclared so I added Grid.init(); to its portfolio.js file itself, and it worked after that. Thanks a lot. :) – Hardeep Asrani Jul 8 '15 at 3:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.