473,216 Members | 1,344 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,216 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 1797
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: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

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.