Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for March, 2007.

Archive for March, 2007

Getting ready for Singapore

Monday, March 26th, 2007

I am right now burning 30 CDs (8/30 verifying right now) for my workshop on DOM scripting in Singapore in two days.

The flight is in 20 hours and will last 13 hours. I then have a day to recover until the 8 powerpoints with code examples and exercises for each will be shown to about 25 subscribers to the course. The really scary thing is that I have no idea what hotel I am in, but the organizer of the workshop promised to pick me up from the airport (that would be a first, I’ve never been picked up before!).

I will be back in London on Sunday morning and will leave again on Wednesday for the Highland Fling and will stay in Edinburgh until Sunday, most likely sharing a flat with Andy Budd.

Seeing that I normally only sleep 5-6 hours and write most of the time on the laptop, I really start to wonder why I pay for such a nice flat :)

Determining the depth of a nested HTML list

Monday, March 26th, 2007

I had this problem the other day that I needed to know how many nesting levels a menu has. After some failed attempts of walking the DOM and lots of comparisons I realised that it is actually a lot easier than I thought:

function treedepth(o){
var nested = o.getElementsByTagName(‘ul’);
var allcount = 0;
for(var i=0,j=nested.length;i<;i++){
var count = 1;
var kid = nested[i].getElementsByTagName(‘ul’)[0];
while(kid!==undefined){
count++;
kid = kid.getElementsByTagName(‘ul’)[0];
}

if(count>allcount){allcount=count;}
}

return allcount;
}

You can check a testcase for treedepth here.

Any better way to do this?

Zoomable Map Solution – On Paper!

Tuesday, March 20th, 2007

I am rubbish with maps. I get car sick when I read them, I have no clue when I look at them and try to predict where I will find things and explanations from me normally sound something like “Take a left at the shop with the fruit, then walk until you see a blue skip, take a right there until you go past a betting shop….” meaning I just don’t remember street names.

I am even worse folding and unfolding maps. You can bet that sooner or later I won’t be able to fold a massive map any longer and that you hear a ripping noise when I open one. That aside, it is a real pain in London to read a map anyways as you hardly ever have enough personal space to unfold one in the first place.

A friend of mine now showed me an invention she came up some time ago, which is a foldable and zoomable map. You just pick the section you are interested in and you can unfold with two fingers to go to a detail map or just keep the overview in your hand. Together with information about the tube and different sights in London this would be a very cool gift for people visiting me and klutzes like myself. A shame you cannot buy them yet.

See a video of the map in action on youtube:

Commercial Use != Radio Silence

Sunday, March 18th, 2007

Ok, this is a rant:

What is the deal with people asking me about commercial use of my scripts, getting an answer and not even bothering answering any longer?

I have published scripts for use and study for about 9 years now and every once in a while I get a comment or email following the certain pattern:

“Hey Chris, I really love your script xyz, it is exactly what I need and what I was looking for. Thanks so much for making this available. You rock! You mention on the site and in the script that you want to be notified about commercial use. I’d like to use yous script, what are the terms?”

Now, my stance is the following:

Go nuts using and learning from my stuff, but when you make some money, I’d like to see a share, at least as a sign of respect for offering the stuff for free in the first place. If you create a web site or a intranet I normally ask for a one-off payment that does cover a coffee and sandwich and a brownie in a London cafe. If you sell a product like a CMS I normally ask for a higher share or a royalty for every copy sold (the latter never happened). If your product is free, I don’t want anything (horde for example uses some of my code). I remember about 5 years ago, people downloaded the free scripts and really spend $5 on a donation for it, but that has ceased to happen.

Normally I spend about 5 minutes drafting a personal email to the enquirer explaining this and lo and behold about 9 out of 10 emails never ever get an answer. Sometimes even the enquirer email is invalid! This is a waste of my precious time and I am just totally sick of it.

So what do people expect? Shall I just stop releasing anything for free, create a cool web site with fake product packages and asking for $250 for a 20 line JavaScript? This seems to work for a lot of others, I really do get the feeling that people want to be taken advantage of.

So by all means, ask for commercial use of my stuff, but also answer me if I write you. Even if it is a “xx dollars! Fornicate you, I get it cheaper at xyz!” at least tell me what is going on!

Unobtrusive connected select boxes – yet another solution approach

Saturday, March 17th, 2007

Update#2: the third demo allows for preselect states and unlimited levels by using a nested UL and radiobuttons enjoy.

Update: the second demo now allows for preselect states and shows the first dropdown enjoy.

The interface element of connected select boxes (one select box changing the options in the other one) is one of the most used and also most annoying elements of web application design. While it works nicely for anyone having JavaScript enabled and using a mouse it can be a nightmare to use with a keyboard (unless you know that you can expand the whole list with alt+cursor down first).

The other problem is that you make yourself dependent on JavaScript with them and I don’t even want to know what the implementations for screen readers are.

That said, it simply does not die out, people love it. The scary thing is that there are dozens of JavaScript solutions to the problem and almost all of them make you dependent on JavaScript. I’ve tried in the past to come up with solutions for it using for example nested HTML lists in this Alistapart article. What scares me most is that the demo code for a bad solution seems to have ended up on several “Script Library” sites and I get emails coming in thanking me for the great solution!

My personal favourite is keeping the functionality independent of a mouse and JavaScript and using Ajax to populate the second drop down as explained in my book, but that is too complex for a lot of owners of web interfaces.

So today, once again the request for connected select boxes reared its ugly head and my esteemed colleague Bradley Wright took it onto himself to solve the issue (working with this guy does rock – believe me). His approach was to create a massive dropdown with all the information and then use JavaScript to chunk it up. Originally he tried class names on the different options to connect them until he asked me to take a peek and I liked the idea but advocated for optgroups instead (the lesser known select child element).

So, the markup for the non-JavaScript version is the following:



All we need now to turn this into connected select boxes is the folllowing:

  • Create a new select element
  • Loop through all optgroups and create a new select box for each and hide them
  • Loop through the options collection of each optgroup
  • Take the first option and add it to the new main select element
  • Move the other options to the select box connected with this optgroup
  • Apply an onchange handler that reads the selectedIndex value of the main select element and shows the select box with the same number, hiding the previous one
  • Apply the correct secondary name to the currently shown select box
  • Remove the original select box
  • Apply the name and ID of the original to the new main select box

Another option is of course to store the data in an object and re-populate the secondary select box every time the first is changed. However, I wanted to avoid that to speed things up.

Check out the example of this technique and tell me what you think.