469,602 Members | 1,747 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,602 developers. It's quick & easy.

Scrolling Issue

Hello. I created this program that highlights each line of text as the user scrolls up and down using arrow keys. Only problem is when the users scrolls down and up the page scrolls too fast to see the highligted line. Would I have to use a Screen Object to stop this problem. Thanks in advance for your help.
Feb 14 '08 #1
4 1170
acoder
16,027 Expert Mod 8TB
Show your code or, better still, a link to a test page.
Feb 15 '08 #2
Below is code... Thanks for your help.


[HTML]<HTML>
<Head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

<style type="text/css">
.tableExample{border-collapse: collapse; border: 0px solid black;}//code helped by unknown source on codingforums.com
.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:static;}
.selected{background-color:#FFFF00;font-size:medium;font-weight:bold;}
</style>

<script type="text/javascript">
var table1 = null;
window.onload = function(){
table1 = new table.SelectableLSPEC("tableExample1",true)
}

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.clas sName="high";}
rows[i].onmouseout = function(){if(this.className!="selected")this.clas sName=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 = (keyCode==38)?-1:(keyCode==40)?1:0;
if(direction!=0){
this.selectNext(direction);
}
}

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;
}
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 keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
if(table.ActiveTable){
table.keys.monitorActions[table.ActiveTable].keyClick(keycode);
}
}

document.onclick = monitorClick;
document.onkeydown = handleKeyPress;

</script>
</head>
<body style='background-color: #F5DEB3' class='BlackFont'>
<table class="tableExample" id="tableExample1">
<tr id="i2_0"><td>.................................... ....................................<br></td></tr>
<tr id="i3_0"><td>..............Hello World.......Hello World......Hello World.......<br></td></tr>
<tr id="i4_0"><td>..............Hello World............................................. ...<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr id="i6_0"><td>"You are today where your thoughts have brought you, and you will be tomorrow where you thoughts take you" by James Allen<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr id="i8_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr id="i9_0"><td>"Work long play hard" UNKNOWN<br></td></tr>
<tr id="i10_0"><td>Javascript is fun<br></td></tr>
<tr id="i11_0"><td>"You are today where your thoughts have brought you, and you will be tomorrow where you thoughts take you" by James Allen<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr id="i13_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr id="i14_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr id="i15_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr id="i16_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr id="i17_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr id="i18_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i19_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i20_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i21_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i22_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i23_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i24_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i25_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i26_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>&nbsp;<br></td></tr>
<tr>&nbsp;<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;........................ ..........................................<br></td></tr>
<tr><td>&nbsp;&nbsp;<br></td></tr>
<br>
<tr><td>&nbsp;<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>

</table>
</BODY>
</HTML>[/HTML]
Feb 15 '08 #3
Instead of using a table, do you think I can solve this problem using a Grid instead?
Feb 15 '08 #4
acoder
16,027 Expert Mod 8TB
Instead of using a table, do you think I can solve this problem using a Grid instead?
A grid? What kind of grid?

By the way, the code doesn't work at all in Firefox. Were you looking to make it work cross-browser?
Feb 16 '08 #5

Post your reply

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

Similar topics

1 post views Thread by Wesman | last post: by
reply views Thread by 23s | last post: by
reply views Thread by The Confessor | last post: by
17 posts views Thread by pigeonrandle | last post: by
reply views Thread by guiromero | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.