Question

The background to this problem is that I’m doing a computing project which involves Some drop down boxes for input, and a text input where the user can input a date.

I’ve used YUI to enhance the form, so the calendar input uses the YUI calendar widget and the drop down list is converted into a horizontal list of inputs where the user only has to click once to select any input as opposed to two clicks with the drop down box (hope that makes sense, not sure how to explain it clearly)

The problem is, that in the design section of my project I stated that I would follow the progressive enhancement principles. I am struggling however to ensure that users without JavaScript are able to view the drop down box / text input on said page.

This is not because I do not necessarily know how, but the two methods I’ve tried seem unsatisfactory.

Method 1 – I tried using YUI to hide the text box and drop down list, this seemed like the ideal solution however there was quite a noticeable lag when loading the page (especially for the first time), the text box and drop down list where visible for at least a second. I included the script for this just before the end of the body tag, is there any way that I can run it onload with YUI? Would that help?

Method 2 – Use the noscript tag . . . however I am loathed to do this as while it would be a simple solution, I have read various bad things about the noscript tag.

Is there a way of making method one work? Or is there a better way of doing this that I am yet to encounter?

Answer 1

Yui has the domready event (that occurs a bit before onload)

http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_domready

function bootstrap(ev) {
    alert("This is the code to launch on domready");
}

YUI().use(
    "event", 
    function (Y) {
        Y.on("domready", bootstrap);  
    }
);

Should do what you are looking for