Enabling The Use Of delay() In Pre jQuery 1.4

24th January 2011 - 3 minutes read time

Note: This post is over a year old and so the information contained here might be out of date. If you do spot something please leave a comment and I will endeavour to correct.

The other day I was trying to convert a HTML template into a CMS system and I found a stumbling block with the use of the jQuery function delay() in the template's JavaScript. During part of the templating process I found the following error occurring on the page.

Uncaught TypeError: Object #<an Object> has no method 'delay'

The error appeared to be coming from the jQuery core and the fact that it couldn't find a method called delay(). Looking at the delay() manual page I could see that it was only included in jQuery 1.4 and so was causing an error as the method didn't exist in the version of jQuery I was using. The problem here was that I was using Drupal 6 as the CMS, which has jQuery 1.2.6. Even with third party solutions like the jQuery update module in place I couldn't quite get up to the needed version. So I had to find a way to include delay() without upgrading jQuery to version 1.4.

The solution is to add a jQuery.fn.extend statement to your JavaScript page library so that the delay() method is available to the rest of the code on the page. Below is the code that creates the delay() method and can be placed anywhere on the page, although it is probably best to put it in your main JavaScript file.

/**
 * Add in the extend function, added in Jquery 1.4 (which we don't have)
 */
jQuery.fn.extend({
	// Based off of the plugin by Clint Helfers, with permission.
	// http://blindsignals.com/index.php/2009/07/jquery-delay/
	delay: function( time, type ) {
		time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
		type = type || "fx";
 
		return this.queue( type, function() {
			var elem = this;
			setTimeout(function() {
				jQuery.dequeue( elem, type );
			}, time );
		});
	}
});

You can now use the following code without any errors.

$("div.first").slideUp(300).delay(800).fadeIn(400);

Drupal

JavaScript

JQuery

Comments

Permalink

Same problem with OpenCms. Thanks a lot for your solution!!!

Permalink

Extremely helpful tip -- thanks for sharing. I spent ages mucking around with this before realizing that delay() isn't available in drupal 6.x...

Add new comment

Related Content

Drupal 9: Some Strategies For Developing Update Hooks

Drupal's update hook system is a powerful way of updating your site to introduce things that wouldn't be handled using the configuration system.

Modules will use update hooks to bring sites that have the old version of the module in line with the latest additions to the module. For example, if a new field is added to a table that the module uses then an update hook will be needed to add that field to all sites that are current using the old version. This update hook will be in addition to the install hook that would install the table with the added field in the first place.

Using Shadow DOM

When I first heard the term "Shadow DOM" I had to laugh at the name. I had visions of a cloak and dagger HTML element that would only be seen on the dark web. Or some sort of nefarious shadow site that was the after effect of a hack. In reality, this is quite a useful bit of technology that has a number of applications, although it does need a fairly modern browser to be able to use it. Shadow DOM is part of the web components strategy, which includes custom elements and HTML templates. These give developers the power to create custom tools and experiences that are encapsulated away from other parts of the code. In this article I will go though what the shadow DOM is, how to use it, and in what situations it comes in handy.

Simple Horizontal Segmented Bar Chart With CSS

Bar charts are powerful ways to show the relationships between different data items. If the data you want to show is discrete then a simple horizontal segmented bar chart is a good idea. You can easily change a collection of numbers into a related set of attributes.

Drupal 9: Cascading Ajax Select Forms

Tying together different select elements in a form is done with very little effort thanks to the ajax and states system built into Drupal 9. This means that any Drupal form can have a select element that shows and updates options into another select element within the same form. Using this system you can create a hierarchical system where one select will show and populate another select element with items dependent on the first. This is great for giving the user the ability to drill down into options that are dependent on each other.

Drupal 9: Preventing Enumeration Attacks

A recent Wired article about the Parler data hack talked about how a hacker group was able to steal publicly available information from the Parler website using an Insecure Direct Object Reference (IDOR) or enumeration attack. This type of attack involves a hacker looking at the structure of the site and attempting to guess the next available resource by looking at the URL. Apparently, terabytes of Parler's data was downloaded by simply enumerating through the ID's of their publicly available posts.

Drupal 9: Auto Injecting Paragraph Forms On Node Edit Pages

I tried to do something the other day that I thought would be quite simple, but turned out to be really hard to get my head around. I had a Drupal 9 site with Paragraphs installed and I wanted a user to click a button on the node edit form and inject a particular Paragraph into a Paragraph field.

I found 2 solutions to this problem that solve it in slight different ways.