WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 Header disappear after click on column while scrollbar moved, piggie, June 27, 2005

Subject: Header disappear after click on column while scrollbar moved From: piggie Date: June 27, 2005

hi, below is my html pages.. everything working fine except for hearder dun move while scrolling down.

when i scoll down the page, the tr with class=head will disappear depend how down the scrollbar being moved!

HTML:

<!doctype html public "-//w3c//dtd html 4.0 strict//en">
<html>
<head>
<title>Absence Request List</title>
<STYLE>tr.head { position:relative; top: expression(document.all["results"].scrollTop); background-color:white;}
.firstheader {
 border: 1px solid;
 background-color: #A5C6E9;
 border-color: #FFFFFF #666666 #666666 #FFFFFF;
 color: #000000;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 font-weight: bold;
}
</STYLE>
<link type="text/css" rel="StyleSheet" href="css/test7.css" />
<script type="text/javascript" src="js/sortabletable.js"></script>
<script>
var stbl = new Array();
function displayDetails(reqId,applicantId,updAllw) {
  var url = "/pls/psc_portal30/APPS.DYN_TRAVEL_REQUEST_DETAIL.show?"+
 "p_arg_names=req_id&p_arg_values="+reqId+"&"+
 "p_arg_names=applicant_id&p_arg_values="+applicantId+"&"+
 "p_arg_names=update_allw&p_arg_values="+updAllw;
  window.open(url,"ReqDet","scrollbars=yes,menubar=no,status=no,toolbar=no,resizable=yes,titlebar=no,alwaysRaised=yes,width=655,height=580,left=120,top=100");
}
</script>
</head>
<body topmargin=0 leftmargin=0>
<DIV id=resultsDiv STYLE="height:250px;overflow:auto"><TABLE CELLSPACING=0 CELLPADDING=5 ID=results NAME=results WIDTH=98%>
<TR class=head><TD class=firstheader>&nbsp;Lau, Mary (Finance & Accounts)</TD></TR><TR>
<TD><FORM method=post name=trvListForm><input type=hidden name=access value=""><input type=hidden name=login_emp_id value="1031"><input type=hidden name=button_action value="SUBMIT"><input type=hidden name=search_func value="MAINTAIN"><input type=hidden name=company value=""><input type=hidden name=branch value=""><input type=hidden name=location value=""><input type=hidden name=department value=""><input type=hidden name=section value=""><input type=hidden name=employee value="Lau, Mary"><input type=hidden name=date_from value=""><input type=hidden name=date_to value=""><input type=hidden name=request_type value="ALL">
<script>stbl[0]="stbl0";</script>
<table width=100% cellspacing=0 cellpadding=5><tr><td class=firstheader>Requests submitted for approval</td></tr></table>
<table class=sort-table id=stbl0 width=100% cellpadding=5 cellspacing=0 border=0>
<thead>
<tr><TD class=secondheader width=2% style="border-left:1px solid #666666">&nbsp;</TD><TD class=secondheader width=19%  >Travel/<br>Training Period</TD>   <TD class=secondheader width=13% >Destination/<br>Place Held</TD>   <TD class=secondheader width=33% >Purpose(s)</TD>   <TD class=secondheader width=7% >Day(s)</TD>   <TD class=secondheader width=15% >Last Action Date</TD>   <TD class=secondheader width=11% >Status</TD></tr>
</thead>
<tbody>
<tr class=odd>
<td valign=top style="border-left:1px solid #CCCCCC;"><input type=checkbox style="width:12px;height:12px;" name=cbox value=289></td>
<td valign=top><a href="javascript:displayDetails(289,1031,'N');">10-JUL-05 - 11-JUL-05</a></td>
<td valign=top>KL</td>
<td valign=top>Customer Visit</td>
<td valign=top>2</td>
<td valign=top>23-JUN-05</td>
<td valign=top>Endorsed</td>
</tr>
<tr class=even>
<td valign=top style="border-left:1px solid #CCCCCC;"><input type=checkbox style="width:12px;height:12px;" name=cbox value=291></td>
<td valign=top><a href="javascript:displayDetails(291,1031,'N');">05-JUL-05 - 05-JUL-05</a></td>
<td valign=top>Wisma Pansar</td>
<td valign=top>Training</td>
<td valign=top>1</td>
<td valign=top>24-JUN-05</td>
<td valign=top>Submitted for Endorsement</td>
</tr>
<tr class=odd>
<td valign=top style="border-left:1px solid #CCCCCC;"><input type=checkbox style="width:12px;height:12px;" name=cbox value=283></td>
<td valign=top><a href="javascript:displayDetails(283,1031,'N');">08-JUL-05 - 08-JUL-05</a></td>
<td valign=top>Kuala Lumpur</td>
<td valign=top>Supplier Visit</td>
<td valign=top>1</td>
<td valign=top>25-JUN-05</td>
<td valign=top>Endorsed</td>
</tr>
</tbody></table>
<table><tr><td>
<a href="javascript:cReq(document.trvListForm.cbox,'WITHDRAW',1031)"     onMouseOut=MM_swapImgRestore() onMouseOver=MM_swapImage("Withdraw","","docs/FOLDER/PANSAR_PORTAL/IMAGES/BUTTONS/REQ_WITH_ON.GIF",1)>     <img name=Withdraw border=0 src=docs/FOLDER/PANSAR_PORTAL/IMAGES/BUTTONS/REQ_WITH_OFF.GIF></a>
</td></tr></table>
<script>stbl[1]="stbl1";</script>
<table width=100% cellspacing=0 cellpadding=5><tr><td class=firstheader>New Requests</td></tr></table>
<table class=sort-table id=stbl1 width=100% cellpadding=5 cellspacing=0 border=0>
<thead>
<tr><TD class=secondheader width=2% style="border-left:1px solid #666666">&nbsp;</TD><TD class=secondheader width=19%  >Travel/<br>Training Period</TD>   <TD class=secondheader width=13% >Destination/<br>Place Held</TD>   <TD class=secondheader width=33% >Purpose(s)</TD>   <TD class=secondheader width=7% >Day(s)</TD>   <TD class=secondheader width=15% >Last Action Date</TD>   <TD class=secondheader width=11% >Status</TD></tr>
</thead>
<tbody>
<tr class=odd>
<td valign=top style="border-left:1px solid #CCCCCC;"><input type=checkbox style="width:12px;height:12px;" name=cbox value=287></td>
<td valign=top><a href="javascript:displayDetails(287,1031,'N');">03-JUL-05 - 04-JUL-05</a></td>
<td valign=top>KL</td>
<td valign=top>Training</td>
<td valign=top>2</td>
<td valign=top>23-JUN-05</td>
<td valign=top>New</td>
</tr>
<tr class=even>
<td valign=top style="border-left:1px solid #CCCCCC;"><input type=checkbox style="width:12px;height:12px;" name=cbox value=283></td>
<td valign=top><a href="javascript:displayDetails(283,1031,'N');">01-OCT-05 - 01-OCT-05</a></td>
<td valign=top>KL</td>
<td valign=top>Others</td>
<td valign=top>1</td>
<td valign=top>23-JUN-05</td>
<td valign=top>New</td>
</tr>
</tbody>
</table>
<table><tr><td>
<a href="javascript:cReq(document.trvListForm.cbox,'SUBMIT',1031)"      onMouseOut=MM_swapImgRestore() onMouseOver=MM_swapImage("Submit","","docs/FOLDER/PANSAR_PORTAL/IMAGES/BUTTONS/SUBMIT_APPROVAL_ON.GIF",1)>     <img name=Submit border=0 src=docs/FOLDER/PANSAR_PORTAL/IMAGES/BUTTONS/SUBMIT_APPROVAL_OFF.GIF></a>     <a href="javascript:cReq(document.trvListForm.cbox,'DELETE',1031)"     onMouseOut=MM_swapImgRestore() onMouseOver=MM_swapImage("Delete","","docs/FOLDER/PANSAR_PORTAL/IMAGES/BUTTONS/REQ_DEL_ON.GIF",1)>     <img name=Delete border=0 src=docs/FOLDER/PANSAR_PORTAL/IMAGES/BUTTONS/REQ_DEL_OFF.GIF></a>
</td></tr></table>
<iframe id=trvRespondF name=trvRespondF height=0 width=0 frameborder=no scrolling=no></iframe></TD></FORM></TR>
</TABLE></DIV>
  <script> 
 var st = new SortableTable(document.getElementById("stbl0"),["None","Date","CaseInsensitiveString","String","Number","Date","None"]);
 st.onsort = function () {
  var rows = st.tBody.rows;
  var l = rows.length;
  for (var i = 0; i < l; i++) {
   removeClassName(rows[i], i % 2 ? "odd" : "even");
   addClassName(rows[i], i % 2 ? "even" : "odd");
  }
  };
 var st1 = new SortableTable(document.getElementById("stbl1"),["None","Date","CaseInsensitiveString","String","Number","Date","None"]);
 st1.onsort = function () {
  var rows = st1.tBody.rows;
  var l = rows.length;
  for (var i = 0; i < l; i++) {
   removeClassName(rows[i], i % 2 ? "odd" : "even");
   addClassName(rows[i], i % 2 ? "even" : "odd");
  }
  };
