Blog

jQuery is an open source lightweight, cross-browser JavaScript library that is the most popular JavaScript library in use on the web today. Chances are, if you are a web developer or designer you have used or come across some plugins written in jQuery that have helped your web sites take advantage of JavaScript interaction with HTML with very minimal development.

As a developer learning how to develop your own jQuery plugin is extremely helpful as one can create any plugins they require for their site and in the spirit of open source, release them to the public.

Any web page that uses jQuery will have a ready event:
$(document).ready(function(){
    // Your code here
});

For this tutorial lets build a plugin that converts text on a page to a different color. A really simple plugin I know, but our primary goal is to learn about developing a plugin and not so much some awesome feature. You can create that later and thank me for getting you started. let's name our plugin colorChange.

Inside this ready event let's invoke your plugin:

One of the great benefits of jQuery lies in its syntax which makes code simpler to write and easier to read. Take these two equivalent examples:

While slightly slower, the jQuery approach is more compact, faster to write, and easier to debug. On the other hand, fewer jQuery calls mean faster code. When manipulating the DOM, it remains desirable to keep working with strings for that reason. Consider these 3 approaches:

With an array of 100 numbers, the benchmark results speak for themselves (10 times repeat):
Case 1. 328ms
Case 2. 78 ms
Case 3. 53 ms

Enters jString

The idea is to add jQuery-like methods to the String base class. These methods make what I call 'jString' or 'jQuery methods for Strings'. For building HTML, I found that I could get most of the work done with only five methods (empty, html, wrap, addClass and attr) so only these ones are currently implemented. For the examples above, using jString we can simply write:

One of the most annoying things about debugging your website for IE6 is to get your transparent PNG's to work properly. There are a couple of fixes out there, but most of them have some downsides. For instance, they won't work with background images, etc.

The solution we found is this great jQuery plugin by Drew Diller, which is very easy to use, works with background images and you can select multiple classes where the fix will be working.

Here is a basic run down on how to use this bad boy:

Lets start downloading the plugin here. You will see two files, one with the actual plugin and the other with the CSS classes, where the fix will be applied. The file containing the classes already has .iefix and .ie-fix, but you can add other classes like #header .logo if you need to.

2- Install the latest version of jQuery. If you're working with Drupal, thats already taken care.

I have previously blogged about Video Hosting Options for Drupal web sites. In that discussion, I talked about Kaltura, Amazon S3 and BrightCove. Others have also commented about Viddler and Twistage.

We have recently been involved with another video site which uses the Ooyala Backlot system. For the most part, Ooyala is very similar to the tools provided by Brightcove and Kaltura, however, there are a few features that we are really impressive.

1) Extensive ADs Management System
Using the Ooyala Backlot system, the administrators can easily insert overlays, pre-rolls and other advertisement into the videos. The great thing is that a lot of these integration does not require any programming knowledge. This allows for the easy management of Ads by non technical staff members.

2) Detailed Analytics System

The idea of adding custom CSS or JS to a form is a very simple task. With one call
to drupal_add_css, a form can be themed any which way. A call to drupal_add_js can add
effects to a form for a better user experience.

Adding CSS using drupal_add_css allows for CSS preprocessing, which is the process of
aggregating a bunch of separate CSS files into one file that is then compressed by
removing all extraneous white space. This will save on page load time and will bypass
the limit that IE has on the amount of CSS files that can be imported. Using drupal_add_js
also allows you to cache the JS files as well. Using these two functions in Drupal 5
and Drupal 6 are almost identical. However in Drupal 6, the parameters for each of the
functions are passed in an associative array.

With the release of Drupal 6, the form API was slightly changed as well. Here's a
link to the complete list of changes in the FAPI (Form API): http://drupal.org/node/144132.
A big change in Drupal 6 was the fact that forms were being cached. So adding CSS files and JS
files in hook_form_alter or hook_form would lead to issues if the form was reloaded after failing validation.