how to hide a select box in a table when i scroll top or left using stylee sheets

P

pavi

Hi,

I have created a table with scroll effects using style sheets, in one
of the TD I have created a select box now what I want is when I scroll
top or left I want the select box to be hidden and when I scroll back
it should be displayed. I am attaching the code, if u go through the
code u will get a better idea of what I want.

thanks


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<STYLE type=text/css>
..l {
TEXT-ALIGN: left
}

..r {
TEXT-ALIGN: right
}


..table {
BORDER-TOP-WIDTH: 1px; FONT-WEIGHT: normal; BORDER-LEFT-WIDTH: 1px;
FONT-SIZE: small; BORDER-LEFT-COLOR: #000000; BORDER-BOTTOM-WIDTH: 1px;
BORDER-BOTTOM-COLOR: #000000; WIDTH: 99%; COLOR: #002288;
BORDER-TOP-COLOR: #000000; FONT-STYLE: normal; FONT-FAMILY: Arial,
Helvetica, sans-serif; BACKGROUND-COLOR: #f0f0f0; BORDER-RIGHT-WIDTH:
1px; BORDER-RIGHT-COLOR: #000000
}

..Data {
FONT-WEIGHT: normal; FONT-SIZE: small; COLOR: #000000; FONT-STYLE:
normal; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR:
#d3d3d3;
}

..rowheader {
LEFT: expression(document.getElementById("data").scrollLeft);
POSITION: relative; BACKGROUND-COLOR: #b0b0b0
}

}
..header {
FONT-WEIGHT: bold; FONT-SIZE: medium; Z-INDEX: 20; COLOR: #0033aa;
FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif;
POSITION: relative; ; TOP:
expression(document.getElementById("data").scrollTop-2);
BACKGROUND-COLOR: #b0b0b0;
}

</STYLE>


</HEAD>
<BODY >

<DIV >

<DIV>
<DIV align=center>
<DIV id=data style="OVERFLOW: auto; WIDTH: 30%; HEIGHT: 348px">
<TABLE class=table borderColor=#000000 cellSpacing=1 cellPadding=7
rules=groups
border=1 >

<THEAD>
<TR>
<TH class="l rowheader header" style="Z-INDEX: 30"
scope=col>Name</TH>
<TH class="l rowheader header" style="Z-INDEX: 30"
scope=col>Sex</TH>
<TH class=" header" scope=col>Age</TH>
<TH class=" header" scope=col>Height</TH>
<TH class=" header" scope=col>Weight</TH></TR></THEAD>
<TBODY>
<TR>
<TH class="l rowheader" scope=col>Alfred</TH>
<option>10<option>9<option>8<option>7<option>6<option>5</select></TD>
Click to expand...
<TD class="r Data">69.0</TD>
<TD class="r Data">112.5</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Alice</TH>
<TD class="l rowheader">F</TD>
<TD class="r Data">13</TD>
<TD class="r Data">56.5</TD>
<TD class="r Data">84.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Barbara</TH>
<TD class="l rowheader">F</TD>
<TD class="r Data">13</TD>
<TD class="r Data">65.3</TD>
<TD class="r Data">98.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Carol</TH>
<TD class="l rowheader">F</TD>
<TD class="r Data">14</TD>
<TD class="r Data">62.8</TD>
<TD class="r Data">102.5</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Henry</TH>
<TD class="l rowheader">M</TD>
<TD class="r Data">14</TD>
<TD class="r Data">63.5</TD>
<TD class="r Data">102.5</TD></TR>
<TR>
<TH class="l rowheader" scope=col>James</TH>
<TD class="l rowheader">M</TD>
<TD class="r Data">12</TD>
<TD class="r Data">57.3</TD>
<TD class="r Data">83.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Jane</TH>
<TD class="l rowheader">F</TD>
<TD class="r Data">12</TD>
<TD class="r Data">59.8</TD>
<TD class="r Data">84.5</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Janet</TH>
<TD class="l rowheader">F</TD>
<TD class="r Data">15</TD>
<TD class="r Data">62.5</TD>
<TD class="r Data">112.5</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Jeffrey</TH>
<TD class="l rowheader">M</TD>
<TD class="r Data">13</TD>
<TD class="r Data">62.5</TD>
<TD class="r Data">84.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>John</TH>
<TD class="l rowheader">M</TD>
<TD class="r Data">12</TD>
<TD class="r Data">59.0</TD>
<TD class="r Data">99.5</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Joyce</TH>
<TD class="l rowheader">F</TD>
<TD class="r Data">11</TD>
<TD class="r Data">51.3</TD>
<TD class="r Data">50.5</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Judy</TH>
<TD class="l rowheader">F</TD>
<TD class="r Data">14</TD>
<TD class="r Data">64.3</TD>
<TD class="r Data">90.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Louise</TH>
<TD class="l rowheader">F</TD>
<TD class="r Data">12</TD>
<TD class="r Data">56.3</TD>
<TD class="r Data">77.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Mary</TH>
<TD class="l rowheader">F</TD>
<TD class="r Data">15</TD>
<TD class="r Data">66.5</TD>
<TD class="r Data">112.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Philip</TH>
<TD class="l rowheader">M</TD>
<TD class="r Data">16</TD>
<TD class="r Data">72.0</TD>
<TD class="r Data">150.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Robert</TH>
<TD class="l rowheader">M</TD>
<TD class="r Data">12</TD>
<TD class="r Data">64.8</TD>
<TD class="r Data">128.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Ronald</TH>
<TD class="l rowheader">M</TD>
<TD class="r Data">15</TD>
<TD class="r Data">67.0</TD>
<TD class="r Data">133.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>Thomas</TH>
<TD class="l rowheader">M</TD>
<TD class="r Data">11</TD>
<TD class="r Data">57.5</TD>
<TD class="r Data">85.0</TD></TR>
<TR>
<TH class="l rowheader" scope=col>William</TH>
<TD class="l rowheader">M</TD>
<TD class="r Data">15</TD>
<TD class="r Data">66.5</TD>
<TD class="r Data">112.0</TD>
</TR></TBODY></TABLE></DIV></DIV></DIV><BR></DIV></BODY></HTML>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Can anyone please help? HTML - two tables applying different styles 4
Filter table rows based on multiple checkboxes value 2
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
How to add dropdown selected data to table using jquery 2

Members online

Total: 35 (members: 3, guests: 32)
Robots: 120

Forum statistics

Threads
473,969
Messages
2,570,161
Members
46,710
Latest member
bernietqt

Latest Threads

Top