943,706 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Multiple select autoscroll to last item
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Aug 25th, 2008
0

Multiple select autoscroll to last item

Expand Post »
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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. Function autoscroll()
  2. {
  3. var lst = From1.Listbox1 
  4. if ((lst.multiple==true) && (lst.length>0)) {
  5. if (lst[lst.length-1].selected==true) {
  6. lst[lst.length-1].selected=true;
  7. return;
  8. }
  9. else {
  10. lst[lst.length-1].selected=true;
  11. lst[lst.length-1].selected=false;
  12. }
  13. for (var i=0; i< lst.length;++i)
  14. if (lst.selected==true) {
  15. lst.selected=true;
  16. return;
  17. }
  18. }}

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!
Reputation Points: 17
Solved Threads: 2
Junior Poster in Training
kvdd is offline Offline
55 posts
since Jun 2008
Permalink
Aug 25th, 2008
0

Re: Multiple select autoscroll to last item

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.
html Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5. window.onload = function () {
  6.   register_selects('test');
  7. };
  8.  
  9. function register_selects( form_id ) {
  10.   var form = document.getElementById(form_id);
  11.   selects = form.getElementsByTagName('select');
  12.   for ( var i = 0; i < selects.length; i ++ ) {
  13.     selects.item(i).onclick = function () {
  14.       var opts = this.getElementsByTagName('option');
  15.       for ( var j = opts.length -1; j > 0; --j ) {
  16.         if ( opts.item(j).selected == true ) {
  17.           this.scrollTop = j * opts.item(i).offsetHeight;
  18.           return;
  19.         }
  20.       }
  21.     };
  22.   }
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <form id="test">
  28.   <select multiple size="3">
  29.     <option name="one" value="1">one</option>
  30.     <option name="two" value="2">two</option>
  31.     <option name="three" value="3">three</option>
  32.     <option name="four" value="4">four</option>
  33.     <option name="five" value="5">five</option>
  34.     <option name="six" value="6">six</option>
  35.   </select>
  36.   <select multiple size="3">
  37.     <option name="one" value="1">one</option>
  38.     <option name="two" value="2">two</option>
  39.     <option name="three" value="3">three</option>
  40.     <option name="four" value="4">four</option>
  41.     <option name="five" value="5">five</option>
  42.     <option name="six" value="6">six</option>
  43.   </select>
  44. </form>
  45. </body>
  46. </html>
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Permalink
Aug 27th, 2008
0

Re: Multiple select autoscroll to last item

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.
php Syntax (Toggle Plain Text)
  1. <html>
  2. <body>
  3. <head>
  4. <script type="text/javascript">
  5.  
  6. window.onload = function () {
  7.   register_selects('test');
  8. };
  9.  
  10. function register_selects( form_id ) {
  11.   var form = document.getElementById(form_id);
  12.   selects = form.getElementsByTagName('select');
  13.   for ( var i = 0; i < selects.length; i ++ ) {
  14.     selects.item(i).onclick = function () {
  15.       var opts = this.getElementsByTagName('option');
  16.       for ( var j = opts.length -1; j > 0; --j ) {
  17.         if ( opts.item(j).selected == true ) {
  18.           this.scrollTop = j * opts.item(i).offsetHeight;
  19.           return;
  20.         }
  21.       }
  22.     };
  23.   }
  24. }
  25. </script>
  26. </head>
  27.  
  28. <?php 
  29. // Debugging: print the GETS
  30. print_r($_GET); 
  31.  
  32. // The numbers of the options in an array (Cijfer is Dutch for Number)
  33. $aCijfers = array('one','two','three','four','five','six','seven');
  34. // The names of the selects in an array
  35. $aName = array('tes1','tes2');
  36.  
  37. // Start form
  38. echo '<form id="test" method="GET" action="">';
  39.  
  40. // Loop for displaying the two selects
  41. for ($i=0; $i<2; $i++){
  42. 	echo '<select name="'.$aName[$i].'" multiple size="3" onclick="submit();">';
  43. 	// Loop for displaying the options
  44. 	foreach ($aCijfers AS $id => $cijfer){
  45. 		echo '<option name="'.$cijfer.'" value="'.$id.'"'; 
  46. 		// When the GET name holds the number of variable id, then echo selected
  47. 		if ($_GET[$aName[$i]] == $id){echo ' selected';} 
  48. 		echo ' >'.$cijfer.'</option>';
  49. 	}
  50. 	echo '</select>';
  51. }
  52. ?>
  53.  
  54.   <input type="submit" name="ok" value="ok" />
  55. </form>
  56. </body>
  57. </html>
Last edited by kvdd; Aug 27th, 2008 at 5:37 am.
Reputation Points: 17
Solved Threads: 2
Junior Poster in Training
kvdd is offline Offline
55 posts
since Jun 2008
Permalink
Aug 27th, 2008
0

Re: Multiple select autoscroll to last item

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
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Permalink
Aug 29th, 2008
0

Re: Multiple select autoscroll to last item

Click to Expand / Collapse  Quote 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

Quote ...
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..

Quote ...

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!
Reputation Points: 17
Solved Threads: 2
Junior Poster in Training
kvdd is offline Offline
55 posts
since Jun 2008
Permalink
Aug 29th, 2008
0

Re: Multiple select autoscroll to last item

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?
Reputation Points: 17
Solved Threads: 2
Junior Poster in Training
kvdd is offline Offline
55 posts
since Jun 2008
Permalink
Aug 29th, 2008
1

Re: Multiple select autoscroll to last item

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
html Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5. window.onload = function () {
  6.   register_selects('test');
  7.   scroll_selected('test');
  8. };
  9.  
  10. function register_selects( form_id ) {
  11.   var form = document.getElementById(form_id);
  12.   var selects = form.getElementsByTagName('select');
  13.   for ( var i = 0; i < selects.length; i ++ ) {
  14.     selects.item(i).onclick = function () {
  15.       scroll_selected( this );
  16.       form.submit();
  17.     };
  18.   }
  19. }
  20.  
  21. function scroll_selected ( form ) {
  22.   var form = ( typeof form == 'string' ) ? 
  23.     document.getElementById(form) : form;
  24.   var selects = form.getElementsByTagName('select');
  25.   OUTER: for ( var i = 0; i < selects.length; i ++ ) {
  26.     var opts = selects.item(i).getElementsByTagName('option');
  27.     for ( var j = opts.length -1; j > 0; --j ) {
  28.       if ( opts.item(j).selected == true ) {
  29.         selects.item(i).scrollTop = j * opts.item(j).offsetHeight;
  30.         opts.item(j).selected = true;
  31.         continue OUTER;
  32.       }
  33.     }
  34.   }
  35. }
  36. </script>
  37. </head>
  38. <body>
  39. <form id="test">
  40.   <select multiple size="3">
  41.     <option name="one" value="1">one</option>
  42.     <option name="two" value="2">two</option>
  43.     <option name="three" value="3" selected>three</option>
  44.     <option name="four" value="4">four</option>
  45.     <option name="five" value="5">five</option>
  46.     <option name="six" value="6" selected>six</option>
  47.   </select>
  48.   <select multiple size="3">
  49.     <option name="one" value="1">one</option>
  50.     <option name="two" value="2">two</option>
  51.     <option name="three" value="3">three</option>
  52.     <option name="four" value="4" selected>four</option>
  53.     <option name="five" value="5">five</option>
  54.     <option name="six" value="6">six</option>
  55.   </select>
  56.   <br />
  57.   <input type="submit" />
  58. </form>
  59. </body>
  60. </html>
Cheers

...
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Permalink
Sep 20th, 2008
0

Re: Multiple select autoscroll to last item

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
Reputation Points: 17
Solved Threads: 2
Junior Poster in Training
kvdd is offline Offline
55 posts
since Jun 2008
Permalink
Sep 20th, 2008
0

Re: Multiple select autoscroll to last item

This may come in handy!

html Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title><!-- Sample --></title>
javascript Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2. <!-- 
  3. function scrollDown() 
  4. { t = form1.list;
  5. for ( var x = 0; x <= t.options.length; x++ ) { t.options[x].selected = true; 
  6.  }
  7. }
  8.  
  9. window.onload = function() 
  10. { 
  11.  
  12. var el = document.getElementsByTagName('option');
  13.  
  14. for ( var i = 0; i <= el.length; i++ ) {
  15. el[i].attachEvent('onclick', scrollDown);
  16.  }
  17. }
  18. //-->
  19. </script>

html Syntax (Toggle Plain Text)
  1. </head>
  2. <body>
  3. <form name="form1">
  4. <select name="list" size="4"  multiple>
  5. <option value="">Selection 1</option>
  6. <option value="">Selection 2</option>
  7. <option value="">Selection 3</option>
  8. <option value="">Selection 4</option>
  9. <option value="">Selection 5</option>
  10. <option value="">Selection 6</option>
  11. <option value="">Selection 7</option>
  12. <option value="">Selection 8</option>
  13. <option value="">Selection 9</option>
  14. <option value="">Selection 10</option>
  15. </select>
  16. </form>
  17. </body>
  18. </html>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Sep 26th, 2008
0

Re: Multiple select autoscroll to last item

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?
Reputation Points: 17
Solved Threads: 2
Junior Poster in Training
kvdd is offline Offline
55 posts
since Jun 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: how to maximize table cell height
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: FCKeditor chracter counter Problem at client side.





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC