Riparian Posted July 7, 2011 Share Posted July 7, 2011 First I have little knowledge of JS. The code below is a very small part of a large program and simply displays some options when the header is clicked and closes when double clicked. Problem On loading (including going to the next display page ) Internet explorer renders the whole page and shows ALL of the options and only once the whole page is loaded it then hides all of the options and only displays the headers... not at all desireable. Is there a way to hide elements before they are displayed ? Very little hair left so any help is greatly appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function HideGender(){ var table = document.getElementById("GENDER"); table.style.display = 'none'; } function DisplayGender(){ var row = document.getElementById("GENDER"); row.style.display = ''; } </script> </head> <body onload="HideGender()"> <table width="180" border="0" cellspacing="0" bgcolor="#FFFFFF" > <form name="options" method="get" id="shapes" style="display: inline; margin: 0;" > <tr> <td><a href="#"onclick="DisplayGender()" ondblclick="HideGender()" rel="nofollow" ><strong class="MaroonText"><em>Gender</em></strong></a></td> </tr> <tr id="GENDER" > <td height="40"><fieldset class="Blu_text"> <div align="left" > <!-- Male --> <input name="Gender_Option" id="go1"type="radio" value="1" onclick="form.submit()"/> <label for="go1">Men's </label> <br /> <!-- Female --> <input name="Gender_Option" id="go2" type="radio" value="2" onclick="form.submit()"/> <label for="go2">Women's </label> <br /> <!-- Kids --> <input name="Gender_Option" id="go3"type="radio" value="3" onclick="form.submit()"/> <label for="go3">Kids </label> <br /> <!-- All genders--> <input name="Gender_Option" id="go4" type="radio" value="4" <?php if($_SESSION[Gender_Option] == "4" ){echo 'checked';}else{echo '';}?> onclick="form.submit()"/> <label for="go4">Show All </label> </div> </fieldset></td> </tr> </form> </table> </body> Link to comment https://forums.phpfreaks.com/topic/241374-help-with-very-basic-js-and-ie/ Share on other sites More sharing options...
.josh Posted July 7, 2011 Share Posted July 7, 2011 Use css to hide them. Put this in your head tag: <style type='text/css'> #GENDER { visibility : hidden; } </style> Link to comment https://forums.phpfreaks.com/topic/241374-help-with-very-basic-js-and-ie/#findComment-1239862 Share on other sites More sharing options...
Riparian Posted July 7, 2011 Author Share Posted July 7, 2011 Thanks for the reply but unless I am missing something this certainly hides everything with the id GENDER - permanently Link to comment https://forums.phpfreaks.com/topic/241374-help-with-very-basic-js-and-ie/#findComment-1239863 Share on other sites More sharing options...
.josh Posted July 7, 2011 Share Posted July 7, 2011 it hides it until you unhide it with your js onclick later. To which you need to use the correct value - "block" or "inline" not "" Link to comment https://forums.phpfreaks.com/topic/241374-help-with-very-basic-js-and-ie/#findComment-1239865 Share on other sites More sharing options...
Riparian Posted July 7, 2011 Author Share Posted July 7, 2011 I certainly appreciate the help , Cheers, using either block or inline in row.style.display = 'block'; is not displaying the text inside the row. The row is opening but the contents are not visible ? Link to comment https://forums.phpfreaks.com/topic/241374-help-with-very-basic-js-and-ie/#findComment-1239868 Share on other sites More sharing options...
.josh Posted July 8, 2011 Share Posted July 8, 2011 oops sorry..I was mixing visibility and display. <head> <style type='text/css'> #GENDER { display : none; } </style> <script type="text/javascript"> function HideGender(){ var table = document.getElementById("GENDER"); table.style.display = 'none'; } function DisplayGender(){ var row = document.getElementById("GENDER"); row.style.display = 'inline'; // or 'block' depending on the rest of your layout/preference } </script> </head> Link to comment https://forums.phpfreaks.com/topic/241374-help-with-very-basic-js-and-ie/#findComment-1239876 Share on other sites More sharing options...
Riparian Posted July 8, 2011 Author Share Posted July 8, 2011 Fabulous... thanks heaps !!!!! Works Perfectly Cheers Link to comment https://forums.phpfreaks.com/topic/241374-help-with-very-basic-js-and-ie/#findComment-1239880 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.