Page Scroll Jerking - Can you help me?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Msleh08
    New Member
    • Feb 2008
    • 8
    #1

    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. :o)
    PS: Sorry if you have seen this question before, I had it listed in the wrong forum. It's been a long day.

    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>
    Tags: None
    • johnhjohn
      New Member
      • Dec 2006
      • 43
      #2
      Sorry, but I don't really understand what this code does. All I can see that it does is allows you to select one of the options.

      In IE, the window does not scroll, and in FF, nothing appears to work at all.

        Comment

        • Msleh08
          New Member
          • Feb 2008
          • 8
          #3
          Originally posted by johnhjohn
          Sorry, but I don't really understand what this code does. All I can see that it does is allows you to select one of the options.

          In IE, the window does not scroll, and in FF, nothing appears to work at all.


          Hi. Thanks for responding. I had the same problem too at first. I tested the code in IE. You must have ActiveX controls enabled...than the code should work. Thanks again for your help and sorry for the mishap.

            Comment

            Previous template Next
            Working...