jQuery UI ThemeRoller Should be Distributed

I use jQuery UI a lot. I’ve used it at work on internal projects, I’ve used it on some pages in ferretarmy.com, and it’s integral to blaqdesign.com. It’s a great set of rich UI controls and behaviors that work well and are easily integrated into a webpage. I can’t say enough about the toolset.

However, there’s a distinct point of failure of jQuery UI – ThemeRoller. ThemeRoller is the tool that’s used to create a jQuery UI theme – without a theme, there’s a lot less to love about jQuery UI. None of the widgets and CSS styling are available (interactions and effects would still be available, though). This past week, though, ThemeRoller was down. Specifically, it was not outputting custom themes, though the default ones were working. It was down for about three days, to be exact. This was a very big deal to me (amongst others, I’m certain) – I had to delay a production release because I couldn’t get a custom theme that I needed at the time.

There are a lot of reasons that ThemeRoller would be down, and it’s understandable that it will probably break at times as updates are made to it. The bad thing is that if ThemeRoller goes down, for whatever reason, there is no alternative available to create themes with. What I would like to see happen is there be established an alternate home for ThemeRoller. In addition, it should have an archive of all production versions of ThemeRoller. That way, if a bum version gets released for a few days, one can always use the previous version, which should work fine.

With these fairly trivial changes, jQuery UI would eliminate a point of failure. What could possibly be better than that?

jQuery UI Image Carousel

jQuery UI Image Carousel

I’ve just released my latest plugin, the jQuery UI Image Carousel! The plugin is a standard-fare image carousel, and it’s also fully compatible with jQuery UI. It’s got a few options that make it fairly versatile – from a minimal look all the way to a collapsible version with a custom header.

The JavaScript itself wasn’t that daunting – version 1.0 clocks in at around 180 lines. Most of it is presentation management as well – making sure that the correct jQuery UI classes are applied to the markup, and so forth. In total, it was a bit of a longer exercise – there was a lot of work to insure compatibility with older versions of IE, for instance. I hope you enjoy, and if you use it, please take a sec to leave a comment with your page URL.

Disabling Button Clicks The Better Way

Most of the time when you want to cancel an action on a web page, such as a button click, you’d return false in the client-side button event handler, as such:

<a href="blah..." onclick="return DoAction();">Link</a>

...

function DoAction() { /*Do Something */ return false; };

However, there’s a better way, using the event.preventDefault() method. I had the need to use this recently, when I was fixing a trivial issue with the Filament Group jQuery UI buttons – my ‘a href’ styled buttons were still clickable when they were disabled. An easy solution to this problem is to capture the click and prevent the default action. I hooked this action to all disabled buttons, as such.

$(".ui-state-disabled").click(function(event) { event.preventDefault(); });

This code isn’t that robust – if you were to add or remove the ui-state-disabled class after page load (which I didn’t have to), you’d want to make sure to handle it appropriately. Either way, preventDefault() is definitely an elegant solution to disabling a click action.

Progressive CSS Animation Tutorial

I’ve been focusing a lot lately on demonstrating some CSS animation techniques. That’s all fine and well, but there is definitely a need for some instructional material on the web. To that end, check out this CSS animation tutorial that I just finished. It will teach you some techniques that are useful today in a mixed-support world for CSS animations. All the examples covered are progressive animations that require little work on your part, and that also don’t significantly impact user experience if they are unable to view them.

I wrote the demo using straight HTML and jQuery UI instead of the normal blogging platform. To that end, there’s no support for comments on the tutorial so feel free to comment here if you’re interested. Enjoy!

Web Interface Development Superpowered with jQuery UI

The jQuery framework has been around for about three years now. It’s rapidly becoming the go-to JavaScript framework – it has the most plugins, serious support from the likes of Microsoft and Nokia, and it is easier to use than many other frameworks. There’s an even cooler technology out there nowadays, though – jQuery UI.

jQuery UI is a set of widgets, effects, and interactions built on top of jQuery. In order to use jQuery UI, you need to include an additional JavaScript file, and optionally a set of theme files. The big difference between jQuery and jQuery UI is that jQuery is meant to build components, and jQuery UI is a set of components that are already built.

Each jQuery widget is very flexible in it’s use. Examples of the widgets available are accordions, datepickers, tabs, dialogs, and a few more of lesser value. Widgets can easily consume jQuery effects and interactions seamlessly (and without significant cross-browser issues), allowing jQuery UI users to easily create rich client-side behavior.

In addition, perhaps the coolest feature of jQuery UI is the themeroller that it was built as a part of the total package. The themeroller allows graphic designers to generate the styling for all jQuery UI components, which in turn generates a set of CSS files that are easily downloaded as a zip package which can be consumed by developers. A huge number of styles are achievable using the tools provided, which will help jQuery UI sites from looking too cookie-cutter as the framework becomes more popular amongst web developers.