Cross-browser image masking using javascript, VML and the HTLM5 canvas element

On the top page of the rebuild of is a slideshow that splits images diagonally, and moves them off screen. In actuality, the images themselves are not split, rather I have layered two of the same image over top of each other, with the right side of the left image being transparent, and the left side of the right image being transparent. Then, when these two images are animated outwards, it appears that the image is split.

Adding CSS and JS to a cached block in Drupal 7

In Drupal 7, if you try adding CSS and/or JS using drupal_add_cs() and/or drupal_add_js() inside hook_block_view(), you will soon find that your CSS and JS files are not included when that block is cached. This of course is no good, as blocks often require the CSS to look right, and the javascript to behave as desired.

Here is an example of what doesn't work:

Migrating (not updating) comments (or other core types) from Drupal 6 to Drupal 7


In the process of rebuilding my site, I decided to build from scratch, rather than attempting to upgrade my installation. With my old installation, I had tried out multiple modules, changed themes multiple times, and played around with the database when I didn't fully know what I was doing, leaving me with a system that worked, but at times was buggy. For this reason, I thought it better to build fresh and import.

As such, I needed to import the comments from my Drupal 6 installation to my new Drupal 7 installation. This is easier said than done - comments have received a major restructuring, and use different database tables in Drupal 6 than they did in Drupal 7, and the column names the comment system uses has also changed.

JavaScript - Passing Arguments to Anonymous Functions Without Firing the Function

I recently had a situation where, within a loop, I needed to create an onload function for an image I was creating on the fly. Here is an simplified outline of what I was trying to do:

var i, img;
for(i = 0; i < imagePaths.length; i++)
  img = new Image();
  img.onload = function()
  img.src = imagePaths[i];

Ubercart - overriding the cart contents table on the checkout page

I have run across situations where I have needed to override the table on the checkout page of ubercart. An example is bilingual e-commerce site that I have created, in which the title is different between languages. The English title is shown by default on the checkout page, but I needed to swap that in with a Japanese title.

Doing this is a tricky process, as Ubercart bypasses a lot of Drupal APIs. I eventually figured out how to do this in a module, by overriding the cart pane theme using hook_theme_registry_alter(), and swapping out the theme function with a theme function in my own module.

In this example, my module is named belly.

Step 1: Override the default theme function using hook_theme_registry_alter()

function belly_theme_registry_alter(&$themes)
	$themes['cart_review_table']['function'] = 'belly_cart_review_table';

Drupal API Firefox search add-on

I regularly search the Drupal API for code. Anyone using Drupal does this. I previously used a Firefox add-on called 'add to search bar' that allowed any search on pretty much any page on the web to be added to the firefox browser toolbar.

However, bukem has created two addons that create this functionality, and do it well. Add to search bar, while it worked, never worked the first time, and had no autocomplete. The two search engines bukem has created both work every time, and also have autocomplete, just to make things a little easier.

Themeing Drupal 7 Forms (Including CSS and JS)


Theming forms in Drupal 7 is mostly the same as Drupal 6, however there are some changes in how things are done in Drupal 7, and we will be exploring those changes in this tutorial. We will be working within a module called 'form_theme', and will create a form that looks like this:

My name is [FORM INPUT] [FORM INPUT] and I am [FORM INPUT] years old

The form inputs will initially display the words 'First name', 'Last name' and 'Age', which will then be removed when the user clicks on the input, and added again if the user clicks outside the input without entering a value.

What we will be covering in this tutorial:

  • Themeing a form
  • Attaching jQuery (JavaScript) to the form
  • Attaching CSS to the form

As the main goal of this tutorial is to show how to theme forms, I will not be going in depth into some of the other code that is not relevant to themeing. As such, to understand this tutorial, you will need an understanding of the following:

  • How to create a module in Drupal 7
  • How to create a form in Drupal using drupal_get_form()

Themeing Drupal 7 forms into tables with checkboxes or radios

This tutorial is for Drupal 7. The Drupal 6 tutorial is here: Themeing Drupal 6 forms into tables with checkboxes


Turning forms into a table of information, such as can be seen on the users administration page (admin/people) or the content administration page (admin/content) is a much easier process in Drupal 7 than it was in Drupal 6. In Drupal 6 it required some tricky logic, combined with a theme function. Drupal 7 removes the need for most of that.

In this tutorial, I will be putting together a nice little table that looks like the following:

| ❏ | First Name | Last Name
| ❏ | Indiana | Jones
| ❏ | Darth | Vader
| ❏ | Super | Man