title: jQuery conflict a.fn.cssOriginal=a.fn.css and a[c].css("box-sizing")
body: <p>I have two jQuery files that were conflicting with each other. I was getting the error:</p>
  
  <pre><code>Uncaught TypeError: Object 0px has no method 'css' 
  </code></pre>
  
  <p>After much tweaking and tinkering, I figured out how to solve this. However, I think this is not a proper solution, and I would like to get feedback on an alternate proper solution.</p>
  
  <p>The files are jQuery plugin files from 1) from a template and 2) from a slideshow; both resize containers and other elements when the screen is resized. </p>
  
  <p>The source of the problem is that the slideshow jquery plugin declares:</p>
  
  <p>a.fn.cssOriginal=a.fn.css;</p>
  
  <p>and I can read the error to lines of the template's jquery file whenever a[c].css("box-sizing"), or similar, is being called. </p>
  
  <p><strong>I solved this by replacing .css for .cssOriginal</strong> throughout the template's jquery functions file. But I feel uneasy. First of all, the slideshow will only be used in some pages. </p>
  
  <p>How could prevent the tempalte's .css calls be affected from slideshow plugin file?</p>
  
  <p>All of the jQuery files from the slideshow include a jQuery.noConflict(); at the end.</p>
  
  <p>From the template, this section of the code was the source of the conflict:</p>
  
  <pre><code>e.matchHeight = function (a, c, f) {
      var j = e(window),
          h = a &amp;&amp; b[a];
  
      if (!h) {
          var h = b[a] = {
              id: a,
              elements: c,
              deepest: f,
              match: function () {
                  var a = this.revert(),
                      b = 0;
  
                  e(this.elements).each(function () {
                      b = Math.max(b, e(this).outerHeight())
                  }).each(function (c) {
                      var d = "outerHeight";
                      "border-box" == a[c].css("box-sizing") &amp;&amp; (d = "height");
  
                      var g = e(this),
                          c = a[c],
                          d = c.height() + (b - g[d]());
  
                      c.css("min-height", d + "px")
                  })
              },
              revert: function () {
                  var a = [],
                      b = this.deepest;
  
                  e(this.elements).each(function () {
                      var c = b ? e(this).find(b + ":first") : e(this);
                      a.push(c.css("min-height", ""))
                  });
  
                  return a
  
              },
              remove: function () {
                  j.unbind("resize orientationchange", k);
                  this.revert();
                  delete b[this.id]
              }
          }, k = function () {
              h.match()
          };
  
          j.bind("resize orientationchange", k)
      }
  
      return h
  };
  </code></pre>
  
  <p>and from the slide show, this section of the code is the source of the problem: </p>
  
  <pre><code>a.fn.cssOriginal=a.fn.css;
  
      a.fn.css=function(c,d){
  
          var e=this,f={};
          if(typeof c=="string")if(d)f[a.camelCase(c)]=d;
          else return e.cssOriginal(c);
          else f=c;
          f=a.cssPropertySupporter(f);
          var g=a("body").data("cssPerspective");
          if(f.transform)a.each(b,function(a,b){var c=b+(b?"T":"t")+"ransform";
          var d=f.transform;
          f[c]=(g&amp;&amp;!/perspective/gi.test(d)?"perspective("+g+") ":"")+d});
          e.cssOriginal(f); 
          return e
  
      }
  </code></pre>
  
  <p>Thank you</p>