Web and Mobile Apps Dev

Introduction

I’m often using jQuery and a little PHP because of the recent interest in the jQuery animation. Therefore I need lots of jQuery plugins to load in every web page. I need some plugins on each page such as Color plugin for the navigation and IE font-face ClearType fix for adding font-face support to IE, but I don’t need other plugins to load unless there is a page element specifically used with those plugins.

The Code

 // Function to create script element dynamically
function createScript(src) {
 var script = document.createElement("script");
 script.src = "scripts/" + src + ".js";
 script.type= "text/javascript";
 $("body").append(script);
}
$(window).load(function() {
  // Load the custom fonts in IE
 $("body").ieffembedfix();
  // Top Navigation Menu Animation
 $("#horiNav a").hover(function() {
  if ($(this).attr("id") != "currentPage") {
   $("#currentPage").stop().animate({backgroundColor:"#FFF", color:"#87CEEB"});
   $(this).stop().animate({backgroundColor:"#A7D4F2", color:"#FFF"});
  }
 }, function() {
  if ($(this).attr("id") != "currentPage") {
   $(this).stop().animate({backgroundColor:"#FFF", color:"#87CEEB"});
   $("#currentPage").stop().animate({backgroundColor:"#A7D4F2", color: "#FFF"});
  }
 });
 if ($("#slideshow").length != 0) {
   // Load the Cycle plugin dynamically
  createScript("jquery.cycle.all.latest");
   // Cycle through the slideshow on the home page
  $("#slideshow").cycle({
   fx: "fade",
   timeout:"3000",
   pager:"#SSnav"
  })
   // Stop the slideshow once it is clicked
  .bind("click", function() {
   $(this).cycle("toggle");
  });
 }
});

Explanation

Here I defined a function that creates a script element before the end of body. The function basically used raw Javascript code to create script element and a line of jQuery code to append the new element to the body.

I used $(window).load instead of $(document).ready method to execute the jQuery code after the page is loaded. I then demonstrated the code for the font-face support for IE and the navigation color animation.

In order to selectively include jQuery plugins, check the existence of the element that requires to use those plugins first. I used if statement to check the length of the element. Include the jQuery plugins if the number of the specified element is at least one. Then execute rest of the code within the if statement. The screenshot below shows Firebug that the page has successfully loaded the required plugin.

Loaded required jQuery plugin successfully

Head over to wcf.robbychen.com to see it in action. Make sure to open Firebug when visiting the site to see which jQuery plugins are loaded. Right now only the homepage and Who We Are page use additional jQuery plugins.

Questions

If you have any question about the above code, feel free to post them in the comments below.