Jump to content

Javascript Hide/Show Problem


spoonraker

Recommended Posts

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...