Cross Browser Compatibility – hidden divs

@bxgirlOct 31.2007

I have a div that’s initially hidden and appears based on an item selected from a dropdown. In IE it works fine but in Firefox, item below the div are not pushed down and results in overlapping items. How can this be corrected for Firefox?

Here’s the code:

</script>
</head>

<body>
<table width=”600″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td><img src=”campimage/237/header.jpg” width=”600″ height=”439″ /></td>
</tr>
<tr>
<td background=”campimage/237/body.gif”><table width=”90%” border=”0″ align=”center” cellpadding=”2″ cellspacing=”2″ style=”font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal;”>
<tr>
<td width=”47%”> </td>
<td width=”44%”> </td>
</tr>
<tr>
<td>Select Loan Type:<br/>
<select name=”field1″ onchange=”divshow237(this.value)” id=’field1_Off237′ tabindex=”1″>
<option value = “” selected=”selected”>Type of Loan</option>
<option value=”PL”>PLUS 1</option>
<option value=”GB”>PLUS 2</option>
<option value=”SG”>PLUS 3</option>
<option value=”CO”>PLUS 4</option>
<option value=”AL”>Alternative</option>
</select> </td>
<td> </td>
</tr>
<tr>
<td>Student’s First Name<br />
<input name=”firstname” style=”width:200px” value=”<|>firstname<|>” maxlength=”49″ tabindex=”13″/> </td>
<td>Studen’ts Last Name<br />
<input name=”lastname” style=”width:200px” value=”<|>lastname<|>” maxlength=”49″ tabindex=”13″/> </td>
</tr>
<tr>
<td>Student’s SSN<br />
<input name=”field3″ style=”width:200px” maxlength=”49″ tabindex=”14″/> </td>
<td> </td>
</tr>
<tr>
<td>Studen’ts Email<br />
<input name=”email” style=”width:200px” value=”<|>email<|>” maxlength=”49″ tabindex=”18″/> </td>
<td> </td>
</tr>
<tr>
<td colspan=”2″><div id=”shodiv237″ style=”height:1px;”>
</div> </td>
</tr>
<tr>
<td colspan=”2″ align=”center”><input type=”image” name=”submit1″ src=”campimage/237/accept.jpg” width=”181″ height=”31″ /></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src=”campimage/237/footer.jpg” width=”600″ height=”19″ /></td>
</tr>
</table>
<div id=”PL” style=”visibility:hidden; height:1px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal;” >
<table width=”501″ border=”0″ cellpadding=”2″ cellspacing=”2″>
<tr>
<td width=”213″>Parent’s First Name<br />
<input name=”field5″ style=”width:200px” value=”<|>firstname<|>” maxlength=”49″ tabindex=”4″/>
</td>
<td width=”58″>MI<br />
<input name=”field6″ type=”text” maxlength=”3″ tabindex=”5″ style=”width:50px;”/>
</td>
<td width=”200″>Parent’s Last Name<br />
<input name=”field7″ style=”width:200px” value=”<|>lastname<|>” maxlength=”49″ tabindex=”6″ />
</td>
</tr>
<tr>
<td>Parent’s SSN<br />
<input name=”field8″ style=”width:200px” maxlength=”49″ tabindex=”7″/></td>
<td width=”58″> </td>
<td>Date of birth<br />
<select name=”field9″ tabindex=”8″>
<option value=”” selected=”selected”>MM</option>
<option value=”01″>01</option>
<option value=”02″>02</option>
<option value=”03″>03</option>
<option value=”04″>04</option>
<option value=”05″>05</option>
<option value=”06″>06</option>
<option value=”07″>07</option>
<option value=”08″>08</option>
<option value=”09″>09</option>
<option value=”10″>10</option>
<option value=”11″>11</option>
<option value=”12″>12</option>
</select>
/
<select name=”fielda” tabindex=”9″>
<option value=”” selected=”selected”>DD</option>
<option value=”01″>01</option>
<option value=”02″>02</option>
<option value=”03″>03</option>
<option value=”04″>04</option>
<option value=”05″>05</option>
<option value=”06″>06</option>
<option value=”07″>07</option>
<option value=”08″>08</option>
<option value=”09″>09</option>
<option value=”10″>10</option>
<option value=”11″>11</option>
<option value=”12″>12</option>
<option value=”13″>13</option>
<option value=”14″>14</option>
<option value=”15″>15</option>
<option value=”16″>16</option>
<option value=”17″>17</option>
<option value=”18″>18</option>
<option value=”19″>19</option>
<option value=”20″>20</option>
<option value=”21″>21</option>
<option value=”22″>22</option>
<option value=”23″>23</option>
<option value=”24″>24</option>
<option value=”25″>25</option>
<option value=”26″>26</option>
<option value=”27″>27</option>
<option value=”28″>28</option>
<option value=”29″>29</option>
<option value=”30″>30</option>
<option value=”31″>31</option>
</select>
/
<select name=”fieldb” tabindex=”10″>
<option value=”” selected=”selected”>YYYY</option>
<option value=”1928″>1928</option>
<option value=”1929″>1929</option>
<option value=”1930″>1930</option>
<option value=”1931″>1931</option>
<option value=”1932″>1932</option>
<option value=”1933″>1933</option>
<option value=”1934″>1934</option>
<option value=”1935″>1935</option>
<option value=”1936″>1936</option>
<option value=”1937″>1937</option>
<option value=”1938″>1938</option>
<option value=”1939″>1939</option>
<option value=”1940″>1940</option>
<option value=”1941″>1941</option>
<option value=”1942″>1942</option>
<option value=”1943″>1943</option>
<option value=”1944″>1944</option>
<option value=”1945″>1945</option>
<option value=”1946″>1946</option>
<option value=”1947″>1947</option>
<option value=”1948″>1948</option>
<option value=”1949″>1949</option>
<option value=”1950″>1950</option>
<option value=”1951″>1951</option>
<option value=”1952″>1952</option>
<option value=”1953″>1953</option>
<option value=”1954″>1954</option>
<option value=”1955″>1955</option>
<option value=”1956″>1956</option>
<option value=”1957″>1957</option>
<option value=”1958″>1958</option>
<option value=”1959″>1959</option>
<option value=”1960″>1960</option>
<option value=”1961″>1961</option>
<option value=”1962″>1962</option>
<option value=”1963″>1963</option>
<option value=”1964″>1964</option>
<option value=”1965″>1965</option>
<option value=”1966″>1966</option>
<option value=”1967″>1967</option>
<option value=”1968″>1968</option>
<option value=”1969″>1969</option>
<option value=”1970″>1970</option>
<option value=”1971″>1971</option>
<option value=”1972″>1972</option>
<option value=”1973″>1973</option>
<option value=”1974″>1974</option>
<option value=”1975″>1975</option>
<option value=”1976″>1976</option>
<option value=”1977″>1977</option>
<option value=”1978″>1978</option>
<option value=”1979″>1979</option>
<option value=”1980″>1980</option>
<option value=”1981″>1981</option>
<option value=”1982″>1982</option>
<option value=”1983″>1983</option>
<option value=”1984″>1984</option>
<option value=”1985″>1985</option>
<option value=”1986″>1986</option>
<option value=”1987″>1987</option>
<option value=”1988″>1988</option>
</select>
</td>
</tr>
<tr>
<td>Parent’s Email<br />
<input name=”fieldc” style=”width:200px” value=”<|>email<|>” maxlength=”49″ tabindex=”11″/></td>
</tr>
</table>
</div>
</body>
</html>

