Advertisement

05.14.2008 at 02:50PM PDT, ID: 23403305
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.3

Toggel links in a table

Zones: JavaScript, JScript, Asynchronous Javascript and XML (AJAX)
Tags: Javascript, IE 67 FF 2
I am making an application that allows users to use the key board to interface with it.  I am using YUI for the key listening and have almost all of my functions working.  The one that seems impossible right now is I have a search result page where links to items are in a table.  I need functions that I can call from my YUI key listener to do the following:

Right arrow function: Gets the next link on the page in a defined table.  If the selected one is in a TD at the end of the row, this should go to the first link in the next row.  At the last item in the last row, it should go to the first item (this is a nice to have)

Down arrow function: Goes to the link in the current position in the next row.  For example if you are on the 3rd link in the 2nd row, and hit down, you will be in the 3rd link in the 3rd row.  On the last row, you will go to the first row (this is a nice to have)

Left arrow function: Get the previous link in a defined table.  If the current link is the first link, the function should go to the last link in the previous row.  If it is the first item, this should go to the last item in the last row (this is a nice to have)

Up arrow function: Goes to the link in the current position in the previous row.  For example if you are on the 3rd link in the 2nd row, and hit down, you will be in the 3rd link in the 1st row.  On the first row, you will go to the last row (this is a nice to have)


I have tried this 100 different ways and it is not working.  I am open to using divs, I am using tables so I can select rows of data
Start your free trial to view this solution
Question Stats
Zone: Programming
Question Asked By: mephist0222
Solution Provided By: wilq32
Participating Experts: 1
Solution Grade: A
Views: 0
Translate:
Loading Advertisement...
05.15.2008 at 02:53PM PDT, ID: 21578283

Rank: Guru

wilq32:

All comments and solutions are available to Premium Service Members only.

Start your 7-day free trial and see for yourself why Experts Exchange is the easiest and most proven technology resource in the world. Get Started

Already a member? Login to view this solution.

 
05.15.2008 at 03:37PM PDT, ID: 21578520
mephist0222:

All comments and solutions are available to Premium Service Members only.

Start your 7-day free trial and see for yourself why Experts Exchange is the easiest and most proven technology resource in the world. Get Started

Already a member? Login to view this solution.

 
05.15.2008 at 11:36PM PDT, ID: 21580437

Rank: Guru

wilq32:

All comments and solutions are available to Premium Service Members only.

Start your 7-day free trial and see for yourself why Experts Exchange is the easiest and most proven technology resource in the world. Get Started

Already a member? Login to view this solution.

 
05.16.2008 at 12:56AM PDT, ID: 21580720
mephist0222:

All comments and solutions are available to Premium Service Members only.

Start your 7-day free trial and see for yourself why Experts Exchange is the easiest and most proven technology resource in the world. Get Started

Already a member? Login to view this solution.

 
05.16.2008 at 03:06PM PDT, ID: 21586805

Rank: Guru

wilq32:

All comments and solutions are available to Premium Service Members only.

Start your 7-day free trial and see for yourself why Experts Exchange is the easiest and most proven technology resource in the world. Get Started

Already a member? Login to view this solution.

 
05.17.2008 at 07:12PM PDT, ID: 21591359
mephist0222:

All comments and solutions are available to Premium Service Members only.

Start your 7-day free trial and see for yourself why Experts Exchange is the easiest and most proven technology resource in the world. Get Started

Already a member? Login to view this solution.

 
05.18.2008 at 05:05AM PDT, ID: 21592390

Rank: Guru

wilq32:

All comments and solutions are available to Premium Service Members only.

Start your 7-day free trial and see for yourself why Experts Exchange is the easiest and most proven technology resource in the world. Get Started

Already a member? Login to view this solution.

 
05.21.2008 at 11:51AM PDT, ID: 21617888
mephist0222:

All comments and solutions are available to Premium Service Members only.

Start your 7-day free trial and see for yourself why Experts Exchange is the easiest and most proven technology resource in the world. Get Started

Already a member? Login to view this solution.

 
 
Loading Advertisement...
Microsoft
  • Internet Protocols
  • Applications
  • Development
  • OS
  • Hardware
  • Windows Security
Apple
  • Operating Systems
  • Hardware
  • Programming
  • Networking
  • Software
Internet
  • Search Engines
  • File Sharing
  • WebTrends / Stats
  • Spy / Ad Blockers
  • Web Browsers
  • New Net Users
  • Web Development
  • Chat / IM
  • Anti Spam
  • Web Servers
  • Anti-Virus
  • Email Clients
Gamers
  • Tips
  • Online / MMORPG
  • Puzzle
  • Emulators
  • Action / Adventure
  • Role Playing
  • Consoles
  • Game Programming
  • Strategy
  • Sports
  • Misc
  • Computer Games
Digital Living
  • Hardware
  • Automotive
  • New Net Users
  • New Users
  • Software
  • Digital Music
  • Gaming World
  • Home Security
  • Apple
  • Networking Hardware
