jQuery Theme Switcher Reset Plugin

User Experience!  That's what bring 'um back.  Remember the first time you saw AJAX in action?  Maybe it was via your GMail or Hotmail account.  Whatever it was, you kept coming back to it.  Why?  Because it was cool; maybe because it was something that you've never seen before; or, maybe it was your fascination with 'How'd they do that?'  Bottom Line: User Experience!

Okay, I'll admit it - I'm not a designer!  I try, and I typically come up with some good solutions; however, it takes quite awhile.  Looking back at all the time I've spent making the UI look pretty, I could have added all that 'cool' functionality that the client wanted.

Finding patterns that are tried and trued, well known, relatively easy to implement, predicable, and reusable is a developers dream.  Unlike software development, I don't believe (well, I don't know...) that there a set of pervasive UI design patterns that all designers could pull out of their toolbox and share with other designers.  I'll spare you the details, but when a developer chats with another developer common design patterns are used to communicate the intent, architecture, design, and implementation of a software component - Singleton, Repository, Decorator, etc...

So, where am I going with this...?  User Experience!

Back to the 'cool' factor of AJAX, what else might bring back a user?  What's that?  A nice decision?  Easy to use interface?  Maybe, a UI customization feature where the user can select the way the UI is styled?  That's where I'm going with this...

Windows has (as far back as Windows 95 - probably farther) a function for a user to select various themes and background to change their Windows experience.  iGoogle, Windows Live, and Yahoo all have theming support.  Visual Studio even has theme support.

jQuery UI ThemeRoller is nothing new.  ThemeRoller gives you the ability to create common component themes, download the themes, and easily integrate the themes with you application/Web site.  Again, this is nothing new.  There is also a pluging for Firefox.  A sister jQuery project is the Theme Switcher widget.  The ThemeSwitcher widget gives the developer the opportunity to integrate theme switching functionality into their Web site to enhance the Use Experience - there's that phrase again...  The Theme Switcher is not as well known as the ThemeRoller, but it's nothing new either.

What the Theme Switcher lacks is a way to integrated a custom theme that you designed and downloaded from the ThemeRoller tool.  I've created a simple jQuery Theme Switcher proxy plugin that will integrate the Theme Switcher and all the outstanding jQuery UI themes with your default theme.

Rather than bore you with the implementation details, you can view a demonstration here: Theme Switcher Reset Proxy  Here's a screenshot:

You can download the code via View Source.
Thanks for reading...

jQuery UI Frame Dialog - Loading Pane

An updated posted is located here.  This includes modifications to the plugin to avoid multiple iFrame source loads.

I like to use dialogs.  Specifically, I like to use inline dialogs rendered within the current window.  A popular implementation is the jQuery UI Dialog Widget.  I also like to render full page content in dialogs via iFrame object; however, jQuery UI Dialog Widget does not provide this functionality out-of-the-box.

There is a plethora of home grown solutions for rendering iFrames wrapped within the jQuery UI Dialog Widget; however, none really fit well with what I wanted to do.  That is, until I found the jQuery UI Frame Dialog Plugin.  The jQuery UI Frame Dialog Plugin provides extensions to the jQuery UI Dialog Widget for rendering iFrame content.  The implementation is as simple as it gets, and IMHO is the best solution for rendering iFrame content wrapped by the jQuery UI Dialog Widget.

The only this missing in the jQuery UI Frame Dialog Plugin was a way to provide a loading panel (eye candy) while the iFrame's source is loading.  You know the type - where an animated image is displayed while the content is acquired, loaded, and rendered and the animated image disappears when the the content is ready.

I made a few modification to the jQuery UI Frame Dialog Plugin to support the loading panel concept.  Essentially, I added a new property (loadingClass) to the options hash parameter.  The loadingClass property is a CSS class containing styles to apply to the jQuery Dialog Widget while the iFrame's content is being acquired, loaded, and rendered.  The following is an example of a CSS class used for the loadingClass parameter:

.loading-image { background: transparent url('assets/im/progress-indicator-alpha.gif') no-repeat center center; }

The following is the JavaScript used to open the dialog (initiated via an anchor):

$('#dialog_link').click(function(){
var $dialog =
   jQuery.FrameDialog.create({
      url: 'http://espn.go.com',
      loadingClass: 'loading-image',
      title: 'This is the Dialog\'s Title',
      width: 900,
      height: 600,
      autoOpen: false
   });
   $dialog.dialog('open');
   return false;
});

If you're interested, an online demo is located here: jQuery UI Frame Dialog Plugin with Loading Panel. The JavaScript file is accessible via View Source.

I wanted to notify the developer of my addition to the jQuery UI Frame Dialog Plugin.  So, I navigated to the plugin page, clicked the 'View Pending Feature Requests', successfully logged in with my account, and received the following error.  The crazy thing about this error, I keep getting this error if I navigate anywhere on the Plugins site while logged in.  Strange behavior!  Hopefully this is a temporary issue...

Thanks for reading...