elSelect is a great tool that allows you to visually change look and feel of usual select, keeping its functionality.
Click on screenshot to see it in action. Example will appear in a new window because it uses MooTools library which conflicts with the Prototype library used at this site. And “mootools is not trying to be conflict free” ( more info – http://forum.mootools.net/viewtopic.php?id=1964#post-9356 )
Why i did it? Well, you all know that select element and IE have problems.
They are :
- SELECT ignore z-index and will display over any other position element (fixed in IE7) ,
- disabled property for OPTION tag do not work in IE
- you cant change look of standard SELECT using CSS
This class successfully solve all problems, but elSelect is still in development……
Future Enhancements(Hopefully)
- Create a select from an array instead of select element.
- Add functions to dynamically add / remove rows.
- Options sorting
elSelect is made with MooTools Framework.
You need following components:
- core ( core )
- class ( all )
- native ( all )
- element ( event, filters, selectors )
- window ( domready )
It takes standard DOM select element and make new control from it. What I want you to know about elSelect is that:
- elSelect is fully customizable via CSS file.
- elSelect takes standard select as a parameter, so you do not need to rewrite your HTML
- elSelect works on Firefox/IE/Opera. Anyone who has ability to test it on Safari please write if it works.
How to use it
You need to download elSelect.
Inside the pack you will find:
/js
- elSelect.js – the class itself,
- mootools.js – mootools framework
/theme
- style.css – default stylesheet containing all the possible classnames you can style
- top_center.gif , top_right.gif , top_line.gif , top_left.gif – images for top round corners
- select_bg.gif , select_arrow.gif – for styling select element
- bottom_right.gif , bottom_left.gif , bottom_center.gif – images for bottom round corners
In the head of your HTML insert
<script src="js/mootools.js" type="text/javascript"></script> <script src="js/elSelect.js" type="text/javascript"></script>
Ok, now class is included, so we can create new element
<script type="text/javascript">
window.addEvent('domready', function(){
var mySelect = new elSelect( {container : 'someId'} );
</script>and HTML code like this:
<div id="someId"> <select name="test"> <option>-select number-</option> <option value="1" class="icon_1">one</option> <option value="2" class="icon_2">two</option> <option value="3" disabled="disabled">three</option> <option value="4">four</option> <option value="5">five</option> <option value="6">six</option> </select> </div>
And in the result the structure of new control will be following
<div id="mySelect"> <div class="elSelect"> <div class="selected"> <div class="selectedOption">-select number-</div> <div class="dropDown"></div> </div> <div class="clear"/> <div class="optionsContainer"> <div class="optionsContainerTop"> <div> <div></div> </div> </div> <div class="option selected">-select number-</div> <div class="option icon_1">one</div> <div class="option icon_2">two</div> <div class="option disabled">three</div> <div class="option">f</div> <div class="option">five</div> <div class="option">six</div> <div class="optionsContainerBottom"> <div> <div></div> </div> </div> </div> </div> <input type="hidden" name="test" value="" > </div>
If you noticed, to add an icon to the option you need to add a class to option element.
<option value="1" class="icon_1">one</option>
Here goes example and download link.
Sadly, it doesn’t work in Safari 3 on OSX :(
a) the option dropdown is not 100% the width of the select. Not major but
b) they are not clickable :P which is a bigger problem :P
don’t even know how to solve it cause have no ability to test it on Mac
cool style ~~
Try Safari for Windows: http://www.apple.com/safari/
What version of mootools are you using?
i try Safari for Windows – all working fine :(
Did you change something? I just DL’ed it again and it seems to be working fine now?? (Safari 3.0.4 in OSX 10.5.1)
It is very good article and help me lots.
That great~ and I’m trying to find a control like this.
wow, cool, I have always looked for it. Thx!
Wow, Awesome really very nice i have tried this but i cont able to get this kind of out put very very nice thank you
Nice!
But…
What happened to standard events like onChange? I do need them, am I missing something wrong or is it really missing? If so, can it be implemented?
To add onChange event – find this line:
this.hiddenInput.setProperty(‘value’,this.selected.getProperty(‘value’));
and change to this:
this.hiddenInput.setProperty(‘value’,this.selected.getProperty(‘value’));
this.hiddenInput.fireEvent(‘change’);
thanks
events is not implemented now. but it is easy to add their support. as soon as i will have free time, i’ll add it
Nice dude !! Realy a BIG help….
BUT I don’t get the values in my GET or POST??
Litte update:
NEW (line 57-60):
this.hiddenInput = new Element('input').setProperties({ type : 'hidden', name : this.source.getProperty('name') }).injectInside($(this.optionsContainer))OLD (line 57-60):
this.hiddenInput = new Element('input').setProperties({ type : 'hidden', name : this.source.getProperty('name') }).injectInside($(this.options.container))Really nice man.
I mean, I was having a nightmare trying to make Niceforms work well, and finally I failed.
With your feature, it only has taken me time to suit CSS so it will be ok in my layout.
Many thanks!
And one more thing: please consider implementing scrollbar in options container (maybe additionally even custom scrollbars?).
Damn, it’s me again :D
Just realized that it doesn’t work in IE6 – somehow IE6 have set offsetTop on 0
o_O
Additionally, it would be useful, if select is self-checking if to show options container above or under select box. Sometimes, if you scroll window, container goes behind screen or (even worse) – when website is short but options container is tall, it will ‘resize’ window. I hope you know what I’m talking about ;). Main aim is to put options container over select box if there is no place for it under select box.
This works fine for me:
var toppos; toppos = this.optionsContainer.parentNode.offsetTop - this.optionsContainer.getStyle('height').toInt() this.optionsContainer.setStyle('top',toppos+"px") this.optionsContainer.getFirst().setStyle('width', width) this.optionsContainer.getLast().setStyle('width', width)I’ve added it in line 114, after
this.optionsContainer.setStyle('width', width)and before
,
This code I’ve posted has no control, so container will be always shown over select box.
Okay, I spammed comments sections much, so I will spam it a bit more ;):
I’ve added:
this.containerHolder = new Element('div').injectInside($(this._select)); this.containerHolder.setStyle('position','relative')just after:
new Element('div').addClass('clear').injectInside($(this._select))and then changed:
this.optionsContainer = new Element('div').addClass('optionsContainer').injectInside($(this._select))to:
this.optionsContainer = new Element('div').addClass('optionsContainer').injectInside($(this.containerHolder))so now, we have our options container in "holder" positioned relativly. We will move this holder up in order to set our options container above select box. All you have to do in order to move selectbox above select box is add:
var toppos; toppos = -this.optionsContainer.parentNode.parentNode.offsetHeight - this.optionsContainer.offsetHeight this.containerHolder.setStyle('top',toppos+"px")at the end of onDropDown method.
Works fine for me, but I have got height set for options container in CSS (with additionally set overflow:auto and all those optionsContainerTop, Bottom, and divs within them display:none;).
You may like to write controller to control if set options container under ( top:0px ) or above select box. I think it would be best to place such controller in onDropDown method.
I hope that I didn’t screw anything when describing.
This work in IE and FF amd I hope in other browser too.
BTW. Feel free to delete two previous comments of mine ;)
Hello,
this script is great! But the usability would be better if you could add the keydown events for ENTER and UP and DOWN – like you have in your normal firefox select element.
best regards
norbert
Hi. Forgive for my english.
Thank you for such realization, use in its project.
Here is little has ed the code, for dynamic use:
Line: 65-67
this.optionsContainer.addEvent('click', function() { if ( this.optionsContainer.getStyle('display') == 'block') this.onDropDown() }.bind(this));Old Line:
document.addEvent('click', function() { if ( this.optionsContainer.getStyle('display') == 'block') this.onDropDown() }.bind(this));Thanks for this, was a big help making my site a little bit cooler!
Really cool script!! But i?m also missing a scroll function if the option list is to long. With that kind of functionality it would be perfect :)
ok guys.
first of all thanks for your responses
i have some free time now so i will continue development to satisfy your requests
Daan’s solution worked for the post/get method however it ruined the bottom so here is what i did
NEW (line 57-60):
this.hiddenInput = new Element(’input’).setProperties({ type : ‘hidden’, name : this.source.getProperty(’name’) }).injectAfter($(this.options.container))//use injectAfter instead of injectInside
Nice script but the option selected is not being submitted when submit button is clicked. Any solution to get it working.
Well done Richard I have only seen your solution after posting my comment … Cheers! have a beer :o)
Good control. Is it possible to select the first or second or third element via javascript. After submitting i need to change the element selection. Any solution will be helpful.
Has anyone updated elSelect to support keyboard access – i.e. – tab, up, down, enter keys?
This combobox does not submit. Can any one help i sorting the issue?
hi,
this script is great and i want to combine with this one http://www.electricprism.com/aeron/calendar/ , but i don’t know how to do it :( if somebody know please let me know.
is this MooTools 1.2 compatible?
do we have jquery version of this?
hi! cool script but i’ve found a bug:
line 60:
should be:
so now we got hidden input with the value of option checked
and we could add something like this after line 132
[ this.hiddenInput.setProperty('value',this.selected.getProperty('value'));] document.location.href=this.hiddenInput.getProperty('value');so it will work like onChange
I cannot get this to work with the latest version of moo tools.
Please get in touch with me, and we may be willing to pay for a version that works well with mootools.
Thank you in advance
post/get not working in IE7. tried Richard’s and Daan’s solution but not working in IE6 and 7
Actually, it works pretty well in Mootools 1.2 once you change the .setText functions to .set(‘text’,
For example:
Line 95 old:
Line 95 new:
this.selectedOption.set('text',option.text);Likewise, the .getText() function has been replaced with .get(‘text’)
I installed it. It look pretty but doesnt submit the information. The hidden input element is not properly created. Why is that?
BIG CON– You can’t have multiple boxes.
I recreated the images in psd to style with different color, after spending three hours..bang.. I find out you can’t have multiple boxes
But, nonetheless it’s a great little toy.. Good Job..
Hey thank you for the script its nearly perfect. Just the Keyboard function didnt work :(
Thank you for your script. Works nearly perfect except the Keyboard functionality
@Charles – I think you can, as long as you use different ID’s foreach ‘new Elselect’. I found that then a problem appeared when you have the selectboxes above each other. The other boxes stay displayed when clicked.
I added a some lines like below to the onDrowDown piece (in the else construction)
var t_all = document.getElementsByTagName("div"); var hideDiv = false; for (var i_all = 0; i_all < t_all.length; i_all++) { if (t_all.item(i_all).id) if (t_all.item(i_all).id == this.options.container) var hideDiv = false; else var hideDiv = true; if ( (t_all.item(i_all).className == 'optionsContainer') && hideDiv ) t_all.item(i_all).style.display = 'none'; }It’s not the best javascript, but it works for me. Other allready opened selectboxes close when you click another box…
I rewrote the lines above, now it’s only
var t_all = document.getElementsByTagName("div"); for (var i_all = 0; i_all < t_all.length; i_all++) { if (t_all.item(i_all).className == 'optionsContainer') t_all.item(i_all).setStyle('display','none') }after the ‘} else {‘ in the onDropDown part
Thanks
add following CSS properties for "optionsContainer" CSS class – and here is scrolling:
I’ve got an issue here. Tried applying the el-select on a web-page -worked great and looked amazing. Allthough ONLY while showing the page locally, when uploaded on server it doesn’t work. Any ideas? Please let me know.
Thanks you too much. This is perfect and wonderful ! Thanks you again, you are professional designer.
Is there a way to get the selectedIndex of a elSelect?
It is very good article. Helped me solve the problem.
This script is ok!
Interesting but simple solution to the problem.
One could make the animation…
HeY.
Thanks!!
I’m using in a ASP.Net, but i can’t get the values of the selected itens in the Post Back. Someone try do this?
I been working on the equivalent of this plugin for jQuery, if anyone want to try it out, there’s an example and a download link in here:
http://www.chiclosa.com/2009/05/elselect-jquery/
I added "onchange" support for this version.
If you got any questions or suggestions, you can contact me on twitter @davidmh
Hope you like it!
I rewrote the lines from DigyStyle
$$('div.elSelect div.optionsContainer').setStyle('display','none')Is that short enough?
The download still has the vital options.container vs. optionsContainer problem (line 61) mentioned back in 2008. Suggest u change so this so the script will $_POST values straight out of the zip. took me a while to figure out what was wrong.
Great script though, thx for the all the effort so that we can all get away from drab forms!
I can ‘t seem to get elSelect this to work in IE.
Here is my page:
http://www.theseagatehotel.com/www.theseagatehotel.com/index.html
It works fine in Firefox 3.5 and Safari 4.0 on the PC (after I changed "injectInside" to "injectAfter" on line #60 in elSelect.js) — but IE 8 is giving me the following error message:
Message: ‘null’ is null or not an object
Line: 32
Char: 3
Code: 0
URI: http://www.theseagatehotel.com/www.theseagatehotel.com/js/elSelect.js
Message: Object doesn’t support this property or method
Line: 1
Char: 1
Code: 0
URI: http://www.theseagatehotel.com/www.theseagatehotel.com/js/reservations.js
I know that elSelect DOES in fact work in IE, since I am able to view the demo page in that browser without any problems. I suspect that IE just doesn’t like the fact that I have 3 elSelect dropdown boxes in the same page.
How can I fix this to get it to also work in IE?
Thanks,
– Yvan
seems like it does not work on latest Opera , no way to select, all other browsers ,
IE6 IE7 IE8 , Safari , Chrome , FF2, FF3 work perfect
Looks brilliant, thanks a lot. Does anybody know how I can use it for several selects and with a different width? Many thanks
This really helped me finishing one of my projects, Thanks
There is a little typo error on the readme.txt on the downloadable file.
It says :
window.addEvent('domready', function(){ var mySelect = new elSelect( {container : 'someId'} );It should be
window.addEvent('domready', function(){ var mySelect = new elSelect( {container : 'someId'} ); })Regards
@rav3n
Thanks for your modification
only one notice; You added the lines after line 132
It should be added after 126. This way it will onOptionClick
Best Regards
Why dont you put this into the mootools forge? http://www.mootools.net/forge/
Thanks you wonderful examples.
I am using in my web site this tuttorials.
Thanks again.
hey when i add this to the head of my document i get ‘there is a syntax error’ etc:
window.addEvent(‘domready’, function(){
var mySelect = new elSelect( {container : ‘someId’} );
i am new to this stuff :)
Try also mootools custom form elements (http://customformelements.net). It’s an open source library to replace all kinds of form fields (including select, checkboxes, radiobuttons, text inputs, file upload…). It’s kinda modular and extendible.
Content ease me to create pool
Hello all! I like this forum, i found multifarious compelling people on this forum.!!!
Pronounced Community, regard all!
still understand
Thanks for this one. Very, very nice :D :D
I have used the eselect. May i know how to save and retrive the values of selectbox in db using php code.
I am using the elSelect. My problem is when i click on the “tab” the elSelect needs to be selected but now cursor moves to the next textbox. Could you help me how to solve this?