Javascript is widely used within Joomla frontend extensions including templates. Unfortunately Javascript conflicts can occur between different extensions. This becomes more likely with every extension that is installed and can become an issue if you rely heavely on a large number of Joomla extensions. If you are new to using Joomla you may have noticed that jQuery is generally loaded by default however this was not always the case. Prior to Joomla 3.x Mootools was the primary Javascript library that was used. Because of this some extensions continue to use Mootools which can be a common source of conflict with the now default jQuery Javascript library.
Conflicts can also occur if an extension trys to load it's own copy of jQuery. Considering jQuery was not always available within Joomla, this is still quite common. Third party extensions are no longer required to load jQuery as it is already included with Joomla! Not only does loading jQuery twice increases the chance of causing conflicts it also added to the load time of your site.
Detecting Javascript Errors
If you suspect that your site is not functioning as it should then it is time to consider checking for Javascript error. A common example within Joomla51 templates is the mobile menu menu not functioning correctly as this is rendered using Javascript (eg. no sub menu items been displayed). So where does one check for such erros? The anwser to this question lies in your browser Javascript console. Most modern browsers include tools to view the Javascript console where in the past such tools like Firebug had been used instead. Hitting F12 or right clicking anywhere within a page and selecting 'Inspect' should bring up your developer tools. Within these tools select 'Console'. This console will display any Javascript errors on your page if they exist.
Installing 'jQuery Easy'
'jQuery Easy' is a free and excellent tool in helping resolve some of the common Javascript conflicts. Following are some of the many features available within 'jQuery Easy' to aid resolving your Javescript errors.
- Ensure jQuery is only loaded once throughout your site
- Puts jQuerry into no-conflict mode
- Places jQuery libraries after MooTools calls for better compatibility
For a basic installation of jQuery Easy follow these simple few steps..
- Download 'jQuery Easy' (http://www.simplifyyourweb.com/downloads/jquery-easy#downloads)
- From your Joomla adminstration navigate to Extensions -> Manage -> Install -> Upload Package File
- Click Browse and select your downloaded copy of 'jQuery Easy' and install
- Navigate to Extensions -> Plugins and select System - jQuery Easy
- In the Plugin tab set Status to Enabled
- In the Basic Site Options set the Enable jQuery option to jQuery
- Hit Save & Close
You now have 'jQuery Easy' installed with a basic setup which will hopefully go a long way in resolving your Javascript conflicts!