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)
Joomlabased
· 1 year ago
It is very good article and help me lots.
SkyLu
· 1 year ago
That great~ and I'm trying to find a control like this.
vuelos baratos
· 1 year ago
wow, cool, I have always looked for it. Thx!
Naveen
· 1 year ago
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
Alberto
· 1 year ago
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?
elPas0
· 1 year ago
thanks
elPas0
· 1 year ago
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
Daan
· 1 year ago
Nice dude !! Realy a BIG help....
BUT I don't get the values in my GET or POST??
Daan
· 1 year ago
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))
Sabre
· 1 year ago
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!
Sabre
· 1 year ago
And one more thing: please consider implementing scrollbar in options container (maybe additionally even custom scrollbars?).
Sabre
· 1 year ago
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 code I've posted has no control, so container will be always shown over select box.
Sabre
· 1 year ago
Damn, it's me again :D Just realized that it doesn't work in IE6 - somehow IE6 have set offsetTop on 0 o_O
Sabre
· 1 year ago
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 ;)
Norbert
· 1 year ago
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
divbyzero
· 1 year ago
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]
E.T.W
· 1 year ago
Thanks for this, was a big help making my site a little bit cooler!
Mange
· 1 year ago
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 :)
elPas0
· 1 year ago
ok guys. first of all thanks for your responses i have some free time now so i will continue development to satisfy your requests
Richard
· 1 year ago
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
Zeguyz
· 1 year ago
Nice script but the option selected is not being submitted when submit button is clicked. Any solution to get it working.
Zeguyz
· 1 year ago
Well done Richard I have only seen your solution after posting my comment ... Cheers! have a beer :o)
Raja Chandran
· 1 year ago
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.
Craig
· 1 year ago
Has anyone updated elSelect to support keyboard access - i.e. - tab, up, down, enter keys?
Praya
· 1 year ago
This combobox does not submit. Can any one help i sorting the issue?
Grendel
· 1 year ago
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.
Christian Freear
· 1 year ago
is this MooTools 1.2 compatible?
gelo
· 1 year ago
do we have jquery version of this?
rav3n
· 1 year ago
hi! cool script but i've found a bug: line 60: }).injectInside($(this.options.container))
should be: }).injectInside($(this.optionsContainer))
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'));]
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
Awais
· 1 year ago
post/get not working in IE7. tried Richard's and Daan's solution but not working in IE6 and 7
Dylan Kennet
· 1 year ago
Actually, it works pretty well in Mootools 1.2 once you change the .setText functions to .set('text', For example: Line 95 old: this.selectedOption.setText(option.text); Line 95 new: this.selectedOption.set('text',option.text);
Likewise, the .getText() function has been replaced with .get('text')
Phil
· 1 year ago
I installed it. It look pretty but doesnt submit the information. The hidden input element is not properly created. Why is that?
Charles
· 1 year ago
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..
Altersvorsorge
· 1 year ago
Hey thank you for the script its nearly perfect. Just the Keyboard function didnt work :(
Altersvorsorge
· 1 year ago
Thank you for your script. Works nearly perfect except the Keyboard functionality
DigiStyle
· 1 year ago
@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...
DigiStyle
· 1 year ago
I rewrote the lines above, now it's only [code]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') }[/code] after the '} else {' in the onDropDown part
Mohammad Arif Hossen
· 1 year ago
Thanks
Denitz
· 11 months ago
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.
Ajans
· 10 months ago
Thanks you too much. This is perfect and wonderful ! Thanks you again, you are professional designer.
Brian D
· 10 months ago
Is there a way to get the selectedIndex of a elSelect?
srobert2
· 9 months ago
It is very good article. Helped me solve the problem.
Marcin
· 9 months ago
This script is ok! Interesting but simple solution to the problem. One could make the animation... HeY.
Cyro
· 8 months ago
Thanks!!
Adriano
· 8 months ago
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?
Chuck
· 8 months ago
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:
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!
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:
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
benn
· 5 months ago
seems like it does not work on latest Opera , no way to select, all other browsers ,
Looks brilliant, thanks a lot. Does anybody know how I can use it for several selects and with a different width? Many thanks
Ahmad Alfy
· 4 months ago
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
Ahmad Alfy
· 4 months ago
@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
All Comments
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
What version of mootools are you using?
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?
BUT I don't get the values in my GET or POST??
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))
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!
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.
Just realized that it doesn't work in IE6 - somehow IE6 have set offsetTop on 0
o_O
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 ;)
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
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]
first of all thanks for your responses
i have some free time now so i will continue development to satisfy your requests
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
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.
line 60:
}).injectInside($(this.options.container))
should be:
}).injectInside($(this.optionsContainer))
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
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
For example:
Line 95 old:
this.selectedOption.setText(option.text);
Line 95 new:
this.selectedOption.set('text',option.text);
Likewise, the .getText() function has been replaced with .get('text')
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..
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...
[code]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')
}[/code] after the '} else {' in the onDropDown part
max-height:130px;
overflow-y:scroll;
overflow-x:hidden;
Interesting but simple solution to the problem.
One could make the animation...
HeY.
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!
$$('div.elSelect div.optionsContainer').setStyle('display','none')
Is that short enough?
Great script though, thx for the all the effort so that we can all get away from drab forms!
Here is my page:
http://www.theseagatehotel.com/www.theseagateho...
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.theseagateho...
Message: Object doesn't support this property or method
Line: 1
Char: 1
Code: 0
URI: http://www.theseagatehotel.com/www.theseagateho...
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
IE6 IE7 IE8 , Safari , Chrome , FF2, FF3 work perfect
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
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