Conflict between two JQuery plugins

**sniperman** · 01-07-2010, 12:30 AM

I've new to JQuery schematics but good with JQuery plugin implementation, until today. The problem is I had one working text transition script on the page. I added a second JQuery plugin on the same page, and it failed to work. But it works perfectly on a demo page I created before integration into this page.

I have a feeling the problem lies either with a function or variable having the same name, but the blocks won't hide on page load... so... here are the two scripts as they appear on my page. Hopefully you can spot the problem.

First the header links incase there is a conflict here...

Code:

  <link rel="stylesheet" type="text/css" href="css/jqfade.css" /> <!-- styles for JQuery text fade -->
  <script type="text/javascript" src="scripts/jquery.js"></script>  <!-- script for JQuery text fade -->
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> <!-- Mootools  Stylesheet -->
  <script type="text/javascript" src="scripts/mootools-1.2-core.js"></script> <!-- Mootools  -->
  <script type="text/javascript" src="scripts/class.noobSlide.packed.js"></script> <!-- Mootools plugin -->

And the JQuery plugin code in the header...

Code:

 
<script type="text/javascript">
	window.addEvent('domready',function(){
		//Active Testimonials
		var handles8_more = $$('#handles8_more span');
		var nS8 = new noobSlide({
			box: $('box8'),
			items: $$('#box8 h3'),
			size: 480,
			handles: $$('#handles8 span'),
			// addButtons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') }, 
			autoPlay: true,
			onWalk: function(currentItem,currentHandle){
				//style for handles
				$$(this.handles,handles8_more).removeClass('active');
				$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
				//text for "previous" and "next" default buttons
			//	$('prev8').set('html','&lt;&lt; '+this.items[this.previousIndex].innerHTML); // remove to add buttons 
			//	$('next8').set('html',this.items[this.nextIndex].innerHTML+' &gt;&gt;');	// remove to add buttons
			}
		});
		//more "previous" and "next" buttons
		nS8.addActionButtons('previous',$$('#box8 .prev'));
		nS8.addActionButtons('next',$$('#box8 .next'));
		//more handle buttons
		nS8.addHandleButtons(handles8_more);
		//walk to item 3 witouth fx
		nS8.walk(3,false,true);

	});
	</script> 

    <script type="text/javascript">
      (function ($) {
        $.fn.fadeTransition = function(options) {
          var options = $.extend({pauseTime: 5000, transitionTime: 2000}, options);
          var transitionObject;

          Trans = function(obj) {
            var timer = null;
            var switched  = 0;
            var els = $("> *", obj).css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
            $(obj).css("position", "relative");
            $(els[current]).css("display", "block");

            function transition(next) {
              $(els[current]).fadeOut(options.transitionTime);
              $(els[next]).fadeIn(options.transitionTime);
              current = next;
              cue();
            };

            function cue() {
              if ($("> *", obj).length < 2) return false;
              if (timer) clearTimeout(timer);
              timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
            };
            
            this.showItem = function(item) {
              if (timer) clearTimeout(timer);
              transition(item);
            };

            cue();
          }

          this.showItem = function(item) {
            transitionObject.showItem(item);
          };

          return this.each(function() {
            transitionObject = new Trans(this);
          });
        }

      })(jQuery);
    
      var page = {
        tr: null,
        init: function() {
          page.tr = $(".area").fadeTransition({pauseTime: 7000, transitionTime: 2000});
          $("div.navigation").each(function() {
            $(this).children().each( function(idx) {
              if ($(this).is("a"))
                $(this).click(function() { page.tr.showItem(idx); return false; })
            });
          });
        },

        show: function(idx) {
          if (page.tr.timer) clearTimeout(page.tr.timer);
          page.tr.showItem(idx);
        }
      };

      $(document).ready(page.init);    
    </script>

ps. I did some extra checks, and found that when I deleted portions of the scripts, the problem lies in

Code:

  <script type="text/javascript" src="scripts/mootools-1.2-core.js"></script> <!-- Mootools  -->

**jscheuer1** · 01-07-2010, 06:21 AM

That's not 2 jQuery plug ins. It's 2 script libraries, jQuery and Mootools, being used on the same page, each with its own dependent plug in. It generally can be done, but can be a little tricky until you get used to it. In certain situations though, it's virtually impossible. I say virtually because with enough rewriting of code, anything can be made to work. However, with jQuery, a few simple steps can often be taken to put it and the plug in(s) that rely upon it into noConflict mode. Once this is done, the other library and its plug in(s) can function freely while the jQuery code can run effectively in a slightly more restricted manner. The net result being that both libraries and their dependent plug in(s) appear to function normally, as if they were the only code on the page.

If there are problems, I would need to see the page. But this has a very good chance of working:

Code:

  <link rel="stylesheet" type="text/css" href="css/jqfade.css" /> <!-- styles for JQuery text fade -->
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> <!-- Mootools  Stylesheet -->
  <script type="text/javascript" src="scripts/jquery.js"></script>  <!-- script for JQuery text fade -->

