A Note To Control Vendors: Upgrading Controls Should Be Easy

Published: 1/26/2005 | Updated: 1/26/2005 | Discuss

The last 3 days—and I kid you not—we’ve been trying to upgrade a third party HTML rich edit control with a newer one. I was quite surprised by the amount of tweaking we had to do and the time we spent tweaking things into place.

Puzzle #1

Every rich edit control has “toolbars” full of “controls” which, generally, are images with fancy mouseover effects. This particular vendor (I won’t point fingers) chose <span>s for toolbars. Naturally, a “toolbar” <span> has images in it, each representing various commands it can perform.

It all worked nice on their demo site, but in our product toolbars looked jagged. After much hair pulling we narrowed it down to one line:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now, if you’ve read Eric Meyer’s Picking a Rendering Mode, you know that any known XHTML DOCTYPE has IE and Mozilla work in Strict mode (see What’s In Your DOCTYPE? if you are not familiar with this notion).

If you try to style a <span>, an inline element, with padding, margins and background, you’re asking for trouble. More so in older browsers. If you put images in a <span> and style those too, you’re asking for even more trouble. The vendor never tested their control with DOCTYPEs which is why samples always worked in Quirks mode, but in Strict it fell apart.

Puzzle #2

Another very puzzling issue was with iframes. The vendor chose to reference an iframe as follows:

var someVar = eval (anotherControl.id);

Now, this is supposed to resolve into an object. Again, it works fine and dandy in Quirks mode, but in Strict mode Mozilla has eval() fail completely! I still don’t get why it is so.

Simply turning code into this worked:

var someVar = document.getElementById (anotherControl.id);

Even though eval() has been around since JavaScript 1.0, availability of getElementById() is not a concern to us because we discontinued support of IE 5.0/Win.

Conclusion

I encourage control vendors to design for Strict mode and then tweak controls to work with older browsers. Doing the other way around can be painful. Also, failure to take DOCTYPE into account wastes too much of our time and makes us say harsh words at your products. :)

Comments

1 Mark Wubben | Thursday, January 27, 2005 at 8:55 AM

The good news: this can be worked around. The better news: this isn't a bug.

In DOM0 browsers (like IE4 and of course everything which followed it) you can reference to elements in all sorts of ways... I'm not really sure how many, but this isn't relevant to your problem anyway. Thing is, in those browsers `window.myFrame == window.frames.myFrame` (or however you reference frames, don't think it's that way though...). Appearantly this is not the case in Mozilla in strict mode, methinks because it's not in the standards. As you probably know `eval` parses the JavaScript string in global scope, thus, if you invoke `eval("myFrame")` you'll get `window.myFrame`, which doesn't exist.

A possible workaround:

eval = (function(){
var doEval = eval;
return function(sCode){
var output = doEval(sCode);
if(typeof output == "undefined"){
output = document.getElementById(sCode);
};
return output;
};
};)();

(Please not that I haven't tested this code.)

Hope that helps :)

2 Milan Negovan | Thursday, January 27, 2005 at 9:11 AM

Hmmm... Is it a scoping issue then? Btw, I read in my handy-dandy "JavaScript: The Definitive Guide" last night that the spec prohibits overwrites on the eval() function. I'll test the code your posted, though. Thanks, man!

Emails and Notifications

Would you like to be notified when somebody responds to this post? Would you like to have these comments emailed to you?

Submit your comment

Please enter only text since all HTML tags except hyperlinks will be stripped. Hyperlinks will become live links. Any comments with flaming or offensive language will be deleted. Be courteous to other posters. Thank you.

Your name (required):

Your email (optional):

Your site's URL (optional):

Type in the number above:

Comment (required):

Remember me