Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fade in a Table Row

Status
Not open for further replies.
checkai

checkai

Programmer
Jan 17, 2003
1,629
US
I have an HTML table that has 2 rows, 1 visible by default, one not.

when i click on a link, i'd like the second row to fade into visibility...only concerned about IE6 javascript...

<table>
<tr>
<td>
</td>
</tr>
<tr id="tradvanced" style="visibility:hidden;">
<td>
</td>
</tr>

"...your mom goes to college..."
 
Sort by date Sort by votes
checkai, I don't know that it is possible.... tr does not seem to support opacity. Here was my stab:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Opacity Test</title>
<link rel="shortcut icon" href="./images/arch-icon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

/*<![CDATA[*/

var showInterval;
var opacityValue = 0;

function showRow() {
   //store a reference to this interval so we can stop it later
   showInterval = setInterval("showRowFunction()", 50);
}

function showRowFunction() {
   var obj = document.getElementById("tradvanced");
   //if the div is not fully shown, we increase the opacity in 10% increments
   if (opacityValue < 100) {
      opacityValue += 10;
      obj.style.opacity = (opacityValue / 100);
      obj.style.MozOpacity = (opacityValue / 100);
      obj.style.KhtmlOpacity = (opacityValue / 100);
      obj.style.filter = "alpha(opacity=" + opacityValue + ")";
   }
   //if the div is fully shown we clear the interval
   else {
      clearInterval(showInterval);
   }
}

/*]]>*/

</script>
<style type="text/css">

* {
   border:0px;
   margin:0px;
   padding:0px;
}

tr#tradvanced {
   opacity: 0.0;
   -moz-opacity: 0.0;
   -khtml-opacity: 0.0;
   filter: alpha(opacity=0);
}

</style>
</head>
<body>

<input type="button" value="Fade In" onclick="showRow(document.getElementById('tradvanced'))" />
<table>
   <tr>
      <td>(0, 0)</td><td>(0, 1)</td><td>(0, 2)</td><td>(0, 3)</td>
   </tr>
   <tr id="tradvanced">
      <td>(1, 0)</td><td>(1, 1)</td><td>(1, 2)</td><td>(1, 3)</td>
   </tr>
</table>
</body>
</html>

I modified that code off a thread that I had posted about a month ago here: thread216-1254421

If you copy/paste the example in that thread you'll see that the opacity is properly supported by IE for a div element. However, it just doesn't seem to work for tr's.

Does the row *have* to fade in, or can it just appear?

-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
Upvote 0 Downvote
OK - sorry this is a little late but I just saw this on a search - but maybe for others in the future - Why would you need to support opacity in <tr>? Simply wrap the <tr> content with a <div>.
 
Upvote 0 Downvote
Why would you need to support opacity in <tr>? Simply wrap the <tr> content with a <div>
Click to expand...

Well.... encasing a <tr> in a <div> will not validate XHTML-strict (which seems to be the doctype of choice for most ppl that use a doctype - and everybody should)

try pasting this over at - it won't validate
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Validity Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>

<table>
   [!]<div>[/!]
      <tr>
         <td>test</td>
      </tr>
   [!]</div>[/!]
</table>

</body>
</html>

-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
Upvote 0 Downvote
You missed the point. I'm not saying put <tr> in a <div> I am saying put the content in a <div>. In this case:

<table>
<tr>
<td><div>test</div></td>
</tr>
</table>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
301
malpa
malpa
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
295
lexer
lexer
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
269
coldbohemia
coldbohemia
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
684
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
332
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top