to post a comment

JavaScript

10 Comments(s) _↴

@scragarOct 31.2007 — #rather than messing with the height of the div(which I think is the cause of your problem) try using display to either block(the default) or none(hidden). this will save you needing to adjust size or contents.

@bxgirlauthorNov 01.2007 — #I'm not messing with the height if the condition is met.

Can you provide an example of what your're suggesting?

@TJ111Nov 01.2007 — #He means it would be much simpler to do this:

[code=php]
 function divshow237(divid)
 {
 if ( divid=="PL")
 {
 document.getElementById("shodiv237").style.display = "block";
 document.getElementById("shodiv237").innerHTML=document.getElementById(divid).innerHTML;
 }
 else
 {
 document.getElementById("shodiv237").style.display = "none";
 document.getElementById("shodiv237").innerHTML = "";
 }
 }[/code]

Then instead of:

[code=html]
 <div id="shodiv237" style="height:1px;">
 <!--use this:  -->
 <div id="shodiv237" style="display:none">
 [/code]

Also your table based layout could be causing some of the issues as well, as table cells containing a <div> is not valid.

@bxgirlauthorNov 01.2007 — #Thanks Manly man. That worked like a charm. I am sort of new at JS, but not to programming. With regards to using a div in table cells, would you attempt this using pure CSS?

@TJ111Nov 01.2007 — #Oh absolutely. The only thing I ever use tables for is, well, tables. Separating content from layout makes making changes to both extremely easy. If, for example, you wanted to change the size of all the <input>s, it would only require a change to one line of code, instead of going line by line to change each element. If you wanted to dynamically create content with javascript or ajax, you wouldn't have to create <tr><td>, styles, etc etc, only the content you need. And when you add it, it'll be where you defined it and styled how you defined it in the css.

If your familiar to programming, its like the equivalent of using inline/global functions and variables compared to using classes with abstraction to keep all your functionality in one spot.

@bxgirlauthorNov 01.2007 — #Hello Manly man

