I'm creating a component for Joomla website. This site includes a sophisticated template with fancy css and scripts (namely some K2 components are named) Within this component I'm using colorbox to show modal picture gallery but ultimately

the moment this component is known as CSS qualities and processes of javascript of template fails leading to some weared page shows. When I haven't written these CSS and javascripts it will likely be quite cumbersome that i can prevent conflicts among CSS and scripts.

What exactly is my real question is

Can there be in whatever way to avoid conflict between these scripts without diving much in to the actual scripts.

Please guide me through this.

Thanks ahead of time

K2 is really a content component for Joomla. It isn't unusual for framework plug-inches or add-ons to possess conflict(s) with each other. Regrettably, you may have to look into Joomla or K2 forum for solutions. Either that, you can test crippling other plug-inches 1 by 1 up until the conflict vanishes (hopefully).

Among the primary conflicts in JavaScript is between MooTools (needed for many Joomla functionaly) along with other JavaScript libraries. Most typical may be the $ global variable that is generally used like a DOM selector.

In MooTools, it only chooses by ID, during other libraries like JQuery, it uses CSS selectors.

If you possess a Joomla extension that loads another JavaScript library like JQuery, you'll encounter problems. For JQuery, there's a particular solution. http://docs.jquery.com/Using%5FjQuery%5Fwith%5FOther%5FLibraries

For other libraries however, you will need to dive in to the JS, or make use of an extension that provides exactly the same functionality but uses MooTools.

For CSS, the only method for this would be to edit the CSS files. Good extensions should apply certain kind of namespacing for his or her CSS. For instance, prefix all CSS classes using the component title. Or wrap all HTML inside a wrapper element named following the component, or module etc.

If the does not exist, you will need to add it yourself.

Most likely the simplest would be to edit the extensions HTML and add:

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

round the extension.

Then edit the extensions CSS and add

#extension-name

before all CSS selectors.

For instance, for those who have:

.left-column {
  float: left;
}

change it out to:

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

You may also automate this method having a regex search and replace.