AJAX

Multiple select autoscroll to last item

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2008

Posts: 55

Reputation: kvdd is an unknown quantity at this point

Solved Threads: 2

kvdd

Offline

Junior Poster in Training

Multiple select autoscroll to last item

Aug 25th, 2008

Hello,

I am a bit a loser with JavaScript, but I found the following code to auto scroll a multiple select box to the last selected item.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
Function autoscroll()
{
var lst = From1.Listbox1 
if ((lst.multiple==true) && (lst.length>0)) {
if (lst[lst.length-1].selected==true) {
lst[lst.length-1].selected=true;
return;
}
else {
lst[lst.length-1].selected=true;
lst[lst.length-1].selected=false;
}
for (var i=0; i< lst.length;++i)
if (lst.selected==true) {
lst.selected=true;
return;
}
}}
Function autoscroll()
{
var lst = From1.Listbox1 
if ((lst.multiple==true) && (lst.length>0)) {
if (lst[lst.length-1].selected==true) {
lst[lst.length-1].selected=true;
return;
}
else {
lst[lst.length-1].selected=true;
lst[lst.length-1].selected=false;
}
for (var i=0; i< lst.length;++i)
if (lst.selected==true) {
lst.selected=true;
return;
}
}}

But when I put it in my code it does notting.

I have 3 multiple select list boxes that all must scroll to the latest selected item in the list.
When the user clicks on it, the onclick event is called: onclick="submit()"
Does anyone know how to get the above function work?

Thanks before!

•

Join Date: Aug 2008

Posts: 381

Reputation: langsor is an unknown quantity at this point

Solved Threads: 33

langsor

Offline

Posting Whiz

Re: Multiple select autoscroll to last item

Aug 25th, 2008

Hey, the problem with the method you have here (besides it not being documented how to use it), is that it only appears to work in IE browsers (at least not Firefox).

So I wrote my own that seems to work in IE7 and FF3 and who knows what other browsers -- but of course it doesn't work in Opera

Hope it helps.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
 
window.onload = function () {
  register_selects('test');
};
 
function register_selects( form_id ) {
  var form = document.getElementById(form_id);
  selects = form.getElementsByTagName('select');
  for ( var i = 0; i < selects.length; i ++ ) {
    selects.item(i).onclick = function () {
      var opts = this.getElementsByTagName('option');
      for ( var j = opts.length -1; j > 0; --j ) {
        if ( opts.item(j).selected == true ) {
          this.scrollTop = j * opts.item(i).offsetHeight;
          return;
        }
      }
    };
  }
}
</script>
</head>
<body>
<form id="test">
  <select multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3">three</option>
    <option name="four" value="4">four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
  <select multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3">three</option>
    <option name="four" value="4">four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">

window.onload = function () {
  register_selects('test');
};

function register_selects( form_id ) {
  var form = document.getElementById(form_id);
  selects = form.getElementsByTagName('select');
  for ( var i = 0; i < selects.length; i ++ ) {
    selects.item(i).onclick = function () {
      var opts = this.getElementsByTagName('option');
      for ( var j = opts.length -1; j > 0; --j ) {
        if ( opts.item(j).selected == true ) {
          this.scrollTop = j * opts.item(i).offsetHeight;
          return;
        }
      }
    };
  }
}
</script>
</head>
<body>
<form id="test">
  <select multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3">three</option>
    <option name="four" value="4">four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
  <select multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3">three</option>
    <option name="four" value="4">four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
</form>
</body>
</html>

Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.

•

Join Date: Jun 2008

Posts: 55

Reputation: kvdd is an unknown quantity at this point

Solved Threads: 2

kvdd

Offline

Junior Poster in Training

Re: Multiple select autoscroll to last item

Aug 27th, 2008

Much thanks for it, it seems to work in Firefox, but not in IE.
Edit:Ouch! seems that it also does not work in Firefox! my mistake!

I have edited it to a simple example of my situation. Namely that I use onclick="submit();" when the user clicks an option from the list.
The code below is the edited version of yours (I have not edited the JavaScript), and it does not work in IE.

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<html>
<body>
<head>
<script type="text/javascript">
 
