DHTML Table TD

[Total: 0    Average: 0/5]

This example shows how to have DHTML in a table column and keep the column width set.

Head Code:

<script language="JavaScript">
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

var msg0 = '<div class="starter">This is the staring message</div>';
var msg1 = '<div class="headblack">This is Messsssssssssssssssage 1</div>';
var msg2 = '<div class="infoblack">And this is your message2</div>'; 

//This is the function to change text on a changing background: 
function htmlChange(id,message, bg)
{
  if(isNS4)return;
  var re=null;
  if(isDOM)re=document.getElementById(id);
  else if(isIE)re=eval("document.all."+id);
  if(re)
  {
    re.innerHTML=message; 
    re.style.background = bg; //"url("+bg+")"; 
  }
} 
</script> 

<style type="text/css"><!-- 
.starter   { width: 20; overflow: hidden; color: white; font-weight: bolder; font-size: 12px; font-family: Verdana; text-align: center; }
.headblack { width: 20; overflow: hidden; color: #000000; font-weight: 700; font-size: 17px; font-family: Arial; text-align: justify; } 
.infoblack { width: 20; overflow: hidden; color: #000000; font-size: 8pt; font-family: Arial; text-align: justify; }
</style> 

Body Code:

<table border="1" bordercolor="purple" width="100%" height="80%" cellpadding="0" cellspacing="0"> 
<tr height="90%"> 
<td id="imageframe" width="37%" height="90%"></td> 
<td id="cell for texttable" valign="middle" width="80%" height="90%"> 
<table border="1" bordercolor="black" cellpadding="15" cellspacing="0" height="100%" name="texttable"> 
<tr> 
<td id="textframe" bgcolor="#ff0000"></td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
<a href="#" onClick="htmlChange('textframe',msg0,'#FF0000');">initial</a><br> 
<a href="#" onClick="htmlChange('textframe',msg1,'#909000');">choice1</a><br> 
<a href="#" onClick="htmlChange('textframe',msg2,'#aaccff');">choice2</a>
<script>
function init()
{
  htmlChange('textframe',msg0,'#FF0000');
}
setTimeout("init()",2000); /* wait 2 seconds to start this off */
</script>

Times Viewed: 3

Leave a Reply

Your email address will not be published. Required fields are marked *