mooforum

I've written a simple class that allows me to enhance elements with additional class names, styles, events and/or attributes whenever JavaScript is enabled. This is being done through a hidden comment within the tag element that I want enhanced. This way I can use artificial HTML attributes when I want to and I can more clearly support screen readers and website crawlers in a suitable fashion since they will always ignore the hidden comments.

Here's a link to the script:
http://www.tobymiller.com/js/mootools-1.2-plus.js

I am currently executing it like this:


I have found this useful for doing things like adding class names to elements that you only want to be applied if JavaScript is enabled. Turning display of certain elements on/off based on JavaScript being enabled. I've also found numerous other ways to use this method of element enhancement to provide a very manageable way to have one codebase that houses a flat html experience, a javascript enhanced experience and a flash enhanced experience for any page. Plus this way I am getting the benefit of a standardized coding format for enhancing elements across multiple projects.

Any thoughts on how I might go about eliminating this looping step so that this enhancement is a native behavior of all elements? I cannot figure out a way to do this without touching the core and that's really just not an option. If you have any other comments have at it. =)

I don't really understand how it works. What does it do exactly? it removes HTML comments inside the tags? Can you make your example more precise, with what the HTML should be, and, eventually, a demo. I'd really would like to know because it sounds really cool

But I already have an idea on how to avoid the looping thing. Maybe first of all, instead of generating a class instance for each element, the class itself should accept a selector instead of a single element. Then instead of extending Element, try extending Window or Document. So by doing window.enhanceElements() it would call the class enhanceElement("*"). (unless you pass a selector in which case it would override "*"). But yeah, more details about it, please, I'm sure it's a great concept

I always just apply a single class to the body element on domready.



Then in my css I can target both javascript on/off.


I can't see a need to apply a class to multiple elements.

Thanks horseweapon, I took your advice on using Window instead of Element. From that change I tightened up everything quite a bit. I also wrote an article to help explain what all this script enables you to do along with usage examples. Hopefully, this makes things a lot more clear.

http://www.tobymiller.com/articles/mootools_enhanced_elements/index.php

You can get very creative with this thing, but I have been trying to keep my actual usage simple since I haven't had time to run any performance tests yet. If you've got any ideas on ways to improve on this I'm all ears.

I don't really see a need for this : why not just use selectors and add all the stuff you want through JS ? You're complexifiying the code and making the HTML heavier, while clean selectors would perfectly do the trick, and would probably be much faster as well.
And if it's only styling you want, why not dynamically link to a CSS ?