window.onload = function () {
  register_selects('test');
};
 
function register_selects( form_id ) {
  var form = document.getElementById(form_id);
  selects = form.getElementsByTagName('select');
  for ( var i = 0; i < selects.length; i ++ ) {
    selects.item(i).onclick = function () {
      var opts = this.getElementsByTagName('option');
      for ( var j = opts.length -1; j > 0; --j ) {
        if ( opts.item(j).selected == true ) {
          this.scrollTop = j * opts.item(i).offsetHeight;
          return;
        }
      }
    };
  }
}
</script>
</head>
 
<?php 
// Debugging: print the GETS
print_r($_GET); 
 
// The numbers of the options in an array (Cijfer is Dutch for Number)
$aCijfers = array('one','two','three','four','five','six','seven');
// The names of the selects in an array
$aName = array('tes1','tes2');
 
// Start form
echo '<form id="test" method="GET" action="">';
 
// Loop for displaying the two selects
for ($i=0; $i<2; $i++){
	echo '<select name="'.$aName[$i].'" multiple size="3" onclick="submit();">';
	// Loop for displaying the options
	foreach ($aCijfers AS $id => $cijfer){
		echo '<option name="'.$cijfer.'" value="'.$id.'"'; 
		// When the GET name holds the number of variable id, then echo selected
		if ($_GET[$aName[$i]] == $id){echo ' selected';} 
		echo ' >'.$cijfer.'</option>';
	}
	echo '</select>';
}
?>
 
  <input type="submit" name="ok" value="ok" />
</form>
</body>
</html>
<html>
<body>
<head>
<script type="text/javascript">

window.onload = function () {
  register_selects('test');
};

function register_selects( form_id ) {
  var form = document.getElementById(form_id);
  selects = form.getElementsByTagName('select');
  for ( var i = 0; i < selects.length; i ++ ) {
    selects.item(i).onclick = function () {
      var opts = this.getElementsByTagName('option');
      for ( var j = opts.length -1; j > 0; --j ) {
        if ( opts.item(j).selected == true ) {
          this.scrollTop = j * opts.item(i).offsetHeight;
          return;
        }
      }
    };
  }
}
</script>
</head>

<?php 
// Debugging: print the GETS
print_r($_GET); 

// The numbers of the options in an array (Cijfer is Dutch for Number)
$aCijfers = array('one','two','three','four','five','six','seven');
// The names of the selects in an array
$aName = array('tes1','tes2');

// Start form
echo '<form id="test" method="GET" action="">';

// Loop for displaying the two selects
for ($i=0; $i<2; $i++){
	echo '<select name="'.$aName[$i].'" multiple size="3" onclick="submit();">';
	// Loop for displaying the options
	foreach ($aCijfers AS $id => $cijfer){
		echo '<option name="'.$cijfer.'" value="'.$id.'"'; 
		// When the GET name holds the number of variable id, then echo selected
		if ($_GET[$aName[$i]] == $id){echo ' selected';} 
		echo ' >'.$cijfer.'</option>';
	}
	echo '</select>';
}
?>

  <input type="submit" name="ok" value="ok" />
</form>
</body>
</html>

Last edited by kvdd; Aug 27th, 2008 at 5:37 am.

•

Join Date: Aug 2008

Posts: 381

Reputation: langsor is an unknown quantity at this point

Solved Threads: 33

langsor

Offline

Posting Whiz

Re: Multiple select autoscroll to last item

Aug 27th, 2008

I will try to look at it when I have more time ... but why do you need it to scroll to the last selected option if you're submitting the form?

