The transient option, which was added in 1.3.4, was renamed to modal because transient is a reserved word and was causing issues.

Also, the reference to $.support.boxModal was changed back to $.boxModal to remain compatible with older versions of jQuery.

I've also been working on a new site for SimpleModal. It's not ready yet, but I've included a preview below:

Also, if you have any feedback or input on what you'd like to see on the new site, please let me know. I want to make it as useful as possible.

If you have any questions regarding SimpleModal, I strongly suggest using stackoverflow. If you find any bugs, please report them on the issues page.

Thanks for using SimpleModal!

Links: Project Page | jQuery Plugins Page

A new option, transient, was added which allows you to disable the overlay, iframe, and certain events. This would allow the user to still interact with the page below the dialog.

Another container dimension fix was added to deal with Opera quirks. Lastly, a new internal placeholder was added to keep track of where the modal content came from (if it came from the DOM).

Complete list of features and changes since 1.3.3:

• Changed default values for minHeight and minWidth to null
• Added transient option which, if true, disables the overlay, iframe, and certain events, allowing the user to interace with the page below the dialog
• Changed $.boxModel to $.support.boxModel
• Fixed container dimension issues in Opera
• Added a placeholder element for modal content taken from the DOM
• Updated demo's and added a new Flickr Badge Gallery demo

If you have any questions, I strongly suggest using stackoverflow. If you find any bugs, please report them on the issues page.

Thanks for using SimpleModal!

Links: Project Page | jQuery Plugins Page

My Review

I don't usually buy technical books; I'm more of a hands-on learner and the books that I've purchased in the past just collect dust. It's one of the reasons why I'm so impressed with jQuery Enlightenment. Besides being an eBook (and therefore can't collect dust), Cody has structured the book in a way that makes it perfect to have as a learning tool as well as a reference.

You can read the book top-down or skim through the topics, find something you're interested in, and get a detailed and easy to understand write-up on the subject. Cody takes the learning processes one step further by providing code examples, linked to JS BIN, that can be viewed and run in your browser. For someone like me, the concrete examples and ability to play with the concepts, helps reinforce the topics covered.

Whether you are a new jQuery users, or a seasoned jQuery developer, jQuery Enlightenment won't disappoint!

jQuery 1.4

The current version of jQuery Enlightenment was written for jQuery 1.3.2. I spoke to Cody about the recent release of jQuery 1.4 and his plans for an update. He is working on a new version of the book that he estimates will have twice the content (or more) and is tentatively priced at $30. Lastly, he plans to offer a limited-time discount on the update for existing jQuery Enlightenment owners. [Note from Cody: All of this information is subject to change]

Giveaway

As mentioned previously, I have 3 coupons available for free copies of jQuery Enlightenment. If you would like a chance to win, leave a comment below and on Wednesday (1/20) at 2pm PST, I will randomly select 3 people.

Winners!

The random number generator has spoken and the following people have won a coupon for a free copy of jQuery Enlightenment:

• Jim
• Sam De La Garza
• Bjorn van der Neut

I'll be sending the coupons codes out shortly. Congratulations, I know you'll enjoy the book.

SimpleModal Login handles logging into WordPress but does not handle user registration or the forgot password functions.

SimpleModal Login also supports themes, something I'm planning on adding to the SimpleModal Contact Form plugin as well.

If you have any feedback or issues, please let me know!

Download Project Page

Thanks to all who reported the issue, it has been fixed and 1.3.3 has been released.

If you're curious about the specifics, in IE7, $(element).width() (and height()) return a value that includes the padding and/or margin of the element. All other browsers return the actual height/width. This was throwing off the logic for determining how to size the container.

Changes in 1.3.3:

• Fixed IE7 issues with container dimension determination

If you have any questions, I strongly suggest using stackoverflow. If you find any bugs, please report them on the issues page.

Thanks for using SimpleModal!

Links: Project Page | jQuery Plugins Page

In case you are wondering, 1.3.1 was used in the demos but never officially released. The demos have been updated as well.

A number a container dimension fixes were added as well as a new option, autoPosition, which can be used to turn off auto positioning of the container upon creation and window re-size. I also shortened many internal variables to help reduce file-size. Hopefully it doesn't hurt the readability.

Complete list of features and changes since 1.3:

• Added autoPosition option which gives the ability to enable/disable the container positioning
• Changed data height() to outerHeight(true) and data width() to outerWidth(true). Thanks to Andrew Marcus
• Fixed bug that prevented % container dimension values from being used
• Aliased "this" to "s" wherever possible to reduce file size
• Reduced length of other internal variables to reduce file size
• Fixed container width determination, which fixes width/centering issues in IE6
• Fixed position type checking. Thanks to cavidae for reporting
• Fixed data width and height determination by appending the data element to body, then appending it to the wrap element after the dimensions are determined

