Dynamic Select Boxes from Bobby van der Sluis – for when you have two select boxes that need to relate to each other. Neat idea, works nicely, and I think I have a use for it…
I had a play with Rico then. Pretty good, generally. Some neat effects, and I like the way they do rounded corners – clever. Doesn’t work too well with boxes that have outlines, but hey! Can’t have everything.
My only complaint about this Library – I’d prefer to have it as a selection of different Libraries. It seems a shame to have to lump them all together for some small bits of user interface. For example, I’d be willing to have Drag and Drop that doesn’t neatly ‘slide’ back to it’s original position if not dropped on a Drop Zone. Having that in the UI means including LOTS of extra code. I pulled the Drag and Drop code out into a seperate file – I’ll publish it and the fix at some point soon.
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)
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'
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:
- Almost entirely CSS menus
- More CSS dropdowns
- Suckerfish Drop-downs
I didn’t know you could do so much with CSS. Clearly, it has come along since I last really got stuck into it!
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.
Ajax Patterns Wiki. Worth a look for those of us playing with ‘Ajax’. Silly name, Ajax, really. What’s next? ‘Achilles’ for the next ‘killer app’?
More on patterns although much of this is just good design – e.g. local cacheing where possible, and indicating the ‘newness’ of information (people like that. A web site can feel ‘dusty’)
A couple of functions from my friend Jonathan Beckett for finding the x and y offsets of an item on a page. Basically, it works it’s way back up the DOM finding the offset of each parent item. There may be better ways; I haven’t checked that hard.
var xpos = 0;
xpos += obj.offsetLeft;
obj = obj.offsetParent;
else if (obj.x) xpos += obj.x;
var ypos = 0;
ypos += obj.offsetTop;
obj = obj.offsetParent;
else if (obj.y) ypos += obj.y;