Quantcast
   
Titan CMS online support, find help and get answers

How to integrate jQuery

  • Published: September 12, 2008
  • |
  • Updated: May 12, 2011
  • |
  • Version: 11
 Summary

As the use of jQuery becomes more and more popular, you may find yourself wanting to integrate jQuery scripting into your Titan CMS content managed web site. This article describes the basic configuration steps to get you started on the path of integrating jQuery.

 Background

jQuery is a JavaScript Library that provides website developers and designers a simplified coding syntax for implementing animation, event handling, and Ajax interactions. jQuery is well known for its cross-browser compliance, lightweight footprint, and ability to develop animations and rich CSS3 styling.

Note: This article does not cover how to write jQuery code for manipulating HTML or adding animations. It is intended only to show how to integrate the required jQuery libraries into the framework of your site. If you need more information on writing jQuery code, utilize the various tutorials, as well as the API search, on the jQuery website (www.jquery.com).

 Instructions

Configure Source Library

The Titan Administration module gives you the flexibility to specify code snippets that can be placed in the HEAD section of your pages. In order to run the jQuery scripts you will write, first integrate the jQuery Source Library on your pages by making a configuration change in Titan Administration.

  1. Login to your Titan CMS Workstation as a webmaster or administrative user.
  2. Switch to the Titan Administration module.
  3. Using the Download Files button, upload the jQuery JavaScript library into the CommonScripts folder.
  4. Go to the configuration screen for the Page Layouts in your specific Globe under the Content Sites node. 
  5. Add a SCRIPT reference in the Post-Titan Metatags/Code Snippets textarea that points to the jQuery JavaScript library you uploaded to CommonScripts. If you use the "minified" version (see References for download details), the script reference should be something like the following:

    <SCRIPT src="/CommonScripts/jquery-1.2.6.min.js" type="text/javascript"></SCRIPT>

  6. Save the Page Layout changes and Refresh Site State.
     

An Alternative: Use the Google CDN

Google has created a Content Delivery Network (CDN) that hosts several popular open-source libraries.  Rather than host the minified jQuery files on your server, why not off-load that job to Google?

  1. Google's CDN is geographically distributed and designed to serve content fast.
  2. Many users will already have downloaded jQuery from Google while visiting other web sites.  As a result, it will be loaded from their browser's cache when they visit your site. That potentially makes your site load faster.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

 

Write Your Custom jQuery Script

Once the primary jQuery Library is included as a global script, you can begin writing your own custom jQuery script code. Store your code in external JavaScript files, and integrate these additional source scripts on a page layout, in the same way described above for the Source Library.

 References

Download the jQuery Library.
http://docs.jquery.com/Downloading_jQuery