scrolling through a <select> control

[headware]

I have a <select> control that contains many entries. It allows the
user to multi-select a group of them, click a button, and store the
selected data in a database. Normally they do this starting at the top
of the list moving down towards the bottom. The problem I was having
was that the <select> control was scrolling back to the top of the
page after the postback and the user would lose their place in the
<select> control forcing them to scroll through it by hand to find the
items they just selected. Adding the following javascript helped:

function scrollToSelecti on()
{
var myList = document.forms[0].selectCtrl;
if(myList.selec tedIndex >= 0)
{
myList.options[myList.selected Index].selected = true;
}
}

This works pretty well except that the <select> control stops
scrolling once the first selected item is showing at the bottom of the
list. This forces the user to scroll by hand in order to get to the
items after the selected ones, which is inconvinient. Is there a fix
for this? Can I make the <select> control scroll down so a few items
after the last selected item are showing at the bottom?

Thanks,
Dave

[Randy Webb]

Re: scrolling through a &lt;select&g t; control

headware wrote:[color=blue]
> I have a <select> control that contains many entries. It allows the
> user to multi-select a group of them, click a button, and store the
> selected data in a database. Normally they do this starting at the top
> of the list moving down towards the bottom. The problem I was having
> was that the <select> control was scrolling back to the top of the
> page after the postback and the user would lose their place in the
> <select> control forcing them to scroll through it by hand to find the
> items they just selected. Adding the following javascript helped:
>
> function scrollToSelecti on()
> {
> var myList = document.forms[0].selectCtrl;
> if(myList.selec tedIndex >= 0)
> {
> myList.options[myList.selected Index].selected = true;
> }
> }
>
> This works pretty well except that the <select> control stops
> scrolling once the first selected item is showing at the bottom of the
> list. This forces the user to scroll by hand in order to get to the
> items after the selected ones, which is inconvinient. Is there a fix
> for this? Can I make the <select> control scroll down so a few items
> after the last selected item are showing at the bottom?[/color]

Modify the inside of your if statement:

{
indexToShow = selectedIndex + 3;
myList.options[myList.indexToS how].selected = true;
}

That will make the third one after be selected though. That may or may
not be the behavior you are after.

If the select is a MULTIPLE, and you are wanting the last one selected,
it would be easier to have the select server-side generated and have the
one you want selected as SELECTED. Simply loop through the SELECT,
find the last one selected (by comparing its value) and then set it as
selected.


--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/

[headware]

Re: scrolling through a &lt;select&g t; control

Actually, that's basically what I ended up doing. I wrote some
javascript that selected the item that was 10 items after the last one
select then deselected it right away. That had the affect of scrolling
the listbox down but keeping the selection they just made. Thanks for
the help.

Dave

Randy Webb <hikksnotathome @aol.com> wrote in message news:<tPudnYvUp 6n84D3dRVn-tA@comcast.com> ...[color=blue]
> headware wrote:[color=green]
> > I have a <select> control that contains many entries. It allows the
> > user to multi-select a group of them, click a button, and store the
> > selected data in a database. Normally they do this starting at the top
> > of the list moving down towards the bottom. The problem I was having
> > was that the <select> control was scrolling back to the top of the
> > page after the postback and the user would lose their place in the
> > <select> control forcing them to scroll through it by hand to find the
> > items they just selected. Adding the following javascript helped:
> >
> > function scrollToSelecti on()
> > {
> > var myList = document.forms[0].selectCtrl;
> > if(myList.selec tedIndex >= 0)
> > {
> > myList.options[myList.selected Index].selected = true;
> > }
> > }
> >
> > This works pretty well except that the <select> control stops
> > scrolling once the first selected item is showing at the bottom of the
> > list. This forces the user to scroll by hand in order to get to the
> > items after the selected ones, which is inconvinient. Is there a fix
> > for this? Can I make the <select> control scroll down so a few items
> > after the last selected item are showing at the bottom?[/color]
>
> Modify the inside of your if statement:
>
> {
> indexToShow = selectedIndex + 3;
> myList.options[myList.indexToS how].selected = true;
> }
>
> That will make the third one after be selected though. That may or may
> not be the behavior you are after.
>
> If the select is a MULTIPLE, and you are wanting the last one selected,
> it would be easier to have the select server-side generated and have the
> one you want selected as SELECTED. Simply loop through the SELECT,
> find the last one selected (by comparing its value) and then set it as
> selected.[/color]

