Jquery

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

November 18, 2012 in Jquery, Nifty Tricks

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

October 31, 2011 in Jquery

The Crime

Here is an example,

$(function(){
  $('#id').change(function(){
    //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!

jQuery UI Widget Development Skeleton

March 23, 2011 in Jquery, jQuery UI, Widgets

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!

jQuery Tagit – A jQuery tagging plugin

February 18, 2011 in Jquery, jQuery UI, Widgets

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.

Jquery serializePost()

February 4, 2011 in Functions, Jquery

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'].

Jquery – Color Picker

December 8, 2010 in Jquery

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.

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!