?...How to perform synchronized scrolling with 2 lists

[SAFX]

Is it possible to synchronize 2 <select> lists so that when the user scrolls one list the other scrolls with it?

Thanks,

SAF

[SAFX]

That's exactly what I need anyway! My select lists are both 10 items large and they are multiple select.

Is it possible?

Raffi

[Jona]

<script type="text/javascript">
function sync(lSel, rSel){
if(event.srcElement==rSel){lSel.options[rSel.options.selectedIndex].selected = true;}
else{rSel.options[lSel.options.selectedIndex].selected = true;}
}
</script>
<form action="" name="myForm"><div>
<select multiple="multiple" name="leftSel" onChange="sync(this, this.form.rightSel);">
<option selected="selected" value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
<option value="a4">A4</option>
</select>
<select multiple="multiple" name="rightSel" onChange="sync(this.form.leftSel, this);">
<option selected="selected" value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
</select>
</div></form>


[J]ona

[SAFX]

Hmmm, can you give a quick example? I'm not sure which functions to which you are referring.

THanks,

SAF

[Jona]

The code above only works for IE, but you can make it work for Netscape by editing it a little. What it does, is when you select option #2 from box "B," both options #1 and #2 are selected in box "A." When you select option #3 on box "B," the third option of box "A" is selected as well. However, if you simply start by clicking option #3 in box "B," only options #1 and #2 will be selected in box, "A."


<script type="text/javascript">
function sync(lSel, rSel, e){
srcElem = (document.all)?event.srcElement:e.target;
if(srcElem==rSel){lSel.options[rSel.options.selectedIndex].selected = true;}
else{rSel.options[lSel.options.selectedIndex].selected = true;}
}
</script>
<form action="" name="myForm"><div>
<select multiple="multiple" name="leftSel" onChange="sync(this, this.form.rightSel, event);">
<option selected="selected" value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
<option value="a4">A4</option>
</select>
<select multiple="multiple" name="rightSel" onChange="sync(this.form.leftSel, this, event);">
<option selected="selected" value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
</select>
</div></form>


[J]ona

[SAFX]

Thanks, Jona, but I need to sync scrolling, not the selections.

:-)

Raffi

[SAFX]

HA! Here's what I just found, almost, but no cigar!

http://webfx.eae.net/dhtml/syncscroll/demo1.html

Raffi

[Vladdy]

Yet another example of IE inferiority...
Here is code that works fine in Gecko: www.vladdy.net/Demos/SelectSync.html.
For IE you can emulate your list boxes with block elements: www.vladdy.net/Demos/lbie.html. This will give you the ability to add the syncronized scrolling as well as get rid of a number of other IE bugs, such as no z-index. As you can see my IE list box emulation also adds quite a few nice features as well.