Showing posts from May, 2011

A Custom Dialog Box in JQuery Tutorial

In the Jquery world, constructing a basic custom dialog box can be quite trivial. Using Jquery UI, creating a dialog box like the above can be done with this little snippet of code:

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
$( "#dialog" ).dialog();

Web development is easy right? Well in a perfect world yes, but as any developer will tell you there are two worlds: the ideal world, and the real world. JQuery UI is a fine toolkit when one is looking for a standard off the shelf styled widget, but not when something more custom is desired - even with help from the excellent Themeroller.

The recent Twitter UI redesign does everything it can to ensure users will use their browser's back button less. Many of the actions possible do not change the princi…

Simplifying a javascript jump menu

The jump menu is a reasonably common UI design pattern on the web. It is used by big guns such as Facebook and Twitter, and has been dissected and reproduced many times over.

When I set about implementing my own jump menu I found opening and closing the menu when it is clicked on was rather trivial.


The difficulty came in closing the menu when there is a click outside the jump menu. Googling for answers, I found the scenario of closing a menu on clicking outside it to be a well trodden path. Stackoverflow had plenty of examples and possible solutions such as here and here. I even found a plugin created by Ben Alman that extended Jquery to provide a custom clickoutside event. Many of the proposed solutions were fragile, and I was slow to add a new plugin to my web application - as good and all as the implementation appeared. I really wanted to understand the problem before opting to take a proposed solution off the shelf.

The st…