Short jQuery script to clear form

Clearing a form can sometimes be a bit of a hassle since there’s no native functionality for that – the “reset” button resets the form fields to their default values, not clears them. The script below takes care of exactly that, taking into account some of the newer input types (such as “email” and “date”). It is written as an extension to jQuery, meaning you can use it like a jQuery method, something like this `$(‘#myform’).clearForm()`, but it can easily be written as a regular stand alone function.

// .clearForm - clears form fields from any values
$.fn.clearForm = function () {
	var el = this.find('input, select, textarea'),
		len = el.length,
		i = 0;
	for (; i  len; i++) {
		switch (el[i].type) {
			case 'text':
			case 'password':
			case 'select-one':
			case 'select-multiple':
			case 'textarea':
			case 'email':
			case 'date':
			case 'number':
			case 'phone':
				$(el[i]).val('');
				break;
			case 'checkbox':
			case 'radio':
				el[i].checked = false;
		}
	}
}
// end .clearForm

Read more »

Optimizing JavaScript and jQuery

I’ve been working on a new project – a web application of sorts. Basically, unlike a regular web site, everything in this web applications occurs on the one page. Moreover, due to the nature of the webapp there’s a lot of javascript code handling everything from keyboard input, through DOM updates and to Ajax requests. While not time critical, it is nonetheless essential to keep this webapp working smooth and fast, and so as part of my development work on it I have been delving deeper into the “science” of optimizing javascript code, and also more specifically optimizing jQuery.

I have always been very performance conscious. It probably comes from my work as PC game developer where a single line of non-optimized rendering code could mean the difference between getting 60fps and 20fps during gameplay. In any case, I really enjoyed discovering some new tricks to squeeze more performance out of my code, and admittedly remembering some old ones as well. So I wanted to share some of those tricks, both the basic, but essential ones and the more advanced techniques. Read more »

Moving the world off Internet Explorer 6 – the right way

Even Microsoft is sick of Internet Explorer 6, and they have finally started making a real push to get people to stop using it and upgrade to a better browser. They even started a website dedicated to tracking the, hopefully dwindling, use of IE6 – http://ie6countdown.com/. On this website they encourage people to spread the word on twitter via the #ie6countdown hashtag, and they also offer a banner you can put on your website, that would only appear to IE6 users and it encourages them to upgrade to a better browser. Naturally the better browser being IE9. Or is it? Read more »

Better jQuery Placeholder Plugin

A while back I made a post about a simple placeholder script I wrote. The idea was to provide the placeholder functionality that browsers like Chrome and Safari have, to browsers that don’t have it, like Firefox and IE. The script was very simple though and not smart in a few ways, including inability to handle password fields and an incorrect way of checking placeholder support in the browser. Since then I wrote an improved version of the script, in the form of a jQuery plugin. The highlights of this improved script include

  • proper use of jQuery’s plugin framework to create a fully chain-able plugin
  • support for password fields and text areas
  • correct check for placeholder support in browser
  • and just overall a better written piece of code

You can see a demo of the plugin in action and download the commented source file (4.7kb),  or the minified source file (1.7kb), or the clean (not minified but not commented) source file (2.6kb). Below I’ll go over some of the more interesting parts of script. Read more »

jQuery 1.5 is out

The jQuery team has released a new version of their awesome framework – jQuery 1.5. While not seemingly as significant as the 1.4 release, they made quite a few major changes under the hood.

On top the various bug fixes and performance enhancements one of the major changes in jQuery 1.5 is a complete rewrite of the Ajax module.

Perhaps the largest change is that a call to jQuery.ajax (or jQuery.get, jQuery.post, etc.) now returns a jXHR object that provides consistency to the XMLHttpRequest object across platforms (and allows you to perform previously-impossible tasks like aborting JSONP requests).

Read more »

Crazy long jQuery animation chains for a slideshow widget

So I was recently coding a slideshow widget using jQuery. Nothing fancy – just a box showing one image, you click an arrow, the next/previous image slides in. The code was also very straightforward – get a handle on the “slides” and use index to loop through them. For one of the animations in the transition (there were labels that were animated separately) I used a simple chain, something like $(slide).find(label).animate(). As I was writing it, it hit me, jQuery has pretty robust chains, they allow mixing pretty much every operation you can do on an element – traversal, manipulation, effects, etc. So I decided to see if I could do the entire slideshow functionality as one long chain (well, technically two, one for each arrow). Here is a demo of the slideshow widget in action. Read more »

HTML5 Boilerplate is a kickass base template for website development

HTML5 is the future of the web, but building the future is hard work and so it’s always great to get a bit of help with that. Some of that help comes in the form of HTML5 Boilerplate from the minds of Paul Irish and Divya Mani, who have teamed up to bring us “the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site”. Boilerplate is basically a bunch of files, the exact kinds of files you would create as you start working on a new website, except that these already contain the basic starting code and include all the best practices baked in. Things like reset styles, pngfix, HTML5 markup and more. I went over most of it line by line and after a few adjustments based on my own personal preferences I’m going to start using it as the base for all websites I work on. Read more »

Simple jQuery placeholder script for input fields

Update: I have created a better version of this script that, among other improvements, supports password fields, unlike the code below.

Placeholder is a very useful attribute of the <input> tag that is specified in the HTML5 spec. It provides a text that goes into the field, by default, and is used as a kind of a quick tip for the user about what they should type into the field, such as “type to search”, or “type in username”. The nice thing about “placeholder”, as oppose to, for example, simply setting some value for the field, is that it automatically disappears when the user starts typing something in, but it reappears if the user ends up leaving the field empty. Unfortunately this attribute, and its functionality, is actually not supported by most browsers, including Firefox 3.6 and IE8, it is however supported by Chrome 4, and possibly Safari 4 though I can’t vouch for the latter.

I recently had a few projects that needed this functionality, and while some of them had email, password and other fields that required validation, one needed just very simple text fields with placeholder text. So I wrote this very simple javascript function, using jQuery, to do just that (I’m using jQuery 1.4.2 here). Read more »