[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