Usage

It’s as easy as these steps:

1. Include jquery – either from CDN or local source
2. Include jquery.keyz.js
3. call the following within your document ready or after the item exists

$('selector').keyz({
"enter": function(ctl,sft,alt,event) {
alert('you pressed enter!');
}
});

this will hook the enter key and raise an alert when pressed.

If you want to cancel the key either return false from the function or set the value to false like so:

$('selector').keyz({
"enter": function(ctl,sft,alt,event) {
return false;
}
});

OR

$('selector').keyz({
"enter":false
});

You can either use the key names in singular or in a grouping like so:

$('selector').keyz({
"enter": function(ctl,sft,alt,event) {
/* single key */
return false;
},
"F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12": function(ctl,sft,alt,event) {
/* mapped to all F-Keys */
return false;
}
});

Download jquery.keyz.js here: Full Source && Google Closure Compiled version

Visit the demo page here: Full Source

Planned Features

• support for keypress chains .. passing a sequence of keys and an event firing upon completion
• support for all three key states – presently only triggers on key down – Added in 1.0.2
• to add some duck punching to add the keyname to the event for the three standard events

Supported Keys

The keys listed below are the current ones supported by the plugin.
They also support the hyphenated name eg numpad-1 or in upper case like “F1″ or “f1″

• enter
• return
• esc
• escape
• numerics
• upper
• lower
• alphanumeric
• tab
• shift
• alt
• ctrl
• f1
• f2
• f3
• f4
• f5
• f6
• f7
• f8
• f9
• f10
• f11
• f12
• caps
• capslock
• numlock
• winflag
• winkey
• windows
• scrolllock
• left
• up
• right
• down
• volumeup
• volumedown
• menu
• contextmenu
• backspace
• pause
• break
• pausebreak
• pageup
• pagedown
• end
• home
• insert
• del
• delete
• numpad0
• numpad1
• numpad2
• numpad3
• numpad4
• numpad5
• numpad6
• numpad7
• numpad8
• numpad9
• *
• multiply
• +
• add
• -
• subtract
• .
• fullstop
• decimal
• /
• divide
• ;
• semicolon

Over at JqueryForDesigners.com @rem mentioned about checking if an element exists or not, I’ve been doing this for some time using the following snippet:

jQuery.fn.exists = function() {
    return (this.length > 0);
};

to use it you can now do this:

if ($('#elem').exists()) { /* do something */ }

Hope this is helpful to some people

Recently I came across the need to filter my results after they had been displayed. I really didn’t want to start messing with optional WHERE statements in teh php to control the output of the php as that was rather annoying.

Just at that moment, up popped a tweet fron jQuery telling me about a plugin called QuickSearch after taking a look at it, I found that the search options were nice and simple to use. So I went about implementing it.

The Plugin (available from http://rikrikrik.com/jquery/quicksearch/) was quickly installed and a few lines of js later it was up and working, nicely hiding the elements set up that didn’t match the search term, quick, simple. Nice.

Setup

1. Download jQuery (is you don’t already have it) and Link it to your document
2. Download the plugin and place into the right place (like /js possibly)
3. Link to the file <script type=”text/javascript” src=”/js/jquery.quicksearch.js”></script>
4. Setup the JS to load the Quicksearch

for Example, lets take the setup list we just had:
Html:

<ul id="listings">
	<li>Download jQuery (is you don't already have it) and Link it to your document</li>
	<li>Download the plugin and place into the right place (like /js possibly)</li>
	<li>Link to the file <script type="text/javascript" src="/js/jquery.quicksearch.js"></script></li>
	<li>Setup the JS to load the Quicksearch</li>
</ul>

JS

$(function(){ /* Wait for Document Ready */
/* take the items we want searching and call quicksearch on them

*/
$('ul#listings li').quicksearch({
position: 'before',
attached: '#listings',
loaderText: '',
delay: 100
});
});

This will create the demo you can see over at http://jsbin.com/atafi as you type into the box you can search the list.. only displaying items that match.

Now for the fun part.
When you call the .quicksearch function.. it indexes the content of the items you have passed. So we can actively enhance this search by having hidden data in side each element..

Html:

<ul id="listings">
	<li>Download jQuery (is you don't already have it) and Link it to your document<span style="display:none">1 first 1st</span></li>
	<li>Download the plugin and place into the right place (like /js possibly)<span style="display:none">2 second 2nd</span></li>
	<li>Link to the file <script type="text/javascript" src="/js/jquery.quicksearch.js"></script><span style="display:none">3 third 3rd</span></li>
	<li>Setup the JS to load the Quicksearch<span style="display:none">4 fourth 4th</span></li>
</ul>

Just using exactly the same JS as before we now can search to options by using 4 or third for example..
http://jsbin.com/exumu

Finally now we have the basics.. we can really go to town.
1st we need to Hide the quicksearch with css

#quicksearch { display: none; }

This will hide the quicksearch form.

Next we take our html and add a couple of buttons

<input type="button" id="btnclear" value="reset" />
<input type="button" id="btn1" value="show 1" />
<input type="button" id="btn2" value="show 2nd" />
<input type="button" id="btn4" value="show fourth" />
<ul id="listings">
	<li>Download jQuery (is you don't already have it) and Link it to your document<span style="display:none">1 first 1st</span></li>
	<li>Download the plugin and place into the right place (like /js possibly)<span style="display:none">2 second 2nd</span></li>
	<li>Link to the file <script type="text/javascript" src="/js/jquery.quicksearch.js"></script><span style="display:none">3 third 3rd</span></li>
	<li>Setup the JS to load the Quicksearch<span style="display:none">4 fourth 4th</span></li>
</ul>

and update the js to:

$(function(){
  /* append to the end of the document */
  $('ul#listings li').quicksearch({
    position: 'append',
    attached: 'body',
    loaderText: '',
    delay: 100
  });
  $('#btn1').click(function(){
    $('.qs_input').val('1').keydown(); /* Set key and trigger keydown, which is what quicksearch responds to */
  });
  $('#btn2').click(function(){    $('.qs_input').val('2nd').keydown(); });
  $('#btn4').click(function(){    $('.qs_input').val('fourth').keydown(); });
  $('#btnclear').click(function(){    $('.qs_input').val('').keydown(); });
});

This gives us clickable buttons that do our filtering using the quicksearch plugin. Demo is here: http://jsbin.com/obixa

As you can see this makes for a interesting system.
Hope you get as much use out of this as I am

~ Kat ~

After a while I got stuck and figured out a potential method thanks to ai-a in #Javascript on UnderNet, then I spoke to Remy Sharp on Twitter and always being impressed with the work he does on his site (http://www.jqueryfordesigners.com) I asked politely if he would give my code a quick look over. He did so, and so much more besides.

So I present to you now v0.95 of the Image Pre-loader which is now Split into 3 functions (rather than the 2 from before)

So the main functionality is the same as the one from http://binarykitten.jkrswebsolutions.co.uk/2009/01/06/jquery-image-preloader/ but now has the following functions

1. $.preLoadImages – Preload the passed list of images, calling the passed call back function when all images are preloaded
2. $.preLoadCSSImages – Preload all images found within the stylesheets of the document, then call the passed call back function when all the images are preloaded
3. $.preLoadAllImages – Processes the stylesheet images and then if passed additional images, will process them too. When all are complete will call the passed callback function.

Here’s the actual code now for the plugin:

/* jQuery.preloader - v0.95 - K Reeve aka BinaryKitten
*
* v0.95
* 	# Note - keeping below v1 as really not sure that I consider it public usable.
* 	# But it saying that it does the job it was intended to do.
* 	Added Completion of loading callback.
* 	Main Reworking With Thanks to Remy Sharp of jQuery for Designers
*
*
* v0.9
* 	Fixed .toString being .toSteing
*
* v0.8
*		Fixed sheet.href being null error (was causing issues in FF3RC1)
*
* v0.7
*		Remade the preLoadImages from jQuery to DOM
*
* v0.6
* 		Fixed IE6 Compatability!
*		Moved from jQuery to DOM
*
* v0.5
* 		Shifted the additionalimages loader in the preLoadAllImages so it wasn't called multiple times
* 		Created secondary .preLoadImages to handle additionalimages and so it can be called on itself
*/

(function ($) {
	$.preLoadImages = function(imageList,callback) {
		var pic = [], i, total, loaded = 0;
		if (typeof imageList != 'undefined') {
			if ($.isArray(imageList)) {
				total = imageList.length; // used later
					for (i=0; i < total; i++) {
						pic[i] = new Image();
						pic[i].onload = function() {
							loaded++; // should never hit a race condition due to JS's non-threaded nature
							if (loaded == total) {
								if ($.isFunction(callback)) {
									callback();
								}
							}
						};
						pic[i].src = imageList[i];
					}
			}
			else {
				pic[0] = new Image();
				pic[0].onload = function() {
					if ($.isFunction(callback)) {
						callback();
					}
				}
				pic[0].src = imageList;
			}
		}
		pic = undefined;
	};

	$.preLoadCSSImages = function(callback) {
		var pic = [], i, imageList = [], loaded = 0, total, regex = new RegExp("url\((.*)\)",'i'),spl;
		var cssSheets = document.styleSheets, path,myRules,Rule,match,txt,img,sheetIdx,ruleIdx;
		for (sheetIdx=0;sheetIdx < cssSheets.length;sheetIdx++){
			var sheet = cssSheets[sheetIdx];
			if (typeof sheet.href == 'string' && sheet.href.length > 0) {
				spl = sheet.href.split('/');spl.pop();path = spl.join('/')+'/';
			}
			else {
				path = './';
			}
			myRules = sheet.cssRules ? sheet.cssRules : sheet.rules;
			for (ruleIdx=0;ruleIdx < myRules.length;ruleIdx++) {
				Rule = myRules[ruleIdx];
				txt = Rule.cssText ? Rule.cssText : Rule.style.cssText;
				match = regex.exec(txt);
				if (match != null) {
					img = match[1].substring(1,match[1].indexOf(')',1));
					if (img.substring(0,4) == 'http') {
						imageList[imageList.length] = img;
					}
					else if ( match[1].substring(1,2) == '/') {
						var p2 = path.split('/');p2.pop();p2.pop();p2x = p2.join("/");
						imageList[imageList.length] = p2x+img;
					}
					else {
						imageList[imageList.length] = path+img;
					}
				}
			};
		};

		total = imageList.length; // used later
		for (i=0; i < total; i++) {
			pic[i] = new Image();
			pic[i].onload = function() {
				loaded++; // should never hit a race condition due to JS's non-threaded nature
				if (loaded == total) {
					if ($.isFunction(callback)) {
						callback();
					}
				}
			};
			pic[i].src = imageList[i];
		}

	};
	$.preLoadAllImages = function(imageList,callback) {
		if (typeof imageList != 'undefined') {
			if ($.isFunction(imageList)) {
				callback = imageList;
			}
			else if (!$.isArray(imageList)) {
				imageList = [imageList];
			}
		}
		$.preLoadCSSImages(function(){
			if (imageList.length > 0) {
				$.preLoadImages(imageList,function(){
					callback();
				});
			}
			else {
				callback();
			}
		});
	}
})(jQuery);

So now with these in place we can call them as so:

     $.preLoadImages(
          [
               'http://www.google.co.uk/intl/en_uk/images/logo.gif',
               'http://l.yimg.com/eur.yimg.com/i/uk/hp/yahoo1.png',
               'http://tk2.stc.s-msn.com/br/hp/11/en-us/css/i/msn_b2.gif'
          ],function(){
               alert('All Passed Images Loaded');
          }
     );

     $.preLoadCSSImages(function(){
          alert('All CSS Images Loaded');
     });

     $.preLoadAllImages(
          [
               'http://www.google.co.uk/intl/en_uk/images/logo.gif',
               'http://l.yimg.com/eur.yimg.com/i/uk/hp/yahoo1.png',
               'http://tk2.stc.s-msn.com/br/hp/11/en-us/css/i/msn_b2.gif'
          ],function(){
               alert('All Passed Images and All CSS Images Loaded');
          }
     );

To match up with Robert’s request for a loader image…

$.preLoadImages('/images/loader.gif',function() {
  /* Pre Load the loader gif first */
  $('<img />').attr({
  	src:'/images/loader.gif',
  	id:'loader'
  }).appendTo('#position');
  /* now preload stuff */
  $.preLoadCSSImages(function() {
     $('#loader').remove();
  })
});

Hopefully you have found this useful, as usual.. comments gratefully received.

[edit]
Thanks to Roberto for pointing out that the source had become corrupted in the post

I looked inside jQuery for this functionality and noticed it wasn’t there so I copied the $.post functionality and modified it into $.head.

So I present to you my Plugin for jQuery

/* jQuery.head - v1.0.3 - K Reeve aka BinaryKitten
*
*	makes a Head Request via XMLHttpRequest (ajax) and returns an object/array of headers returned from the server
*	$.head(url, [data], [callback])
*		url			The url to which to place the head request
*		data		(optional) any data you wish to pass - see $.post and $.get for more info
*		callback	(optional) Function to call when the head request is complete.
*					This function will be passed an object containing the headers with
*					the object consisting of key/value pairs where the key is the header name and the
*					value it's corresponding value
*
*	for discussion and info please visit: http://binarykitten.me.uk/jQHead
*
* ------------ Version History -----------------------------------
* v1.0.3
* 	Fixed the zero-index issue with the for loop for the headers
* v1.0.2
* 	placed the function inside an enclosure
*
* v1.0.1
* 	The 1st version - based on $.post/$.get
*/

(function ($) {
  $.extend({
	head: function( url, data, callback ) {
	  if ( $.isFunction( data ) ) {
		  callback = data;
		  data = {};
	  }

	  return $.ajax({
		type: "HEAD",
		url: url,
		data: data,
		complete: function (XMLHttpRequest, textStatus) {
		  var headers = XMLHttpRequest.getAllResponseHeaders().split("\n");
		  var new_headers = {};
		  var l = headers.length;
		  for (var key=0;key<l;key++) {
			  if (headers[key].length != 0) {
				  header = headers[key].split(": ");
				  new_headers[header[0]] = header[1];
			  }
		  }
		  if ($.isFunction(callback)) {
			callback(new_headers);
		  }
		}
	  });
	}
  });
})(jQuery);

The function calls the passed url, passing the data and then processes the headers on completion. It takes the long text passed and splits it up into each header line and then splits it into array. The passed array is sent back to the callback function where the key of the array is the header name and the value being the header value.

To call our new function, we use the form just like the basic functionality of $.post and $.get:

/* $.head("url",{data},callback_function(headers) { }); */
/* Example */
$.head("index.php",{'a':5,'bc':'help'},function(headers) {
	$.each(headers,function(key,header){ console.log(key+':--:'+header);});
});

This will use firebug’s console.log to output the details of each header.

all straight forward yes?
Hopefully this will help or do something for the people out there
Enjoy

< Edit >
This has now been placed on plugins.jquery.com -> http://plugins.jquery.com/project/jqHead

Recently I looked into preloading images via Javascript. I found all the usual ones which require you have a list of all the images you wish to preload. For me though, specifying the images is rather annoying. Also I much prefer CSS roll overs to Javascript ones so I created this to make it easier.

This “plugin” for jQuery just allows you to preload All the images based in url enclosures within the css files attached to the current page.
I call it a “plugin” rather than a plugin as technically it doesn’t actually need jQuery at all so just remove the “jQuery.” on the function

/* jQuery.preloader - v0.9 - K Reeve aka BinaryKitten
*
* v0.9
* 	Fixed .toString being .toSteing
*
* v0.8
*		Fixed sheet.href being null error (was causing issues in FF3RC1)
*
* v0.7
*		Remade the preLoadImages from jQuery to DOM
*
* v0.6
* 		Fixed IE6 Compatability!
*		Moved from jQuery to DOM
*
* v0.5
* 		Shifted the additionalimages loader in the preLoadAllImages so it wasn't called multiple times
* 		Created secondary .preLoadImages to handle additionalimages and so it can be called on itself
*/
jQuery.preLoadImages = function(imagesList) {
	var pic = new Array();
	if (typeof imageList != 'undefined') {
		if (imageList.constructor.toString().indexOf('Array') != -1) {
			var l = imageList.length;
			for(apicsIdx=0;apicsIdx<l;apicsIdx++) {
				var c = pic.length;
				pic[c] = new Image();
				pic[c].src = imageList[apicsIdx];
			};
		}
		else {
			var c = pic.length;
			pic[c] = new Image();
			pic[c].src = imageList;
		}
	}
	pic = undefined;
}
jQuery.preLoadAllImages =  function(additionalimages) {
	var regex = new RegExp("url\((.*)\) ",'i');
	var pic = new Array();
	var l = document.styleSheets.length;
	for (sheetIdx=0;sheetIdx < l;sheetIdx++){
	var sheet = document.styleSheets[sheetIdx];
	if (typeof sheet.href == 'string' &amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp; sheet.href.length > 0) {
		var spl = sheet.href.split('/');
		var filename = spl.pop();
		var path = spl.join('/')+'/';
	}
	else {
		var path = './';
	}
	myRules = sheet.cssRules ? sheet.cssRules : sheet.rules;
	for (ruleIdx=0;ruleIdx<myRules.length;ruleIdx++) {
		var Rule = myRules[ruleIdx];
		txt = Rule.cssText ? Rule.cssText : Rule.style.cssText
		var match = regex.exec(Rule.cssText);
		if (match != null) {
			if ( match[1].substring(0,1) == '/') {
				var pic2Load = match[1];
			}
		else {
			var pic2Load = path+match[1];
		}
		if (typeof console != 'undefined')
			if (typeof console.log != 'undefined')
				console.log(pic2Load);
				var c = pic.length;
				pic[c] = new Image();
				pic[c].src = pic2Load;
			}
		};
		sheet = undefined;
		match = undefined;
		styleList = undefined;
		Rule = undefined;
	}
	if (typeof additionalimages != 'undefined') {
		if (additionalimages.constructor.toString().indexOf('Array') != -1) {
			var l = additionalimages.length;
			for(apicsIdx=0;apicsIdx<l;apicsIdx++) {
				var c = pic.length;
				pic[c] = new Image();
				pic[c].src = additionalimages[apicsIdx];
			};
		}
		else {
			var c = pic.length;
			pic[c] = new Image();
			pic[c].src = additionalimages;
		}
	}
	regex = undefined;
	pic = undefined;
};

Thanks to Roberto for pointing this out, I forgot to add how to use it and what it does..

What it does:
Basically the $.preLoadAllImages() function cycles through all your style sheets looking for background images and creates an array that will handle them. After this is done, it cycles through this array and creates a cached image for each file.
If you passthrough an array or filname to the function it will preload those/that image(s) as well.

Finally the $.preLoadImages just preloads images passed to it.. be it a single item or an array of items.

Usage
This really is the simple part.

1. copy the code above to a new file.. save it as jquery.Preloader.js
2. make sure you know the relative filepath to this new js file
3. add jquery to the list of included files by doing
4. add the new js file to the page:
5. Finally call the function you want.. you don’t have to use jquery’s document ready, as really you might want to have the images ready before hand.. but that’s down to you.. just call $.preLoadAllImages(); and Voila!