stop jump-to-top on select list move up/down

[djzanni]

I'm a super javascript newbie so excuse me if I'm asking something stupid here. I've searched far and wide, but can't seem to figure out anything that fixes it. Here's my problem:

I've got a select list and I've got some javascript functions that move selected options up and down in the list. The problem is that when the list is scrolled down and I move a selection, the selection list does indeed move the selection, but it also scrolls up, thus obscuring the selection. This is annoying because I'm trying to sort a long list of items.

Here's an example. If you go to this example page (http://djzanni.freeshell.org/tmp) and scroll down to the bottom item (entitled "Washington Whispers...") and then hit the "up" button to move that selection up in the list, you'll see that the scroll bar goes all the way up to the top, hiding the selection. I want this not to happen.

In searching the Javascript forum, I did find this thread (http://webdeveloper.com/forum/showthread.php?t=43503&highlight=move+select+list) that seems relevant, but inserting the code mentioned there into my javascript functions didn't do any good.

Here are the javascript functions that my up and down buttons call:

function up(obj) { /*updated from version 1.2*/
obj = (typeof obj == "string") ? document.getElementById(obj) : obj;
if (obj.tagName.toLowerCase() != "select" && obj.length < 2)
return false;
var sel = new Array();
for (var i=0; i<obj.length; i++) {
if (obj[i].selected == true) {
sel[sel.length] = i;
}
}
for (i in sel) {
if (sel[i] != 0 && !obj[sel[i]-1].selected) {
var tmp = new Array((document.body.innerHTML ? obj[sel[i]-1].innerHTML : obj[sel[i]-1].text), obj[sel[i]-1].value, obj[sel[i]-1].style.color, obj[sel[i]-1].style.backgroundColor, obj[sel[i]-1].className, obj[sel[i]-1].id);
if (document.body.innerHTML) obj[sel[i]-1].innerHTML = obj[sel[i]].innerHTML;
else obj[sel[i]-1].text = obj[sel[i]].text;
obj[sel[i]-1].value = obj[sel[i]].value;
obj[sel[i]-1].style.color = obj[sel[i]].style.color;
obj[sel[i]-1].style.backgroundColor = obj[sel[i]].style.backgroundColor;
obj[sel[i]-1].className = obj[sel[i]].className;
obj[sel[i]-1].id = obj[sel[i]].id;
if (document.body.innerHTML) obj[sel[i]].innerHTML = tmp[0];
else obj[sel[i]].text = tmp[0];
obj[sel[i]].value = tmp[1];
obj[sel[i]].style.color = tmp[2];
obj[sel[i]].style.backgroundColor = tmp[3];
obj[sel[i]].className = tmp[4];
obj[sel[i]].id = tmp[5];
obj[sel[i]-1].selected = true;
obj[sel[i]].selected = false;

}
}


}

function down(obj) {
obj = (typeof obj == "string") ? document.getElementById(obj) : obj;
if (obj.tagName.toLowerCase() != "select" && obj.length < 2)
return false;
var sel = new Array();
for (var i=obj.length-1; i>-1; i--) {
if (obj[i].selected == true) {
sel[sel.length] = i;
}
}
for (i in sel) {
if (sel[i] != obj.length-1 && !obj[sel[i]+1].selected) {
var tmp = new Array((document.body.innerHTML ? obj[sel[i]+1].innerHTML : obj[sel[i]+1].text), obj[sel[i]+1].value, obj[sel[i]+1].style.color, obj[sel[i]+1].style.backgroundColor, obj[sel[i]+1].className, obj[sel[i]+1].id);
if (document.body.innerHTML) obj[sel[i]+1].innerHTML = obj[sel[i]].innerHTML;
else obj[sel[i]+1].text = obj[sel[i]].text;
obj[sel[i]+1].value = obj[sel[i]].value;
obj[sel[i]+1].style.color = obj[sel[i]].style.color;
obj[sel[i]+1].style.backgroundColor = obj[sel[i]].style.backgroundColor;
obj[sel[i]+1].className = obj[sel[i]].className;
obj[sel[i]+1].id = obj[sel[i]].id;
if (document.body.innerHTML) obj[sel[i]].innerHTML = tmp[0];
else obj[sel[i]].text = tmp[0];
obj[sel[i]].value = tmp[1];
obj[sel[i]].style.color = tmp[2];
obj[sel[i]].style.backgroundColor = tmp[3];
obj[sel[i]].className = tmp[4];
obj[sel[i]].id = tmp[5];
obj[sel[i]+1].selected = true;
obj[sel[i]].selected = false;
}
}
}

Thanks. ~daveZ