Considering the number of changes and new features, I’ve decided to release 1.3 as a beta version. This release covers most of the common requests I receive for SimpleModal: forced focus on the dialog (prevent tabbing away), ESC/overlay-click to close dialog and an appendTo option.

*NOTE*: Moving forward, all issue/bug/feature requests should be made on the issues page: http://code.google.com/p/simplemodal/issues/list

Download: http://code.google.com/p/simplemodal/downloads/list

Complete list of changes and new features:

• Added appendTo option, primarily for .NET users to enable appendTo(’form’)
• Added focus option which forces focus to remain in the dialog
• Added dataId option which allows a unique id to be set for the data div if one does not already exists
• Added minHeight/minWidth options to allow minimum dimensions to be enforced
• Added maxHeight/maxWidth options to allow maximum dimensions to be enforced. SimpleModal will always contain the modal dialog within the browser window.
• Added escClose option to bind modal close to the ESC key
• Added overlayClose option to bind modal close to a click on the overlay div
• Added a wrapper div to allow for easier overflow capabilities
• Changed meaning of close option. If false, the closeHTML, escClose and overlayClose values will be ignored.
• Fixed auto-centering issues when container dimensions were not provided
• Fixed Opera screen painting issues by adding .hide() before .remove()
• Fixed Opera 9.2.x issue with jQuery 1.3.x and $(window).height()

Other than the close option, all previous options remained the same and the new options should be fairly self-explanatory.

Thanks for using SimpleModal!

A fix has been made and uploaded to the WordPress plugin repository. You should see the update available shortly.

Thanks Charles!

For more information and the download, please visit the SMCF WordPress Plugin Page.

• Upgraded SimpleModal to 1.2.3
• Added addslashes() function for smcf_messages JavaScript object to prevent localization issues
• Added stripslashes() function for the email message
• Removed 70 character limit for wordwrap() function – defaults to 75
• Added wp_page_menu() and wp_list_pages() filter to dynamically add smcf-link class to a contact menu link
• Changed format of validation messages – requires translation updates

If you are using wp_list_pages() or wp_page_menu(), this release makes it a lot easier to use SMCF without having to modify any source files. All you need to do is enter the matching link title on the SMCF options page.

I’ve also modified the email message to use the default wordwrap of 75 characters and have removed the slashes added by magic_quotes.

Translators: Updates were made to the verbiage, so if you would be so kind to update your translations, I’d appreciate it!

For more information and the download, please visit the SMCF WordPress Plugin Page.

IE7

Recap: In certain situations, jQuery’s $.browser.version will report IE 7 as version 6.

Considering the problem is due to IE 7 having an incorrect user-agent, I’m not sure that this problem was up to jQuery to solve. It would have required the user-agent parsing code to check non-user-agent properties…which is probably a bad idea.

I found out that my original code suggestions might fail in situations where IE 6 is using a 3rd party library to add XMLHttpRequest support, so here are my updated IE 6 and IE 7 detection suggestions:

Override the $.browser.version value:

jQuery.browser.version = jQuery.browser.msie &&
    parseInt(jQuery.browser.version) >= 6 &&
    typeof window['XMLHttpRequest'] == "object" ?
        "7.0" :
        jQuery.browser.version;

Add a new msie6 property:

jQuery.browser.msie6 = jQuery.browser.msie &&
    parseInt(jQuery.browser.version) == 6 &&
    typeof window['XMLHttpRequest'] != "object";

Keep in mind that $.browser is now deprecated, which means it will go away at some point in a future release. I’m not going to get into the object detection vs browser sniffing debate, but just be aware!

Opera 9.5

Recap: Opera, in an effort to follow standards, changed where it was storing the value for the viewport height.

This issue was fixed in jQuery Ticket 3117 by Ariel Flesler. If you have Opera 9.5, you can test the results on this page.

Safari 3 (Windows)

Recap: The following element would not be hidden in Safari: $("<div/>").hide().appendTo('body');

I found out that this issue also occurs in Safari 4! The original jQuery ticket I mentioned was marked as a duplicate, but the issue was fixed in ticket 1239.

Summary

Besides the problems with the IE user-agent, the jQuery developers implemented fixes for the two other browser issues that I had previously blogged about. jQuery 1.3.x has a number of new features and code improvements and continues to be, IMO, the best available JavaScript library.

• Fixed IE6 positioning issue (position: [,20] did not work)
• Fixed IE issue with jQuery 1.3+ (issue with $.boxModel property)

There are a number of fixes and enhancements on my list for the future versions of SimpleModal:

• Provide dialog appendTo option. The current default is body
• Provide additional close options: ESC and overlay click
• Find solution for dialogs with no width/height given – determine dynamically
• Find solution for dialogs that are larger than viewport
• Force focus on dialog – prevent interaction with page

Let me know which of those you would most like to see. Also, if you have any other feature requests or bugs to report, please report them on the issues page.

Links: Project Page | jQuery Plugins Page

Funny story on how I found out…

I was checking my email this morning and one of them was from the National Footbal League (NFL) titled “Be the first NFL Director of Fandemonium”. It is a contest being held by the NFL and Monster.com that has an amazing Grand Prize, including a $100,000 signing bonus! It’s not an actual job/position, but who couldn’t use 100k?

So, I went to the site and entered my information for a chance to “WIN IT ALL!” Being the curious guy that I am, I started clicking around and noticed that a few of the links on the page, like “Official Rules” and “Refer A Friend”, opened modal dialogs.

