Question

I have two jQuery files that were conflicting with each other. I was getting the error:

Uncaught TypeError: Object 0px has no method 'css' 

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.

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.

The source of the problem is that the slideshow jquery plugin declares:

a.fn.cssOriginal=a.fn.css;

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.

I solved this by replacing .css for .cssOriginal throughout the template’s jquery functions file. But I feel uneasy. First of all, the slideshow will only be used in some pages.

How could prevent the tempalte’s .css calls be affected from slideshow plugin file?

All of the jQuery files from the slideshow include a jQuery.noConflict(); at the end.

From the template, this section of the code was the source of the conflict:

e.matchHeight = function (a, c, f) {
    var j = e(window),
        h = a && 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") && (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
};

and from the slide show, this section of the code is the source of the problem:

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&&!/perspective/gi.test(d)?"perspective("+g+") ":"")+d});
        e.cssOriginal(f); 
        return e

    }

Thank you

Answer 1

I think that you are including slideshow jquery-plugin first and template jquery-plugin later in your page. If that is the case, can you include one liner java-script in between both plugins? That one liner script may contain something like below:

a.fn.css=a.fn.cssOriginal;

I have not tried it, but just give it a try as this should work.