473,326 Members | 2,175 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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 1803
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

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

Similar topics

7
by: Noozer | last post by:
I am able to place values on forms that load into my webbrowser control, but I'd like to be able to scan the page for data. I know to use the HTMLDocument object. Basically I'm hoping to find an...
13
by: al jones | last post by:
I guess one question at a time will work better. URL http://aljones.us (yes, I'm back again) I'd like to cause this whole page to fill the viewable window if I can. Meaning that I'd like the...
13
by: tshad | last post by:
I have some nested DataGrids in my Datalist. There could be 20 datalist items. If I scroll down to the 18th item and expand it to show the DataGrid, the page always goes back to the beginning...
4
by: PK9 | last post by:
I have a button at the top of my page that I have an onClick event handler for which makes some new controls (at the bottom of my page) visible. When the user clicks the button I make the new...
5
by: Daniel | last post by:
Hi All, i have problem to scroll the page the the specific section of the page after click a command button. I have tried using <a name="f"> and use response.redirect("xxxx.aspx?#f"). Although...
4
by: Nehmo Sergheyev | last post by:
After reading about text line length http://psychology.wichita.edu/surl/usabilitynews/72/columns.htm , I'm thinking about experimenting with columns of text on a page. Is it possible on an HTML...
69
by: RC | last post by:
I know how to do this in JavaScript by window.open("newFile.html", "newTarget", "scrollbars=no,resizable=0,width=200,height=200"); The browser will open a new window size 200x200, not allow...
4
by: Link | last post by:
how do i scroll page when i get to a location ... something like : <body onLoad="sl()"> <script languge="javascript"> function sl(){ if (document.stopper.y>50) { window.scroll(0,100); }...
0
by: hokeyplyr48 | last post by:
This is my first flash project and i've been doing it all of tutorials. working in Flash CS3 windows xp pro actionscript 2.0 the website can be found here:...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.