.eternal

I did not know that II

It’s been an interesting week-and-a-bit, and once again I have learned a whole bunch of new things. Probably the most interesting, from a technical perspective, was that Opera (version 9.23 on Windows XP certainly) runs JavaScript on a separate thread, not the UI thread like just every other browser out there. And by every other browser I mean those I tested with. This has some interesting side-effects when executing fairly long-running functions on a user-initiated event. The next two items involve the peculiarities of the DOM, scope and style sheets.

Long Processing and Opera

This little discovery came out of a discussion on a forum on how to prevent the user from clicking a link or button that launches an asynchronous process (AJAX request for example) more than once. The obvious way, of course, is to set a flag after the process is launched and test against it, or to remove the click event handler altogether. The flag can be reset (handler re-added) when the process is complete.

Somehow the discussion got derailed and we started talking about synchronous processes, such as long running JavaScript functions. I had always thought that JavaScript runs on the same thread as the UI in all browsers. This means that a JavaScript function that runs a little longer than usual will lock the browser up until it’s finished processing. The up side of this is that the user cannot click the button/link/whatever multiple times, since the UI is not responding anyway.

It seems, however, that Opera runs JavaScript on it’s own thread, so the UI remains responsive. This means that the user can click the button/link/whatever multiple times. This does not mean that JavaScript is multi-threaded in Opera, so the additional events are queued and run one after the other as one would expect. It can lead to some undesirable effects though.

You’ll want to have a copy of the Opera browser handy for this demonstration.

JavaScript and DOM Scope

There was a chap who was having problems with a button in a form. Essentially he had an input button that called a function. When the button was on its own all was fine and the function was called on click. When, however, the button was surrounded by form tags, it would throw an “Object does not support this property or method” error.

I noticed that the button id and function name were the same. Change the name of the function and the problem goes away. I figured that the browser creates additional global properties for form fields and hence the problem.

That is not the case, however. The problem is one of scope. When the button is outside of the form, it has no ancestor with a member with the same name as the function, but inside the form the form has properties for it’s fields, and hence the input is found first and the error is thrown.

The demonstration probably explains it better.

Enumerating CSS Rules

This came out of a discussion about enumerating CSS rules in the style sheet(s). Someone mentioned that it could not be done and so I took up the challenge. In the end, it can be done in all modern browsers, but not necessarily in a standard way.

Firefox 2, Opera 9 and Safari 3 (2 too, I believe, but have not confirmed) provide a way of enumerating styles in a cssRule, that is document.styleSheets[index].cssRules[index2].style has a length property which can be used to enumerate the styles.

Internet Explorer does not have this (IE also uses the non-standard rules instead of cssRules), but you are able to retrieve the cssText and parse it easily enough. IE converts all the rules and values to upper case, but a simple call to toLowerCase resolves this.

The only other problem I encountered was what appears to be a bug in Firefox. With compound style rules like padding, margin or border, Firefox screws up the styles. For example, if you have padding: 6px; all the other browsers will return values for padding-top, padding-left, padding-bottom and padding-right. Firefox (at least in this test) returns padding-top and padding-bottom with the correct values, and then padding-right-value, padding-right-ltr-source, padding-right-rtl-source, padding-left-value, padding-left-ltr-source and padding-left-rtl-source, all with undefined values. I included a simple work-around for this by hacking off the -value part of the two properties and using those and then ignoring all styles with undefined values.

The demonstration shows the script at work.