[Javascript] make <input> field visible
Mike Dougherty
mdougherty at pbp.com
Wed Nov 2 10:44:07 CST 2005
You might also consider manipulating the object's class rather than individual style properties.
CSS:
div.selected { display: block; }
div.unselected { display: none; }
javascript:
if ( condition to select ) { obj.className = 'selected' } else { obj.className = 'unselected' }
If the customer/webmaster later decides they don't like the shifting of using "display", they
can change the CSS to use "Visibility" - Then when they don't like the ugly empty space, they can
rechange the CSS to visually indicate status using background color (for example)
You don't have to rewrite the javascript functionality to change the display. For me, this
means that I won't have to come back to the code months after I've moved on and put it out of my
head - just to support the whim of the marketing/web design folks.
note: you might want to be smarter about making the .className assignment/reassignment to prevent
collision of existing class(es) - I'll leave that as another question for the regexp gurus :)
alternate CSS:
div.selected { background-color: white; color: black; }
div.selected label { font-size: larger; }
div.selected input { font-size: larger; font-weight: bold; }
div.unselected { background-color: silver; color: gray; }
div.selected label { font-size: smaller; }
div.selected input { font-size: smaller; }
this illustrates that layout/display of the contained elements can be manipulated through the
container's className. Depending on the number of child elements, that could be dozens of lines
of javascript - vs. leaving the display control in the stylesheet (potentially for someone else,
or for future extensibility)
On Wed, 2 Nov 2005 15:41:04 +0100
"Michael Borchers" <borchers at tridem.de> wrote:
> i've got an input field that's supposed to be visible
> only when a certain onSelect happens.
> The onSelect event is no problem,
> but how to define the invisible input field?
>
> using a div layer with visibilty == true etc...?!
>
>
>
> __________________________________________________________
> This message was scanned by ATX
> 9:39:50 AM ET - 11/2/2005
More information about the Javascript
mailing list