IE (<=8), naturally being the most common cause of acute sharp pain, is the browser to suffer most from new features of modern browsers. Surprisingly, however, the browser has been outfitted with a gradient generator since version 5.5 (circa June 2000.) It is not robust, by any means, but can help smooth some of the irregularities between the intended layout and the IE rendering of it.

To the point: IE7 does not render gradient elements properly in some cases. The gradient filter (and perhaps other filters as well – will need to test that) is not rendered for bock elements, <div>, <h1>, <p> tags, that do not have an explicit width set in CSS. Both IE7 and IE8 will not render a gradient on an inline element, but will for an inline-block.

If, for whatever masochistic reason, you are using IE7 or have it on hand you can look at a gradient demo that shows the IE7 gradient issue and a potential solution.

This worked great from a UI and UX perspective, but given that the drag and drop was initialized with the drop area at the top of the page the drop only worked properly if the top of the drop area lined up with the top of the drop receiver [Fig. 1]. Shifting the drop area after the fact left the drop receiver unaltered, causing it to appear inactive [Fig. 2]. Or worse, if the shift was minimal, the drop area would overlap the drop receiver in an incorrect area and cause improper results (if there are a number of distinct listeners in the drop receiver area.) [Fig. 3]

An attempt to destroy and re-initialize the drop zone using both $(droppables).droppable('disable');$(droppables).droppable('enable'); and $(droppables).droppable('destroy');$(droppables).droppable(); did not have the desired effect – the position of the drop receiver had not been refreshed.

An option would be to use refreshPositions on a draggable object, but refreshing the positions on every mouse move would be a little much. However, peeking under the hood in refreshPositions reveals a $.ui.ddmanager.prepareOffsets function that takes two parameters. The first is either a collection of elements returned by a jQuery selector (ones already initialized for dragging) or a set of elements internal to the drag and drop plug-ins. Since the function is called externally, we’ll make use of the former:

$('.drag-elt').draggble({
    start: function(e, ui) {
        $.ui.ddmanager.prepareOffsets(
            $(e.target).data('draggable'), e
        );
    }
});

Brush and eraser size can be changed with the slider bar on the right, or honed in with the 1(increase size) and 2(decrease size) keys. The 3 key switches between eraser and brush, and the 4 key clears the screen.

Currently, pressing the save button will produce a .png image file with your sketch in a new window – if you want to keep it, you should save that image, because it is gone once the window is closed.

Visit at your own risk.

For the color, we decided to stick with white and gray – and a little simple blue thrown in for accents – muted colors that let the work take center stage. The narrow left column, tiny header, and small fonts all help to focus user attention to the main content.

Visit the website

Terminal: [PNG] [ICNS]

Saturn: [PNG] [ICNS]

Barn: [PNG] [ICNS]

Controls are mouse click based, keep an eye on the timer – if that runs out the game is over.

The application has a help menu that contains a regex cheatsheet – if you’re rusty.

download here