FireFox select scrolling issue

[Brent Lamborn]

On a page we've got an HTML select defined as follows: "Half this game is ninety percent mental." - Yogi Berra If you can read thank a teacher, if you can read in English, thank a Marine.

[Shog9 0]

I'm interested to see your code... I tried doing a quick implementation to see what happens, and while i can manage to lock the scrolling in FF, it doesn't seem to be possible in IE6...

// moves selected option in theList up by one index (if possible) (single-sel lists only)
function moveUp()
{
var list = document.getElementById("theList");
var sel = list.selectedIndex;
if ( sel > 0 )
{
repositionOption(list, sel, sel-1);
}
}

// moves selected option in theList down by one index (if possible) (single-sel lists only)
function moveDown()
{
var list = document.getElementById("theList");
var sel = list.selectedIndex;
if ( sel < list.length-1 )
{
repositionOption(list, sel, sel+1);
}
}

function repositionOption(list, sel, index)
{
var scroll = list.scrollTop; // save scroll pos
var opt = list.item(sel);

list.remove(sel);
opt.selected = false; // mustn't be initially selected, or marking it won't scroll into view

// deal with IE breakage
try
{
list.add(opt, list.item(index));
}
catch(e)
{
// for some reason, IE uses index vs. element to insert before
list.add(opt, index);
}

list.scrollTop = scroll; // restore scroll pos
opt.selected = true; // restore selection (will scroll into view if necessary)
}

every night, i kneel at the foot of my bed and thank the Great Overseeing Politicians for protecting my freedoms by reducing their number, as if they were deer in a state park. -- Chris Losinger, Online Poker Players?

[Brent Lamborn]

Ah thanks, didn't know about scrollTop. It still doesn't quite pull off the default IE 7 behaviour which continues to scroll to keep the selected index in view, but works well enough. Here is what we use:

function orderSelect($down,$oName,$fName,$EXCLUDE) { 
	// moves Categories, Subcategories, and xxxxxx up and down in a list
	if(typeof($oName)!="object"){var $obj = document[$fName][$oName];} else {$obj = $oName;}
  	$sl = $obj.selectedIndex;
  	
    var scroll = $obj.scrollTop;

  if($obj.options[$sl].text==$EXCLUDE || $obj.options[$sl].value==$EXCLUDE){alert("This item cannot be altered.");return false}
  if ($sl != -1 && $obj.options[$sl].value > "") {
	 $oText = $obj.options[$sl].text;
	 $oValue = $obj.options[$sl].value;
	 if ($obj.options[$sl].value > "" && $sl > 0 && $down == 0) {
		if($obj.options[$sl-1].text==$EXCLUDE){alert("This item cannot be moved into that position.");return false}
		$obj.options[$sl].text = $obj.options[$sl-1].text;
		$obj.options[$sl].value = $obj.options[$sl-1].value;
		$obj.options[$sl-1].text = $oText;
		$obj.options[$sl-1].value = $oValue;
		$obj.selectedIndex--;
		$obj.scrollTop = scroll;
	 } else if ($sl < $obj.length-1 && $obj.options[$sl+1].value > "" && $down == 1) {
		if($obj.options[$sl+1].text==$EXCLUDE){alert("This item cannot be moved into that position.");return false}
		$obj.options[$sl].text = $obj.options[$sl+1].text;
		$obj.options[$sl].value = $obj.options[$sl+1].value;
		$obj.options[$sl+1].text = $oText;
		$obj.options[$sl+1].value = $oValue;
		$obj.selectedIndex++;
		$obj.scrollTop = scroll;
	 }
	 return true;
  } else {
	 alert("Please select an item first.");
	 return false;
  }
}

orderSelect is called in the onclick event for an image input. Thanks for the help!

---

"Half this game is ninety percent mental." - Yogi Berra If you can read thank a teacher, if you can read in English, thank a Marine.

[Shog9 0]

Ah, well that's a bit different. Try restoring the scroll position before modifying the selected index - that ought to let FF keep the selection in view. If not, then try also changing $obj.selectedIndex++ to $obj.options[$sl+1].selected = true.

every night, i kneel at the foot of my bed and thank the Great Overseeing Politicians for protecting my freedoms by reducing their number, as if they were deer in a state park. -- Chris Losinger, Online Poker Players?