How should I progressively enhance this content with JavaScript?

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

Answer 2

Normally, scripts to show/hide elements are pretty fast. The only reason I can think of why the first is slow is because the script is running long after the element is rendered. There is probably some expensive script running before you do the hide or some other sort of delay.

I think the solution is to make the hiding script the first part of the code that runs, if necessary, in a script block immediately after the dropdown is rendered.

Answer 3

I'm not, entirely, sure what you want to show/hide in the absence of JavaScript, however it's possible to use CSS to show and hide, so long as you're able to select that element in some way. For example, based on the following mark-up:

<form action="#" method="post">
    <fieldset>
        <label for="dateStart">Start date</label>
        <input type="text" name="dateStart" id="dateStart" />
    </fieldset>
</form>

You could show/hide the input with the following CSS:

label {
    color: #f90;
    cursor: pointer;
}
label:hover {
    text-decoration: underline;
}
label + input {
    display: inline-block; /* or 'display: none' and omit the following two lines */
    height: 0;
    border-width: 0;
}
label + input:focus {
    height: auto; /* or 'display: inline', and omit the following line */
    border-width: auto;
}

(This shows the dateStart input after clicking on the label (which is styled to resemble an a element, for consistency with UI-expectations). Clearly, without JavaScript, the YUI Calendar Widget can't be shown (since it's added/used with JS), but the basic date-entry field will be there, and accessible.

---

Edited, following testing (with Chromium 17/Ubuntu 11.04) which (despite previous successful testing on localhost) suggested that an input can't receive :focus until it's visible on the page, the following amended-CSS seems to resolve that problem:

label + input {
    display: none;
}
label:hover + input, /* <- added this selector */
label + input:focus {
    display: inline-block;
}​

JS Fiddle demo.