[Javascript] To DOM or not -- calendar popup

Wed Mar 29 13:29:11 CST 2006

At 10:58 AM 3/29/2006, Bill Moseley wrote:
>Ok, so I have a form with a text input field that holds date strings.
>
>Next to the field I have an image of a calendar which runs a
>javascript popup.  That should not display if javascript is not
>available.
>
>So, do I:
>
>1) Wrap the calendar image and link in a <div style="display: none">
>and enable it in a later script block?
>
>2) or in the script search for the input field and then append the
><img>  to the field's parent node list?[1]

My personal preference would be to a) include the calendar image/link 
in the markup, b) suppress it with display: none, and c) change its 
display to block with javascript by changing a className in the body 
or another parent element:

HTML:
         <body class="">
                 <div id="calendarlink">
         ...

CSS:
         #calendarlink
         {
                 display: none;
         }
         body.javascript #calendarlink
         {
                 display: block;
         }

JS:
         document.body.className += " javascript";

The potential vulnerability of this method arises when a browser 
supports neither CSS nor javascript, because the calendar link will 
show up but scripting won't be enabled.  Depending on how you write 
the calendar widget, however, this need not be a problem.  Imagine 
that your calendar link brings up a calendar regardless: people 
without javascript can simply consult the calendar and return to the 
previous page to enter the dates they've looked up, while people with 
javascript can pick from the calendar and have those dates entered in 
the previous page automatically.  Sounds like win-win: you don't have 
to suppress the calendar from folks without scripting.

Paul 