| | |
Scrollable Drop Down Box?
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
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:
Goals:
- Only view two options and rest are scrollable
Thankyou, Regards X
Can anyone help me with this or a tutorial?
Example code:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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
"You never stop learning." - OmniX
•
•
Join Date: Sep 2008
Posts: 10
Reputation:
Solved Threads: 2
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...
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...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
* 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; };
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.
But I may experiment with your overflow ideas if I have time.
"You never stop learning." - 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
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
"You never stop learning." - OmniX
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.
If this is not what you desire, you need to post a screen shot or at least a link to the concerned output.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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.
I don't accept change; I don't deserve to live.
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
I will look for an example and get back to you.
Thanks, Regards X
"You never stop learning." - 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.
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.
"You never stop learning." - 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.
If so how or tutorials possible?
Thanks s.o.s.
"You never stop learning." - OmniX
![]() |
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: onclick append 3 rows with onblur events
- Next Thread: javascript basic:
| Thread Tools | Search this Thread |
acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug captchaformproblem checkbox close codes createrange() css cursor debugger dependent disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal pdf php player position programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c window windowofwords windowsxp wysiwyg \n






