How should I gradually improve this content using JavaScript?
At the heart of this problem is that I am doing a computational project that includes some dropdown boxes for input and text input where the user can enter a date.
I used YUI to enhance the form, so a YUI calendar widget is used to enter the calendar , and the dropdown is converted to a horizontal list of inputs where the user only needs to click once to select any input, not two clicks with the dropdown (hope this is 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 principles of progressive improvement. However, I am struggling to ensure that non-JavaScript users can view the dropdown / text input on the specified page.
This is not because I don't necessarily know how, but the two methods I have tried seem to be unsatisfactory.
Method 1 . I tried using YUI to hide the textbox and dropdown, it seemed like a perfect solution, however, when loading the page, there was especially noticeable lag (especially the first time), the textbox and dropdown being visible even for a second. I have included a script for this just before the body tag, is there any way I can run it on load using YUI? Will it help?
Method 2 . Use the noscript tag. However I hate doing this as while this is a simple solution I have read various bad things about the noscript tag.
Is there a way to make the method one? Or is there a better way to do this that I have yet to face?
source to share
Yui has a domready event (this happens a little earlier than 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);
}
);
Gotta do what you're looking for
source to share
Usually scripts to show / hide elements are pretty fast. The only reason I can think of why the former is slow is because the script runs long after the element is rendered. There are probably a few expensive script out there before you hide or some other delay.
I think the solution is to hide the script the first piece of code, which is executed, if necessary, in the script block immediately after the dropdown menu.
source to share
I'm not really sure what you want to show / hide when there is no JavaScript, however CSS can be used to show and hide if you can select that element in some way. For example, based on the following inscription:
<form action="#" method="post">
<fieldset>
<label for="dateStart">Start date</label>
<input type="text" name="dateStart" id="dateStart" />
</fieldset>
</form>
You can show / hide 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 displays the input dateStart
after clicking on label
(which has an element-like styling a
for consistency with UI expectations). Obviously without JavaScript, the YUI Calendar Widget cannot (since it's added / used with JS), but the main date input field would be affordable and affordable.
Edited , after testing (with Chromium 17 / Ubuntu 11.04), which (despite previous successful testing on localhost) suggested that it input
could not get :focus
until it was visible on the page, the following CSS fixes seem to fix this issue:
label + input {
display: none;
}
label:hover + input, /* <- added this selector */
label + input:focus {
display: inline-block;
}
source to share