can't figure out hot to make selectmenu work

[Igal-Kleiner]

Hi!
I'm a newbie at it, just learning JS. I downloaded the selectmenu plugin and now I'm trying to figure out how to make it work. So I created the following simple html file with a select option and embedded the jquery and jqueryUI, just to try and see how it works:

<title>Some title</title> <script language="javascript" type="text/javascript" src="select/jquery-1.6.2.js"></script> <script language="javascript" type="text/javascript" src="select/ui/jquery.ui.selectmenu.js"></script> Select an option opt 1 opt 2 opt 3 <script type="text/javascript"> $("#selectmenu").selectmenu(); </script>

But that doesn't work, I see a simple select. I tried to place the code in the head of the document:

<script language="javascript" type="text/javascript"> $(function(){ $("#selectmenu").selectmenu(); }); </script>

Still no result.

So how do I make it work?
Maybe somebody have a simple working example?

Thank you!

[fnagel]

Did you take a look at the demos? Did you take a look here #61?

[Igal-Kleiner]

Yes, I looked at the demo, I followed it (well, I think I did), but it still doesn't work. I tried to paste my very simple select menu to this pastebin and it worked there, but at my localhost with my files - nothing. Here's what I tried to do:

    <script language="javascript" type="text/javascript" src="select/jquery-1.6.2.js"></script>
<script language="javascript" type="text/javascript"  src="select/ui/jquery.ui.selectmenu.js"></script>
<script type="text/javascript" src="select/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="select/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="select/ui/jquery.ui.position.js"></script>
<link type="text/css" href="select/themes/base/jquery.ui.all.css" rel="stylesheet" />
<link type="text/css" href="select/themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />

<script type="text/javascript">         
    $(function(){            
      $('select#env').selectmenu({
      style:'popup'
});

    $('select#env').selectmenu({
      style:'popup',
      maxHeight: 150,
      wrapperElement: "<div class='wrap' />"});
}); 

and the html code of the select menu:

<select name="env" id="env">
    <option value="select" selected="selected">Please select exhibit environment</option>
    <option value="savannah">Savannah</option>
    <option value="foliage">Foliage</option>
    <option value="terrain">Terrain</option>
    <option value="rocks">Rocks</option>
    <option value="rainforest">Rainforset</option>
    <option value="desert">Desert</option>
    <option value="aquatic">Aquatic</option>
</select>

[Igal-Kleiner]

anybody? some help, please! really needed...

[fnagel]

You should load core and widget before selectmenu.js. Your setup should
throw an error within the JS console.
Should work if changed, otherwise please upload a zip so I can take a look!

ps: CSS should be loaded before JS in general.

[Igal-Kleiner]

Yes, that did the trick and it did work! Now I see the select element changed! Thank you!
Now the bigger questions:

1. how do I modify the look of it (which css file) - size, color, hover color, arrow icon, font family/size etc..?
2. How do I make it slide / fade / ?
3. How do I present these little Icons near the select options? Especially if my select menu is dynamic and generated from mySQL?

Is there any tutorial on how to work with this plug in?

Again, thank you!

[fnagel]

1. you coudl adjust the CSS manually or use the jQuery UI themeswitcher,
   take a look in upper right corner in at the default demo
2. Not possible atm, open feature request
3. Take a look at the bg demo, see
   https://github.com/fnagel/jquery-ui/blob/selectmenu/demos/selectmenu/background_image.html

Hope that helps...

[Igal-Kleiner]

1. OK, got it with the css! Just needed to figure out which css to use, there are few of them...
2. Really? It's not possible like with the datepicker? There are a few very nice animation effects... How do I open the feature request?
3. Nop, not really... Well, it's not the most important thing, I'll try to get back at it later, when I'm a bit more familiar with the system and the language!

Thank you!

[fnagel]

Nobody requested that before. Just click the new issue button!