jQuery Delay

I often get asked about a delay in jQuery. Unfortunately, at the time of this writing, jQuery doesn’t have a delay function. However, this is a simple little clever workaround you can use. It involves using the “animate” function. You should recognize this as the function that simple animates something via element styles.

For example, If you have a div colored black and run .animate({background-color:#ffffff}, 2000) on it, in 2 seconds it will have faded to white. If you use this function to modify something to the same over the period of time, you effectively get delay. For example, why not use opacity?

$(document).ready(function() {
  $(".message").show("slow").animate({opacity: 1.0}, 4000).hide("slow");
});

Doing this would show a previously hidden div classed “message” for 4 seconds, and then hide it again. Play around with it to get the effect you want. You don’t have to use opacity either, its just not a commonly used CSS element.

jQuery AJAX Contact Form

Today I am going to speak a little bit about a quick and easy way to make a jQuery AJAX Contact Form that employs a honeypot to foil pesky email bots. You can also check out the demo here to get an idea of how the end product will act. You can use the form anywhere you like, but a courtesy link somewhere is appreciated. It is released under the Creative Commons Attribution License. Let’s rundown the goals:

• A safe form with sanitation.
• Load success or error messages dynamically without leaving the page.
• Descriptive error messages detailing why the entered values failed validation.
• A honeypot to beat the bots.

That may sound like quite a tall order, but in fact, it can be put together fairly quickly with the tools that are available online. If you don’t feel like learning about how to create a form and just want the form. Go ahead and download it here, be sure to change the html to sendmail.php and the email address in the same file. Other wise, read on!

Read the rest of this entry »