SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Javascript: Table or Grid?

    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? Or Instead of using a table, do you think I can solve this problem using a Grid instead? If you need to view my code, please feel free to let me know.
    Thanks in advance for your help.

  2. #2
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry all for my mistake not knowing that a Grid and Table are the same. A user from another blog site just chewed me to pieces over it. This still doesn't solve my issue, but anyone can help... I am open for suggestions. Thank you for your help.

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    code please

  4. #4
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. This is a sample.

    <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{cursorointer; 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&#37;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 = (keyCode==38)?-1keyCode==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>

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I messed around a bit, got it working sort of. Tested in IE6 and firefox, take a look:
    Code:
    <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; 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:static;}
    .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);
    	}
    }
    
    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 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>
    Basically I made the page scroll to where the selected element was located (at the bottom if you scroll up, at the top if you scroll down) - and cancelled the default behavior of the browser on key up/down press (which is to scroll the document a few lines - I suspect this was root of the problem).

    Hope that helps!

  6. #6
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes! Exactly! You are an angel. ) Thank you so much. You are a wizard at JavaScript. I am trying to become more proficient in JavaScript. Do you have any recommended books that will help me? Thanks again for your help. )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •