Highlight relevant item in another list 1

[ca8msm]

Say for example that I've got:

    <ol id="listone">
      <li id="one_one">1</li>
      <li id="one_two">2</li>
    </ol>
    <ol id="listtwo">
      <li id="two_one">1</li>
      <li id="two_one">2</li>
    </ol>

What I want to happen is that when I mouse over the first or second item in list one, the corresponding item in the second list is highlighted as well (they map directly, so the 4th item in the first list would map to the 4th item in the second etc...).

I can think of (several ways to do this:

1. Use the id's; create a function that accepts the hovered list item as a parameter, use getElementById to locate the second item and the set it's style or css class. The problem I see with this method is that the id's I used above are just for show and will be different in the production version, so I'd probably have to write a function and hard code all the "mapped" id's. I want to avoid this if possible.

2. Loop through the elements; create a function that accepted the list item as a parameter, find it's position in the list and then get a reference to the relevant item in the second list, based on the position found. The problem I see here is whether speed would be an issue or not if the user mouses over the items quickly. I'm also not sure how I'd handle which list item was actually hovered over in the first list.

Can anyone think of an easier or better way to do this (I'd prefer a method which wasn't restrictive so that if the lists grow, my js code will accommodate this)? Any examples?

Thanks,


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[j4606]

Method 2 sounds better. I'm bored so here are some things you can use.

Loop through the elements;

var listone = document.getElementById("listone").getElementsByTagName("li");

find it's position in the list and then get a reference to the relevant item in the second list.

			function hoverIds(){
				var listone = document.getElementById("listone").getElementsByTagName("li"));
				for(var i = 0; i <listone.length; i++){
					if(listone[i] == hoverObj){
						listtwo[i].style.someCSSProp = "new css prop";
					}			
				}
			}

I don't think speed will be an issue with this code

 

[ca8msm]

Thanks for the comments and example. I'll give this a go over the weekend but I'm glad to see an example which won't involve me having to hard code id's.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Lowet]

Hi!
This is how I would do it..
And both lists MUST have equal amount of list items.

JavaScript:

function hoverList()
{
var ones,twos,over;
ones = document.getElementById('listone').getElementsByTagName('li');
twos = document.getElementById('listtwo').getElementsByTagName('li');
over = event.srcElement;
   for (var i=0,im=ones.length; i<im; i++)
   {
      if (ones(i) == over) {twos(i).className = 'over';}
      else {twos(i).className = '';}
   }
}

Stylesheet:

li.over {font-weight: bold;}  /*  Or whatever you want  */

HTML:

<ol id="listone">
   <li onmouseover="hoverList();">1</li>
   <li onmouseover="hoverList();">2</li>
</ol>
<ol id="listtwo">
   <li onmouseover="hoverList();">1</li>
   <li onmouseover="hoverList();">2</li>
</ol>