CODEWITHSUNDEEP
jqueryprototypejsconflict
Benjamin Arnaud
Benjamin Arnaud

Reputation: 21

Conflict with jQuery + Prototype + Opera / IE

I'm using IPBoard CMS that comes with prototype and I use the latest jQuery.

I've implemented a jQuery gallery picture viewer: - It works fine on Chrome and Firefox. - I have troubles with Opera and IE 8.

I've created a minimal example here: http://www.warriorlabs.net/index.php?app=ccs&module=pages&section=pages&folder=&id=22

You just have to click on the picture.

In IE 8 or Opera:

When I remove prototype everything works fine.

When I keep prototype with jQuery altogether with my "noConflicted" gallery viewer there seems to be errors with the width and height returned by jQuery accessors. As a result the loading box is not centered and the picture itself seems to be mapped to the whole window.

Has anyone got a clue of why this is happening ?

A little help would be appreciated.

Upvotes: 2

Views: 1474

Answers (3)

hint
hint

Reputation: 113

I resolved similar problem (jQuery - prototype conflict error in IE8) switching jquery 1.4.2 to 1.5.

Upvotes: 0

hoyt.dev
hoyt.dev

Reputation: 485

This problem can be solved if you comment out the following code in the prototype core code. But this is perhaps not the best solution if you ever need to use the scrollto function. 

    //Commented out because of the conflict with jQuery.
  //scrollTo: function(element) {
   // element = $(element);
   // var pos = Element.cumulativeOffset(element);
   // window.scrollTo(pos[0], pos[1]);
   // return element;
 // },

Upvotes: 0

Dan Manastireanu
Dan Manastireanu

Reputation: 1822

I haven't actually worked with both prototype and jQuery at the same time, but by my understanding you should put the jQuery.noConflict() call before the prototype script.

Try changing your document head to something like this:

<head>
    <script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
    </script>
    <script type="text/javascript" src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
    <script type="text/javascript" src="http://www.warriorlabs.net/jScript/facebox/facebox.js"></script>
</head>

EDIT:
Also remove the jQuery.noConflict() from the first line in facebox.js as it removes the $ function defined by prototype.

SIDE NOTE:
The usual way of writing jQuery plugins is something like this:

(function($){
  //Inside this block we know that $ == jQuery
  //The global $ (i.e. window.$) might be something else
  //By using this anonymous function we make sure we don't polute the global namespace
  var v = "function scope";//this is a variable in the scope of the function
  window.globalV = "global scope";//this is a global variable
  $.fn.myPlugin = function(){
    //my plugin code, usually something like:
    return this.each(function(){
      //do something with each element
      $(this).show();
    });
    //returning this.each allows for chaining
  }
})(jQuery);

In Chrome I get this error on your demo page:
Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function [prototype.js:4598]

Upvotes: 1

Related Questions