By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,203 Members | 608 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,203 IT Pros & Developers. It's quick & easy.

Scroll Jerking - smoothScroll?

P: 8
Hello. I have slight issue. I have been just seeing what java can do. The code below shows a basic html text file with a highlighted bar that scrolls over each <tr>. If you notice, when you scroll using your up/down arrow the page jerks. Would I remove this jerking by applying smoothScroll? Thank you in advance for your help.

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{cursor:pointer; 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>
  234.  
Mar 20 '08 #1
Share this question for a faster answer!
Share on Google+

Post your reply

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