Developer Notes: <label>
I've been working quite a bit on a variety of interface modules this week already and they're coming along quite nice (in Firefox). You see, the problem is that, IMNSHO, Safari and IE are equally useless :)
Truth be told, I'm sooo tired of going round in circles testing one thing here, testing another thing there, and then going back and fixing what just got broken. It's like sleeping on an ice cold night with a blanket that's just too small to cover you up all the way. Tug it a little in one direction, your toes are frozen. Tug it in the other direction and your nose is getting frostbitten.
Today I had another one of those wonderful episodes where I was indeed tugging. The culprit - the label tag. I have been working on a widget for our tagging needs in the system (see screenshot) and I had it working great in Firefox but no dice in IE and Safari. Why? Look at this code:
<label class="check" onclick="toggleCheck(this)"><input type="checkbox" /></label>
Looks simple enough. Now, note that the <input> is inside the label which should rightly NOT require that I specify who it's for. Works fine in Firefox. So I then made my effort to complete the regular setup for the <label>:
<label class="check" onclick="toggleCheck(this)" for="id"><input type="checkbox" id="id" /></label>
So, with this, I had IE working and not the Firefox. Why? Well IE will let you put an onclick on pretty much anything. So this was working just fine. Problem was that Firefox won't honor a click on a label since it forwards the click on to the input that it's targeting (seems reasonable). So here comes one of the stupidest hacks I can think of:
<label class="check" onclick="toggleCheck(this)" for="id"><input type="checkbox" id="id" onclick="toggleCheck(this.parentNode)" /></label>
Yup. I'm calling the function in BOTH places. Why? Well, the problem with IE is that if the checkbox is hidden, it won't accept the forwarded click. So, in IE, the onclick on the <label> is doing the work and in Firefox the one on the <input> is doing the work. I don't know which case is true for Safari.
Moral of the story. Don't let anyone tell you doing things the right way is ever easy ;) All the more reason to sympathize with us hard-working entrepreneurs that have limited resources and are trying to build things that work well for everyone.