Hot to change height in div (automatic)?

[toplisek]

I have the following code to implement visible for List box country:


<select onChange="with (document.getElementById('statedb').style) { if(this.options[this.selectedIndex].value == 'USA') { visibility = 'visible' ; height='37px'; }else{visibility = 'hidden' ; height='0px'; } } " name="country" class="inputfield" onFocus="activatefield(this);" onBlur="deactivatefield(this)">


If I would like to hide state I have the following code:


<div name="state" id="statedb" style="visibility:hidden;height:0px" >

....

</div>

as I have also othe list boxes, need help how to automatic change height if user decides for country USA?

code can be example like:


<div class="row1"><span class="fieldtext">
Phone</span></div>
<div style="background-color:#FFFFFF;height:3px"></div>

<div>
<input name="phone" value="<?echo $phonedb?>" class="inputfield" maxlength="40" >
</div>

<div style="background-color:#FFFFFF;height:3px"></div>



Please help how to change height if user decides for USA? :)

[mwinter]

I have the following code to implement visible for List box country:


<select onChange="with (document.getElementById('statedb').style) { if(this.options[this.selectedIndex].value == 'USA') { visibility = 'visible' ; height='37px'; }else{visibility = 'hidden' ; height='0px'; } } " ...


Why set the height property? Set the display property to none to avoid having the invisible element take up space. Alternatively, if you feel some overwhelming need to use the visibility property, either set the height property to auto, or change the position property to take the element out of the flow.

Do feature test: don't assume that the getElementById method is supported, and don't assume that an element will have a style property. Move this code into a function, too:



function setStateVisibility(country) {
var state;

if (document.getElementById
&& (state = document.getElementById('statedb')) && state.style)
state.style.display = (country == 'USA') ? '' : 'none';
}



<select ... onchange="setStateVisibility(this.options[this.selectedIndex].value);">




<div name="state" id="statedb" style="visibility:hidden;height:0px">

A name attribute on a div element?

Don't initially hide the element using a direct CSS declaration. If the ability to show it via scripting isn't available then it can never be used. Instead, use scripting to hide it as the document loads.



<div class="row1">

This looks suspiciously like you're trying to emulate tables with div elements. Don't. It's semantically acceptable to use a table for most forms as there is a tabular relationship.



<span class="fieldtext">
Phone</span>

You seem to be looking for the label element.



<div style="background-color:#FFFFFF;height:3px"></div>

Use a bottom border on the preceding element, or a top border on the one that follows it.



<div style="background-color:#FFFFFF;height:3px"></div>

The same applies here.

Mike