spoonraker Posted September 28, 2007 Share Posted September 28, 2007 Well I have a website where I need certain sections of the website to be invisible/visible at certain times.Here is one small portion of the site that needs to be hidden... <tr id="welcome9"> <td width="2%" valign="middle" id="welcome10"><img src="/Images/Glowtri-on-white-2.gif" width="22" height="22" border="0"/></td> <td width="98%" valign="middle" id="welcome11"><b><font size="3"><a href="#letter"> Welcome Letter For <%=aff.getFirstname() %></a> </font></b></td> </tr> Basically I have a couple javascript functions... function hideCompleteWelcomeLetter(){ document.getElementById("welcome1").style.display="none"; document.getElementById("welcome2").style.display="none"; document.getElementById("welcome3").style.display="none"; document.getElementById("welcome4").style.display="none"; document.getElementById("welcome5").style.display="none"; document.getElementById("welcome6").style.display="none"; document.getElementById("welcome7").style.display="none"; document.getElementById("welcome8").style.display="none"; document.getElementById("welcome9").style.display="none"; document.getElementById("welcome10").style.display="none"; document.getElementById("welcome11").style.display="none"; document.getElementById("welcome12").style.display="none"; document.getElementById("welcome13").style.display="none";}function hidePartialWelcomeLetter(){ document.getElementById("welcome1").style.display="none"; document.getElementById("welcome2").style.display="none"; document.getElementById("welcome3").style.display="none"; document.getElementById("welcome4").style.display="none"; document.getElementById("welcome5").style.display="none"; document.getElementById("welcome6").style.display="none"; document.getElementById("welcome7").style.display="none"; document.getElementById("welcome8").style.display="none"; document.getElementById("welcome9").style.display="none"; document.getElementById("welcome10").style.display="none"; document.getElementById("welcome11").style.display="none"; document.getElementById("welcome12").style.display="block"; document.getElementById("welcome13").style.display="block";}function displayWelcomeLetter(){ document.getElementById("welcome1").style.display="block"; document.getElementById("welcome2").style.display="block"; document.getElementById("welcome3").style.display="block"; document.getElementById("welcome4").style.display="block"; document.getElementById("welcome5").style.display="block"; document.getElementById("welcome6").style.display="block"; document.getElementById("welcome7").style.display="block"; document.getElementById("welcome8").style.display="block"; document.getElementById("welcome9").style.display="block"; document.getElementById("welcome10").style.display="block"; document.getElementById("welcome11").style.display="block"; document.getElementById("welcome12").style.display="block"; document.getElementById("welcome13").style.display="block";} Well the do hide and unhide the content, but on everything except IE7 weird things happens. For example orginally the code I posted at the top should look like this"Welcome Letter for NAME"but when I hide and then unhide it it comes up like this..."WelcomeLetter forNAME"also every time I hide/unhide a block of code, depending on a browser, empty space will appear before or after the code. So after clicking my test buttons a couple times the link starts slowly migrating down the page leaving white space.Does anybody know what is causing this or how to fix it? Link to comment Share on other sites More sharing options...
jesh Posted September 28, 2007 Share Posted September 28, 2007 justsomeguy just described this in his post: http://w3schools.invisionzone.com/index.php?showtopic=15503 Link to comment Share on other sites More sharing options...
spoonraker Posted September 28, 2007 Author Share Posted September 28, 2007 actually I read that thread yesterday and all the updates just now... maybe I missed it, but I didn't see a solution to the whitespace issue. Link to comment Share on other sites More sharing options...
spoonraker Posted September 28, 2007 Author Share Posted September 28, 2007 I changed the style.display='block' to style.display='' and now it works like a champ in FF, Safaria, and IE. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 1, 2007 Share Posted October 1, 2007 IE does not support table-row. The way I've done this in the past is to try and set it to table-row, catch an exception, and fall back to block if necessary. try{ document.getElementById("welcome1").style.display="table-row";}catch (ex){ document.getElementById("welcome1").style.display="block";} That way browsers that correctly understand table-row will use the correct value, and IE will use block. Link to comment Share on other sites More sharing options...
Synook Posted October 2, 2007 Share Posted October 2, 2007 Umm... a bit of tidying to your JS functions function hideCompleteWelcomeLetter(){for (i = 1; i <= 13; i++) { document.getElementById("welcome" + i).style.display="none";}} Repeat for all functions. Link to comment Share on other sites More sharing options...
spoonraker Posted October 2, 2007 Author Share Posted October 2, 2007 lol synook I could do that now that I have it finalized, but I kept having certain IDs hide and show with different conditions that I just did it that way Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.