theme development - jQuery conflict in WordPress, works fine in HTML

admin管理员组

文章数量:1312838

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!

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!

• theme-development
• jquery

Share Improve this question asked Jul 5, 2015 at 4:08 Hardeep AsraniHardeep Asrani 69222 gold badges1010 silver badges2424 bronze badges 4

• 1 What's the conflict message you're getting? Is this file loaded with wp_enqueue_script() with jQuery passed as a dependency? – Morgan Estes Commented Jul 5, 2015 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? :) – Hardeep Asrani Commented Jul 6, 2015 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? – Morgan Estes Commented Jul 6, 2015 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. :) – Hardeep Asrani Commented Jul 8, 2015 at 3:13

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： theme developmentjQuery conflict in WordPressworks fine in HTML