I believe your current problem is that this line
echo '<select name="'.$aName[$i].'" multiple size="3" onclick="submit();">';
is overwriting the event handler from this line
selects.item(i).onclick = function () {

If you need a form submit action when you click the select element and also need it to scroll to the last element (?) then you can add a submit to the function I wrote ...
this.scrollTop = j * opts.item(i).offsetHeight;
//return; // REPLACE RETURN WITH SUBMIT
this.submit();

Hope this helps

Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.

•

Join Date: Jun 2008

Posts: 55

Reputation: kvdd is an unknown quantity at this point

Solved Threads: 2

kvdd

Offline

Junior Poster in Training

Re: Multiple select autoscroll to last item

Aug 29th, 2008

•

Originally Posted by langsor

I will try to look at it when I have more time ... but why do you need it to scroll to the last selected option if you're submitting the form?

Because when the form submits, another form gets changed, after the POST of the submit. And the scrolling is needed, because I have some multiple selects, that can have 30 or more items in it. The user can click one, and when needed(almost the time) click another one too(thus: more than one selected at the same time). When the form submits, he must scroll again to the last one that he has checked, to continue his selections where he was left, and that is frustrating

•

I believe your current problem is that this line
echo '<select name="'.$aName[$i].'" multiple size="3" onclick="submit();">';
is overwriting the event handler from this line
selects.item(i).onclick = function () {

I have removed the onclick in the upper redline now..

•

If you need a form submit action when you click the select element and also need it to scroll to the last element (?) then you can add a submit to the function I wrote ...
this.scrollTop = j * opts.item(i).offsetHeight;
//return; // REPLACE RETURN WITH SUBMIT
this.submit();

Hope this helps

Thank you very much, I thought when I saw it, this is the solution, but I get JavaScript errors like: this.submit is not a function. And when I change it to submit(); instead of this.submit(); I get the error: submit is not defined
I hope you will have the time to help me further, much thanks for that what you did already!

•

Join Date: Jun 2008

Posts: 55

Reputation: kvdd is an unknown quantity at this point

Solved Threads: 2

kvdd

Offline

Junior Poster in Training

Re: Multiple select autoscroll to last item

Aug 29th, 2008

I have changed: this.submit(); to form.submit(); and now it works how it must be! But only in Firefox :s
I have Internet Explorer no errors, but it does not scroll to the latest position, thus it does notting with the JavaScript.

Do you know how this can be?

•

Join Date: Aug 2008

Posts: 381

Reputation: langsor is an unknown quantity at this point

Solved Threads: 33

langsor

Offline

Posting Whiz

Re: Multiple select autoscroll to last item

Aug 29th, 2008

We were scrolling down the select field when the user clicked an option, and Firefox will automatically scroll to the bottom select when the page loads, but IE doesn't.

So we simply need to separate the scroll behavior from the click behavior, and then also call the scroll behavior when the page loads.

I do believe this will work now ... let me know

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
 
window.onload = function () {
  register_selects('test');
  scroll_selected('test');
};
 
function register_selects( form_id ) {
  var form = document.getElementById(form_id);
  var selects = form.getElementsByTagName('select');
  for ( var i = 0; i < selects.length; i ++ ) {
    selects.item(i).onclick = function () {
      scroll_selected( this );
      form.submit();
    };
  }
}
 
function scroll_selected ( form ) {
  var form = ( typeof form == 'string' ) ? 
    document.getElementById(form) : form;
  var selects = form.getElementsByTagName('select');
  OUTER: for ( var i = 0; i < selects.length; i ++ ) {
    var opts = selects.item(i).getElementsByTagName('option');
    for ( var j = opts.length -1; j > 0; --j ) {
      if ( opts.item(j).selected == true ) {
        selects.item(i).scrollTop = j * opts.item(j).offsetHeight;
        opts.item(j).selected = true;
        continue OUTER;
      }
    }
  }
}
</script>
</head>
<body>
<form id="test">
  <select multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3" selected>three</option>
    <option name="four" value="4">four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6" selected>six</option>
  </select>
  <select multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3">three</option>
    <option name="four" value="4" selected>four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
  <br />
  <input type="submit" />
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">

window.onload = function () {
  register_selects('test');
  scroll_selected('test');
};

function register_selects( form_id ) {
  var form = document.getElementById(form_id);
  var selects = form.getElementsByTagName('select');
  for ( var i = 0; i < selects.length; i ++ ) {
    selects.item(i).onclick = function () {
      scroll_selected( this );
      form.submit();
    };
  }
}

function scroll_selected ( form ) {
  var form = ( typeof form == 'string' ) ? 
    document.getElementById(form) : form;
  var selects = form.getElementsByTagName('select');
  OUTER: for ( var i = 0; i < selects.length; i ++ ) {
    var opts = selects.item(i).getElementsByTagName('option');
    for ( var j = opts.length -1; j > 0; --j ) {
      if ( opts.item(j).selected == true ) {
        selects.item(i).scrollTop = j * opts.item(j).offsetHeight;
        opts.item(j).selected = true;
        continue OUTER;
      }
    }
  }
}
</script>
</head>
<body>
<form id="test">
  <select multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3" selected>three</option>
    <option name="four" value="4">four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6" selected>six</option>
  </select>
  <select multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3">three</option>
    <option name="four" value="4" selected>four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
  <br />
  <input type="submit" />
</form>
</body>
</html>

Cheers

...

Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.

•

Join Date: Jun 2008

Posts: 55

Reputation: kvdd is an unknown quantity at this point

Solved Threads: 2

kvdd

Offline

Junior Poster in Training

Re: Multiple select autoscroll to last item

Sep 20th, 2008

I am so sorry langsor, I have now tested your code (my project has a month stopped) and it works like a sharm!

Thanks for this Langsor, I am going to learn JavaScript too, because I see its a nice language combined with PHP.

Last edited by kvdd; Sep 20th, 2008 at 5:36 am. Reason: typo

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Multiple select autoscroll to last item

Sep 20th, 2008

This may come in handy!

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<title><!-- Sample --></title>
<html>
<head>
<title><!-- Sample --></title>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
<!-- 
function scrollDown() 
{ t = form1.list;
for ( var x = 0; x <= t.options.length; x++ ) { t.options[x].selected = true; 
 }
}
 
window.onload = function() 
{ 
 
var el = document.getElementsByTagName('option');
 
for ( var i = 0; i <= el.length; i++ ) {
el[i].attachEvent('onclick', scrollDown);
 }
}
//-->
</script>
<script type="text/javascript">
<!-- 
function scrollDown() 
{ t = form1.list;
for ( var x = 0; x <= t.options.length; x++ ) { t.options[x].selected = true; 
 }
}

window.onload = function() 
{ 

var el = document.getElementsByTagName('option');

for ( var i = 0; i <= el.length; i++ ) {
el[i].attachEvent('onclick', scrollDown);
 }
}
//-->
</script>

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
</head>
<body>
<form name="form1">
<select name="list" size="4"  multiple>
<option value="">Selection 1</option>
<option value="">Selection 2</option>
<option value="">Selection 3</option>
<option value="">Selection 4</option>
<option value="">Selection 5</option>
<option value="">Selection 6</option>
<option value="">Selection 7</option>
<option value="">Selection 8</option>
<option value="">Selection 9</option>
<option value="">Selection 10</option>
</select>
</form>
</body>
</html>
</head>
<body>
<form name="form1">
<select name="list" size="4"  multiple>
<option value="">Selection 1</option>
<option value="">Selection 2</option>
<option value="">Selection 3</option>
<option value="">Selection 4</option>
<option value="">Selection 5</option>
<option value="">Selection 6</option>
<option value="">Selection 7</option>
<option value="">Selection 8</option>
<option value="">Selection 9</option>
<option value="">Selection 10</option>
</select>
</form>
</body>
</html>

•

Join Date: Jun 2008

Posts: 55

Reputation: kvdd is an unknown quantity at this point

Solved Threads: 2

kvdd

Offline

Junior Poster in Training

Re: Multiple select autoscroll to last item

#10

Sep 26th, 2008

Langsor,

I very sorry, but I must ask you again:

I have a form with different selects, some selects of that form must be not autoscrolled, such as not-multiple selects.

When I edit the code, and remove the id="test" from the <form> item, and add by the selects I want to scroll the following: <select id="test" the whole script won't work.

If you have patience, will you look at this?