Emulate HTML Select box?

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:27

Emulate HTML Select box?

Poster: Summy
Dated: Sunday May 23 2004 - 18:23:14 BST

Is it possible to emulate an HTML Select Box (combo box) with the menu?

This would be the same as any normal drop down menu, except the parent text label would need to be updated once a selection has been made.

For example, I have a drop down menu like so:
Select your TLD
.com
.org
.net

When you select ".com", "Select your TLD" is changed to ".com".

Any help is appriciated. Running version 5.19 btw.

Poster: kevin3442
Dated: Monday May 24 2004 - 16:06:29 BST

It is definitely possible with a little added javascript. You could even make it look like a normal select box. Are you comfortable with javascript? Once a user makes a selection, would the selcted value need to be part of a form submission?

Kevin

Poster: Summy
Dated: Monday May 24 2004 - 23:42:12 BST

The idea is to get a custom looking select box, as HTML is very limited in regards to controlling the style of select boxes at the moment. Hence the reason for using javascript/milonic.

I've done a little bit of javascripting before. I wouldn't say I was good, but I know whats what when looking at a piece of code.

The value would need to be part of a form var once a selection has been made. I was gonna do this by including:

Code:

aI("TEXT=.com<input type=hidden name=tld_extension value=.com>");

Or some such, which I see is the method for passing form vars from within menu selections with milonic.

Matt.

Poster: Andy
Dated: Tuesday May 25 2004 - 12:07:17 BST

Something like this will do for starters:

Code:

function changeParentText()
{
   _i=getParentItemByItem(_itemRef)
   _mi[_i][1]=_mi[_itemRef][1]
   
   _item=gmobj("el"+_i)
   _item.innerHTML=BDMenu(_mi[_i][0])
   itemOn(_i)   
}


_menuCloseDelay=500
_menuOpenDelay=150
_subOffsetTop=0
_subOffsetLeft=0


with(menuStyle=new mm_style()){ 
oncolor="#ffffff"; 
offcolor="#000000"; 
onbgcolor="#316ac5"; 
offbgcolor="#ffffff"; 
bordercolor="#000000"; 
borderwidth=1; 
padding=2; 
fontsize="75%"; 
fontstyle="normal"; 
fontfamily="Verdana, Tahoma, Arial"; 
status="";
clickfunction="changeParentText();";
} 

mainStyle=new copyOf(menuStyle)
mainStyle.bordercolor="#7F9DB9";
mainStyle.clickfunction="";

with(milonic=new menuname("Main Menu")){ 
style=mainStyle; 
margin=2
top=121; 
left=22; 
alwaysvisible=1; 
itemwidth=317
orientation="horizontal"; 
aI("text=Please Select Your TLD;showmenu=TLD;openonclick=1;closeonclick=1;keepalive=1;"); 
} 

with(milonic=new menuname("TLD")){ 
left="offset=-2";
top="offset=1";
style=menuStyle; 
menuheight=200
overflow="scroll"
aI("text=Please Select Your Country;"); 
aI("text=Afghanistan;");        
aI("text=Albania;");
aI("text=Algeria;");
aI("text=American Samoa;");
aI("text=Andorra;");
aI("text=Angola;");
aI("text=Anguilla;");
aI("text=Antarctica;");
aI("text=Antigua and Barbuda;");
aI("text=Argentina;");
aI("text=Armenia;");
aI("text=Aruba;");
aI("text=Australia;");
aI("text=Austria;");
aI("text=Azerbaijan;");
aI("text=Bahamas;");
aI("text=Bahrain;");
aI("text=Bangladesh;");
aI("text=Barbados;");
aI("text=Belarus;");
aI("text=Belgium;");
aI("text=Belize;");
aI("text=Benin;");
aI("text=Bermuda;");
aI("text=Bhutan;");
aI("text=Bolivia;");
aI("text=Bosnia and Herzegovina;");
aI("text=Botswana;");
aI("text=Bouvet Island;");
aI("text=Brazil;");
aI("text=British Indian Ocean Territory;");
aI("text=Brunei Darussalam;");
aI("text=Bulgaria;");
aI("text=Burkina Faso;");
aI("text=Burundi;");
aI("text=Cambodia;");
aI("text=Cameroon;");
aI("text=Canada;");
aI("text=Cape Verde;");
aI("text=Cayman Islands;");
aI("text=Central African Republic;");
aI("text=Chad;");
aI("text=Chile;");
aI("text=China;");
aI("text=Christmas Island;");
aI("text=Cocos (Keeling) Islands;");
aI("text=Colombia;");
aI("text=Comoros;");
aI("text=Congo;");
aI("text=Cook Islands;");
aI("text=Costa Rica;");
aI("text=Cote D'Ivoire (Ivory Coast);");
aI("text=Croatia (Hrvatska);");
aI("text=Cuba;");
aI("text=Cyprus;");
aI("text=Czech Republic;");
aI("text=Denmark;");
aI("text=Djibouti;");
aI("text=Dominica;");
aI("text=Dominican Republic;");
aI("text=East Timor;");
aI("text=Ecuador;");
aI("text=Egypt;");
aI("text=El salvador;");
aI("text=Equatorial Guinea;");
aI("text=Eritrea;");
aI("text=Estonia;");
aI("text=Ethiopia;");
aI("text=Falkland Islands (Islas Malvinas);");
aI("text=Faroe Islands;");
aI("text=Fiji;");
aI("text=Finland;");
aI("text=France;");
aI("text=French Guiana;");
aI("text=French Polynesia;");
aI("text=French Southern Territories;");
aI("text=Gabon;");
aI("text=Gambia;");
aI("text=Georgia;");
aI("text=Germany;");
aI("text=Ghana;");
aI("text=Gibraltar;");
aI("text=Greece;");
aI("text=Greenland;");
aI("text=Grenada;");
aI("text=Guadeloupe;");
aI("text=Guam;");
aI("text=Guatemala;");
aI("text=Guinea;");
aI("text=Guinea-Bissau;");
aI("text=Guyana;");
aI("text=Haiti;");
aI("text=Heard and McDonald Islands;");
aI("text=Holy See (Vatican City State);");
aI("text=Honduras;");
aI("text=Hong Kong;");
aI("text=Hungary;");
aI("text=Iceland;");
aI("text=India;");
aI("text=Indonesia;");
aI("text=name ;");
aI("text=Iran, Islamic Republic Of;");
aI("text=Iraq;");
aI("text=Ireland;");
aI("text=Israel;");
aI("text=Italy;");
aI("text=Jamaica;");
aI("text=Japan;");
aI("text=Jordan;");
aI("text=Kazakhstan;");
aI("text=Kenya;");
aI("text=Kiribati;");
aI("text=Korea, Democratic People's Republic;");
aI("text=Korea, Republic Of;");
aI("text=Kuwait;");
aI("text=Kyrgyzstan;");
aI("text=Laos, People's Demcratic Republic;");
aI("text=Latvia;");
aI("text=Lebanon;");
aI("text=Lesotho;");
aI("text=Liberia;");
aI("text=Libyan Arab Jamahiriya;");
aI("text=Liechtenstein;");
aI("text=Lithuania;");
aI("text=Luxembourg;");
aI("text=Macao;");
aI("text=Macedonia, Former Yugoslav Republic of;");
aI("text=Madagascar;");
aI("text=Malawi;");
aI("text=Malaysia;");
aI("text=Maldives;");
aI("text=Mali;");
aI("text=Malta;");
aI("text=Marshall Islands;");
aI("text=Martinique;");
aI("text=Mauritania;");
aI("text=Mauritius;");
aI("text=Mayotte;");
aI("text=Mexico;");
aI("text=Micronesia, Frederated States Of;");
aI("text=Moldova, Rebulic Of;");
aI("text=Monaco;");
aI("text=Mongolia;");
aI("text=Montserrat;");
aI("text=Morocco;");
aI("text=Mozambique;");
aI("text=Myanmar;");
aI("text=Namibia;");
aI("text=Nauru;");
aI("text=Nepal;");
aI("text=Netherlands;");
aI("text=Netherlands Antilles;");
aI("text=New Caledonia;");
aI("text=New Zealand;");
aI("text=Nicaragua;");
aI("text=Niger;");
aI("text=Nigeria;");
aI("text=Niue;");
aI("text=Norfolk Island;");
aI("text=Northern Mariana Islands;");
aI("text=Norway;");
aI("text=Oman;");
aI("text=Pakistan;");
aI("text=Palau;");
aI("text=Panama;");
aI("text=Papua New Guinea;");
aI("text=Paraguay;");
aI("text=Peru;");
aI("text=Philippines;");
aI("text=Pitcairn;");
aI("text=Poland;");
aI("text=Portugal;");
aI("text=Puerto Rico;");
aI("text=Qatar;");
aI("text=Reunion;");
aI("text=Romania;");
aI("text=Russian Federation;");
aI("text=Rwanda;");
aI("text=Saint Helena;");
aI("text=Saint Kitts and Nevis;");
aI("text=Saint Lucia;");
aI("text=Saint Pierre and Miquelon;");
aI("text=Saint Vincent and the Grenadines;");
aI("text=Samoa;");
aI("text=San Marino;");
aI("text=Sao Tome and Principe;");
aI("text=Saudi Arabia;");
aI("text=Senegal;");
aI("text=Seychelles;");
aI("text=Sierra Leone;");
aI("text=Singapore;");
aI("text=Slovakia;");
aI("text=Slovenia;");
aI("text=Solomon Islands;");
aI("text=Somalia;");
aI("text=South Africa;");
aI("text=South Georgia And The South Sandwich Islands;");
aI("text=Spain;");
aI("text=Sri Lanka;");
aI("text=Sudan;");
aI("text=Suriname;");
aI("text=name ;");
aI("text=Svalbard And Jan Mayen;");
aI("text=Swaziland;");
aI("text=Sweden;");
aI("text=Switzerland;");
aI("text=Syrian Arab Republic;");
aI("text=Taiwan;");
aI("text=Tajikistan;");
aI("text=Tanzania, United Republic Of;");
aI("text=Thailand;");
aI("text=Togo;");
aI("text=Tokelau;");
aI("text=Tonga;");
aI("text=Trinidad and Tobago;");
aI("text=Tunisia;");
aI("text=Turkey;");
aI("text=Turkmenistan;");
aI("text=Turks and Caicos Islands;");
aI("text=Tuvalu;");
aI("text=Uganda;");
aI("text=Ukraine;");
aI("text=United Arab Emirates;");
aI("text=United Kingdom;");
aI("text=United States;");
aI("text=United States Minor Outlying Islands;");
aI("text=Uruguay;");
aI("text=Uzbekistan;");
aI("text=Vanuatu;");
aI("text=Venezuela;");
aI("text=Vietnam;");
aI("text=Virgin Islands, British;");
aI("text=Virgin Islands, US;");
aI("text=Wallis And Futuna;");
aI("text=Western Sahara;");
aI("text=Yemen;");
aI("text=Yugoslavia;");
aI("text=Zambia;");
aI("text=Zimbabwe;");
} 

