473,395 Members | 1,730 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

scrolling through a <select> control

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 scrollToSelection()
{
var myList = document.forms[0].selectCtrl;
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].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
Jul 23 '05 #1
4 11240
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 scrollToSelection()
{
var myList = document.forms[0].selectCtrl;
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].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.indexToShow].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.javascript FAQ - http://jibbering.com/faq/
Jul 23 '05 #2
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 <hi************@aol.com> wrote in message news:<tP********************@comcast.com>...
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 scrollToSelection()
{
var myList = document.forms[0].selectCtrl;
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].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.indexToShow].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.

Jul 23 '05 #3

"headware" <he******@aol.com> wrote in message
news:e3**************************@posting.google.c om...
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 <hi************@aol.com> wrote in message

news:<tP********************@comcast.com>...
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 scrollToSelection()
{
var myList = document.forms[0].selectCtrl;
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].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.indexToShow].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.


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="JavaScript" type="text/javascript">
function scrollToSelection()
{
var myList = document.myform.elements['IOC[]'];
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].selected = true;
}
}
</script>
</head>

<body background="image/wallpaper.png" onLoad="scrollToSelection()">
...

<select name="IOC[]" MULTIPLE size="<?php echo(count($option)); ?>">
<?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($IOCpass))
foreach ($IOCpass as $pass) if ($pass == $ioc) $sel = "selected";
echo("<option value='$ioc' $sel>$ioc");
}
}
?> </select>
Jul 23 '05 #4
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 scrollToSelection()
{
var itemList = document.forms[0].myList;
if(itemList.selectedIndex >= 0)
{
itemList.options[itemList.selectedIndex].selected = true;
}
else
{
return;
}

//count the number of selected items
var count = 0;
for(i = 0; i < itemList.options.length; i++)
{
if(itemList.options[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.selectedIndex + count + 15;
itemList.options[offset].selected = true;
itemList.options[offset].selected = false;
}

Dave

"Chris Slominski" <cj*@jlab.org> wrote in message news:<c8**********@inn.jlab.org>...
"headware" <he******@aol.com> wrote in message
news:e3**************************@posting.google.c om...
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 <hi************@aol.com> wrote in message

news:<tP********************@comcast.com>...
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 scrollToSelection()
> {
> var myList = document.forms[0].selectCtrl;
> if(myList.selectedIndex >= 0)
> {
> myList.options[myList.selectedIndex].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.indexToShow].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.


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="JavaScript" type="text/javascript">
function scrollToSelection()
{
var myList = document.myform.elements['IOC[]'];
if(myList.selectedIndex >= 0)
{
myList.options[myList.selectedIndex].selected = true;
}
}
</script>
</head>

<body background="image/wallpaper.png" onLoad="scrollToSelection()">
...

<select name="IOC[]" MULTIPLE size="<?php echo(count($option)); ?>">
<?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($IOCpass))
foreach ($IOCpass as $pass) if ($pass == $ioc) $sel = "selected";
echo("<option value='$ioc' $sel>$ioc");
}
}
?> </select>

Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Charles Lavin | last post by:
Hi -- I have a table cell in which is placed a <SELECT> tag. The drop-down box has an excessive amount of whitespace below it, forcing the cell to adjust its height to accommodate this extra...
3
by: Steve Wright | last post by:
I have a select box with a lot of entries in it, some of which start with the same letter. I want the user to be able to type the first few letters into the select box and have the list "move"...
2
by: abs | last post by:
Hello everybody. A piece of html code: <form ... > <select ....> <option .... <option .... </select> <select ....>
1
by: Mike | last post by:
My users have to select an value from a fixed selection of values. The obvious choice of control for such a requirement is to use a <select> (i.e. a combo box). My problem is that sometimes,...
1
by: Davey | last post by:
How do I get the textual content of an <option> element within a <select> control? e.g. <select name='tc'><option value='0'>All</option><option value='1'>Some</option></select> Get the value...
1
by: Mad Scientist Jr | last post by:
I'm stuck trying to work with a HTML <SELECT> control and javascript (similar to DualList but that control doesn't offer enough options to totally control the text on the buttons and control, also...
6
by: Chris Fink | last post by:
Does anyone know it is possible to include a small image(.gif .jpeg) within a <SELECT><option> so that the user would see the option text as well as a little image(icon) in the option? I know this...
7
by: lambertb | last post by:
Hi, is this possible to achieve this, and how? http://img217.imageshack.us/img217/779/derrrvw2.png thanks!
1
by: Eric | last post by:
Hello, I'm trying (without any success) to get the value of a disabled select control. From reviewing: http://www.w3.org/TR/html401/interact/forms.html#adef-disabled It doesn't sound like...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.