March 26th, 2008, 09:30 AM
|
|
Registered User
|
|
Join Date: Mar 2008
Posts: 1
Time spent in forums: 1 h 48 m 23 sec
Reputation Power: 0
|
|
Javascript - Page Scroll Jerking - Can You Help Me?
Hello. The code below shows a basic html text file with a highlighted bar that scrolls over each <tr> using your up/down arrow. If you notice, when you scroll using your up/down arrow the page jerks. How would I remove the jerking? Also, when the highlighted bar reaches close to the bottom it shows a few lines that are to come. Is there a way in Javascript that I show more lines after the higlighted bar? Thank you in advance for your help. 
Code:
<Head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>test_1</title>
<style type="text/css">
.tableExample{border-collapse: collapse; border: 0px solid black; overflow: auto; }
.tableExample tr td{cursorointer; border: 0px solid black; padding: 0px;}
.odd{background-color:#F5DEB3';}
.even{background-color:#F5DEB3';}
.high{background-color:#FFFF00;font-size:medium;font-weight:bold;position: fixed;}
.selected{background-color:#FFFF00;font-size:medium;font-weight:bold;}
</style>
<script type="text/javascript">
var table = {};
table.keys = {
AddNew : function(id,action){
this.monitorActions[id] = action;
this.quickLookup.push(id);
},
monitorActions : new Array(),
quickLookup : new Array()
}
table.ActiveTable = null;
table.SelectableLSPEC = function(tableId,activate){
var ref = this;
this.tableId = tableId;
this._init();
this.selectedId = null;
table.keys.AddNew(tableId,ref);
if(activate){
table.ActiveTable = tableId;
this.selectFirst();
}
}
table.SelectableLSPEC.prototype._init = function(){
var ref = this;
var elemTable = document.getElementById(this.tableId);
var rows = elemTable.getElementsByTagName("tr");
var cnt = rows.length;
for(var i=0; i<cnt;i++){
var className = (i%2)?"odd":"even";
rows[i].className = className;
rows[i].defaultClassName = className;
rows[i].onmouseover = function(){if(this.className!="selected")this.className="high";}
rows[i].onmouseout = function(){if(this.className!="selected")this.className=this.defaultClassName; }
rows[i].onclick = function(){ref.select(this)};
}
ElemTable = null;rows=null;
}
table.SelectableLSPEC.prototype.select = function(elem){
this.removeSlections();
this.selectedId = (this.selectedId!=elem.id)?elem.id:null;
if(this.selectedId!=null)elem.className = "selected";
}
table.SelectableLSPEC.prototype.removeSlections = function(elem){
var elemTable = document.getElementById(this.tableId);
var rows = elemTable.getElementsByTagName("tr");
var cnt = rows.length;
for(var i=0; i<cnt;i++)rows[i].className = rows[i].defaultClassName;
ElemTable=null; rows=null;
}
table.SelectableLSPEC.prototype.selectFirst = function(){
var elemTable = document.getElementById(this.tableId);
var firstRow = elemTable.getElementsByTagName("tr")[0];
firstRow.className = "selected"
this.selectedId = firstRow.id;
ElemTable=null; firstRow=null;
}
table.SelectableLSPEC.prototype.keyClick = function(keyCode){
var direction;
switch (keyCode) {
case 38:
direction = -1;
break;
case 40:
direction = 1;
break;
default:
direction = 0;
break;
}
if(direction!=0){
this.selectNext(direction);
document.scrollTop = hilightedElement.offsetTop;
}
}
table.SelectableLSPEC.prototype.selectNext = function(dir){
var elemTable = document.getElementById(this.tableId);
var rows = elemTable.getElementsByTagName("tr");
var cnt = rows.length;
var hasSelection = false;
for(var i=0; i<cnt;i++){
if(rows[i].className == "selected"){
if((dir==-1 && i>0) || (dir==1 && i+1<cnt)){
rows[i].className = rows[i].defaultClassName;
rows[i+dir].className = "selected";
this.selectedId = rows[i+dir].id;
rows[i+dir].scrollIntoView(dir == -1);
}
hasSelection = true;
break;
}
}
ElemTable=null; rows=null;
}
function monitorClick(e){
var evt = (e)?e:event;
var theElem = (evt.srcElement)?evt.srcElement:evt.target;
while(theElem!=null){
if(table.keys.quickLookup.indexOf(theElem.id) != -1){
table.ActiveTable = theElem.id;
return true;
}
theElem = theElem.offsetParent;
}
table.ActiveTable = null;
return true;
}
function handleKeyPress(e){
var code;
if (window.event) {
code = window.event.keyCode;
event.cancelBubble = true;
} else if (e) {
code = e.which;
e.stopPropagation();
}
if(table.ActiveTable){
table.keys.monitorActions[table.ActiveTable].keyClick(code);
}
return false;
}
document.onclick = monitorClick;
document.onkeydown = handleKeyPress;
var table1 = null;
window.onload = function(){
table1 = new table.SelectableLSPEC("tableExample1",true)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="tableExample" id="tableExample1">
<tr id="i1_0"><td> <span class='BigFont'>Test Code</Span>Test Code<br></td>
<tr id="i2_0"><td>.................................................. ......................<br></td></tr>
<tr id="i3_0"><td>..............Test Code.......Test Code......Test Code.......<br></td></tr>
<tr id="i4_0"><td>..............TEst................................ ................<br></td></tr>
<tr id="i5_0"><td>.................................................. ......................<br></td></tr>
<tr id="i6_0"><td>Test Code<br></td></tr>
<tr id="i7_0"><td>.................................................. ......................<br></td></tr>
<tr id="i8_0"><td>Test Code<br></td></tr>
<tr id="i9_0"><td>Test Code<br></td></tr>
<tr id="i10_0"><td>Test Code<br></td></tr>
<tr id="i11_0"><td>Test Code<br></td></tr>
<tr id="i12_0><td>.................................................. ......................<br></td></tr>
<tr id="i177_0"><td>.................................................. ......................<br></td></tr>
<tr id="i18_0"><td>Test Code<br></td></tr>
<tr id="i19_0"><td>Test Code<br></td></tr>
<tr id="i20_0"><td>Test Code<br></td></tr>
<tr id="i21_0"><td>Test Code<br></td></tr>
<tr id="i22_0"><td>Test Code<br></td></tr>
<tr id="i23_0"><td>Test Code<br></td></tr>
<tr id="i24_0"><td>Test Code<br></td></tr>
<tr id="i25_0"><td>Test Code<br></td></tr>
<tr id="i26_0"><td>Test Code<br></td></tr>
<tr id="i266_0"><td>.................................................. ......................<br></td></tr>
<tr id="i27_0"><td>Test Code<br></td></tr>
<tr id="i28_0"><td>Test Code<br></td></tr>
<tr id="i29_0"><td>Test Code<br></td></tr>
<tr id="i30_0"><td>Test Code<br></td></tr>
<tr id="i300_0"><td>.................................................. ......................<br></td></tr>
<tr id="i31_0"><td>Test Code<br></td></tr>
<tr id="i32_0"><td>Test Code<br></td></tr>
<tr id="i33_0"><td>.................................................. ......................<br></td></tr>
<tr id="i34_0"><td>Test Code<br></td></tr>
<tr id="i35_0"><td>Test Code<br></td></tr>
<tr id="i355_0"><td>.................................................. ......................<br></td></tr>
<tr id="i36_0"><td>Test Code<br></td></tr>
<tr id="i37_0"><td>Test Code<br></td></tr>
<tr id="i38_0"><td>Test Code<br></td></tr>
<tr id="i388_0"><td>.................................................. ......................<br></td></tr>
<tr id="i39_0"><td>Test Code<br></td></tr>
<tr id="i40_0"><td>Test Code<br></td></tr>
<tr id="i41_0"><td>Test Code<br></td></tr>
<tr id="i42_0"><td>Test Code<br></td></tr>
<tr id="i43_0"><td>Test Code<br></td></tr>
<tr id="i44_0"><td>Test Code<br></td></tr>
<tr id="i45_0"><td>Test Code<br></td></tr>
<tr id="i46_0"><td>Test Code<br></td></tr>
<tr id="i47_0"><td>Test Code<br></td></tr>
<tr id="i48_0"><td>Test Code<br></td></tr>
<tr id="i49_0"><td>Test Code<br></td></tr>
<tr id="i50_0"><td>Test Code<br></td></tr>
<tr id="i51_0"><td>Test Code<br></td></tr>
<tr id="i52_0"><td>Test Code<br></td></tr>
<tr id="i53_0"><td>Test Code<br></td></tr>
</table>
</body>
</html>
</table>
</BODY>
</HTML>
|
Codewalkers Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
