• Pingback: Cross-browser website building tips « Realworldz Blog()

  • omg this exact issue was killing me. I kept trying and trying to set Element.prototype.trim = function() { … } but it wouldn’t work (except in every other browser). I’m attempting to build my own framework and am starting to understand why this is so difficult.

  • Pingback: Creating custom methods to use with HTML DOM objects | keyongtech()

  • Not that I’m totally impressed, but this is more than I expected when I stumpled upon a link on Furl telling that the info is quite decent. Thanks.

  • Bob

    “After that, I’ve started writing the HTC file. It looked like:”

    It looked like what? After all that build up, you end with a run-on sentence and an empty space.

  • I’m sorry. An automatic update of the Geshi WP plugin screwed things up. It works now :p

  • Simon Uyttendaele

    Here is a much simpler workaround that will be sufficient in 99% of cases.
    It may as well be completed as required by your script :

  • kbern

    [NOTE: BEST SOLUTION YET IS AT BOTTOM OF THIS POST]

    That final solution doesn’t work in even close to 99% of the cases because:
    1. It relies on users doing all their element finding by using document’s “getElementById method, which you have replaced with a method that lets you add “Element”‘s prototyped methods to the found element. The problem is that elements can be searched for in many ways besides calling “getElementById”… e.g. walking the DOM, getElementByTag, etc., etc.
    2. Your “createElement” method tries to do the same filtering, but what if elements are created by cloning? Or calling “eval()” or myriad other ways.

  • kbern

    [woops, meant to put this at bottom of previous post]

    The best way I found to do this is to build off of the original “behaviors” proposal (because it catches every case) but to simplify it and speed it up.

    I started with the suggested approach, and it did work, but reading in the .htc file and binding the behavior for all my ~800 DOM elements slowed document load by a whopping 15 seconds or more.

    What I discovered, after some more googling, is that the .htc file is not needed at all. The “behavior” can be created as part of the CSS style, so for the example given here, one could simply do this:

    1. Implement the “if ( !window.Element ) Element = function() {};” stuff that the author did
    2. Create the “Element.prototype.isDescendantOf ” (for example) as the author did
    3. In your IE8-only .css file (or in HTML using the “if IE8” trick the author uses) do this:
    * { behavior: expression(this.isDescendantOf = function(){return Element.prototype.isDescendantOf .apply(this, arguments);})}

    Voila! That’s it!

  • kbern

    READ THIS:
    OK, final followup… it turns out that being able to set a behavior using the “expression” keyword is no longer supported in IE8, so the author’s proposed solution remains the best (though it *really* *really* slows down page load

  • This was originally posted in 2007, a lot have changed since then. Of course now it might not be the best solution out there, but it has served me well over the years…

  • anon

    I know this is older, but stumbled across it just now. I did a quick check and it seems like IE8 supports the window.Element object, so kbern’s final follow up may not be relevant, as IE8 may just work as other standards-compliant browsers work in this instance. I haven’t fully tried this out, but just something to look into.

  • kbern

    The issue here was never whether or not there was a “window.Element” object. The issue was how to add *behaviors* (methods) to all instances (and future instances) of “Element” objects and their subclasses. In Safari, Firefox, and Chrome, this is accomplished by modifying the the prototype of the “Element” class, e.g. Element.prototype.myNewMethod = function() {some code here};
    No version of IE (including IE8) allows you to *modify* the prototype of “Element”.
    This is very unfortunate especially since the author’s clever idea of using IE “behaviors” is, in practice (with any substantial number of elements) prohibitively slow (this is mentioned by the Dojo and JQuery guys as well).

  • Internet Explorer 8 is very good because it is as stable as Opera. I hate the previous versions of IE like IE6 because it hangs frequently. .

  • Carmine Dichristopher

    Interesting share man Thank you

  • For reasons unknown i’m ending up with a blank page once i try and post a comment,do you know the actual reason why its taking place?i’m utilizing oprea web-browser

  • aeneas

    why not use the inventors method directly, and ask the DOM a direct question instead of playing around with words such as: “isDescendantOf” instead of going strait to:

    and straightforwardly get its parent into the basket?!!

    You see, when ie was providing you the means to Fly accross the DOM, the bloody w3c was just starting to learn how to walk, – and still they stumble upon them blody irrelevant nodes and empty characters exposing you to all possible accidents of the fall.

    or even more elegant solution, see if:

    same as

    But this, this is overkill:

Advertisment ad adsense adlogger