Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 7065

You are currently viewing page 2 of this multi-page discussion thread; Jump to the first page

Permalink

Oct 2nd, 2008

Re: Multiple select autoscroll to last item

Anyone has the time to look at this problem, its just not solved right now.

Thanks in advance

kvdd

Reputation Points: 17

Solved Threads: 2

Junior Poster in Training

Offline

55 posts
since Jun 2008

Permalink

Oct 2nd, 2008

Re: Multiple select autoscroll to last item

Hi, I've been busy with many things that have been keeping me away from the computer the last several weeks ... sorry for the lag time in getting back to this.

It's actually pretty easy to modify this script to act on specific form-element fields instead of on the forms.

Try this:

javascript Syntax (Toggle Plain Text)
<html>
<head>
<script type="text/javascript">
 
window.onload = function () {
  // Since we only need to auto-scroll the select elements
  // after the page has loaded ...
  // list auto-scroll selects by id
  select_list = new Array( 'test_one', 'test_too' );
  scroll_selected( select_list );
};
 
function scroll_selected ( selects ) {
  OUTER: for ( var i = 0; i < selects.length; i ++ ) {
    var select = document.getElementById(selects[i]);
    var opts = select.getElementsByTagName('option');
    for ( var j = opts.length -1; j > 0; --j ) {
      if ( opts.item(j).selected == true ) {
        select.scrollTop = j * opts.item(j).offsetHeight;
        opts.item(j).selected = true;
        continue OUTER;
      }
    }
  }
}
</script>
</head>
<body style="padding:60px">
<form>
  <p>Select Multiple:<br />
  <select id="test_one" 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>
  <p>Select One:<br />
  <select size="3">
    <option name="one" value="1" selected>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>
  <p>Select Multiple:<br />
  <select id="test_too" 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" selected>four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
  <p>
  <input type="submit" />
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">

window.onload = function () {
  // Since we only need to auto-scroll the select elements
  // after the page has loaded ...
  // list auto-scroll selects by id
  select_list = new Array( 'test_one', 'test_too' );
  scroll_selected( select_list );
};

function scroll_selected ( selects ) {
  OUTER: for ( var i = 0; i < selects.length; i ++ ) {
    var select = document.getElementById(selects[i]);
    var opts = select.getElementsByTagName('option');
    for ( var j = opts.length -1; j > 0; --j ) {
      if ( opts.item(j).selected == true ) {
        select.scrollTop = j * opts.item(j).offsetHeight;
        opts.item(j).selected = true;
        continue OUTER;
      }
    }
  }
}
</script>
</head>
<body style="padding:60px">
<form>
  <p>Select Multiple:<br />
  <select id="test_one" 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>
  <p>Select One:<br />
  <select size="3">
    <option name="one" value="1" selected>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>
  <p>Select Multiple:<br />
  <select id="test_too" 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" selected>four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
  <p>
  <input type="submit" />
</form>
</body>
</html>

langsor

Reputation Points: 30

Solved Threads: 36

Posting Whiz

Offline

389 posts
since Aug 2008

Permalink

Oct 9th, 2008

Re: Multiple select autoscroll to last item

Langsor, much thanks I cannot test the code now, but I test it within a week, and then I post if it is working.

Much thanks for taking time, you hear from me!

kvdd

Reputation Points: 17

Solved Threads: 2

Junior Poster in Training

Offline

55 posts
since Jun 2008

Previous
1
Page 2

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.

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.

DaniWeb Message

Cancel Changes

User Name
Password