Code

Titan: An Introduction

Drew Wilson — Sun, 17 Jan 2010 01:05:47 PST

Titan is amazing. It is extremely easy to use and will speed up your development time. If you already know jQuery & Javascript there is zero learning curve.
The only hard part about Titan, has been getting the word out :)

If you have any questions or comments please use the Titan Google Group.
Titan will be released soon, I just need to do some initial documentation.

What is Titan?

Titan is an Open Source Javascript Web Framework. It is built on jQuery, making it the easiest, smallest, and most liberating Javascript Web Framework to work with.
Titan interfaces with JSON for you, enabling you to easily put data from JSON into your HTML elements via Javascript or CSS Class Names.
Titan will even query the server for you using REST methods to retrieve the JSON you will be working with.

Why Create Titan?

Javascript (among others) is the future of the web. This future has in fact already begun to take form and Titan is a pioneer, paving the way.
There are other Javascript Web Frameworks, but there aren't any that give you the freedom to use your own interface. Titan doesn't limit you to an particular interface since it uses the HTML that you construct, rather than it's own.
Using Titan you can build any form of web application or website. Just like jQuery, Titan compliments your workflow and doesn't restrict you in any way. Additionally your interface is dictated by you, and not the framework. Titan works with you, not the other way around.

Titan was created by: Mike Osuna, Will Wilson, Drew Wilson

Titan was built on these core values:

Template Independence - Titan must not generate HTML, instead it uses the existing user defined HTML elements.
Standards Based / Validation - Titan must not break HTML or CSS validation. The Titan CSS interface is completely valid.
Less Code is Better Code - Keep things small. Titan is only 25kb.

Titan Overview Video

Most all of your questions should be answered in this video. If you have any other questions, please leave them on the Titan Google Group. Thanks to Nate Ritter for the interview!

Titan Development Example Video

This video is a slightly out-dated and was originally released before the launch of my CMS Firerift. Everything in the video is still relevant and current, however it is specifically relating to using Titan with Firerift. So you will notice many references to Firerift and Firerift specific features.

Where is Titan Headed?

Titan is Open Source, so hopefully it "heads" into the hands of all of you guys! The initial core of Titan is built and has been tested and used in production on many different websites and web apps: Firerift, Built It With Me, etc.
However, there are still many improvements that can be made and additional features that would be nice to implement. We most definitely welcome any code contributes by you all, with the goal of making Titan the "Javascript Framework of Choice" on the web.

TipTip jQuery Plugin

Drew Wilson — Sun, 03 Jan 2010 04:13:28 PST

Download Source Code

TipTip

Need Help? Community Forums

Using this?

UPDATE: Version 1.3 Released (Mar. 23, 2010). Get the latest! Details below.

This plugin is yet another product from my development work on Build It With Me. I wanted a sweet & simple custom tooltip, but nothing I found seemed to be smart enough for what I needed. I needed a custom tooltip that behaved just like the browser tooltip, and that is exactly what TipTip does!
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin.
It uses ZERO images and is completely customizable via CSS. It's also only 3.5kb minified!

Examples

Rollover any of the links in these sentences. TipTip can be applied to any element, not just links. Checkout the video below for a more in-depth example.

Feature Overview Video

How It Works

TipTip uses the title attribute just like the native browser tooltip does. However, the title will be copied and then removed from the element when using TipTip so that the browser tooltip will not show up.

TipTip only generates one set of popup elements total, rather then generating one set of popup elements for each element with TipTip applied to it. This helps speed things up and reduces processing time. The elements generated are all div elements and are appended to the end of the body element. The structure looks like this:

<div id="tiptip_holder">
    <div id="tiptip_content">
        <div id="tiptip_arrow">
            <div id="tiptip_arrow_inner"></div>
        </div>
    </div>
</div>

There are specific CSS class names added to the "tiptip_holder" div element when it appears depending on the orientation it appears in. Here is a list of the class names along with it's orientation:

tip_top - When the tooltip appears above the element.
tip_bottom - When the tooltip appears below the element.
tip_left - When the tooltip appears to the left the element.
tip_right - When the tooltip appears to the right the element.
tip_left_top - When the tooltip appears to the left and above the element.
tip_left_bottom - When the tooltip appears to the left and below the element.
tip_right_top - When the tooltip appears to the right and above the element.
tip_right_bottom - When the tooltip appears to the right and below the element.

