Advanced Search

Results 1 to 8 of 8

Thread: Use Arrows keys to move to and highlight row

  1. #1
    Join Date
    Oct 2011
    Posts
    45
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Use Arrows keys to move to and highlight row

    Hello,

    I need your help,

    The code below is used to highlight the selected row (when clicked) from the grid table. However, i'd like to add functionality such that when the focus is on the table and I use both the arrow up and down keys it will also move to and highlight the row. I am still a newbie to this all and have had previous help with the existing coding.

    Due to the restriction of the maximum amount characters allowed, I have moved it over to paste bucket: http://www.pastebucket.com/2481

    Thanks for all your help, I am direly frustrated.

    Jay.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,709
    Thanks
    43
    Thanked 3,134 Times in 3,098 Posts
    Blog Entries
    12

    Default

    In the standard event model tables don't receive focus. But this is a pretty close. They can at least in a relative way in IE's event model, so for IE it acts as requested. For non-IE it checks for keydown on the document and if there's a highlighted row, moves to the next. I elected to not move if none were highlighted or if no more in the given direction were available. That behavior can be changed.

    Replace:

    Code:
    var color = "#E1E0D7"
    var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
    var n = rows.length;
    var bgcs = [];
    for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
    
    function changeColor(e) {
    if(!e) e = window.event;
    var o = e.target? e.target: e.srcElement;
    while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
    	for(var i=0; i<n; ++i) {
    		rows[i].style.backgroundColor = bgcs[i];
    		if(rows[i]==o) {
    		rows[i].style.backgroundColor = color;
    		}//end of if
    	}//end of for
    }//end of function
    
    if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
    else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
    
    
    
    }//end of onload
    With:

    Code:
    var currow;
    var color = "#E1E0D7"
    var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
    var n = rows.length;
    var bgcs = [];
    for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
    
    function changeColor(e) {
    if(!e) e = window.event;
    var o = e.target? e.target: e.srcElement;
    while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
    	for(var i=0; i<n; ++i) {
    		rows[i].style.backgroundColor = bgcs[i];
    		if(rows[i]==o) {
    		currow = i;
    		rows[i].style.backgroundColor = color;
    		}//end of if
    	}//end of for
    }//end of function
    if(document.addEventListener && (window.opera || !window.attachEvent)){
    	for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
    	document.addEventListener('keydown', function(e){
    		if(e.keyCode == 38){if(currow > 1)changeColor({target: rows[--currow]});}
    		if(e.keyCode == 40){if(currow < n - 1)changeColor({target: rows[++currow]});}
    	}, false);
    }
    else{
    	for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
    	document.getElementById('mstrTable').attachEvent('onkeydown', function(){
    		if(event.keyCode == 38){if(currow > 1)changeColor({target: rows[--currow]});}
    		if(event.keyCode == 40){if(currow < n - 1)changeColor({target: rows[++currow]});}
    	});
    }
    
    
    
    }//end of onload
    Last edited by jscheuer1; 06-27-2012 at 08:16 AM. Reason: saw IE could receive focus on table
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2011
    Posts
    45
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    WOW! Rocket Science at play here.

    It works great jscheuer1.

    Thanks so so very much for all your help with this.

    This was beyond my level of understanding of Javascript and the DOM.

    Cheers and have an awesome day.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,709
    Thanks
    43
    Thanked 3,134 Times in 3,098 Posts
    Blog Entries
    12

    Default

    Great! Here's a different version. I found a way to detect a focus like event in non-IE, and changed the logic of what happens at the top and bottom rows. Replace the same code block:

    Code:
    var currow;
    var arrowApproved = false;
    var color = "#E1E0D7";
    var mstr = document.getElementById("mstrTable");
    var rows = mstr.getElementsByTagName("tr");
    var n = rows.length;
    var bgcs = [];
    for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
    
    function changeColor(e) {
    if(e && e.type === 'click'){
    	arrowApproved = true;
    }
    if(!e) e = window.event;
    var o = e.target? e.target: e.srcElement;
    while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
    	for(var i=0; i<n; ++i) {
    		rows[i].style.backgroundColor = bgcs[i];
    		if(rows[i]==o) {
    		currow = i;
    		rows[i].style.backgroundColor = color;
    		}//end of if
    	}//end of for
    }//end of function
    
    function arrowTest(e){
    	var t = e.target;
    	while((t = t.parentNode)){
    		if(t === mstr){arrowApproved = true; return;}
    	}
    	arrowApproved = false;
    }
    
    function arrowKeys(e){
    	if(e && !arrowApproved){return;}
    	e = e || event;
    	var k = e.keyCode;
    	if(k === 38){currow > 0 ? changeColor({target: rows[--currow]}) : changeColor({target: rows[n - 1]});}
    	if(k === 40){currow < n - 1 ? changeColor({target: rows[++currow]}) : changeColor({target: rows[currow? 0 : 1]});}
    }
    if(document.addEventListener && (window.opera || !window.attachEvent)){
    	for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
    	document.addEventListener('keydown', arrowKeys, false);
    	document.addEventListener('click', arrowTest, false);
    	//document.addEventListener('focus', arrowTest, false); // may be required if there are forms on the page and/or to change behavior if tab key is used
    	
    }
    else{
    	for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
    	document.getElementById('mstrTable').attachEvent('onkeydown', arrowKeys);
    }
    
    
    
    }//end of onload
    I added a focus event, but have it commented out. It affects how the use of the tab key will affect 'focus' on the table. It could be good to use if there are forms on the page. It's optional otherwise and has the effect that if the tab key is hit a few times, the table loses 'focus' and must be clicked on again to approve the arrow keys.

    A different variation might be good. One where all browsers do not wait for a click on the table to focus it. That way users with no pointing device could use their arrow keys. Let me know what you think.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2011
    Posts
    45
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Wow!

    Amazing what you and a wrench could do lol.

    I was thinking...is there a way to write a seperate function that would go to the specified row and highlight it as well? I guess the same function, once executed again would need to unhighlight the curr row and highlight the new one.

    ie. function goto_row(row) () {}

    I can't figure this out either. Im pretty slow at this stuff.
    But I was thinking like goto_row(4) and it would highlight and go to row 4. If I execute it again goto_row(6), it would then unhighlight row 4 and highlight row 6.

    An arms lenght here of a guess, but what would the code be for that?

    Ps. wonderful work and much thanks for everything you've done so far.

    Jay

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,709
    Thanks
    43
    Thanked 3,134 Times in 3,098 Posts
    Blog Entries
    12

    Default

    Add this function (highlighted) in the spot indicated:

    Code:
     . . . tion arrowKeys(e){
    	if(e && !arrowApproved){return;}
    	e = e || event;
    	var k = e.keyCode;
    	if(k === 38){currow > 0 ? changeColor({target: rows[--currow]}) : changeColor({target: rows[n - 1]});}
    	if(k === 40){currow < n - 1 ? changeColor({target: rows[++currow]}) : changeColor({target: rows[currow? 0 : 1]});}
    }
    window.gotoRow = function(num){
    	changeColor({target: rows[num], type: 'click'});
    	setTimeout(function(){arrowApproved = true;}, 0);
    	mstr.focus();
    	return false;
    };
    if(document.addEventList . . .
    Now you can make links to highlight specific rows, example:

    HTML Code:
    <a href="#" onclick="return gotoRow(2);">Row 2</a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Oct 2011
    Posts
    45
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Wow incredible piece of work.

    I never though of piggy backing off of the click.

    How you did it was completely astonishing to me, definetly added this to my personnal dictionary of javascript.

    Again, thank you so so very much for your wonderful help.

    If I ever need help again, I hope your around for a long while.

    This has been a fun project. Thanks again so much for helping me out!

    Highly and greatly appreciated.

    Ps. who do I make out the cheque too?

    Cheers and have a splendid awesome day!

    Jay!

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,709
    Thanks
    43
    Thanked 3,134 Times in 3,098 Posts
    Blog Entries
    12

    Default

    I'm assuming you don't mean the click on the link, that's pretty straightforward.

    Other than that, I'm not using just type: 'click', and only using it to make changeColor think a row was clicked. And the function gotoRow has stuff in it that satisfies various browsers, not all browsers need or will use all of it, but none of it appears to hurt any of them.

    Quote Originally Posted by jason_kelly View Post
    Ps. who do I make out the cheque too?
    If you're serious about that, none is required. But if you like, you can donate to my PayPal account:

    Donate
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •