December
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/view.....#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>
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)
[…] Foo released a elSelect - a tool that allows you to visually change the look and feel of a SELECT element through the use […]
It is very good article and help me lots.
[…] Kendimize ?zel selecbox olu?tural?m. Ba?lant? […]
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?
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?).
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.
Damn, it’s me again :D
Just realized that it doesn’t work in IE6 - somehow IE6 have set offsetTop on 0
o_O
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
[code]
this.optionsContainer.addEvent(’click’, function() {
if ( this.optionsContainer.getStyle(’display’) == ‘block’)
this.onDropDown()
}.bind(this));
[/code]
Old Line:
[code]
document.addEvent(’click’, function() {
if ( this.optionsContainer.getStyle(’display’) == ‘block’)
this.onDropDown()
}.bind(this));
[/code]
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
[…] inactive, modifying the different styles on the select options and so on. Luckily I found this site http://www.cult-f.net/2007/12/14/elselect/ on how to do […]
[…] elSelect elSelect is a great tool that allows you to visually change look and feel of usual select, keeping its functionality. […]
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
[…] in on them. Very cool mootools plugin for it.code javascript js mootools tagcloud tricks webdev Cult-foo » elSelect - customizable SELECT element. 3 hours agoCustomize the select element to add images and make it look, well, not so damn […]
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.