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

Scrolling Issue

P: 8
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
Share this Question
Share on Google+
4 Replies


acoder
Expert Mod 15k+
P: 16,027
Show your code or, better still, a link to a test page.
Feb 15 '08 #2

P: 8
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

P: 8
Instead of using a table, do you think I can solve this problem using a Grid instead?
Feb 15 '08 #4

acoder
Expert Mod 15k+
P: 16,027
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.