Virus & Spyware
  • Vulnerabilities
  • IDS
  • Encryption
  • Anti-Virus
  • Operating Systems Security
  • Software Firewalls
  • WebApplications
  • Cell Phones
  • Operating Systems
  • Internet
  • Hardware Firewalls
Hardware
  • Displays / Monitors
  • Handhelds / PDAs
  • Components
  • Peripherals
  • Laptops/Notebooks
  • Servers
  • Misc
  • Apple
  • Embedded Hardware
  • Networking Hardware
  • Storage
  • Desktops
  • New Users
Software
  • System Utilities
  • Industry Specific
  • Network Management
  • Photos / Graphics
  • Page Layout
  • VMware
  • Misc
  • Web Development
  • OS
  • CYGWIN
  • Voice Recognition
  • Virtualization
  • Message Queue
  • Quality Assurance
  • Security
  • Firewalls
  • MultiMedia Applications
  • Development
  • Database
  • Office / Productivity
  • Business Management
  • OS/2 Apps
  • Server Software
  • Internet / Email
ITPro
  • OS
  • Storage
  • Encryption
  • Operating Systems Security
  • Apple Hardware
  • Laptops & Notebooks
  • Servers
  • Networking Hardware
  • Peripherals
  • Devices
  • Displays / Monitors
  • WebTrends / Stats
  • Search Engines
  • Firewalls
  • Web Computing
  • WebApplications
  • IDS
  • Vulnerabilities
  • Email Clients
  • File Sharing
  • Spy / Ad Blockers
  • Web Browsers
  • Web Servers
  • Networking
  • Anti-Virus
  • Consulting
  • Chat / IM
  • Anti Spam
Developer
  • Web Servers
  • Web Browsers
  • Game Programming
  • Dev Tools
  • Industry Specific
  • Office / Productivity
  • Database
  • CYGWIN
  • Web Development
  • Search Engines
  • File Sharing
  • WebTrends / Stats
  • Programming
  • Content Management
  • Application Servers
  • Protocols
Storage
  • Removable Backup Media
  • Storage Technology
  • Servers
  • Grid
  • Remote Access
  • Backup / Restore
  • Misc
  • Hard Drives
OS
  • Miscellaneous
  • Security
  • Development
  • Linux
  • VMware
  • MainFrame OS
  • Unix
  • Apple
  • OS / 2
  • AS / 400
  • BeOS
  • Microsoft
  • VMS / OpenVMS
Database
  • Oracle
  • Miscellaneous
  • MySQL
  • Software
  • Sybase
  • Contact Management
  • PostgreSQL
  • Data Manipulation
  • Clarion
  • InterSystems Cache
  • Siebel
  • MUMPS
  • OLAP
  • SQLBase
  • SAS
  • GIS & GPS
  • 4GL
  • Berkeley DB
  • DB2
  • Informix
  • Interbase / Firebird
  • FoxPro
  • Reporting
  • LDAP
  • Filemaker Pro
  • MS SQL Server
  • dBase
  • MS Access
Security
  • Misc
  • Web Browsers
  • Software Firewalls
  • Operating Systems Security
  • File Sharing
  • Spy / Ad Blockers
  • Vulnerabilities
  • WebApplications
  • IDS
  • Anti-Virus
  • Encryption
  • Anti Spam
  • Email Clients
  • VPN
  • Chat / IM
Programming
  • Editors IDEs
  • Installation
  • Handhelds / PDAs
  • Multimedia Programming
  • System / Kernel
  • Automation
  • Algorithms
  • Game
  • Signal Processing
  • Project Management
  • Open Source
  • Database
  • Misc
  • Languages
  • Processor Platforms
  • Theory
Web Development
  • Scripting
  • Blogs
  • Web Servers
  • Software
  • Search Engines
  • Web Graphics
  • Web Services
  • Images
  • Internet Marketing
  • Images and Photos
  • Components
  • Document Imaging
  • Web Languages/Standards
  • Illustration
  • WebApplications
  • Fonts
  • WebTrends / Stats
  • Authoring
  • Digital Camera Software
  • Miscellaneous
Networking
  • Protocols
  • Apple Networking
  • Network Management
  • Message Queue
  • Application Servers
  • Content Management
  • File Servers
  • Email Servers
  • Misc
  • Java Editors & IDEs
  • Wireless
  • Networking Hardware
  • Backup / Restore
  • System Utilities
  • ISPs & Hosting
  • Web Servers
  • Storage Technology
  • Removable Backup Media
  • Servers
  • Web Computing
  • Broadband
  • Grid
  • OS / 2
  • Novell Netware
  • Unix Networking
  • Windows Networking
  • Security
  • Telecommunications
  • Operating Systems
  • Linux Networking
Other
  • Lounge
  • Business Travel
  • Community Support
  • New Net Users
  • Philosophy / Religion
  • Math / Science
  • Miscellaneous
  • URLs
  • Expert Lounge
  • Politics
  • Puzzles / Riddles
  • Automotive
Community Support
  • Suggestions
  • New to EE
  • New Topics
  • CleanUp
  • Announcements
  • General
  • Feedback
  • Input
  • EE Bugs
 
