conflicting CSS and Javascripts

Question

I am developing a component for Joomla website. This website has a sophisticated template with fancy css and scripts (namely some K2 components are named) In this component I am using colorbox to display modal picture gallery but what happens is

as soon as this component is called CSS properties and functions of javascript of template fails resulting in some weared page displays. As I have not written these CSS and javascripts it will be quite cumbersome for me to prevent conflicts among CSS and scripts.

So what is my question is

Is there any way to prevent conflict between these scripts without diving much into the actual scripts.

Please guide me through this.

Thanx in advance

Answer 1

K2 is a content component for Joomla. It's not unusual for framework plug-ins or add-ons to have conflict(s) with one another. Unfortunately, you might have to search into Joomla or K2 forum for answers. Either that, you can try disabling other plug-ins one by one till the conflict disappears (hopefully).

Answer 2

One of the main conflicts in JavaScript is between MooTools (required for some Joomla functionaly) and other JavaScript libraries. Most common is the $ global variable which is commonly used as a DOM selector.

In MooTools, it only selects by ID, while in other libraries like JQuery, it uses CSS selectors.

So if you have a Joomla extension that loads another JavaScript library like JQuery, you'll run into problems. For JQuery, there is a specific solution. http://docs.jquery.com/Using_jQuery_with_Other_Libraries

For other libraries however, you'll need to dive into the JS, or use an extension that offers the same functionality but uses MooTools.

As for CSS, the only way around this is to edit the CSS files. Good extensions should use some sort of namespacing for their CSS. For example, prefix all CSS classes with the component name. Or wrap all HTML in a wrapper element named after the component, or module etc.

If this doesn't exist, you'll have to add it yourself.

Probably the easiest is to edit the extensions HTML and add:

<div id="extension-name">
  <!-- extension HTML here -->
</div>

around the extension.

Then edit the extensions CSS and add

#extension-name 

before all CSS selectors.

For example, if you have:

.left-column {
  float: left;
}

change it to:

#extension-name .left-column {
  float: left;
}

You can even automate this process with a regex search and replace.