[Chris Slominski]

Re: scrolling through a &lt;select&g t; control


"headware" <headware@aol.c om> wrote in message
news:e3f4b0ae.0 405111600.3e8c0 763@posting.goo gle.com...[color=blue]
> Actually, that's basically what I ended up doing. I wrote some
> javascript that selected the item that was 10 items after the last one
> select then deselected it right away. That had the affect of scrolling
> the listbox down but keeping the selection they just made. Thanks for
> the help.
>
> Dave
>
> Randy Webb <hikksnotathome @aol.com> wrote in message[/color]
news:<tPudnYvUp 6n84D3dRVn-tA@comcast.com> ...[color=blue][color=green]
> > headware wrote:[color=darkred]
> > > I have a <select> control that contains many entries. It allows the
> > > user to multi-select a group of them, click a button, and store the
> > > selected data in a database. Normally they do this starting at the top
> > > of the list moving down towards the bottom. The problem I was having
> > > was that the <select> control was scrolling back to the top of the
> > > page after the postback and the user would lose their place in the
> > > <select> control forcing them to scroll through it by hand to find the
> > > items they just selected. Adding the following javascript helped:
> > >
> > > function scrollToSelecti on()
> > > {
> > > var myList = document.forms[0].selectCtrl;
> > > if(myList.selec tedIndex >= 0)
> > > {
> > > myList.options[myList.selected Index].selected = true;
> > > }
> > > }
> > >
> > > This works pretty well except that the <select> control stops
> > > scrolling once the first selected item is showing at the bottom of the
> > > list. This forces the user to scroll by hand in order to get to the
> > > items after the selected ones, which is inconvinient. Is there a fix
> > > for this? Can I make the <select> control scroll down so a few items
> > > after the last selected item are showing at the bottom?[/color]
> >
> > Modify the inside of your if statement:
> >
> > {
> > indexToShow = selectedIndex + 3;
> > myList.options[myList.indexToS how].selected = true;
> > }
> >
> > That will make the third one after be selected though. That may or may
> > not be the behavior you are after.
> >
> > If the select is a MULTIPLE, and you are wanting the last one selected,
> > it would be easier to have the select server-side generated and have the
> > one you want selected as SELECTED. Simply loop through the SELECT,
> > find the last one selected (by comparing its value) and then set it as
> > selected.[/color][/color]

I came to this news group needing this very topic, so I grabbed it and gave
it a try. I have gotten inconsistant results. It wouldn't work at all in IE
and seemed to work a couple of times in Mozilla. Any suggestions? I am
totally new to JavaScript.

<html>
<head>
<title>IOC Health Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet " href="style.css " type="text/css">
<script language="JavaS cript" type="text/javascript">
function scrollToSelecti on()
{
var myList = document.myform .elements['IOC[]'];
if(myList.selec tedIndex >= 0)
{
myList.options[myList.selected Index].selected = true;
}
}
</script>
</head>

<body background="ima ge/wallpaper.png" onLoad="scrollT oSelection()">
...

<select name="IOC[]" MULTIPLE size="<?php echo(count($opt ion)); ?>">
<?php
exec('./bin/iocscan -t0', $output);
foreach ($output as $ioc)
{ if (strstr($ioc, '<<'))
{ $ioc = str_replace('<< ', '', $ioc);
$ioc = str_replace('>> ', '', $ioc);
$ioc = trim($ioc);
$sel = "";
if (!is_null($IOCp ass))
foreach ($IOCpass as $pass) if ($pass == $ioc) $sel = "selected";
echo("<option value='$ioc' $sel>$ioc");
}
}
?> </select>

[headware]

Re: scrolling through a &lt;select&g t; control

Chris,

This is the code I used. It works fine on IE. I haven't tested it on
any other browser. Recall that I had a listbox in which people would
select ranges of items then add them to the database by clickig a
button. After they did so, I wanted the list box to scroll so that the
last item in the range they selected shows up around the middle of the
listbox. I used 15 items as an offset to get that affect, but that's
totally dependent on the size of my listbox (i.e. the number of items
it shows at any given point). You'll have to change that to fit your
list box.