If you have any questions, I strongly suggest using stackoverflow. If you find any bugs, please report them on the issues page.

Thanks for using SimpleModal!

Links: Project Page | jQuery Plugins Page

• 1024x768
• 1280x800
• 1280x1024
• 1440x900
• 1680x1050
• 1920x1200

• 1024x768
• 1280x800
• 1280x1024
• 1440x900
• 1680x1050
• 1920x1200

• 320x480 (iPhone/iPod)

• 320x480 (iPhone/iPod)

The wallpapers are free for you to download and use. If you'd like to show your appreciation, feel free to spread the word or dontate $1.

1. Use wp_enqueue_script()

The traditional way to include jQuery in an HTML page is with the script tag. When working with WordPress, you should *never* do this. To avoid conflicts and other potential problems, you'll want to load jQuery using the following code:

function my_init() {
	if (!is_admin()) {
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

You can replace my_init with something more meaningful, but choose a unique name to avoid conflicts. For plugin development, add the code in your plugin file, otherwise, add this code to your theme's functions.php file. The is_admin() check is to prevent script queuing on your admin pages.

WordPress References:

• wp_enqueue_script()
• add_action()
• is_admin()

2. Load jQuery from the Google AJAX Library

Since WordPress includes jQuery, calling wp_enqueue_script('jquery'); will automatically load the jQuery file located in wp-includes/js/jquery/jquery.js.

If you want to load jQuery from the Google AJAX Library, you'll need to modify the code as follows:

function my_init() {
	if (!is_admin()) {
		// comment out the next two lines to load the local copy of jQuery
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

There are a number of reasons why you would want to use the Google AJAX Library to load jQuery, but remember, Google has been down before, so be ready to comment out the first two lines if necessary.

Note: As mentioned by Milan in the comments, there are existing plugins, such as Use Google Libraries, that will do this for you.

3. Load jQuery in the footer

Using the code in the previous two tips, jQuery will, by default, be inserted into the head of your HTML page. If you would prefer to have jQuery inserted at the bottom of your page, you'll need to use the $in_footer parameter for the wp_enqueue_script() function. The modified code:

function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery');

		// load the local copy of jQuery in the footer
		wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);

		// or load the Google API copy in the footer
		//wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);

		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

As with the choice to use the Google AJAX Library, there are reasons why you'd want to load jQuery at the bottom of your page. Note: if a script is loaded using wp_enqeue_script() that lists jQuery as a dependency and has $in_footer set to false, WordPress will place jQuery in the head instead of the footer, regardless of the $in_footer value for jQuery.

4. Add jQuery as a dependency

You've got jQuery loading and now you want to include a script that uses it. This is where the wp_enqueue_script() function really comes in handy. By passing an array of dependencies for the $deps parameter, WordPress will automatically manage the order and placement of your script tags.

For example, if you have a JavaScript file in your theme that leveraged jQuery, the following code would ensure that your file is loaded correctly:

function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
		wp_enqueue_script('jquery');

		// load a JS file from my theme: js/theme.js
		wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', true);
	}
}
add_action('init', 'my_init');

The previous code example would load jQuery from the Google AJAX Library, place it in the footer of your page and then include your theme.js file. The $deps array allows for multiple dependencies and helps you manage the scripts that are loaded on your site.

5. Proper jQuery coding conventions

All of the previous steps are nullified if proper jQuery coding conventions aren't followed. The most common issue I see with jQuery and WordPress is the misuse of the $ variable.

It is important to know that the version of jQuery that comes with WordPress automatically calls the jQuery.noConflict(); function, which gives control of the $ variable back to whichever library first implemented it. If you are loading a different copy of jQuery, you'll need to manually call jQuery.noConflict();, if necessary, from one of your JavaScript files.

As a general rule, you should not use the $ variable for jQuery unless you have used one of the shortcuts. The following is an example of how to shortcut jQuery to safely use the $ variable:

jQuery(function ($) {
	/* You can safely use $ in this code block to reference jQuery */
});

So, I'd like to introduce WP-Paginate, a simple and flexible pagination plugin which provides users with better navigation for your WordPress site.

If you have any feedback or issues, please let me know!

Download Project Page

September's issue contains articles on:

• Wii Gaming with JavaScript
• Beginners Corner: Inline Documentation
• Administrative Systems with YUI
• Sound Manager
• JavaScript Patterns - More Functions
• JavaScript's Equality Operator
• Community News

After reading through the issue, I am impressed with the quality of the articles and would strongly suggest JSMag to any developer that is serious about JavaScript.

Michael Kimsal, the man behind JSMag and GroovyMag, generously provided me with a coupon code for 10 free copies of the September issue to share with others.

Leave a comment requesting a free copy and on Friday (9/4) at 2pm PST, I will randomly select 10 winners.

Congratulations to the 10 winners below!

Enjoy!