drawMenus(); 

Cheers
Andy

Poster: kevin3442
Dated: Tuesday May 25 2004 - 21:51:16 BST

Hi Matt,

Well,

I see that Andy has posted a fine example.

I had been putting together an example myself, so I might as well post it. This example uses a milonic menu as a select box (we'll call it a "milonic select box"). Like Andy's example, it uses two menus: a "main" (alwaysvisible) menu for the top of the select box, and a submenu for the select box options. Also like Andy's example, selecting one of the options will change the text in the main item to reflect the selection (the key function for this is changeParentText() in Andy's example, setSelected() in mine... both called with the clickfunction property in the "select box's" submenu).

Summy wrote:

The value would need to be part of a form var once a selection has been made. I was gonna do this by including:

Code:

aI("TEXT=.com<input type=hidden name=tld_extension value=.com>");

Or some such, which I see is the method for passing form vars from within menu selections with milonic.

Actually, that's more like the approach to getting a form to appear inside of a menu. Bt in this case, you want to pass a selected vaue into a form. You can do this by using hidden fields in the form as value holders for your milonic select boxes (one hidden field per milonic select box). In my example the milonic select box is used in a form. The setSelected() function (in menu_data.js) changes the text of the select box item and also places the result of the selection into a form field named "selectHolder". In the example, this field is coded as a normal, visible text input field, for demo purposes (so you can see the fields value change with the selection). In practice, however, you would set the input type to "hidden". That way, the field isn't seen, but its value is set according to the selection in the pseudo select box. The advantage of doing it this way is that the result of the selection (and any other pseudo select boxes in the form) remains inside of the form and can be easily processed along with other fields in the form. To test this, download the example, change the selectHolder field's type to "hidden". Now, you shouldn't be able to see the field when you open the index.htm file, but it's still there. Make a selection from the select box, then click the "Submit" button. Clicking "Submit" should open an alert box showing the value of the selection, even if the field is hidden.

A couple of other things to note:

(1) In this example, the select box menu is defined in the index.html code rather than in menu_data.js (a commented-out version is still in menu_data.js if you want to mess with it). By placing it in the html, you can use the position=relative menu property, to have the milonic select box menu appear in the normal flow of the page's content, which might make it easier to position it in your form.

(2) The "value" of the selections in the "options" menu is actually the text in the text= property of each item of the submenu. This text is used to set the value of the hidden "holder" fields in the form, as well as to change the text of the main item once a selection is made.

(3)

Summy wrote:

The idea is to get a custom looking select box, as HTML is very limited in regards to controlling the style of select boxes at the moment. Hence the reason for using javascript/milonic.

Oops

... sorry. I started messing with the example before I read your last post. I assumed that you wanted to do this as a different solution to the problem of standard select boxes appearing on top of dhml elements in older browsers (i.e., instead of placing the select box or the entire form in a div and hiding the div when a submenu opens). I've often thought that, instead of messing aorund with hiding divs, you could just create your own seect box functionality with the menu system, and then (of course) your select boxes would not conflict with your menus. I just never had the motivation to mess with it until someone actually asked about it. It still may be a good solution to that dilemma, but the main point here is that (because of my assumption), I styled the two menus in the example to look like your average, ordinary, default-looking select box. You can, however, style it however you like. Download the example and mess around with it, or copy Andy's code and play with that, until you have some styles that you like.

Hope that helps,

Kevin

Poster: Summy
Dated: Thursday May 27 2004 - 1:19:39 BST

Thanks for the replies guys, I really appriciate the help!

I will play around with the examples you have both given me and see what I come up with.

I will definately be purchasing another copy of the menu system for this website im working on tho! Smashing support, you guys obviosuly love what you do.

Poster: Summy
Dated: Thursday May 27 2004 - 23:50:07 BST

Ahh, tis cool! I have it all integrated and running nicely! Very happy with my purchase :]

You guys should get the select box example on the website, i'd been looking for a selectbox java script for some time before I remembered that milonic might be able to do it. Selling point for me anyway, im sure it will be for many others, as the HTML selectBox is VERY limit with regards to styling (width, height and bgcolor, thats it!).

http://www.reacthosting.com/v2/ to see the result, its the domain check on the grey menu in the header.

Many thanks for your help Andy and Kevin!!

Matt

Poster: kevin3442
Dated: Friday May 28 2004 - 0:37:16 BST

Hi Matt,

Summy wrote:

... http://www.reacthosting.com/v2/ to see the result, its the domain check on the grey menu in the header.

Very cool looking... me like!

Quote:

Many thanks for your help Andy and Kevin!!

You're welcome.

Kevin

Poster: John
Dated: Friday May 28 2004 - 4:51:18 BST

Looks good, Matt.

Just a thought, if you don't mind. Pre-load your images. There's a fair delay the first time you mouseOver the menus (after they're in cache it's fine, of course).

Poster: Andy
Dated: Friday May 28 2004 - 9:49:19 BST

There is a module for preloading menu images at http://www.milonic.com/preloadmenuimages.js

Just put this in after the menus have been built and the module will do the rest.

Your menu looks great, I'll definately get this in as a demo once I get a minute.

Cheers
Andy

Poster: Maz
Dated: Friday May 28 2004 - 17:09:29 BST

Thanks, Andy!

maz

Poster: Summy
Dated: Saturday May 29 2004 - 0:57:23 BST

Awesome, thanks guys!

Poster: Martin
Dated: Saturday May 29 2004 - 2:36:30 BST

This is a cool topic. I always search for a way to have nice formatted dropdown lists.

The example shows, that the milonic menu is universal to use and not only a dhtml menu. So, it's possible to build nice forms with effects like we know from flash.

So, if have to update some forms pretty soon

Poster: kercheval
Dated: Tuesday June 6 2006 - 23:03:54 BST

changeParentText does not appear to work if using the buildAfterLoaded variable set to true. The text found after first selection is 'undefined' and the submenu no longer tracks the parent.

Since the dropdown combo box does not work correctly in restricted space (with the submenu set to overflow scroll) unless buildAfterLoaded is set, the dropdown examples have some real limitations.

We have had to ensure that our frames are not too small and do strange tricks like specifying vertical menus rather than horizontal to ensure that there is enough space. Even then, a horizontal scroll will appear at odd times in the submenu.

Definitely some bugs in this implementation in scrolling. Has anyone seen a workaround for this, or is this unknown behavior? 578 build from early last week does not correct this.

Industrial Strength JavaScript and DHTML Menus

Emulate HTML Select box?