function scrollToSelecti on()
{
var itemList = document.forms[0].myList;
if(itemList.sel ectedIndex >= 0)
{
itemList.option s[itemList.select edIndex].selected = true;
}
else
{
return;
}

//count the number of selected items
var count = 0;
for(i = 0; i < itemList.option s.length; i++)
{
if(itemList.opt ions[i].selected)
{
count++;
}
else if(count > 0)
{
break;
}
}

/* select the item 15 past the last selected item then unselect it.
This acts as a way to get the listbox to scroll down so that
some items after the last selected one will show, which saves
the user from having to scroll to the end of the selection by
hand after adding the range. */

var offset = itemList.select edIndex + count + 15;
itemList.option s[offset].selected = true;
itemList.option s[offset].selected = false;
}

Dave

"Chris Slominski" <cjs@jlab.org > wrote in message news:<c835oo$pb u$1@inn.jlab.or g>...[color=blue]
> "headware" <headware@aol.c om> wrote in message
> news:e3f4b0ae.0 405111600.3e8c0 763@posting.goo gle.com...[color=green]
> > Actually, that's basically what I ended up doing. I wrote some
> > javascript that selected the item that was 10 items after the last one
> > select then deselected it right away. That had the affect of scrolling
> > the listbox down but keeping the selection they just made. Thanks for
> > the help.
> >
> > Dave
> >
> > Randy Webb <hikksnotathome @aol.com> wrote in message[/color]
> news:<tPudnYvUp 6n84D3dRVn-tA@comcast.com> ...[color=green][color=darkred]
> > > headware wrote:
> > > > I have a <select> control that contains many entries. It allows the
> > > > user to multi-select a group of them, click a button, and store the
> > > > selected data in a database. Normally they do this starting at the top
> > > > of the list moving down towards the bottom. The problem I was having
> > > > was that the <select> control was scrolling back to the top of the
> > > > page after the postback and the user would lose their place in the
> > > > <select> control forcing them to scroll through it by hand to find the
> > > > items they just selected. Adding the following javascript helped:
> > > >
> > > > function scrollToSelecti on()
> > > > {
> > > > var myList = document.forms[0].selectCtrl;
> > > > if(myList.selec tedIndex >= 0)
> > > > {
> > > > myList.options[myList.selected Index].selected = true;
> > > > }
> > > > }
> > > >
> > > > This works pretty well except that the <select> control stops
> > > > scrolling once the first selected item is showing at the bottom of the
> > > > list. This forces the user to scroll by hand in order to get to the
> > > > items after the selected ones, which is inconvinient. Is there a fix
> > > > for this? Can I make the <select> control scroll down so a few items
> > > > after the last selected item are showing at the bottom?
> > >
> > > Modify the inside of your if statement:
> > >
> > > {
> > > indexToShow = selectedIndex + 3;
> > > myList.options[myList.indexToS how].selected = true;
> > > }
> > >
> > > That will make the third one after be selected though. That may or may
> > > not be the behavior you are after.
> > >
> > > If the select is a MULTIPLE, and you are wanting the last one selected,
> > > it would be easier to have the select server-side generated and have the
> > > one you want selected as SELECTED. Simply loop through the SELECT,
> > > find the last one selected (by comparing its value) and then set it as
> > > selected.[/color][/color]
>
> I came to this news group needing this very topic, so I grabbed it and gave
> it a try. I have gotten inconsistant results. It wouldn't work at all in IE
> and seemed to work a couple of times in Mozilla. Any suggestions? I am
> totally new to JavaScript.
>
> <html>
> <head>
> <title>IOC Health Tests</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <link rel="stylesheet " href="style.css " type="text/css">
> <script language="JavaS cript" type="text/javascript">
> function scrollToSelecti on()
> {
> var myList = document.myform .elements['IOC[]'];
> if(myList.selec tedIndex >= 0)
> {
> myList.options[myList.selected Index].selected = true;
> }
> }
> </script>
> </head>
>
> <body background="ima ge/wallpaper.png" onLoad="scrollT oSelection()">
> ...
>
> <select name="IOC[]" MULTIPLE size="<?php echo(count($opt ion)); ?>">
> <?php
> exec('./bin/iocscan -t0', $output);
> foreach ($output as $ioc)
> { if (strstr($ioc, '<<'))
> { $ioc = str_replace('<< ', '', $ioc);
> $ioc = str_replace('>> ', '', $ioc);
> $ioc = trim($ioc);
> $sel = "";
> if (!is_null($IOCp ass))
> foreach ($IOCpass as $pass) if ($pass == $ioc) $sel = "selected";
> echo("<option value='$ioc' $sel>$ioc");
> }
> }
> ?> </select>[/color]