If you can direct me to some resources on the web that would be great with some examples of what you described that would be great.

I've made sort of a career change from programming to the web world. It's more satisfying on a creative level. Just started a new job and they've done a lot with tables. Once I'm settle, I'll suggest implementing css. Here's a last one for today, I promise ?.

Dynamic dropdown. Works well in IE but not in Firefox.

Here's the JS as well as the HTML code...ignore the tables for now.

<script type="text/javascript">

var mapping237 = new Array

("NV","21077","Truckee Meadows Community College - Washoe Wine and Cheese",

"NV","21077","Truckee Meadows Community College - Wildcreek Golf Course",

"NV","21077","Truckee Meadows Community College - YMCA",

"NV","2568","University of Nevada - Reno",

"NV","20988","University of Phoenix - Henderson",

"NV","20988","University of Phoenix - Las Vegas",

"NY","2666","Adelphi University",

"NY","2666","Adelphi University - Borough Park",

"NY","2666","Adelphi University - Hudson Valley",

"NY","2666","Adelphi University - Huntington Center",

"NY","2666","Adelphi University - Manhattan Center",

"NY","2666","Adelphi University - New Seminary",

"NY","2666","Adelphi University - Rockland County",

"NY","2860","Adirondack Community College ",

"NY","2860","Adirondack Community College - Saratoga County Extension Center",

"NY","2885","Albany College of Pharmacy")

function removeAllOptions237(selectbox){

var count;

var length = selectbox.options.length;

for (count = 1 ; count < length; count++)

selectbox.remove(1);

}

function NarrowDownSchools237()

{

var selObject = document.getElementById("field2_Off237");
  var selIndex = selObject.selectedIndex;
  var selValue = selObject.options[selIndex].value;
  var length = mapping237.length / 3;
  var optn;
  var chk = document.getElementById("fieldl_Off237");
  removeAllOptions237(chk)
 
 
  for (var i = 0; i < length; i++)
  {
   if (selValue == mapping237[i * 3])
   {
   optn = document.createElement("OPTION");
   optn.value = mapping237[i * 3 + 1];
   optn.text = mapping237[i * 3 + 2];
   chk.add(optn); 
   }
  }

}

</script>

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="2" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal;">

<tr>

<td width="47%">State in which Student will attend college<br />

<select name="field2" style="width:200px" tabindex="2" onchange="NarrowDownSchools237()" id="field2_Off237">

<option value="" selected="selected">-- Select Here --</option>

<option value="NV">Nevada</option>

<option value="NY">New York</option>

</select></td>

</tr>

<tr>

<td colspan="2">Search Dropdown for participating schools:

<select name="fieldl" style="width:500px" tabindex="3" id="fieldl_Off237">

<option value="" selected="selected">Please Select</option>

</select></td>

</tr>

</table>

@TJ111Nov 01.2007 — #Hmm, very unique way to write that. I've never seen the remove() and add() functions before for manipulating the DOM. Below is a more W3C friendly version of your functions.

[code=php]
 function removeAllOptions237(selectbox){
 if (!selectbox.hasChildNodes()) {
 return;
 }
 while (selectbox.hasChildNodes())
 selectbox.removeChild(selectbox.firstChild);
 }
 
 function NarrowDownSchools237()
 {
 var selObject = document.getElementById("field2_Off237");
 var selIndex = selObject.selectedIndex;
 var selValue = selObject.options[selIndex].value;
 var length = mapping237.length / 3;
 var optn;
 var chk = document.getElementById("fieldl_Off237");
 removeAllOptions237(chk);
 
 
  for (var i = 0; i < length; i++)
  {
   if (selValue == mapping237[i * 3])
   {
   optn = new Option(mapping237[i * 3 + 2], mapping237[i * 3 + 1]);
   chk.options[chk.options.length] = optn;
   }
  }
 }[/code]

@bxgirlauthorNov 02.2007 — #That worked great. I'm curious about:

optn = new Option(mapping237[i * 3 + 2], mapping237[i * 3 + 1]);

chk.options[chk.options.length] = optn;

You seem to be declaring an option object. I can make out what it's doing however I'd like to know the syntax and couldn't find any documentation on the syntax in w3schools site.

@scragarNov 02.2007 — #new Option(text, value)

I think.

@TJ111Nov 05.2007 — #Scrager is correct. When creating an otpion object, you pass the inner text and the value, then append it using the length of the options in the element, since length is always 1 more than the highest array index, if that makes sense.

Also in #JavaScript _↴

What do these scripts do?There is a twitch in one of my movements for my menu.Same as billing code - rookie programmer

Success!

Help @bxgirl spread the word by sharing this article on Twitter...

Tweet This

Cross Browser Compatibility – hidden divs

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Cross Browser Compatibility – hidden divs

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