Results 1 to 3 of 3

Thread: Conflict between two JQuery plugins

  1. #1
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    118
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default Conflict between two JQuery plugins

    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  -->
    Last edited by sniperman; 01-07-2010 at 12:36 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation help on two script libraries conflicting

    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...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •