Question

I can’t understand such situation:

I have a site template and in header there is code:

$(document).ready(function () {
    $('#header').corner();
    ...
}

corner() is just a jQuery-plugin function. But the problem is:

("#header") is null
    $('#header').corner();

It works at main page, but at another one (with the same template) – doesn’t work.

To view everything in action, look at this page. You will see header (blue top div) rounded and there aren’t any errors in firebug console. Now go to this page. Everything works too, but this time that’s not the main page (it still uses same template file).

And the third page, the error appears there but still the same template. What’s wrong?

Answer 1

The problem is that $ is a stupid name a for a function.

On the third page, $ is defined by jQuery and redefined by Prototype. You are getting conflicts.

Start by rewriting all your jQuery stuff to use jQuery instead of $ and call noConflict.