Scroll Jerking - smoothScroll?

8 New Member

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 Reply

1345

Similar topics

12747

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

3657

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 contain a bigger picture of the thumbnailed selected. The problem is that all these thumbnails (and the big picture) are placed quite far down in the document. (a lot of text is at the top.) What I want is that when a thumbnail is clicked, the...

Javascript

3775

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 see this on a test page at http://www.usernomics.com/ergonomic-products-accessories5.html . Can anyone see why the words will not wrap correctly in the first scroll box

HTML / CSS

3995

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 other records by scrolling up or down with either the scroll bar on the right of the screen, or the up and down arrows which are above and below this scroll bar; or I can use the scroll wheel

Microsoft Access / VBA

4324

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

10709

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 = m_vScrollBar.Maximum; The scroll bar is set to start from the bottom.

C# / C Sharp

1859

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

Javascript

7890

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. There are a number of elements within this <div> that cause the <div> to participate in an Ajax call to the server. In order to maintain the scroll position of the <div> during the Ajax request I store the scroll value in a hidden field so that when...

Javascript

9706

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9579

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10330

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10319

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

10076

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

6851

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5651

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3816

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2990

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General