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

Discussion in 'Javascript' started by pavi, May 24, 2006.

  1. pavi

    pavi Guest

    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>
    <TD class="l rowheader">M</TD>
    <TD class="r Data" ><select id=id1
    ><option>10<option>9<option>8<option>7<option>6<option>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>
     
    pavi, May 24, 2006
    #1
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Phil Thompson
    Replies:
    3
    Views:
    589
  2. UJ
    Replies:
    1
    Views:
    620
    John Timney \(MVP\)
    Nov 1, 2006
  3. =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=

    Help on table align on left of page vs left hanging indent

    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=, Jul 10, 2007, in forum: XML
    Replies:
    2
    Views:
    1,052
    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=
    Jul 16, 2007
  4. Carl Corcoran
    Replies:
    1
    Views:
    294
    Bob Barrows
    Nov 12, 2003
  5. palmiere
    Replies:
    1
    Views:
    473
    Erwin Moller
    Feb 9, 2004
Loading...

Share This Page