Using jQuery in Joomla

jQuery is an advanced javascript library that greatly simplifies "HTML document traversing, event handling, animating, and Ajax interactions for rapid web development". However, jQuery is not the default javascript library choice in Joomla, which relies instead on MooTools. While the merits of one over the other can be discussed up and down the Internet, it leaves us with the problem that they are incompatible when both are invoked at the same time, as one will overwrite parts of the other. Fortunately, jQuery provides us with a no conflicts option that we can call upon to have jQuery play nice with the rest of Joomla.

As usual, there are a few things you need to watch for in using jQuery for Joomla. First and foremost is that after you include the script either in your template or through a call in a component, you invoke the no conflict method in the HEAD of your document after all scripts have been loaded:

<script type="text/javascript">jQuery.noConflict();</script>

What this will do is remove the conflicting shortcuts that both MooTools and jQuery share, prominently the use of a $ to invoke their respective functions. So for example if you previously used

<script type="text/javascript">$("#some_element_id").hide()</script>

to select an element with 'some_element_id', you now have to use:

<script type="text/javascript">jQuery('#some_element_id').hide();</script>

to attain the same effect.

Simple enough? Well the problem turns out to be that a majority of third party add-ons written for jQuery make heavy usage of the $ shortcut. This means that if you will be using a third party add-on, you will either need to see if the author has provided a no conflict version, or adjust it to make one your own. Simply replace all the references to $ with jQuery to accomplish this. So for example following excerpt from the facebox add-on changes from:

loading: function() {
      init()
      if ($('#facebox .loading').length == 1) return true
      showOverlay()
 
      $('#facebox .content').empty()
      $('#facebox .body').children().hide().end().
        append('<img src="'+$.facebox.settings.loadingImage+'"/>')
 
      $('#facebox').css({
        top: getPageScroll()[1] + (getPageHeight() / 10),
        left: $(window).width() / 2 - 205
      }).show()
 
      $(document).bind('keydown.facebox', function(e) {
        if (e.keyCode == 27) $.facebox.close()
        return true
      })
      $(document).trigger('loading.facebox')
    },

to

loading: function() {
      init()
      if (jQuery('#facebox .loading').length == 1) return true
      showOverlay()
 
      jQuery('#facebox .content').empty()
      jQuery('#facebox .body').children().hide().end().
        append('<img src="'+jQuery.facebox.settings.loadingImage+'"/>')
 
      jQuery('#facebox').css({
        top: getPageScroll()[1] + (getPageHeight() / 10),
        left: $(window).width() / 2 - 205
      }).show()
 
      jQuery(document).bind('keydown.facebox', function(e) {
        if (e.keyCode == 27) $.facebox.close()
        return true
      })
      jQuery(document).trigger('loading.facebox')
    },

Comments

Write A Comment

Name:
Email:
Website:

Please input the anti-spam code that you can read in the image.

Powered by !JoomlaComment 4.0 beta2