Page content

Calling a function after an #AJAX event (Drupal 7)

When working with Drupal 7's Form API, I often need to call a JavaScript function after the #AJAX event has fired. This was quite difficult in Drupal 6, but Drupal 7 offers a nice mechanism to do so. In this tutorial, we will be going over a basic example on how to create a JavaScript function that is fired after an #AJAX function has completed. To do so, we will be looking at Drupal's Ajax Commands, and how we can use the system provided callbacks, as well as define our own custom callbacks, to enhance our Drupal forms.

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.

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:

  1. var i, img;
  2. for(i = 0; i < imagePaths.length; i++)
  3. {
  4. img = new Image();
  5. img.onload = function()
  6. {
  7. someFunction(i);
  8. };
  9. img.src = imagePaths[i];
  10. }

Highlighting HTML columns with jQuery and CSS

Sometimes we want to highlight table columns when they are hovered over. Table rows are easy - it's as simple as adding tr:hover{background:red;} to your CSS. This will cause all table cells in a row to be red when the row is hovered over. However, columns are not as easy. The main reason behind this is that HTML tables are grouped by row, not by column. This means that while it is easy to select a group of table cells as a row (using tr in your CSS, or targeting tr tags in your javascript), it is not as easy to group table cells by columns.

You may think that you can use the html colgroup and col tags, but alas, such is not the case. They will allow for grouping elements by columns. However, these tags are deceptive. While they do allow for some limited styling of columns, they are not actually parents of the td tags that are in the column, and do not respond to the :hover attribute in CSS, nor do they trigger the javascript onmouseover event. Now, if this last statement didn't make sense to you, don't worry, it's not really important. What it is important is that you understand that it takes javascript to be able to highlight an HTML table column. And that is what this tutorial is going to show. It's possible to do this using pure javascript, but I'm a jQuery guy, so I will be showing my jQuery method of doing this.