469,323 Members | 1,480 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,323 developers. It's quick & easy.

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.

Expand|Select|Wrap|Line Numbers
  1.   <Head>
  2. <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  3. <title>test_1</title>
  4. <style type="text/css">
  5. .tableExample{border-collapse: collapse; border: 0px solid black; overflow: auto; }
  6. .tableExample tr td{cursorointer; border: 0px solid black; padding: 0px;}
  7. .odd{background-color:#F5DEB3';}
  8. .even{background-color:#F5DEB3';}
  9. .high{background-color:#FFFF00;font-size:medium;font-weight:bold;position: fixed;}
  10. .selected{background-color:#FFFF00;font-size:medium;font-weight:bold;}
  11. </style>
  12.  
  13. <script type="text/javascript">
  14. var table = {};
  15.  
  16. table.keys = {
  17. AddNew : function(id,action){
  18. this.monitorActions[id] = action;
  19. this.quickLookup.push(id);
  20. },
  21. monitorActions : new Array(),
  22. quickLookup : new Array()
  23. }
  24.  
  25. table.ActiveTable = null;
  26.  
  27. table.SelectableLSPEC = function(tableId,activate){
  28. var ref = this;
  29. this.tableId = tableId; 
  30. this._init();
  31. this.selectedId = null;
  32. table.keys.AddNew(tableId,ref);
  33. if(activate){
  34. table.ActiveTable = tableId;
  35. this.selectFirst();
  36. }
  37. }
  38.  
  39. table.SelectableLSPEC.prototype._init = function(){
  40. var ref = this;
  41. var elemTable = document.getElementById(this.tableId);
  42. var rows = elemTable.getElementsByTagName("tr");
  43. var cnt = rows.length;
  44. for(var i=0; i<cnt;i++){
  45. var className = (i%2)?"odd":"even";
  46. rows[i].className = className;
  47. rows[i].defaultClassName = className;
  48. rows[i].onmouseover = function(){if(this.className!="selected")this.className="high";}
  49. rows[i].onmouseout = function(){if(this.className!="selected")this.className=this.defaultClassName; }
  50. rows[i].onclick = function(){ref.select(this)}; 
  51. }
  52. ElemTable = null;rows=null;
  53. }
  54.  
  55. table.SelectableLSPEC.prototype.select = function(elem){
  56. this.removeSlections();
  57. this.selectedId = (this.selectedId!=elem.id)?elem.id:null;
  58. if(this.selectedId!=null)elem.className = "selected";
  59. }
  60.  
  61. table.SelectableLSPEC.prototype.removeSlections = function(elem){
  62. var elemTable = document.getElementById(this.tableId);
  63. var rows = elemTable.getElementsByTagName("tr");
  64. var cnt = rows.length;
  65. for(var i=0; i<cnt;i++)rows[i].className = rows[i].defaultClassName;
  66. ElemTable=null; rows=null;
  67. }
  68.  
  69. table.SelectableLSPEC.prototype.selectFirst = function(){
  70.  
  71. var elemTable = document.getElementById(this.tableId);
  72. var firstRow = elemTable.getElementsByTagName("tr")[0];
  73. firstRow.className = "selected"
  74. this.selectedId = firstRow.id;
  75. ElemTable=null; firstRow=null;
  76.  
  77. }
  78.  
  79. table.SelectableLSPEC.prototype.keyClick = function(keyCode){
  80. var direction;
  81. switch (keyCode) {
  82. case 38:
  83. direction = -1;
  84. break;
  85. case 40:
  86. direction = 1;
  87. break;
  88. default:
  89. direction = 0;
  90. break;
  91. }
  92. if(direction!=0){ 
  93. this.selectNext(direction);
  94.  
  95. document.scrollTop = hilightedElement.offsetTop; 
  96. }
  97. }
  98.  
  99. table.SelectableLSPEC.prototype.selectNext = function(dir){
  100.  
  101. var elemTable = document.getElementById(this.tableId);
  102. var rows = elemTable.getElementsByTagName("tr");
  103. var cnt = rows.length;
  104. var hasSelection = false;
  105. for(var i=0; i<cnt;i++){
  106. if(rows[i].className == "selected"){
  107. if((dir==-1 && i>0) || (dir==1 && i+1<cnt)){
  108. rows[i].className = rows[i].defaultClassName;
  109. rows[i+dir].className = "selected";
  110. this.selectedId = rows[i+dir].id;
  111. rows[i+dir].scrollIntoView(dir == -1);
  112. }
  113. hasSelection = true;
  114. break;
  115. }
  116. }
  117.  
  118. ElemTable=null; rows=null;
  119.  
  120. }
  121.  
  122.  
  123.  
  124. function monitorClick(e){
  125. var evt = (e)?e:event;
  126.  
  127. var theElem = (evt.srcElement)?evt.srcElement:evt.target;
  128.  
  129. while(theElem!=null){
  130. if(table.keys.quickLookup.indexOf(theElem.id) != -1){
  131. table.ActiveTable = theElem.id;
  132. return true;
  133. }
  134. theElem = theElem.offsetParent; 
  135. }
  136. table.ActiveTable = null;
  137. return true;
  138. }
  139.  
  140.  
  141. function handleKeyPress(e){
  142. var code;
  143. if (window.event) {
  144. code = window.event.keyCode;
  145. event.cancelBubble = true;
  146. } else if (e) {
  147. code = e.which;
  148. e.stopPropagation();
  149. }
  150. if(table.ActiveTable){
  151. table.keys.monitorActions[table.ActiveTable].keyClick(code);
  152. }
  153. return false;
  154. }
  155.  
  156. document.onclick = monitorClick;
  157. document.onkeydown = handleKeyPress;
  158.  
  159.  
  160. var table1 = null;
  161. window.onload = function(){
  162. table1 = new table.SelectableLSPEC("tableExample1",true)
  163. }
  164.  
  165. </script> 
  166. </head>
  167. <body>
  168. <form id="form1" runat="server">
  169. <div>
  170. <table class="tableExample" id="tableExample1">
  171.  
  172. <tr id="i1_0"><td> <span class='BigFont'>Test Code</Span>Test Code<br></td>
  173. <tr id="i2_0"><td>.................................................. ......................<br></td></tr>
  174. <tr id="i3_0"><td>..............Test Code.......Test Code......Test Code.......<br></td></tr>
  175. <tr id="i4_0"><td>..............TEst................................ ................<br></td></tr>
  176.  
  177. <tr id="i5_0"><td>.................................................. ......................<br></td></tr>
  178. <tr id="i6_0"><td>Test Code<br></td></tr>
  179. <tr id="i7_0"><td>.................................................. ......................<br></td></tr>
  180. <tr id="i8_0"><td>Test Code<br></td></tr>
  181. <tr id="i9_0"><td>Test Code<br></td></tr>
  182. <tr id="i10_0"><td>Test Code<br></td></tr>
  183. <tr id="i11_0"><td>Test Code<br></td></tr>
  184. <tr id="i12_0><td>.................................................. ......................<br></td></tr>
  185. <tr id="i177_0"><td>.................................................. ......................<br></td></tr>
  186. <tr id="i18_0"><td>Test Code<br></td></tr>
  187. <tr id="i19_0"><td>Test Code<br></td></tr>
  188. <tr id="i20_0"><td>Test Code<br></td></tr>
  189. <tr id="i21_0"><td>Test Code<br></td></tr>
  190. <tr id="i22_0"><td>Test Code<br></td></tr>
  191. <tr id="i23_0"><td>Test Code<br></td></tr>
  192. <tr id="i24_0"><td>Test Code<br></td></tr>
  193. <tr id="i25_0"><td>Test Code<br></td></tr>
  194. <tr id="i26_0"><td>Test Code<br></td></tr>
  195. <tr id="i266_0"><td>.................................................. ......................<br></td></tr>
  196. <tr id="i27_0"><td>Test Code<br></td></tr>
  197. <tr id="i28_0"><td>Test Code<br></td></tr>
  198. <tr id="i29_0"><td>Test Code<br></td></tr>
  199. <tr id="i30_0"><td>Test Code<br></td></tr>
  200. <tr id="i300_0"><td>.................................................. ......................<br></td></tr>
  201. <tr id="i31_0"><td>Test Code<br></td></tr>
  202. <tr id="i32_0"><td>Test Code<br></td></tr>
  203. <tr id="i33_0"><td>.................................................. ......................<br></td></tr>
  204. <tr id="i34_0"><td>Test Code<br></td></tr>
  205. <tr id="i35_0"><td>Test Code<br></td></tr>
  206. <tr id="i355_0"><td>.................................................. ......................<br></td></tr>
  207. <tr id="i36_0"><td>Test Code<br></td></tr>
  208. <tr id="i37_0"><td>Test Code<br></td></tr>
  209. <tr id="i38_0"><td>Test Code<br></td></tr>
  210. <tr id="i388_0"><td>.................................................. ......................<br></td></tr>
  211. <tr id="i39_0"><td>Test Code<br></td></tr>
  212. <tr id="i40_0"><td>Test Code<br></td></tr>
  213. <tr id="i41_0"><td>Test Code<br></td></tr>
  214. <tr id="i42_0"><td>Test Code<br></td></tr>
  215. <tr id="i43_0"><td>Test Code<br></td></tr>
  216. <tr id="i44_0"><td>Test Code<br></td></tr>
  217. <tr id="i45_0"><td>Test Code<br></td></tr>
  218. <tr id="i46_0"><td>Test Code<br></td></tr>
  219. <tr id="i47_0"><td>Test Code<br></td></tr>
  220. <tr id="i48_0"><td>Test Code<br></td></tr>
  221. <tr id="i49_0"><td>Test Code<br></td></tr>
  222. <tr id="i50_0"><td>Test Code<br></td></tr>
  223. <tr id="i51_0"><td>Test Code<br></td></tr>
  224. <tr id="i52_0"><td>Test Code<br></td></tr>
  225. <tr id="i53_0"><td>Test Code<br></td></tr>
  226. </table>
  227. </body>
  228. </html>
  229.  
  230.  
  231. </table>
  232. </BODY>
  233. </HTML>
Mar 26 '08 #1
2 1603
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.
Mar 26 '08 #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.


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.
Mar 27 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

13 posts views Thread by al jones | last post: by
13 posts views Thread by tshad | last post: by
5 posts views Thread by Daniel | last post: by
4 posts views Thread by Nehmo Sergheyev | last post: by
4 posts views Thread by Link | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by Gurmeet2796 | last post: by
reply views Thread by mdpf | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.