Dynamic Html question - help please?

[computergeek]

Hello,

I am trying to create an object that resembles a glass or tank on the window. I want to dynamically adjust the level in the glass (tank) based on a data value. Does anyone know how to do this in DHTML or whatever?

This is what I have tried so far...

<TABLE WIDTH=&quot;25%&quot; BORDER=3 CELLSPACING=0 CELLPADDING=0>
<TD width=&quot;125&quot; height=&quot;100&quot; bgcolor=white>
<TABLE WIDTH=&quot;25%&quot; BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TD width=&quot;125&quot; height=<%variablepercent%>bgcolor=&quot;#99ccff&quot;>
</TD>
</TABLE>
</TD>
</TABLE>

Basically I am trying to have a cell with a white background and with a border, then I want a blue cell on top to be dynmically set based on a variable contained within my ASP page.

Any ideas on how to do this? Any DHTML code somewhere that does this?

I am using Visual Interdev 6.0

Thanks,

Computergeek

 

[cbokowski]

Could you use an image and then size it?

 

[computergeek]

Hi,

Thanks for your reply...

Yes I think your idea of using an image is feasible, and then sizing it as necessary. I think my above solution could work. The problem seems to be with handling the tables...How do you correctly place a TD cell on top of another TD cell? If this approach ends up working I plan to replace the white background TD cell with an image. Where is a good place to find such an image?

Thanks for you input, any other ideas regarding tables?

Computergeek

 

[cbokowski]

You can create the image with a program like paintshop. I use GIMP.

Here is a good link for Dhtml

http://htmlgoodies.earthweb.com/beyond/layers.html

or

http://www.dynamicdrive.com

 

[Dynapen]

You can do it with a table and a cell like you have it listed. But the problem above is that the second table on sees itself inside the cell of the table above it.

Try putting down the first table/cell, but put it in a div tag.

Then create the second table/cell in a second div tag. Then you can use the style attibute to adjust which one is on top.

<table style=&quot;position:absolute; z-index:1; top:200px; left=200px;&quot;>
THis will stack this top table above everything else. (if you leave the z-index value of something blank, it assumes a default of 0. This way you can use the top/left positions to put it directly on top of the other cell.

Hope this helps.

 

[computergeek]

Hi,

I tried implementing the DIV tag. I am so confused...boy have I wasted a lot of time on this today!! Current code:


<DIV align=left style=&quot;POSITION: absolute; TOP: 80px;Z-INDEX: 1; left=15px&quot; BORDER=&quot;3&quot; >
<TABLE WIDTH=&quot;25%&quot; BORDER=3 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD width=&quot;125&quot; height=60 bgcolor=&quot;white&quot; >
</Div>
<Div align=left style=&quot;TOP: 80px;left=20px&quot; BORDER=&quot;3&quot; >
<TABLE WIDTH=&quot;100%&quot; valign=bottom BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>
<TD width=&quot;125&quot; height=80 bgcolor=&quot;#99ccff&quot;>
</TD>
</TR>
</TABLE>
</Div>
</TD>
</TR>
</TABLE>

HELP please?

Computergeek

 

[Discord]

how about

<form name=&quot;FishTank&quot;>
<input type=&quot;text&quot; name=&quot;PercentLevel&quot; id=&quot;PercentLevel&quot; value=&quot;100&quot;><br>
<input type=&quot;button&quot; name=&quot;ChangeLevel&quot; id=&quot;ChangeLevel&quot; value=&quot;Change Level&quot; onclick=&quot;document.getElementById('Cell_2').style.height=this.form.PercentLevel.value+'%';&quot;>
</form>
<table border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; rules=&quot;none&quot; height=&quot;200&quot;>
<tr><td id=&quot;Cell_1&quot; bgcolor=&quot;white&quot; width=&quot;20&quot;> </td></tr>
<tr><td id=&quot;Cell_2&quot; bgcolor=&quot;blue&quot; width=&quot;20&quot; height=&quot;100%&quot;> </td></tr>
</table>

 

[computergeek]

Hello Discord,

Thanks for the information... I have it working now.

Computergeek