Search code examples
javascriptjquerywordpressshared-librariesconflict

2 libraries of jquery still conflicting even with $.noConflict();


I cannot understand why is my theme still conflicting with a JS I found online.

My theme is yin yang from (http://onioneyethemes.com/yin-yang/)

And the theme I am trying to run is a quote rotator, I will put the code here since its website is down since yesterday:

/*
 * jQuery Quovolver v1.0 - http://sandbox.sebnitu.com/jquery/quovolver
 *
 * By Sebastian Nitu - Copyright 2009 - All rights reserved
 * 
 */

(function($) {
    $.fn.quovolver = function(speed, delay) {

        /* Sets default values */
        if (!speed) speed = 500;
        if (!delay) delay = 6000;

        // If "delay" is less than 4 times the "speed", it will break the effect 
        // If that's the case, make "delay" exactly 4 times "speed"
        var quaSpd = (speed*4);
        if (quaSpd > (delay)) delay = quaSpd;

        // Create the variables needed
        var quote = $(this),
            firstQuo = $(this).filter(':first'),
            lastQuo = $(this).filter(':last'),
            wrapElem = '<div id="quote_wrap"></div>';

        // Wrap the quotes
        $(this).wrapAll(wrapElem);

        // Hide all the quotes, then show the first
        $(this).hide();
        $(firstQuo).show();

        // Set the hight of the wrapper
        $(this).parent().css({height: $(firstQuo).height()});       

        // Where the magic happens
        setInterval(function(){

            // Set required hight and element in variables for animation
            if($(lastQuo).is(':visible')) {
                var nextElem = $(firstQuo);
                var wrapHeight = $(nextElem).height();
            } else {
                var nextElem = $(quote).filter(':visible').next();
                var wrapHeight = $(nextElem).height();
            }

            // Fadeout the quote that is currently visible
            $(quote).filter(':visible').fadeOut(speed);

            // Set the wrapper to the hight of the next element, then fade that element in
            setTimeout(function() {
                $(quote).parent().animate({height: wrapHeight}, speed);
            }, speed);

            if($(lastQuo).is(':visible')) {
                setTimeout(function() {
                    $(firstQuo).fadeIn(speed*2);
                }, speed*2);

            } else {
                setTimeout(function() {
                    $(nextElem).fadeIn(speed);
                }, speed*2);
            }

        }, delay);

    };
})(jQuery);

I am pretty sure the reason why it doesn't work is conflict of the theme js to the backlink to jquery

Removing this:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Would make my theme work. And adding that (requirement of the rotator) would disable the effects of my theme.

Here is what I did to try to remove the conflict:

    <script type="text/javascript">
    $.noConflict();
    $(document).ready(function() {

        $('blockquote').quovolver();

    });
</script>

But still no luck. Somebody who can help me to remove the conflict?


Solution

  • Try this instead

     jQuery(document).ready(function($){
            // You can then use `$` inside this func,
            // it will not show errors now
            $('blockquote').quovolver();  
        });
    
    $.noConflict(true);