Scrollable Drop Down Box?

[OmniX]

I have been doing research and to be able to make a scrollable drop down box requires javascript I have been informed.

Can anyone help me with this or a tutorial?

Example code:

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat" selected="selected">Fiat</option>
  <option value="audi">Audi</option>
</select>

Goals:
- Only view two options and rest are scrollable

Thankyou, Regards X

[kburb23]

I have don't things similar to this on sites with JavaScript - but not using a select element.

Basically - I Show and Hide <div> container - which itself holds an Unorderd List <ul> element with <li> for each of the menu items.

The key is the <div> containing the menu needs a fixed height - and you set CSS overflow to "scroll". Then it is a simple matter to show/hide the <div> when user clicks some other element (usually a button or link).

The final tricky part is you want the "menu" <div> to appear just below the clicked element typically (or at some other fixed screen position). I user a $.pegTo function i developed for jQuery (as a Port I did of a function from prototype.js). I include it below though it is a little long. The key thing is it lets your <div> appear right under the element which is clicked...

* pegTo fn port from prototype.js */
$.pegTo = function(src,targ,opt) {
    opt = $.extend({
      setLeft:    true,
      setTop:     true,
      setWidth:   true,
      setHeight:  true,
      offsetTop:  0,
      offsetLeft: 0
    }, opt);
    var source;
    if(typeof(src) == "string") {
        source = $("#"+src)[0];
    } else {
        source = src;
    }
    var p = Ppage(source);
    // find coord sys
    var target;
    if(typeof(targ) == "string") {
        target = $("#"+targ)[0];
    } else {
        target = targ;
    }
    var delta = [0, 0];
    var parent = null;
    // delta [0,0] ok 4 position:fixed, position:absolute needs offsetParent deltas
    if ($(target).css('position') == 'absolute')
    {
      parent = PoffsetParent(target);
      delta = Ppage(parent);
    }
    // correct by body offsets (4 Safari)
    if (parent == document.body) {
      delta[0] -= document.body.offsetLeft;
      delta[1] -= document.body.offsetTop;
    }
    if(opt.setLeft)   target.style.left  = (p[0] - delta[0] + opt.offsetLeft) + 'px';
    if(opt.setTop)    target.style.top   = (p[1] - delta[1] + opt.offsetTop) + 'px';
    if(opt.setWidth)  target.style.width = source.offsetWidth + 'px';
    if(opt.setHeight) target.style.height = source.offsetHeight + 'px';
};
function Ppage(fel){
    var valueT = 0, valueL = 0;
    var el = fel;
    do {
       valueT += el.offsetTop  || 0;
       valueL += el.offsetLeft || 0;
       // Safari
       if (el.offsetParent==document.body) {
           if ($(el).css('position')=='absolute') break;
       }

    } while (el = el.offsetParent);

    el = fel;
    do {
       if (!window.opera || el.tagName=='BODY') {
       valueT -= el.scrollTop  || 0;
       valueL -= el.scrollLeft || 0;
       }
    } while (el = el.parentNode);
    return [valueL, valueT];
};
function PoffsetParent(el)
{
    if (el.offsetParent) return el.offsetParent;
    if (el == document.body) return el;

    while ((el = el.parentNode) && el != document.body) {
        if ($(el).css('position') != 'static') return el;
    }
    return document.body;
};

[OmniX]

Thanks but I have to work with select elements as I am unable to change for the time being.

But I may experiment with your overflow ideas if I have time.

[~s.o.s~]

It can be done using HTML only; just use the `size' attribute of the SELECT element.

[OmniX]

Hmmm s.o.s.

It is a temporary solution but I think my wording is incorrect.

You know when you dont set a size and when u click to select a value of either 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 drop down and the box goes down half the page. Well I saw an invention where instead of the box going half way down it only displays 1, 2, 3, 4, 5 and when u have click to view this box inside the box there are up and down arrows letting you scroll from 1-10.

Does that explain it what I require? or has it confused you more? haha

Thanks, Regards X

[~s.o.s~]

The size attribute of the SELECT element does exactly that; instead of ruining the user experience by dropping down the entire list contents, it shows only `size' elements.

<select name="sel" size="2">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
  <option value="four">4</option>
  <option value="five">5</option>
  <option value="siz">6</option>
</select>

If this is not what you desire, you need to post a screen shot or at least a link to the concerned output.

[OmniX]

Ya sorry sos its not the output im trying to achieve.

I will look for an example and get back to you.

Thanks, Regards X

[OmniX]

How funny
http://www.carsales.com.au/
Had this example all along!?!?!
now see when you click on a make the combo box appears but inside that combo box it is scrollable bar?

That is what I am trying to achieve here.

[~s.o.s~]

It's a default behavior of drop down or SELECT elements which has considerable number of elements; just take a peek at the markup of the page by Viewing the source and you will be convinced.

[OmniX]

Oh ok so thats the behavious by default but what if i wanted was that in 5 <options> long and scrollable this possible?

If so how or tutorials possible?

Thanks s.o.s.

[~s.o.s~]

> Oh ok so thats the behavious by default but what if i wanted was that in 5 <options> long
> and scrollable this possible?

AFAIK, no; but then again, this question might be more suited in the HTML forum since this has got nothing to do with Javascript.

BTW, any reason you want such behavior? The default functionality seems to be good enough.

[OmniX]

I remember reading up on google that the desired functionality can only be preformed with javascript and has been but they didnt mention how :(

So like I sound like I am lost :(

I wish the desired functionality as I see it alot more 'cleaner' as such than this big over sized combo box extending the whole page... Its something minor but i try to be a perfectionist :)

So I guess back to google in the mean time if no one can help point me in the right direction?

PS: s.o.s. have you had ideas on my ajax thread on how I should go about solving my problem? Thanks