TipTip has been tested (and works) in: IE7 & IE8, Firefox, Safari, Opera, and Chrome.

How To Use It

Obviously you need to make sure you have the latest jQuery library already loaded in your page. After that it's really simple, just add the following code to your page:

$(function(){
    $(".someClass").tipTip();
});

Below is an example of using TipTip with some options:

$(function(){
    $(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});

Below is an example of what your HTML would look like:

<p>
    Cras sed ante. Phasellus in massa. <a href="" class="someClass" title="This will show up in the TipTip popup.">Curabitur dolor eros</a>, gravida et, hendrerit ac, cursus non, massa.
    <span id="foo">
        <img src="image.jpg" class="someClass" title="A picture of the World" />
    </span>
</p>

Options

activation: string ("hover" by default) - jQuery method TipTip is activated with. Can be set to: "hover", "focus" or "click".
keepAlive: true of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
maxWidth: string ("200px" by default) - CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or 'auto'.
edgeOffset: number (3 by default) - Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
defaultPosition: string ("bottom" by default) - Default orientation TipTip should show up as. You can set it to: "top", "bottom", "left" or "right".
delay: number (400 by default) - Number of milliseconds to delay before showing the TipTip popup after you mouseover an element with TipTip applied to it.
fadeIn: number (200 by default) - Speed at which the TipTip popup will fade into view.
fadeOut: number (200 by default) - Speed at which the TipTip popup will fade out of view.
attribute: string ("title" by default) - HTML attribute that TipTip should pull it's content from.
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
enter: callback function - Custom function that is run each time you mouseover an element with TipTip applied to it.
exit: callback function - Custom function that is run each time you mouseout of an element with TipTip applied to it.

ChangeLog

Version 1.3 (Mar. 23, 2010)

Added defaultPoistion option that enables you to set the default orientation TipTip should show up as.
Added attribute option that enables you to set the HTML attribute that TipTip should pull it's content from.
Added content option. This will be used as the content for the TipTip and will overwrite any content pulled form any HTML attribute.
Added activation option enables you to specify the jQuery method TipTip is activated with: hover, focus or click. Now you can use TipTip on forms and for validation!
Added keepAlive option that when set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it. Allowing for hyperlinks inside your TipTip content to be accessible.

Version 1.2 (Jan. 13, 2010)

Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).
Tightened up spacing margins in JS.
Updated margins in CSS file.

Version 1.1 (Jan. 03, 2010)

Swapped dynamically added orientation CSS class names ('_left' & '_right') to make better sense.
Added in some tighter spacing for the tooltip in JS.

Version 1.0 (Jan. 02, 2010)

Initial release.

License

This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses.

AutoSuggest jQuery Plugin

Drew Wilson — Thu, 31 Dec 2009 02:51:28 PST

Download Source Code

AutoSuggest

Need Help? Community Forums

Using this?

UPDATE: Version 1.4 Released (Mar. 23, 2010). Get the latest! Details below.

So I needed to add some auto-completing functionality to my project Build It With Me. I figured it would be easy to find a ready-made jQuery plugin to do the work for me. I was wrong.
Naturally I took it upon myself to solve this problem for all of you :) I created this plugin to be as general purpose as possible. As a result it ended up being vastly more customizable than any other jQuery auto-complete plugin. Not only that, I am using actual jQuery. For some reason all the other "jQuery" plugins don't really take advantage of the radness that is jQuery. Consequently, my plugin ended up being dramatically smaller in size (way less code). Just ~~7kb~~ 8.8kb minified and only 6kb packed. Have fun with it!
AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.

Example

Type the letter 'm' into the box below:

Feature Overview Videos

Feature Update for Version 1.3

Initial Feature Overview for Version 1.0

How It Works

AutoSuggest will turn any regular text input box into a rad auto-complete box. It will dynamically create all the HTML elements that it needs to function. You don't need to add any extra HTML to work with AutoSuggest. Also, AutoSuggest uses ZERO images! All styling is done 100% in the included CSS file. This means it is super easy to customize the look of everything! You only need to edit the included CSS file. You can even use images if you want, just add the appropriate lines of code into the CSS file.