<script type="text/javascript">
(function ($) {
        $.fn.fadeTransition = function(options) {
          var options = $.extend({pauseTime: 5000, transitionTime: 2000}, options);
          var transitionObject;

          Trans = function(obj) {
            var timer = null;
            var switched  = 0;
            var els = $("> *", obj).css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
            $(obj).css("position", "relative");
            $(els[current]).css("display", "block");

            function transition(next) {
              $(els[current]).fadeOut(options.transitionTime);
              $(els[next]).fadeIn(options.transitionTime);
              current = next;
              cue();
            };

            function cue() {
              if ($("> *", obj).length < 2) return false;
              if (timer) clearTimeout(timer);
              timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
            };
            
            this.showItem = function(item) {
              if (timer) clearTimeout(timer);
              transition(item);
            };

            cue();
          }

          this.showItem = function(item) {
            transitionObject.showItem(item);
          };

          return this.each(function() {
            transitionObject = new Trans(this);
          });
        }

    
      var page = {
        tr: null,
        init: function() {
          page.tr = $(".area").fadeTransition({pauseTime: 7000, transitionTime: 2000});
          $("div.navigation").each(function() {
            $(this).children().each( function(idx) {
              if ($(this).is("a"))
                $(this).click(function() { page.tr.showItem(idx); return false; })
            });
          });
        },

        show: function(idx) {
          if (page.tr.timer) clearTimeout(page.tr.timer);
          page.tr.showItem(idx);
        }
      };

      $(document).ready(page.init);
      })(jQuery.noConflict());
</script>

  <script type="text/javascript" src="scripts/mootools-1.2-core.js"></script> <!-- Mootools  -->
  <script type="text/javascript" src="scripts/class.noobSlide.packed.js"></script> <!-- Mootools plugin -->

<script type="text/javascript">
	window.addEvent('domready',function(){
		//Active Testimonials
		var handles8_more = $$('#handles8_more span');
		var nS8 = new noobSlide({
			box: $('box8'),
			items: $$('#box8 h3'),
			size: 480,
			handles: $$('#handles8 span'),
			// addButtons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') }, 
			autoPlay: true,
			onWalk: function(currentItem,currentHandle){
				//style for handles
				$$(this.handles,handles8_more).removeClass('active');
				$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
				//text for "previous" and "next" default buttons
			//	$('prev8').set('html','&lt;&lt; '+this.items[this.previousIndex].innerHTML); // remove to add buttons 
			//	$('next8').set('html',this.items[this.nextIndex].innerHTML+' &gt;&gt;');	// remove to add buttons
			}
		});
		//more "previous" and "next" buttons
		nS8.addActionButtons('previous',$$('#box8 .prev'));
		nS8.addActionButtons('next',$$('#box8 .next'));
		//more handle buttons
		nS8.addHandleButtons(handles8_more);
		//walk to item 3 witouth fx
		nS8.walk(3,false,true);

	});
</script>

**michelleaneous** · 06-19-2012, 11:19 PM

hi! i've read the posts above and it seems i have a similar problem.

my site is: www.michelleane0us.blogspot.com

i already had a scroll-to-top jquery plugin and it was working fine until i had an fb popup installed.

this is the code for scroll-to-top:

Code:

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<style type='text/css'>
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}
#w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}
</style>
<script src='http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js' type='text/javascript'><a href='http://blogging-roots.blogspot.com'>Blogger Gadgets</a></script>
<script type='text/javascript'>
$(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCirc' }); });
</script>

and for fb popup:

Code:

<!-- Likebox Pro FBFan Code Start -->
<style>#fblikepop {
    background-color: #fff;
    display: none;
    position: fixed;
    top: 200px;
    _position: absolute;
 /* hack for IE 6*/
    width: 450px;
    border: 10px solid #6F6F6F;
    z-index: 200;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin: 0pt;
    padding: 0pt;
    color: #333333;
    text-align: left;
    font-family: arial,sans-serif;
    font-size: 13px;
}

#fblikepop body {
    background: #fff none repeat scroll 0%;
    line-height: 1;
    margin: 0pt;
    height: 100%;
}

.fbflush {
    cursor: pointer;
    font-size: 11px !important;
    color: #FFF !important;
    text-decoration: none !important;
    border: 0 !important;
}

#fblikebg {
    display: none;
    position: fixed;
    _position: absolute;
 /* hack for IE 6*/
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 100;
}

#fblikepop #closeable {
    float: right;
    margin: 7px 15px 0 0;
}

#fblikepop h1 {
    background: #6D84B4 none repeat scroll 0 0;
    border-top: 1px solid #3B5998;
    border-left: 1px solid #3B5998;
    border-right: 1px solid #3B5998;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 5px !important;
    margin: 0 !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}

#fblikepop #actionHolder {
    height: 30px;
    overflow: hidden;
}

#fblikepop #buttonArea {
    background: #F2F2F2;
    border-top: 1px solid #CCCCCC;
    padding: 10px;
    min-height: 50px;
}

#fblikepop #buttonArea a {
    color: #999999 !important;
    text-decoration: none !important;
    border: 0 !important;
    font-size: 10px !important;
}

#fblikepop #buttonArea a:hover {
    color: #333 !important;
    text-decoration: none !important;
    border: 0 !important;
}

#fblikepop #popupMessage {
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 22px;
    padding: 8px;
    background: #fff !important;
}

#fblikepop #counter-display {
    float: right;
    font-size: 11px !important;
    font-weight: normal !important;
    margin: 5px 0 0 0;
    text-align: right;
    line-height: 16px;
}</style>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> 
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
 kakinetworkdotcom01username="Michelleaneouss",
 kakinetworkdotcom01title="Join us at Facebook!",
 kakinetworkdotcom01skin="02",
 kakinetworkdotcom01time="07",
 kakinetworkdotcom01wait="1",
 kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="http://code.helperblogger.com/likebox-with-timer.js"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>
<!-- Likebox Pro FBFan Code End -->

please help me sort this out...

Thread: Conflict between two JQuery plugins

Thread Tools

Search Thread

Conflict between two JQuery plugins

help on two script libraries conflicting

Bookmarks

Bookmarks

Posting Permissions