Scroll Jerking - smoothScroll?

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

 
<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{cursor:pointer; 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>

Mar 20 '08 #1

Subscribe Post Reply

1325

Similar topics

Good scroll bar control

by: Arlie Rahn | last post by:

I would like to ad a custom scroll bar control to my app that has a customizable and "flat" look to it (not the normal VB look). Does anyone have any ideas on where to find a good one?

Visual Basic 4 / 5 / 6

saving scroll position

by: ojorus | last post by:

Hi! I just wonder how I can save a page's scroll position with javascript. (i'm not a javascript developer) I have a PHP-page with two columns; the left contains a lot of thumbnails, and the right...

Javascript

Scroll bar working in IE and Opera but not Firefox?

by: ergobob | last post by:

Hello, I have two scroll boxes on the same page. The first scroll box is good in IE but the words will not wrap correctly in Firefox. The second scroll box is good in all browsers. You can...

HTML / CSS

Scroll wheel mystery

by: Devonish | last post by:

I have a form designed as a Continuous form which displays one record per line. Taking account of the header and footer and the size of the screen, I can display 30 records at a time. I can see...

Microsoft Access / VBA

ListView Scroll Bar

by: Mike Johnson | last post by:

I have a ListView on a form, I'm displaying the items as a list. The Scroll is set to true. I want to know how can I set the scroll bar to Vertical?

.NET Framework

Why can't I scroll back to the maximum value?

by: =?Utf-8?B?U2hhcm9u?= | last post by:

I'm using the VScrollBar and set it as follow: m_vScrollBar.Minimum = -19602; m_vScrollBar.Maximum = 0; m_vScrollBar.SmallChange = 1; m_vScrollBar.LargeChange = 1089; m_vScrollBar.Value =...

C# / C Sharp

Page Scroll Jerking - Can you help me?

by: Msleh08 | last post by:

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

Javascript

Scroll Position Reset "jerks"

by: Frinavale | last post by:

I think I'm trying to do something impossible. I have a <div> element with a overflow style set to "scroll". In other words my <div> element allows the user to scroll the content within it. ...

Javascript

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++