05.15.2008 at 02:53PM PDT, ID: 21578283

Rank: Guru

wilq32:
What did you achieve to now? Any working code, in half maybe? How you would like to "go to link" ?? (open something? select?) etc. :)) At all - please give more details :)
 
05.15.2008 at 03:37PM PDT, ID: 21578520
mephist0222:
Right now what I have is pretty basic, I am making 2 arrays, one for <tr> s in a table and one for <a> in a table.  

I am able to add focus() to a defined link.  The focus activates a a:active class so I can see that it is selected.  I am having issues storing the information of the link in the row and figuring out how I can select the links above and below the one that is currently selected.

What I want it to do is focus on the link like a tab index so hitting enter on the key board will go to that url.
 
05.15.2008 at 11:36PM PDT, ID: 21580437

Rank: Guru

wilq32:
At first I would advice you to do <tr> AND <td> because together it makes complete table (it means that it shouldnt work with TR only). Second thing - if you have all tr and td stored in array like this:

table = [ first_tr : [ first_td, second_td ] , second_tr: [etc...]  ]  

Then everything should be pretty easy from now on. You could add your own table.selectedRow, table.selectedCol   elements that would point at selected element in your array, and use this all information to move between your table.

Focusing will be pretty easy asuming if all links are first element in TD:


table[tr_number][td_number].firstChild.focus()


Any other questions?
 
05.16.2008 at 12:56AM PDT, ID: 21580720
mephist0222:
I one issue with the array as you have it is I will never knoe for sure how many rows or cells there will be.
 
05.16.2008 at 03:06PM PDT, ID: 21586805

Rank: Guru

wilq32:
Are you filling table dynamically  by using  insertRow,  insertCell,  or use it statically  via declaring in <HTML> ??

Whatever, in both case you can easily get information about cells and rows in table so... Whats the problem ?

for example:

document.getElementsByTagName('table')[0]; <- this points to first table in document.

document.getElementsByTagName('table')[0].rows.length   <- this is a row count
document.getElementsByTagName('table')[0].rows[0].cells.length <-  this is a cell count in first row.


 
05.17.2008 at 07:12PM PDT, ID: 21591359
mephist0222:
The content is dynamically created by a SQL query in a JSP.  Getting things into an array is not an issue.  the issue is the functions I mentioned.  Moving the focus of the links.

Thank you for helping out with this.
 
05.18.2008 at 05:05AM PDT, ID: 21592390

Rank: Guru

wilq32:
Still do not see any problems..
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:

<html>
<head>
 
<script type="text/javascript">
var focus={ x:0, y:0 , table : null}
 
 
function focusOn(focus)
{	
	focus.table.rows[focus.y].cells[focus.x].lastChild.focus(); 
}
 
function init()
{ 
	focus.table = document.getElementsByTagName('table')[0];// selecting first table (you could select it by ID for example)
	focusOn(focus);
	document.body.onkeyup = function(evt)
	{
		var key = (document.all) ? event.keyCode : evt.which;
 
		switch(key)
		{
 
			case 37: // left arrow
			focus.x--;
			break;
			case 38: // up arrow
			focus.y--;
			break;
			case 39: // right arrow
			focus.x++;
			break;
			case 40: // down arrow
			focus.y++;
			break;
		}
		
		if (focus.x<0) { focus.y --; if (focus.y<0) focus.y=focus.table.rows.length-1; focus.x=focus.table.rows[focus.y].cells.length-1; }
		if (focus.y<0) { focus.y = focus.table.rows.length-1; }
		if (focus.y>=focus.table.rows.length) { focus.y=0;}
		if (focus.x>=focus.table.rows[focus.y].cells.length) { focus.x=0; focus.y++; }
		if (focus.y>=focus.table.rows.length) { focus.y=0;}
		focusOn(focus);
	
		return false;
	}
}
 
</script>
</head>
<body onload="init()">
 
<table style="border:black solid 1px"> 
<tr><td> <a href="#"> link </td>
<td> <a href="#"> link </td><td><a href="#"> link </td><td><a href="#"> link </td><td><a href="#"> link </td><td><a href="#"> link </td></tr>
 
<tr><td> <a href="#"> link </td>
<td> <a href="#"> link </td><td><a href="#"> link </td><td><a href="#"> link </td><td><a href="#"> link </td><td><a href="#"> link </td></tr>
 
<tr><td> <a href="#"> link </td>
<td> <a href="#"> link </td><td><a href="#"> link </td><td><a href="#"> link </td><td><a href="#"> link </td><td><a href="#"> link </td></tr>
 
<tr><td> <a href="#"> link </td>
<td> <a href="#"> link </td><td><a href="#"> link </td><td><a href="#"> link </td></tr>
 
 
</table>
 
</body>
 
</html>
Open in New Window
Accepted Solution
 
05.21.2008 at 11:51AM PDT, ID: 21617888
mephist0222:
Ah, makes perfect sense now.  It was the conditioanl cases   if (focus ... that was kiling me.  Than kyou for all of your help!            
 
 
20080236-EE-VQP-29 / EE_QW_2_20070628