Curious to know if they were using a plugin or homegrown dialog, I was pretty shocked to find that they were using SimpleModal! I then went to their main site, Monster.com, and was able to find it being used there as well. Pretty cool!

So, now I’m curious to know what other sites are using SimpleModal. If you’ve implemented it somewhere of know of a site using it, I’d love to know!

I tested SimpleModal (tests and demos) with jQuery 1.3 and everything seems to be working as expected. After reading about all of the speed improvements, I thought it would be interesting to run some tests (Firebug 1.3 Profiler) comparing the SimpleModal demos with jQuery 1.2.6 and jQuery 1.3:

I haven’t looked into why 1.3 has more calls for the Contact Form, but even so, the execution time (ms) has improved for each one!

Congratulations to the jQuery team and Happy Birthday!

We set up a group on Flickr, called Assignment52, where a new assignment will be announced each week. The assignments will range from trying specific techniques to more general topics.

At the end of each week, everyone is encouraged to pick their favorite photo from the pool (not your own) and post it in the assignment thread.

So, if you are interested and up for a challenge, jump in and get started with Assignment 1…there’s only a few days left

SimpleModal – jQuery Plugin

SimpleModal gained quite a bit of traction in 2008 and was downloaded nearly 20,000 times. That number includes all versions and each variation (full, min, packed). After releasing 1.1.1, I started on a complete rewrite of the code. I ended up modifying the existing code for the 1.2 release and have yet to decide what to do with the rewritten code.

At this point, I am unsure of the fate of SimpleModal. The jQuery UI library has improved dramatically since I initially released SimpleModal and I am contemplating talking with the UI team about combining efforts (with the Dialog UI) instead of duplicating them.

SimpleModal Contact Form (SMCF) – WordPress Plugin

After quite a few requests, I released SMCF which was based on the SimpleModal Contact Form demo. It was my first WordPress Plugin and over the course of 2008 I became very familiar with WordPress and released many SMCF improvements. The SMCF plugin gained some fans, and was downloaded almost 8,000 in 2008.

I have quite a few ideas for SMCF, including themeing and the ability to create custom forms. I think the direction will depend a on what happens with SimpleModal, but either way, I’d like to improve the contact form, regardless of what powers it.

emAlbum

Other than the release of a minor bug fix in February, it has been another quiet year for my image gallery script. Despite the lack of updates, emAlbum continues to be the top rated script on The CGI Resource Index and Hotscripts.

emAlbum is my baby – the first version was released in 2003 and since then it has evolved into two versions, emAlbum Standard and emAlbum Pro. The Pro version was created at the encouragement of my wife and some users for a very affordable $25. I’ve wanted to re-write emAlbum for years and have considered turning emAlbum into an open-source PHP project, but I just haven’t had the time or resources to do so. Hopefully I’ll be able to resurrect the project some day – anyone interested?

EricMMartin.com

In the first full year since its re-opening, the site has received a steady increase in traffic. I posted 26 blog entries in 2008, covering a wide variety of topics. SimpleModal is by far the most popular project and the WordPress Pumpkin was the most popular post.

In 2009, I hope to double my posting count and narrow the focus in on a couple of topics, WordPress and jQuery. In addition, I’ve been working on a site redesign, which I hope to release in Jan or Feb 2009. I’m on my third or fourth attempt at a re-design, so hopefully the current one will stick

Photography

In addition to focusing on WordPress and jQuery, I plan on discussing my new favorite topic: photography. I bought a Nikon D40 DSLR in August and have really enjoyed expressing my creative side through photography. I’m still learning the basics but have been happy with some of the photos I’ve managed to capture. Check out my Flickr photostream…I’d love to hear your feedback. Here are my favorites.

Online

I finally started using Twitter (my account) in 2008 and have had mixed feelings. One thing is for sure – I’m getting tired of trying to stay connected in so many different places. I plan on sticking with Flickr, Twitter, LinkedIn and Facebook. Among others, I never really used MySpace (who does anymore?) and Plaxo left a lot to be desired.

Happy New Year

Better late than never, I guess! 2009 should be an interesting year, especially in the U.S. A new President and financial crisis will certainly keep things interesting. Thanks for visiting and have a great 2009!

I then went to my Reading Settings (Settings > Reading) and set the static Front and Posts page to the pages I just created. Going back to my site, I tested out the new static pages only to find they didn’t work.

After a lot of time and troubleshooting, I noticed on the Pages screen that there were two copies of each page I had created – with one still labeled as a Draft. After even more time troubleshooting, I finally discovered the issue. Unlike the Posts page, the Publish and Save Draft buttons are not disabled during an autosave. So, when I entered the Page title and clicked Publish, the autosave and publish requests were happening at the same time.

I opened a WordPress ticket and submitted a patch. The patch was applied by azaozz, but it looks like it won’t be available until WordPress 2.8. To fix this bug yourself, open /wp-includes/js/autosave.js and change all occurrences of #submitpost to .submitbox:

function autosave_enable_buttons() {
	jQuery(".submitbox :button:disabled, .submitbox :submit:disabled").attr('disabled', '');
}

function autosave_disable_buttons() {
	jQuery(".submitbox :button:enabled, .submitbox :submit:enabled").attr('disabled', 'disabled');
	setTimeout(autosave_enable_buttons, 5000); // Re-enable 5 sec later.  Just gives autosave a head start to avoid collisions.
}

Now the buttons will be disabled during an autosave, just like it does on the Posts page.