Using jQuery with LightCMS

Over recent years, JavaScript has become one of the key tools in allowing web developers to create dynamic websites. Many parts of the LightCMS system utilize JavaScript (such as elements like the photo gallery or the blog archive skin), and our designers and developers continue to integrate JavaScript functionality into the product wherever it fits best.

The primary JavaScript library we use on our CMS is jQuery, which shares a lot of basic principles with LightCMS; it's simple, powerful, and has a short learning curve. Furthermore, jQuery causes very few conflicts. Because of its widespread adoption, ease of use, and overall stability, jQuery has quickly become the top choice for our designers.

As a designer building websites on the LightCMS system, you can utilize jQuery as well. This short guide is designed to give you a quick look at how to get started. For more detailed information on jQuery, you can check out the links to other resources at the end of this article.

Calling the library

When you're ready to play with jQuery, you'll want to link to the jQuery library of your choice in the HTML head for each page on which you want to utilize jQuery. You can do this by editing the HTML files for the design templates you are using on your pages. For example, adding the following line of code to your HTML head will link to a jQuery library hosted by Google:

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

Directly following this line of code, you'll need to link to any custom JS files you create that you want to use on the page. You'll need to set up these files using the .js extension and store them with your LightCMS template files. Add a script code like the one above for each file you need to call and set the src= attribute to the location of your custom .js files.

Time to experiment

Your page is now set up for you to start playing with jQuery, so let's take a look at what you might put inside your custom .js files we showed you how to link to earlier. What will you do first? Here are a couple of simple examples that you might find helpful. There are endless possibilities to what you can do with jQuery, and it will get easier as you become more familiar with it.

Fade in / out

This simple effect makes it so that when your page loads, the targeted image is shown at 50% opacity. When the viewer's mouse hovers over the image, it returns to full opacity. An effect similar to this can be seen on our integrated photo galleries. Once you've set this code up in your custom .js files, you can then target an image for fading by adding the ".faded_img" class to its markup. Of course, you could replace the ".faded_img" class used below with any class name you prefer.

$(".faded_img").fadeTo("slow", 0.5);
$(".faded_img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.5);
});

Toggle (using slideToggle)

This creates an effect where you can hide content until an element is clicked. When the element you choose is clicked, the toggle goes into effect. A great example of this would be to create "hidden" content on a page, and navigational tabs could then be used to reveal the hidden content. The placeholder class name ".hidden_img" can be replaced with whatever class, element, or ID you wish to be hidden. The "p" placeholder can be replaced with whatever you want to be the trigger for revealing the hidden element.

// This hides the indicated area by default when page loads.
$(".hiddenimage").hide();
// Insert the element you want users to click on to hide or reveal the toggle area.
$("p").click(function(){
// Slow or fast can be used based on preference
$(this).next(".hiddenimage").slideToggle("slow");
return true;
});

noConflict: your friend if you need it

Occasionally, you may run into situations where your jQuery code isn't functioning correctly due to conflicts with other JavaScript code. In such situations, jQuery provides a handy option called noConflict. Running your jQuery code in noConflict mode can help to correct situations where there is JavaScript conflict.

The LightCMS system already runs its jQuery code in noConflict mode and reserves $ef for all of its calls. Therefore, you shouldn't encounter conflicts with other jQuery invoked by the LightCMS system. However, there is one element of LightCMS that uses the Prototype JS library instead of jQuery. That element is the form builder. So, if your page has a form-builder form on it, your jQuery may conflict with the Prototype functionality used by LightCMS. We are working on converting the form builder from Prototype to jQuery, but until that is complete, noConflict can help resolve any issues that arise.

In addition to the JavaScript used by our content management system, you may call other JavaScript libraries onto your site as well, and it's possible that those libraries could conflict with your jQuery. In any case, the moral of this story is that most of the time you shouldn't need the noConflict mode, but it is there for you in situations where you need it.

To invoke noConflict, simply add the noConflict call below to your custom .js files. It will wrap around all of the custom jQuery code you write. Your custom code should be inserted in the area indicated below, using $ just like normal.

jQuery.noConflict();
jQuery(document).ready(function($){
// The code you want that's going to be using the jQuery libraries
});

Suggested resources for continued education

Related Resources from LightCMS

2 comments (Add your own)

1. Michael Thomas wrote:
Can't wait for Form Builder to get on jQuery! Caused me many a headache before I knew about conflict resolution.

Thanks

Fri, December 17, 2010 @ 12:13 PM

2. Crystal Kelly wrote:
Previously LightCMS support indicated that I should not link to the Google JS library. Glad to see that we can do this now. Thanks.

Sun, December 19, 2010 @ 1:05 PM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

Try it yourself. It's free.

  • Takes less than 60 seconds
  • No commitment
  • No payment information required
Sign Up For Free

Copyright © 2014 LightCMS® Content Management System Powered by LightCMS LightCMS is a product of NetSuite