JavaScript doesn't work in IE [SOLVED]

  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

I have a JavaScript that I wrote real quick and it works great in FireFox but not IE of course, like normal. Could anybody help me please fix it?

I have a select box:

Code: [ Select ]
<select name="registration_type" onChange="RegTypeDisplay();">
<option value="create">Create</option>
<option value="join">Join</option>
<option value="none" selected="selected">None</option>
</select>
  1. <select name="registration_type" onChange="RegTypeDisplay();">
  2. <option value="create">Create</option>
  3. <option value="join">Join</option>
  4. <option value="none" selected="selected">None</option>
  5. </select>


Then I have 2 table rows in a table of course...
Code: [ Select ]
<tr id="create_section" style="display: none; ">
<td>
blah blah blah
</td>
</tr>
<tr id="join_section" style="display: none; ">
<td>
blah blah blah
</td>
</tr>
  1. <tr id="create_section" style="display: none; ">
  2. <td>
  3. blah blah blah
  4. </td>
  5. </tr>
  6. <tr id="join_section" style="display: none; ">
  7. <td>
  8. blah blah blah
  9. </td>
  10. </tr>


Then the following JavaScript is either supposed to show neither, or 1 of the <tr>'s at a time. In IE, it doesn't display either of them.

Code: [ Select ]
<script type="text/javascript">
<!--
function RegTypeDisplay()
{
var id = 'create_section';
var create_section_obj = (document.getElementById) ? document.getElementById(id) : ((document.all) ? document.all[id] : ((document.layers) ? document.layers[id] : false));
var id = 'join_section';
var join_section_obj = (document.getElementById) ? document.getElementById(id) : ((document.all) ? document.all[id] : ((document.layers) ? document.layers[id] : false));

var select_value = document.register_form.registration_type.value;

switch(select_value)
{
case "create":
    join_section_obj.style.display = 'none';
    create_section_obj.style.display = 'table-row';
break;
case "join":
    create_section_obj.style.display = 'none';
    join_section_obj.style.display = 'table-row';
break;
case "none":
default:
    create_section_obj.style.display = 'none';
    join_section_obj.style.display = 'none';
break;
}
}
// -->
</script>
  1. <script type="text/javascript">
  2. <!--
  3. function RegTypeDisplay()
  4. {
  5. var id = 'create_section';
  6. var create_section_obj = (document.getElementById) ? document.getElementById(id) : ((document.all) ? document.all[id] : ((document.layers) ? document.layers[id] : false));
  7. var id = 'join_section';
  8. var join_section_obj = (document.getElementById) ? document.getElementById(id) : ((document.all) ? document.all[id] : ((document.layers) ? document.layers[id] : false));
  9. var select_value = document.register_form.registration_type.value;
  10. switch(select_value)
  11. {
  12. case "create":
  13.     join_section_obj.style.display = 'none';
  14.     create_section_obj.style.display = 'table-row';
  15. break;
  16. case "join":
  17.     create_section_obj.style.display = 'none';
  18.     join_section_obj.style.display = 'table-row';
  19. break;
  20. case "none":
  21. default:
  22.     create_section_obj.style.display = 'none';
  23.     join_section_obj.style.display = 'none';
  24. break;
  25. }
  26. }
  27. // -->
  28. </script>


If I do style.display = 'block' instead of 'table-row", it works in IE, but then when the <tr> is hidden, it just goes invisible but the space it was taking remains.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • The_torst
  • Graduate
  • Graduate
  • The_torst
  • Posts: 216
  • Loc: Denmark

Post 3+ Months Ago

You shouldn't use style="display...", but style="visibility: hidden;" and style="visibility: visible;"

The switch in your js section would look like this:

Code: [ Select ]
     switch(select_value)
     {
         case "create":
          join_section_obj.style.visibility = 'hidden';
          create_section_obj.style.visibility = 'visible';
         break;
         case "join":
          create_section_obj.style.visibility = 'hidden';
          join_section_obj.style.visibility = 'visible';
         break;
         case "none":
         default:
          create_section_obj.style.visibility = 'hidden';
          join_section_obj.style.visibility = 'hidden';
         break;
     }
</code>

and the table rows would be described like this:

<code>
    <tr id="create_section" style="visibility: hidden;">
     <td>
     create blah blah blah
     </td>
    </tr>
    <tr id="join_section" style="visibility: hidden;">
     <td>
     join blah blah blah
     </td>
    </tr>
  1.      switch(select_value)
  2.      {
  3.          case "create":
  4.           join_section_obj.style.visibility = 'hidden';
  5.           create_section_obj.style.visibility = 'visible';
  6.          break;
  7.          case "join":
  8.           create_section_obj.style.visibility = 'hidden';
  9.           join_section_obj.style.visibility = 'visible';
  10.          break;
  11.          case "none":
  12.          default:
  13.           create_section_obj.style.visibility = 'hidden';
  14.           join_section_obj.style.visibility = 'hidden';
  15.          break;
  16.      }
  17. </code>
  18. and the table rows would be described like this:
  19. <code>
  20.     <tr id="create_section" style="visibility: hidden;">
  21.      <td>
  22.      create blah blah blah
  23.      </td>
  24.     </tr>
  25.     <tr id="join_section" style="visibility: hidden;">
  26.      <td>
  27.      join blah blah blah
  28.      </td>
  29.     </tr>
  • The_torst
  • Graduate
  • Graduate
  • The_torst
  • Posts: 216
  • Loc: Denmark

Post 3+ Months Ago

This will work in all browsers by the way.. :D
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

No, I'm not trying to leave the layout intact, I'm trying to collapse the layout around the element. Visibility does not do this, using display should work perfectly fine in IE, it normally does on the other 20 scripts on my site that have it
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Have you tried setting display to nothing ( "" ) instead of table-row or block ?
That should kick it back to the display originally used to render the element when the page loaded.
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

OMG shoot myself in the head, so that's why a few of my other scripts had that. I was thinking of doing it too but didn't. Thanks again man, works.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 62 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.