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.
-
-
Show your code or, better still, a link to a test page. -
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{b order-collapse: collapse; border: 0px solid black;}//code helped by unknown source on codingforums.co m
.tableExample tr td{cursor:point er; border: 0px solid black; padding: 0px;}
.odd{background-color:#F5DEB3'; }
.even{backgroun d-color:#F5DEB3'; }
.high{backgroun d-color:#FFFF00;f ont-size:medium;fon t-weight:bold;pos ition:static;}
.selected{backg round-color:#FFFF00;f ont-size:medium;fon t-weight:bold;}
</style>
<script type="text/javascript">
var table1 = null;
window.onload = function(){
table1 = new table.Selectabl eLSPEC("tableEx ample1",true)
}
var table = {};
table.keys = {
AddNew : function(id,act ion){
this.monitorAct ions[id] = action;
this.quickLooku p.push(id);
},
monitorActions : new Array(),
quickLookup : new Array()
}
table.ActiveTab le = null;
table.Selectabl eLSPEC = function(tableI d,activate){
var ref = this;
this.tableId = tableId;
this._init();
this.selectedId = null;
table.keys.AddN ew(tableId,ref) ;
if(activate){
table.ActiveTab le = tableId;
this.selectFirs t();
}
}
table.Selectabl eLSPEC.prototyp e._init = function(){
var ref = this;
var elemTable = document.getEle mentById(this.t ableId);
var rows = elemTable.getEl ementsByTagName ("tr");
var cnt = rows.length;
for(var i=0; i<cnt;i++){
var className = (i%2)?"odd":"ev en";
rows[i].className = className;
rows[i].defaultClassNa me = className;
rows[i].onmouseover = function(){if(t his.className!= "selected")this .className="hig h";}
rows[i].onmouseout = function(){if(t his.className!= "selected")this .className=this .defaultClassNa me;}
rows[i].onclick = function(){ref. select(this)};
}
elemTable = null;rows=null;
}
table.Selectabl eLSPEC.prototyp e.select = function(elem){
this.removeSlec tions();
this.selectedId = (this.selectedI d!=elem.id)?ele m.id:null;
if(this.selecte dId!=null)elem. className = "selected";
}
table.Selectabl eLSPEC.prototyp e.removeSlectio ns = function(elem){
var elemTable = document.getEle mentById(this.t ableId);
var rows = elemTable.getEl ementsByTagName ("tr");
var cnt = rows.length;
for(var i=0; i<cnt;i++)rows[i].className = rows[i].defaultClassNa me;
elemTable=null; rows=null;
}
table.Selectabl eLSPEC.prototyp e.selectFirst = function(){
var elemTable = document.getEle mentById(this.t ableId);
var firstRow = elemTable.getEl ementsByTagName ("tr")[0];
firstRow.classN ame = "selected"
this.selectedId = firstRow.id;
elemTable=null; firstRow=null;
}
table.Selectabl eLSPEC.prototyp e.keyClick = function(keyCod e){
var direction = (keyCode==38)?-1:(keyCode==40) ?1:0;
if(direction!=0 ){
this.selectNext (direction);
}
}
table.Selectabl eLSPEC.prototyp e.selectNext = function(dir){
var elemTable = document.getEle mentById(this.t ableId);
var rows = elemTable.getEl ementsByTagName ("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].defaultClassNa me;
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.srcElemen t:evt.target;
while(theElem!= null){
if(table.keys.q uickLookup.inde xOf(theElem.id) != -1){
table.ActiveTab le = theElem.id;
return true;
}
theElem = theElem.offsetP arent;
}
table.ActiveTab le = null;
return true;
}
function handleKeyPress( e){
var keycode;
if (window.event) keycode = window.event.ke yCode;
else if (e) keycode = e.which;
if(table.Active Table){
table.keys.moni torActions[table.ActiveTab le].keyClick(keyco de);
}
}
document.onclic k = monitorClick;
document.onkeyd own = handleKeyPress;
</script>
</head>
<body style='backgrou nd-color: #F5DEB3' class='BlackFon t'>
<table class="tableExa mple" id="tableExampl e1">
<tr id="i2_0"><td>. ............... ............... ............... ............... ...........<br> </td></tr>
<tr id="i3_0"><td>. .............He llo World.......Hel lo World......Hell o World.......<br ></td></tr>
<tr id="i4_0"><td>. .............He llo 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> < br></td></tr>
<tr> <br ></td></tr>
<tr><td>....... ............... ............... ............... ............... .....<br></td></tr>
<tr><td>....... ............... ............... ............... ............... .....<br></td></tr>
<tr><td> & nbsp; .... ............... ............... ............... ............... ..<br></td></tr>
<tr><td> & nbsp;<br></td></tr>
<br>
<tr><td> < br></td></tr>
<tr><td>....... ............... ............... ............... ............... .....<br></td></tr>
<tr><td>....... ............... ............... ............... ............... .....<br></td></tr>
</table>
</BODY>
</HTML>[/HTML]Comment
-
Instead of using a table, do you think I can solve this problem using a Grid instead?Comment
-
A grid? What kind of grid?Originally posted by Msleh08
By the way, the code doesn't work at all in Firefox. Were you looking to make it work cross-browser?Comment
Comment