Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > how to hide a select box in a table when i scroll top or left using stylee sheets

Reply
Thread Tools

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

 
 
pavi
Guest
Posts: n/a
 
      05-24-2006
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").scrollL eft);
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").scrollT op-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>
<TD class="l rowheader">M</TD>
<TD class="r Data" ><select id=id1
><option>10<option>9<option>8<option>7<option>6<op tion>5</select></TD>

<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>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Using a div with scroll bars - can we get the scroll bars on the left instead of the right side? UJ ASP .Net 1 11-01-2006 09:32 PM
select of select box will select multiple in another box palmiere Javascript 1 02-09-2004 01:11 PM
export to Excel - multiple sheets & renaming sheets Carl Corcoran ASP General 1 11-12-2003 07:28 PM
locking a table's top row (Excel stylee) Phil Thompson HTML 3 09-17-2003 08:25 PM



Advertisments