Blog

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:

When looking for jQuery plugins, I always try to do the research to find simple to use, compact plugins. Most of the time, for Drupal sites, I will take the minimized version and throw it into the themes folder, or a module's "includes" folder. Here is a list of jQuery plugins that I have used multiple times, on various websites, and are probably the easiest to use.

1. jTabber

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.

These days, one of the more popular ways to display content is through a tabbed interface. It allows a user to add more content to their web page, but simultaneously organize it to only display the most relevant information first. There are multiple jQuery plugins that will achieve the desired basic look of multiple tab blocks on a page, and others offer extensibility to do custom behaviors.

The most recent plugin I used is called jtabber. The page offers straightforward implementation instructions, which basically consists of enclosing blocks in the proper div tags, and the script takes care of the rest. You can also customize the behavior (fade vs. slide) and use the standard .animate() js function to do sliding from the left as opposed to up or down.


$("#"+contentDivId).animate({ width: 'show' }, {duration: effectSpeed});


Share your most, or least, favorite jQuery plugin to achieve a tabbed interface here.

Let's say you have a news article content type and you use FCKEditor so your non-html savvy publisher can post a story with some basic formatting. One thing they will have difficulty doing is creating a caption for any images they insert into the body. This is not to say that they couldn't just bold some text below the photo and call that the caption, but this just isn't ideal. There is no relationship between the caption and image this way.

You could just switch off FCKEditor and stick a p tag with a class below the image, but if you've ever used FCKEditor you know how ugly and unmanageable this can be. And, still there is no real 'relationship' between these two.

Here's an elegant solution. How about re-purposing the img's "alt" attribute? After all, the "alt" attribute on an image is supposed to describe what the image is. There is no character limit, and these can make great captions. Here's how you can easily set up captions in your news articles.

First you'll want to create a class called ".caption". You can style it however you want, just be sure that it doesn't have any top margin so it stays flush to the image.

We are pleased to announce the release of the new Appnovation Company website. The site was constructed using Drupal 6 and includes extensive use of jQuery in many sections of the site.

The showcase slider on the front page uses the jQuery Coda Slider Plugin. If you click on any of the showcase items such as the Canadian Cancer Society logo on the far left, the showcase will start automatically scrolling through all the portfolio items. This has been built using custom jQuery.

On the services page, we used the jQuery Accordion plugin to create a sliding submenu. This allows site visitors to view all the service details without clicking through multiple pages.

Some of the modules used for the site include:
Views
Pathauto
Sitemap
Captcha
tagadelic
print
Imagecache
google_analytics
cck
contemplate