Scrollable Drop Down Box?

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

Join Date: Dec 2007
Posts: 608
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 8
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Scrollable Drop Down Box?

 
0
  #1
Oct 13th, 2008
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <select name="cars">
  2. <option value="volvo">Volvo</option>
  3. <option value="saab">Saab</option>
  4. <option value="fiat" selected="selected">Fiat</option>
  5. <option value="audi">Audi</option>
  6. </select>

Goals:
- Only view two options and rest are scrollable

Thankyou, Regards X
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
Join Date: Sep 2008
Posts: 10
Reputation: kburb23 is an unknown quantity at this point 
Solved Threads: 2
kburb23 kburb23 is offline Offline
Newbie Poster

Re: Scrollable Drop Down Box?

 
0
  #2
Oct 14th, 2008
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...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. * pegTo fn port from prototype.js */
  2. $.pegTo = function(src,targ,opt) {
  3. opt = $.extend({
  4. setLeft: true,
  5. setTop: true,
  6. setWidth: true,
  7. setHeight: true,
  8. offsetTop: 0,
  9. offsetLeft: 0
  10. }, opt);
  11. var source;
  12. if(typeof(src) == "string") {
  13. source = $("#"+src)[0];
  14. } else {
  15. source = src;
  16. }
  17. var p = Ppage(source);
  18. // find coord sys
  19. var target;
  20. if(typeof(targ) == "string") {
  21. target = $("#"+targ)[0];
  22. } else {
  23. target = targ;
  24. }
  25. var delta = [0, 0];
  26. var parent = null;
  27. // delta [0,0] ok 4 position:fixed, position:absolute needs offsetParent deltas
  28. if ($(target).css('position') == 'absolute')
  29. {
  30. parent = PoffsetParent(target);
  31. delta = Ppage(parent);
  32. }
  33. // correct by body offsets (4 Safari)
  34. if (parent == document.body) {
  35. delta[0] -= document.body.offsetLeft;
  36. delta[1] -= document.body.offsetTop;
  37. }
  38. if(opt.setLeft) target.style.left = (p[0] - delta[0] + opt.offsetLeft) + 'px';
  39. if(opt.setTop) target.style.top = (p[1] - delta[1] + opt.offsetTop) + 'px';
  40. if(opt.setWidth) target.style.width = source.offsetWidth + 'px';
  41. if(opt.setHeight) target.style.height = source.offsetHeight + 'px';
  42. };
  43. function Ppage(fel){
  44. var valueT = 0, valueL = 0;
  45. var el = fel;
  46. do {
  47. valueT += el.offsetTop || 0;
  48. valueL += el.offsetLeft || 0;
  49. // Safari
  50. if (el.offsetParent==document.body) {
  51. if ($(el).css('position')=='absolute') break;
  52. }
  53.  
  54. } while (el = el.offsetParent);
  55.  
  56. el = fel;
  57. do {
  58. if (!window.opera || el.tagName=='BODY') {
  59. valueT -= el.scrollTop || 0;
  60. valueL -= el.scrollLeft || 0;
  61. }
  62. } while (el = el.parentNode);
  63. return [valueL, valueT];
  64. };
  65. function PoffsetParent(el)
  66. {
  67. if (el.offsetParent) return el.offsetParent;
  68. if (el == document.body) return el;
  69.  
  70. while ((el = el.parentNode) && el != document.body) {
  71. if ($(el).css('position') != 'static') return el;
  72. }
  73. return document.body;
  74. };
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 608
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 8
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: Scrollable Drop Down Box?

 
0
  #3
Oct 14th, 2008
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.
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
Join Date: Jun 2006
Posts: 7,609
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 464
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Scrollable Drop Down Box?

 
0
  #4
Oct 14th, 2008
It can be done using HTML only; just use the `size' attribute of the SELECT element.
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 608
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 8
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: Scrollable Drop Down Box?

 
0
  #5
Oct 15th, 2008
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
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
Join Date: Jun 2006
Posts: 7,609
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 464
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Scrollable Drop Down Box?

 
0
  #6
Oct 15th, 2008
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.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <select name="sel" size="2">
  2. <option value="one">1</option>
  3. <option value="two">2</option>
  4. <option value="three">3</option>
  5. <option value="four">4</option>
  6. <option value="five">5</option>
  7. <option value="siz">6</option>
  8. </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.
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 608
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 8
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: Scrollable Drop Down Box?

 
0
  #7
Oct 15th, 2008
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
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 608
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 8
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: Scrollable Drop Down Box?

 
0
  #8
Nov 13th, 2008
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.
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
Join Date: Jun 2006
Posts: 7,609
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 464
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Scrollable Drop Down Box?

 
0
  #9
Nov 14th, 2008
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.
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 608
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 8
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: Scrollable Drop Down Box?

 
0
  #10
Nov 14th, 2008
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.
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC