Nifty Tricks: Setting a fallback source if an image fails to load.

This useful little snippet allows you to set a backup source for an image if it fails to load. useful in a lot of situations, e.g. listing a directory contents, putting an image next to each item based on it’s extension using this code snippet if you do not have an image for a particular extension it will fall back to your default.

var backup_src = 'http://domain.ext/images/backup.png';
var wanted_src = 'http://domain.ext/images/wanted.png';
var image = $(''); //or point to an image that is already on the page!
image.on('error', function () {
    image.prop('src', backup_src);

image.prop('src', wanted_src);

#1 Crime of jQuery – DOM Abuse

The Crime

Here is an example,

    //do stuff

  $('#id').css('border-color', '#ff0000');
  var val = $('#id').val();

See what is happening here?
There are several calls to $(‘#id’).

The reasoning

Why is this so bad?
Well, imagine the DOM as a giant pool of all elements on your page, every time you call $(‘#id’) you are diving into the pool and swimming around until you find the element you need. That adds some serious overhead on every call!

Read more


jQuery UI Widget Development Skeleton

Quite often when I go to create a new widget I find myself clearing out all the old junk from another one of my widgets to try and create a skeleton, then go through and remember what the heck each part does, finally after 15 minutes I can create my widget!
Well to solve this problem I have created a jQuery UI Widget Skeleton and I thought I should be nice and share it!

Read more


jQuery Tagit – A jQuery tagging plugin

jQuery Tagit Preview
It depends on jQuery 1.4.2. and jQuery.ui 1.8 The Jquery Tagit Plugintransforms an html unordered list into a unique tagging plugin.Why unique? Because jQuery Tagit uses jQuery UI’s auto-complete plugin to supply suggestions to users as they type and has some awesome features.

Read more


Jquery serializePost()

jQuery has a couple of useful functions that you should be using quite a lot. .serialize() and .serializeArray().

These useful functions will take your form and spit out something you can send off in your ajax requests.
“Awesome” you exclaim! “I’ll use it to send my post.

Not so fast!
Turns out these functions are more or less useless for post requests.
That’s where this nifty little function comes in handy. call $('form').serializePost() on your form and it will serialize your post data and return a nice little javascript object ready to send off. On the other end you can access it as if you had submitted the form normally using $_POST['myField'].

Read more


Jquery – Color Picker

Color Picker Preview
It depends on jQuery 1.4.2. The Jquery powered Color Picker is styleable using a single stylesheet. It works in an unobtrusive fashion, by just turning html select inputs into a sexier equivalent. There’s no extra markup needed.

Read more


That's Me, I'm a web developer who's main focus is actually Back-end, Specifically PHP development. But every now and then I come up with something awesome for the front-end and this is where I share it!

More updates on Twitter