Dynamic Table Properties Question...

Printable View

October 10th, 2002, 01:31 PM
EffAyy

Dynamic Table Properties Question...

Hi all,

I'm a little curious about something. Unfortunately I'm not sure if this would work for me.... If anyone could point me in the right direction, it would be much appreciated...

Let's say I have a webpage with a tiled image as my background. Also, on this page is a table... Is it possible (through dhtml or other means) to have the cells within this table have a solid color background (ie. bgcolor=#123456), yet have this background be semi-transparent?

I'd like some of the webpage's background to show through the table cell's background, all the while keeping the text within these cells at 100% alpha.

If not, then oh well, but it would be nifty. :)

- Trev
October 10th, 2002, 10:47 PM
Waldo2k2

ok...
you say you want to keep the alpha at 100%? that would mean it's completely opaque (non see through) and you wouldn't see the background....so do you mean like a checkerboard type of effect...or did you just mess up and you meant a lower alpha so that the background comes through?
October 10th, 2002, 11:00 PM
Waldo2k2

well here's what i came up with...hope it's what you want, it's justa css effect.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Alpha Filter Example</TITLE> <STYLE type="text/css"> TABLE.aFilter { FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=50) } </STYLE> </HEAD> <BODY background="anyIMG.jpg"> <TABLE class=aFilter> <TR> <TD bgcolor="red"> a table cell with 50% alpha </TD> </tr> </TABLE> </BODY> </HTML>

enjoy
October 11th, 2002, 08:15 AM
EffAyy

Thanks for the example!

It's 99% there, but I was a bit vague on the question I think... When i mentioned opacity, what I meant was this:

A table cell with a 50% alpha background, but a 100% alpha forecolor... That way if, say, you had a red bgcolor with an opacity of 10%, the text within the cell would still be opaque and easy to read.

Would this have to be done with embedded tables? i.e.:

<TABLE class=aFilter>
<TR>
<TD bgcolor="red">
<TABLE cellpadding=0 cellspacing=0 border=0>
<TR><TD>Would this text would be opaque?</td></tr>
</TABLE>
</TD>
</tr>
</TABLE>

I'm not sure if the change I made will work. I believe that the embedded table would inherit the opacity of the first table (since it's in one of the first table's cells. So if I wanted a very low opacity for the bgcolor (just enough to give the table a little structure) the text would also become unreadable.

Hopefully there's a way around this. ;)

- Trev
October 11th, 2002, 10:21 AM
Waldo2k2

Quote:

i hope there's a way around this

there sure is, instead of making the table a part of the class, just make the table cell part of it...like so

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Alpha Filter Example</TITLE> <STYLE type="text/css"> .aFilter { FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=50) } </STYLE> </HEAD> <BODY bgcolor="blue"> <TABLE> <TR> <TD bgcolor="red" class=aFilter height="100px" width="200px"> </TD> <TD style='position:relative;top:"0px";left:"-200px";'> <FONT color="white"> This is clear text over an alpha background </FONT> </TD> </TR> </TABLE> </BODY> </HTML>

this example works perfectly, i just tested it myself...just make sure you always position relative to the left negative whatever the width of the first cell was....make sure to make the first cell large enough so that text in the second will fit over top of it.
October 11th, 2002, 12:18 PM
EffAyy

You sir, are a genius. :)

Thanks for the help, it's great to have that proof of concept so I can proceed.

- Trev
October 11th, 2002, 05:06 PM
Waldo2k2

Quote:

You sir, are a genius.

well thank you very much, it's not every day i hear that. I'm glad you liked it, I enjoy helping on these boards because people come up with things i'd never think of...so if i have the idea and i figure out a way to make it work it helps me as well. So if there's anything else feel free to give a shout.
~Drew
October 15th, 2002, 03:16 PM
EffAyy

Hello again,

I was playing around with this concept a little more, and came to a quick realization. When dealing with hard-coded height and width properties, it has to be assumed that your table will be static. In my case, the table will be dynamic, so as a result, I had to re-think things..... I came to a solution that I *know* works with IE5, but I haven't tested this with Netscape yet (as it's not a requirement for me to do so on the project I'm working on.)

So, in the event that anyone else comes through with the same dilemma, here's an idea that works for me with IE5.

<STYLE type="text/css">
.aFilter {FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=10); background-color:red;
}
.bFilter {FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
color:white;
}
</STYLE>

... Within the body, place this code:

<DIV style="position: absolute;">
<TABLE id="table2">
<TR><TD class=bFilter>This text should be opaque
</TD>
<TD class=bFilter>More Text</TD>
</tr>
</TABLE>
</DIV>
<TABLE id="table1">
<TR><TD class=aFilter>This text should be opaque
</TD>
<TD class=aFilter>More Text</TD>
</tr>
</TABLE>

... It seems that using a DIV tag, with a style of absolute, will place the "foreground" table on top of the table that's created just below the DIV tags....

The one downfall I see is the need to create the table twice. The background table needs to be the same size as the foreground table, so essentially all cell content is created twice.

It may be possible to programmatically create a duplicate table, change it's filter properties and then overlay the table, but since I'm just happy to have gotten THIS to work, I'm not in a rush to try that. :)

Hope it helps...

- Trev
October 15th, 2002, 07:55 PM
Waldo2k2

well, i don't think it will impact speed much....if it really bothers you, you could preload the tables in the background somewhere else...Do you have a page that comes up before this one? If so, create the file tables.js . In it write this code:

Code:

var table1="...(code for table one)..."; var table2...etc.

include the file at the bottom of the first html page

Code:

<script language="javascript" src="tables.js"> </script> </body> </html>

then on the page you write the tables to, include the .js in the same manner, only in the head section.
then do:

Code:

<body> <script language="javascript"> document.write(table1); docuemtn.write(table2); </script> ...

i tried to come up with a way to load one variable, then just write it and modify it's class, but it was too complicated to work on at this point
October 15th, 2002, 08:29 PM
Waldo2k2

i forgot to mention you could easily acheive your goal of not making two tables by using the Netscape js function called copyNode(). Google for it.