JavaScript custom dropdown - JavaScript image combobox
Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing "select" element. I hope you'll like this.
Preview:
Image dropdown features:
- Fully Skin-able
- Your original dropdown is safe, so your form post will not be messed.
- An image can be inserted with your text. Each <option> can have an image.
- You may covert all combobox as image combobox, you may convert by id, multiple ids, or by wild card. We'll see that in example.
- Its possible to repopulate the data. You can also Enabled/Disabled your dropdown. You just need to write following code after your population or activities.
//after your activities document.getElementById('yourcomboboxid').refresh(); //yes, you are right! A new method refresh() has been added with every combobox. - Almost all events are working.
Current Version: 2.1
Whats in v2.1?
- Each dropdown can have own properties. This was missing badly in previous version.
- W3C Compatible
- More Organised
- True Jquery Plugin
- Keyboard navigation
- Multiple selection (List) New
- Free again :)
Dependency:
Jquery 1.2.6 or later.
This jQuery plugin works perfectly without any modification. Just follow the instruction and enjoy!
How to use (HTML Part)?
1. Have a look at original dropdown.
<select name="webmenu" id="webmenu" onchange="showValue(this.value)">
<option value="calendar">Calendar</option>
<option value="shopping_cart">Shopping Cart</option>
<option value="cd">CD</option>
<option value="email" selected="selected">Email</option>
<option value="faq">FAQ</option>
<option value="games">Games</option>
<option value="music">Music</option>
<option value="phone">Phone</option>
<option value="graph">Graph</option>
<option value="secured">Secured</option>
<option value="video">Video</option>
</select>
Yes, This is a normal dropdown but I've added image path in "title". Previously it was "icon" attribute. This is good if you value W3C compatibility.
<select name="webmenu" id="webmenu" onchange="showValue(this.value)">
<option value="calendar" title="icons/icon_calendar.gif">Calendar</option>
<option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option>
<option value="cd" title="icons/icon_cd.gif">CD</option>
<option value="email" selected="selected" title="icons/icon_email.gif">Email</option>
<option value="faq" title="icons/icon_faq.gif">FAQ</option>
<option value="games" title="icons/icon_games.gif">Games</option>
<option value="music" title="icons/icon_music.gif">Music</option>
<option value="phone" title="icons/icon_phone.gif">Phone</option>
<option value="graph" title="icons/icon_sales.gif">Graph</option>
<option value="secured" title="icons/icon_secure.gif">Secured</option>
<option value="video" title="icons/icon_video.gif">Video</option>
</select>
How to use (Script Part)?
2. You need to add following code in "header".
<script language="javascript" src="msdropdown/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />
3. One more step and you are done :) Add following code anywhere in the "body".
<script language="javascript">
$(document).ready(function(e) {
$("body select").msDropDown();
});
</script>
Make dropdown by Id's
Yes, That's possible. You can make custom dropdown by ids. Lets have a look.
// target only one id
$("#combo2").msDropDown();
// target multiple ids
$("#combo1, #combo2").msDropDown();
//by wild card
$("body select").msDropDown();
//or
$("#divid select").msDropDown();
//or
$("#formid select").msDropDown();
Method & Properties:
//convert normal combobox to image comboxbox
1. $("#comboboxid").msDropDown();
//Show/hide icon on title bar. by default its "true";
2. $("#combo1").msDropDown({showIcon:false});
//Use inline style
3. $("#combo1").msDropDown({style:'background-color:#333, font-size:'24px'});
//Visible rows (it would be good if you enter "rowHeight" when using "visibleRows");
4. $("#combo1").msDropDown({visibleRows:5, rowHeight:23});
How to change skin?
Smile :) ...CSS (dd.css) is yours, play with that. Just keep few things in mind. Please don't change "display, float and overflow" attributes. Have Fun!
New Release: 3rd Sep, 2009
- Version 2.1
- Multiple selection implemented
Supported Browsers
Example:
Click here to play with demo!
You want it? Download!
| Attachment | Size |
|---|---|
| jquery-image-dropdown-2.1.zip | 69.95 KB |
| drupal.module.msdropdown.zip | 79.22 KB |
Your blog provided us
Your blog provided us valuable info to work on. You have done a marvellous job!
I found your blog on google
I found your blog on google and read a few of your other posts. I just added you to my reader.
!!!
fantastic work !!! THX !!!
It is a fantastic work but
It is a fantastic work but does it support by all browser?
excellent stuff! adding the
excellent stuff! adding the graphics to the drop down really gives it a much interactive feel.
Nice work
Good work and tutorial. I try to use this for primary menu
conflict with carousel script
First of all, fantastic plugin.
I've discovered a conflict between msdropdown and a gallery plugin I'm using: JCarousel Lite. Carousel moves stop working if I change options on the dropdown menu. But once I click on the dropdown again, the image switches to whatever I had clicked on in the carousel queue. not sure if this is where you track bugs, but wanted to say thanks for this great plug. And I'm looking forward to using it in a live environment.
-r nyc
Nice
It was my pleasure to visit your Website. I am also very enjoy the article.
How to make Link
I'm glad I found this script on the Internet and that such an appearance and function.
I have one question:
Is there any possibility to make a link to the website of this option?
If so how?
I fixed this self!
I fixed this self!
Post new comment