Question

I use several jquery plugins on my website, most of which are actually used only on some pages. For instance a image slider plugin that is only displayed on the starterpage.

Then I have a common file “custom.js” in which I call the functions from and it is included on every page similar to a external css style sheet. I prefer to keep it in one file and the size is not substantial.

But since I do not want to include every js-plugin file, which are sometimes quite big, on pages were the actual plugin arent displayed my problem appears. The common js file will try to call the plugins which are not included which generate a js error message: e.g. $("#slider").coinslider is not a function. How can I fix this?

Answer 1

There are a couple of ways to do this. The easiest would be to check for the presence of the ‘slider’ div (assuming this div was only used in one place on your site, when you have the plugin loaded):

if($("#slider").length){
    $("#slider").coinslider()
}

You could instead catch the error that is being thrown:

try {
    $("#slider").coinslider();
} catch(err){}

But I would recommend the first method.