</script> 
</body>
</html>

i'd modified css and js to suite my program, below is the code, for js, i only modified the date part due to date format is different:

CSS:

.sort-table {
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}

.firstheader {
 border: 1px solid;
 background-color: #A5C6E9;
 border-color: #FFFFFF #666666 #666666 #FFFFFF;
 color: #000000;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 font-weight: bold;
}

.secondheader {
 border: 1px Solid ThreeDShadow;
 background-color: #E4EFFA;
 border-color: #FFFFFF #666666 #666666 #FFFFFF;
 color: #000000;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 font-weight: bold;
}

.infocell {
 border: solid;
 background-color: #FFFFFF;
 border-color: #FFFFFF #CCCCCC #CCCCCC #FFFFFF;
 color: #000000;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 font-weight: bold ;
 border-width: 1px 1px 1px 1px
}

.sort-table tr{
}

.sort-table tr.odd {
}

.sort-table tr.even {
 BACKGROUND: #F8F8F8
}

.sort-table tr.odd td{
 border: solid;
 border-color: #FFFFFF #CCCCCC #CCCCCC #FFFFFF;
 color: #000000;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 font-weight: normal ;
 border-width: 0px 1px 1px 0px
}

.sort-table tr.even td {
 border: solid;
 border-color: #CCCCCC #CCCCCC #CCCCCC #CCCCCC;
 color: #000000;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 font-weight: normal ;
 border-width: 0px 1px 1px 0px
}

.sort-arrow {
 width: 11px;
 height: 11px;
 background-position: center center;
 background-repeat: no-repeat;
 margin: 0 2px;
}

.sort-arrow.descending {
 background-image: url("../images/downsimple.png");
}

.sort-arrow.ascending {
 background-image: url("../images/upsimple.png");
}




Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX