Gracefully degrade with Prototype. The onDomReady event
Following up on the previous post, we saw how important is to take care about our AJAX scripts to degrade gracefully. Today we will see how to do it in the practice using prototype.
We will take as example the e24Writer described on previous posts. The e24Writer gradually display a group of elements using a chained opacity transition, for that reason we need that those elements be hidden before the event run. For example if we going to animate the text “AJAX”, in the way that appear letter-by-letter. If we initially hide that text using the CSS display property setting it to none, then if due to any of the reasons described on the last post we don’t have javascript then the web won’t degrade gracefully because the text “AJAX” never will appear.
But if we initially leave the text visible then we will need to hide it before the page renders, to accomplish this we need an event that fires when we have total access to the DOM and before the page renders. That event is the “domReady”.
Some AJAX libraries like Mootools, YUI o ExtJs natively have the “domReady”event, Prototype don’t. But if we look on Google by the term “prototype domReady” then we will find some extensions like this one
Event.onDOMReady(function() {
$('text').hide();
oe24Writer = new e24Writer( 'text', { autostart: true, duration: 1.0, interval: 0.3 });
});In this way the text can be read even when the javascript is disabled.