As you type into the AutoSuggest input box, it will filter through it's Data and "suggest" matched Data items to you. You can pass in an Object of Data to AutoSuggest or you can have it call a URL as you type to get it's Data from. AutoSuggest will display the matched Data items in a selectable list, which is 100% customizable. You have the option of structuring the HTML elements of that list however you want via the formatList callback function. You case an example of this in the second example above.

When you type into the input box and the "suggestion" dropdown list appears, a few things happen:

A class of "loading" is applied to the main AutoSuggest ul while the data is loaded. That class is then removed when all processing has finished and before the suggestion results list is made visible.
As you hover over each suggested option in the list a class of "selected" is added to that item, and then removed when you mouseout.
When you make a selection the item is added to the input box. Also there is a hidden input field generated for each AutoSuggest box that stores the values (comma separated) of each item you have selected. This input box will have a unique ID as well as a class name of "as-values".

The plugin expects the Data passed into it (or gathered from the URL) to be formatted in JSON. JSON is an extremely easy format to work with, and if you don't already... you should :) To learn more about JSON, check out my post/video, An Introduction to JSON.

When an AJAX request is made the search string is sent over in a param named "q" by default. However you can change that name with the queryParam option. Here is a default example AJAX request: http://www.mysite.com/your/script/?q=mick
"mick" would be the search query that was typed into the input box. Be sure to setup your server-side code to grab that param and send back some results.

As of AutoSuggest version 1.4 you can now create selections by using the tab or comma keys. To do this simply type something into the box and hit the tab or comma keys. The selection is added to AutoSuggest in the exact same manner as if it were chosen from the Results dropdown.

AutoSuggest has been tested (and works) in: IE7 & IE8, Firefox, Safari, Opera, and Chrome.

How To Use It

Obviously you need to make sure you have the latest jQuery library (at least 1.3) already loaded in your page. After that it's really simple, just add the following code to your page (make sure to wrap your code in jQuery's ready function):

$(function(){
    $("input[type=text]").autoSuggest(data);
});

The above line of code will apply AutoSuggest to all text type input elements on the page. Each one will be using the same set of Data. If you want to have multiple AutoSuggest fields on your page that use different sets of Data, make sure you select them separately. Like this:

$(function(){
    $("div.someClass input").autoSuggest(data);
    $("#someID input").autoSuggest(other_data);
});

Doing the above will allow you to pass in different options and different Data sets.

Below is an example of using AutoSuggest with a Data Object and other various options:

var data = {items: [
    {value: "21", name: "Mick Jagger"},
    {value: "43", name: "Johnny Storm"},
    {value: "46", name: "Richard Hatch"},
    {value: "54", name: "Kelly Slater"},
    {value: "55", name: "Rudy Hamilton"},
    {value: "79", name: "Michael Jordan"}
]};
$("input[type=text]").autoSuggest(data.items, {selectedItemProp: "name", searchObjProps: "name"});

Below is an example using a URL to gather the Data Object and other various options:

$("input[type=text]").autoSuggest("http://mysite.com/path/to/script", {minChars: 2, matchCase: true});

~~Please not that you MUST have an object property of "value" for each data item.~~ (This is now configureable with the selectedValuesProp option). The "value" property will be stored (comma separated) in the hidden input field when chosen from the "suggestion" dropdown list. You can see an example of the "value" property being set for each data item in the example above. Typically the "value" property would contain the ID of the item, so you can send a list of "chosen" IDs to your server.

Below is an example of how to process the data sent via AJAX to your server in PHP:

<?
    $input = $_GET["q"];
    $data = array();
    // query your DataBase here looking for a match to $input
    $query = mysql_query("SELECT * FROM my_table WHERE my_field LIKE '%$input%'");
    while ($row = mysql_fetch_assoc($query)) {
        $json = array();
        $json['value'] = $row['id'];
        $json['name'] = $row['username'];
        $json['image'] = $row['user_photo'];
        $data[] = $json;
    }
    header("Content-type: application/json");
    echo json_encode($data);
?>

Options

asHtmlID: string (false by default) - Enables you to specify your own custom ID that will be appended to the top level AutoSuggest UL element's ID name. Otherwise it will default to using a random ID. Example: id="CUSTOM_ID". This is also applies to the hidden input filed that holds all of the selected values. Example: id="as-values-CUSTOM_ID"
startText: string ("Enter Name Here" by default) - Text to display when the AutoSuggest input field is empty.
emptyText: string ("No Results" by default) - Text to display when their are no search results.
preFill: object or string (empty object by default) - Enables you to pre-fill the AutoSuggest box with selections when the page is first loaded. You can pass in a comma separated list of values (a string), or an object. When using a string, each value is used as both the display text on the selected item and for it's value. When using an object, the options selectedItemProp will define the object property to use for the display text and selectedValuesProp will define the object property to use for the value for the selected item. Note: you must setup your preFill object in that format. A preFill object can look just like the example objects laid out above.
limitText: string ("No More Selections Are Allowed" by default) - Text to display when the number of selections has reached it's limit.
selectedItemProp: string ("value" by default) - Name of object property to use as the display text for each chosen item.
selectedValuesProp: string ("value" by default) - Name of object property to use as the value for each chosen item. This value will be stored into the hidden input field.
searchObjProps: string ("value" by default) - Comma separated list of object property names. The values in these objects properties will be used as the text to perform the search on.
queryParam: string ("q" by default) - The name of the param that will hold the search string value in the AJAX request.
retrieveLimit: number (false by default) - If set to a number, it will add a '&limit=' param to the AJAX request. It also limits the number of search results allowed to be displayed in the results dropdown box.
extraParams: string ("" by default) - This will be added onto the end of the AJAX request URL. Make sure you add an '&' before each param.
matchCase: true or false (false by default) - Make the search case sensitive when set to true.
minChars: number (1 by default) - Minimum number of characters that must be entered into the AutoSuggest input field before the search begins.
keyDelay: number (400 by default) - Number of milliseconds to delay after a keydown on the AutoSuggest input field and before search is started.
resultsHighlight: true or false (true by default) - Option to choose whether or not to highlight the matched text in each result item.
neverSubmit: true or false (false by default) - If set to true this option will never allow the 'return' key to submit the form that AutoSuggest is a part of.
selectionLimit: number (false by default) - Limits the number of selections that are allowed to be made to the number specified.
showResultList: true or false (true by default) - If set to false, the Results Dropdown List will never be shown at any time.
start: callback function - Custom function that is run only once on each AutoSuggest field when the code is first applied.
selectionClick: callback function - Custom function that is run when a previously chosen item is clicked. The item that is clicked is passed into this callback function as 'elem'.
Example: selectionClick: function(elem){ elem.fadeTo("slow", 0.33); }
selectionAdded: callback function - Custom function that is run when a selection is made by choosing one from the Results dropdown, or by using the tab/comma keys to add one. The selection item is passed into this callback function as 'elem'.
Example: selectionAdded: function(elem){ elem.fadeTo("slow", 0.33); }
selectionRemoved: callback function - Custom function that is run when a selection removed from the AutoSuggest by using the delete key or by clicking the "x" inside the selection. The selection item is passed into this callback function as 'elem'.
Example: selectionRemoved: function(elem){ elem.fadeTo("fast", 0, function(){ elem.remove(); }); }
formatList: callback function - Custom function that is run after all the data has been retrieved and before the results are put into the suggestion results list. This is here so you can modify what & how things show up in the suggestion results list.
beforeRetrieve: callback function - Custom function that is run right before the AJAX request is made, or before the local objected is searched. This is used to modify the search string before it is processed. So if a user entered "jim" into the AutoSuggest box, you can call this function to prepend their query with "guy_". Making the final query = "guy_jim". The search query is passed into this function. Example: beforeRetrieve: function(string){ return string; }
retrieveComplete: callback function - Custom function that is run after the ajax request has completed. The data object MUST be returned if this is used. Example: retrieveComplete: function(data){ return data; }
resultClick: callback function - Custom function that is run when a search result item is clicked. The data from the item that is clicked is passed into this callback function as 'data'.
Example: resultClick: function(data){ console.log(data); }
resultsComplete: callback function - Custom function that is run when the suggestion results dropdown list is made visible. Will run after every search query.

The formatList option will hand you 2 objects:

data: This is the data you originally passed into AutoSuggest (or retrieved via an AJAX request)
elem: This is the HTML element you will be formatting (the 'result' li item).

In order to add extra things to the 'result' item (like an image) you will need to make sure you pass that data into AutoSuggest.
Below is an example of formatList in action:

formatList: function(data, elem){
    var my_image = data.image;
    var new_elem = elem.html("add/change stuff here, put image here, etc.");
    return new_elem;
}

You MUST return the HTML object. formatList will run on each 'result' item.

ChangeLog

Version 1.4 (Mar. 23, 2010)
Changes:

When using asHtmlID, the "as-input-" is no longer prepended to the beginning of the ID name. It is now just whatever you set for asHtmlID. This adds easy Rails compatibility.

New Features:

Added the ability to generate new selections by hitting tab or comma after entering some text into the main input field. This was a hugely requested feature, and will make AutoSuggest even more useful.
Added showResultList which gives you the option to never show a results list at any time.
Added in beforeRetrieve callback function (see 'Options' section above for description).
Added in selectionAdded callback function (see 'Options' section above for description).
Added in selectionRemoved callback function (see 'Options' section above for description).

Version 1.3 (Feb. 07, 2010) - (watch update video above for more details)
Changes:

Added a new feature overview video!
The hidden input field that holds all the values (class name of 'as-values') now has it's own ID, defined by the asHtmlID option. Example: id="as-values-CUSTOM_ID". If the asHtmlID is not set, it will revert to a random number ID identifier ("as-values-RANDOM").
Changed the option selectedItem to selectedItemProp to make better sense.
Changed the option searchObj to searchObjProps to make better sense.
Changed "Lucdia Grande" to "Lucida Grande" in CSS (bug fix).
Fixed bug that would prevent you from adding certain selections at seemingly random times.

New Features:

Added preFill option that allows you to pre-fill the AutoSuggest box with selections when the page is loaded.
Added asHtmlID option that allows you to specify your own custom ID that will be appended to the top level AutoSuggest UL element's ID name. Otherwise it will default to using a random ID.
Added emptyText option to customize "No Results" text.
Added resultsHighlight option to choose whether or not to highlight the matched text in the result items.
Added neverSubmit option. This will never allow the 'return' key to submit the form that AutoSuggest is a part of.
Added resultClick callback function. This will run a custom function when a result item has been clicked. It also hands you the data associated with that result item.
Added selectionLimit option so you can limit the number of selections that are allowed to be made.
Added limitText option to customize "No More Selections Are Allowed" text.
retrieveLimit now works with local objects and will limit the results to the number specified.
Added selectedValuesProp option to specify the property you want to use to store the values into the hidden input field.
Added in dynamic width for the results UL (description in video above).
Added packed version of the JS (only 6kb!)

Version 1.2 (Jan. 05, 2010)

Fixed bug that didn't properly use the selectedItem option as the text for the results list (thanks @Niki for finding it).
searchObj now has it's white-space removed so it will no longer error if you do: searchObj: "value, prop, cool".
Also, added in selectionClick callback function (see 'Options' section above for description).

Version 1.1 (Jan. 02, 2010)

Fixed CSS and visuals for Firefox 3.0.
Added in the following options: queryParam, extraParams

Version 1.0 (Dec. 28, 2009)

Initial release.

License

This AutoSuggest jQuery plug-in is dual licensed under the MIT and GPL licenses.

An Introduction to JSON

Drew Wilson — Thu, 31 Dec 2009 01:20:48 PST

It's no secret, I am a fan of JSON. I built Firerift and Titan, both use JSON at the core. In my opinion Javacript is way of the future, and everyday that is becoming more and more obvious. JSON is the absolute best way to store data when using Javascript no question about it. However, I didn't always think that way. Solely because I didn't understand JSON and what it really does.
That is the very reason why I am writing this article. If you do not have a firm grasp on what JSON is and what it does, this one's for you.

I spent some time putting together a little video that outlines JSON in it's most basic form. This video is not intended for those of you who already "get it". It's for those of you who have not yet discovered what JSON is.
My intention is just to give you a starting point with JSON and hopefully equip you enough so you understand the concepts behind JSON. From here you should be able to tackle the more "advanced" JSON tutorials and information resources out there on the web. Have fun with it!

The Video

What is JSON

JSON = JavaScript Object Notation
Object that contains Data
Better than XML for use with Javascript (cause it is not a markup language and it is lightweight)
Easier and quicker to setup than XML on the server-side

JSON vs. Arrays

JSON wins
Not a good comparison since JSON can have arrays inside of it
JSON can store nested objects and arrays, it is much more powerful than an array

What does JSON look like?

Declaring an empty JSON object in Javascript:

var data = {};

A basic JSON object:

var data = {kind: "Human", water: "Clear Blue", help: false};

A complex JSON object:

var bar = {prop: [{key: "Value", x: "yes"},{alien: false, skin: "Green Tone"}], sand: true};
var data = {kind: "Human", water: "Clear Blue", help: false, extra: bar};

How do I set it up a JSON in PHP?

A simple example that outputs a static JSON object:

<?
    header("Content-type: application/json");
    echo '{"items: [ key: "value", another_key: { k: "val", x: "yes" } ]}';
?>

Convert PHP arrays into JSON:

<?
    header("Content-type: application/json");
    $my_object = '{"items: [ key: "value", another_key: { k: "val", x: "yes" } ]}';
    $count = 2;
    echo json_encode(array("items" => $my_object, "count" => $count));
?>

Get data from a database and turn it into JSON with PHP:

<?
    $input = $_GET["q"];
    $data = array();
    // query your DataBase here looking for a match to $input
    $query = mysql_query("SELECT * FROM my_table WHERE my_field LIKE '%$input%'");
    while ($row = mysql_fetch_assoc($query)) {
        $json = array();
        $json['value'] = $row['id'];
        $json['name'] = $row['username'];
        $json['image'] = $row['user_photo'];
        $data[] = $json;
    }
    header("Content-type: application/json");
    echo json_encode($data);
?>

Using JSON with jQuery

Query the server and alert some JSON data:

$.getJSON("http://mysite.com/path/to/script", function(data){
    var items = data.items[0];
    alert(items.key);
});

imgCenter jQuery Plugin

Drew Wilson — Tue, 01 Dec 2009 21:56:04 PST

Download Source Code

imgCenter

Need Help? Community Forums

Using this?

Ever come across a situation where you need your images on a page to be perfectly centered in their HTML container so they all show up all tidy and uniform on the page?? Ya, me too. So I built an Image Centering plugin for jQuery. It has proven to be more useful than I would have ever thought. I love this plugin. What's better is I am releasing it free to you guys!
ImgCenter is a jQuery plugin that makes centering images a breeze. Download it now!

Examples

The images below are all contained inside of their own SPAN element.

The images above are not square. They are being dynamically centered into the parent element, which is set to 200px by 200px, giving them the appearance of being a cropped version of the original image. And yes, I shot those photos :)

How It Works

ImgCenter will first hide each image it is applied to from the screen before doing anything else. It will then show the image again once it has finished doing it's sizing and centering. This eliminates any annoying flicker you might see while the image is resized and centered by javascript. It then centers the images based on it's parent element. So if you don't wrap your image in an element at all, it will center it based on the BODY element, which would not be good. So make sure you have a container element for the image to be centered against.
By default imgCenter scales each image up or down to fit inside it's parent element. It will also wait to make sure each image is loaded before doing any re-sizing.

How To Use It

Obviously you need to make sure you have the latest jQuery library already loaded in your page. After that it's really simple, just add the following code to your page:

$("img").imgCenter();

If you want this thing to work best cross-browser, make sure you put that code into the window.load event. Like this:

$(window).load(function(){
	$("img").imgCenter(); 
});

Make sure your selector points to an actual image. If you wanted to center only a select group of images on your page, rather than all the images on your page, just do this:

$(window).load(function(){
	$("#someElement div.someClass img").imgCenter(); 
});

You will need to make sure you have a width and height set on your parent element that contains the image, so it has values to do the re-sizing against.

Options

Yep, there are options as well:

parentSteps: number (0 by default) - Climbs up the number of parents elements specified starting from the current element, then applies the centering code based on that element.
scaleToFit: true or false (true by default) - Will size up (or down) the image to fill out the parent element if the image is too small while keeping proper centering.
centerVertical: true or false (true by default) - Will vertically center the image if set to true.
complete: callback function - Custom function that is run after each image has centering applied to it.
start: callback function - Custom function that is run only once, before image centering begins.
end: callback function - Custom function that is run only once, after image centering finishes on all images.

Here is how to implement the plugin with some options:

$(window).load(function(){
	$("#someElement div.someClass img").imgCenter({ 
		parentSteps: 3, 
		end: function(){
			alert("All Done!");
		}
	}); 
});

License

This ImgCenter jQuery plug-in is dual licensed under the MIT and GPL licenses.