An interesting technique

Here’s an interesting technique of drawing a user’s eye to an area on a page, by using a colour that fades after a couple of seconds. I know that it’s supposed to be for areas updated by the user (and I can think of at least one project for doing this), but it might work else where. I must give this a go, see what it’s actually like. It’s going to either be really good, or really bad…

(Update – having migrated my blog to WordPress, I find that it uses this technique. And it’s quite nice. It works well)

An interesting technique

Working on Web UI Components

So, this whole ‘Ajax’ thing set me thinking – why not try to make all ‘normal’ user interface components – date, numeric, combo boxes, autosuggestion boxes, image rollovers, menus, tooltips, etc. – why not make them all into libraries that you can include in a page, and then configure through the attributes of a node. E.g.
<input name='someDate' type='text' value='' subtype='date'
format='yyyy-mm-ddd'>

Then the .js file you include reads inputs, finds dates, and add the functionality you need.

I’ve already done this for combo boxes – I’ll put it on my site soon – and so I started looking into menus, and found some neat things:

I didn’t know you could do so much with CSS. Clearly, it has come along since I last really got stuck into it!

Working on Web UI Components

Quirksmode

Quirksmode is a neat little site describing various features and their support across browsers. This is important, in a world of non-standards compliant browsers. For example, I recently discovered in some code of mine that in an event, Opera 8 supports both ‘srcElement’ and ‘target’ properties. In fact, it seems to support both event models. I can see why, but this caused my code (where I set event.target = event.srcElement if event.srcElement existed) to blow up.

Oh, and it neatly describes a problem I found (and had to solve) yesterday with the ‘this’ keyword in event handlers in Internet Explorer. Wish I’d known this before.

Anyway, I like this site, and it is useful.

Quirksmode

Vertical Text in Internet Explorer

 

Vertical Text

CSS seems to lack an real control over text direction – it should, but of course the reality is different.

What I found was a way of making vertical in IE using some of those pointless filters, and the support IE has for top to bottom, right to left languages. It’s a bit sneaky in doing this – but it works in IE, at least. I haven’t found a way of doing it in Mozilla.
<div style="{ writing-mode:tb-rl;
filter: flipv fliph;
white-space: nowrap;}">

Vertical Text in Internet Explorer

Alpha channel PNGs in IE

Gifs suck. PNGs (Portable Network Graphics) are much better – more colours, freedom from intellectual property rights, and (best of all) an alpha channel for transparency. Some good articles:

PNG opacity (with some nice examples)

Fuzzy Drop shadows (like on Google Maps)

Transparency with HTC files

And again

– Choosing what image to serve in PHP on the server

Related: Opacity in CSS, being able to see through DIVS – CSS Transparency for IE, CSS Opacity

Alpha channel PNGs in IE