styleSelect 2.0.0
This jQuery plugin replaces the standart select element with a custom looking selectbox. Plugin has keyboard support.
Styleable scrollbars by jScrollPane.
Suported browsers:
- Firefox 2.0+
- Internet Explorer 6+
- Safari 3+
- Opera 9+
- Chrome 1+
Demo
http://www.8stream.com/scripts/styleSelect
Usage
$("select").styleSelect();
//with styled scrolling and custom stylesheet class
var options = {
styleClass: "selectDark",
jScrollPane: 1
}
$("select").styleSelect(options);
Options
| Name/options | Type | Default |
|---|---|---|
| optionsTop Options list distance from top |
string | 26px |
| optionsLeft Options list distance from left |
string | 0px |
| optionsWidth Options list width (0 - same as main selector) |
string | 0 |
| styleClass Select style class |
string | selectMenu |
| speed Options list opening speed ('slow','medium','fast',milliseconds) |
string, number |
0 |
| selectTrigger Event to trigger on original select ('change','click') | string | change |
| jScrollPane jScrollPane styled scrollbars ('1','0') | int | 0 |
| jScrollPaneOptions jScrollPane settings: http://jscrollpane.kelvinluck.com/settings.html |
object |
Comments
Samantha T Mojica (04.05.13)
I am so amazed with the creating of your blog, such a nice information and very presentable, thanks for making this one, I will definitely bookmarked this one.
asheville web design (01.03.13)
thanks men, I am looking to this, especially the plug in to any browser, thanks for sharing it.
pnngpt (01.02.13)
cOuo8N , [url=http://mcnwavnqoziw.com/]mcnwavnqoziw[/url], [link=http://ulnqkjyuqvxw.com/]ulnqkjyuqvxw[/link], http://jfoymctfkwgf.com/
rpwbsuub (01.01.13)
CQD6uR xhhlfihbikhz
MCGEE22Jordan (12.31.12)
One remembers that modern life is expensive, however different people need money for different issues and not every man gets enough cash. Hence to receive some mortgage loans and just student loan should be good solution.
mpkkeq (12.31.12)
Z7uNNw , [url=http://qhlzqekzymsm.com/]qhlzqekzymsm[/url], [link=http://geasblnbrsht.com/]geasblnbrsht[/link], http://yculfzlraogo.com/
Angela (12.29.12)
ok i got it!what custom selimys does is put the code for the smiley by clicking it into the comment form.I guess comment autogrow is replacing the original form with the new autogrow form. Therefore this doesnt work anymore.Is the new form still a regular form, but with a different id (original id is comment ) or is it something completely different which would render custom selimys useless??
Earthwind (12.29.12)
A rolling stone is worth two in the bush, tahkns to this article.
AngelicaNash18 (12.21.12)
Don't you know that it's the best time to receive the business loans, which would make your dreams come true.
MargaretWILDER22 (12.06.12)
This is perfect that we are able to receive the mortgage loans and that opens up new chances.
Manuel (11.30.12)
Hey! It looks as though we both have a passion for the same thing. Your blog, "styleSelect 2.0.0 | 8STREAM | Website Design and Development" and mine are very similar. Have you ever thought about writing a guest post for a related website? It will certainly help gain exposure to your blog (my site recieves a lot of visitors). If you are interested, e-mail me at: manuelfranco@gmail.com. Thank you so much http://www.contiki.com/people/i80equipment/public
Violette (11.30.12)
Hello there! I know this is kinda off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form? I'm using the same blog platform as yours and I'm having problems finding one? Thanks a lot! http://www.allgirlarmy.org/user/cctvsecuritypros
Roslyn (11.29.12)
Hmm it seems like your blog ate my first comment (it was super long) so I guess I'll just sum it up what I submitted and say, I'm thoroughly enjoying your blog. I too am an aspiring blog blogger but I'm still new to the whole thing. Do you have any points for beginner blog writers? I'd genuinely appreciate it. http://myanimelist.net/profile/cctvsecuritypros
mcancer (11.28.12)
In the jquery high version (1.7.1/1.8.2) cases. when multiple click.selectDark + styleSelect_item + styleSelect_item_content jspScrollable will have 6 px dwindling bug.
Esther (11.26.12)
I don't comment, but after browsing a few of the comments on styleSelect 2.0.0 | 8STREAM | Website Design and Development. I actually do have 2 questions for you if you tend not to mind. Is it just me or do some of the remarks look as if they are written by brain dead visitors? :-P And, if you are writing on additional online sites, I'd like to follow anything new you have to post. Could you post a list of every one of your public pages like your Facebook page, twitter feed, or linkedin profile? http://www.strumcat.com/oxwall/link/1230
Chase (11.25.12)
Do you have a spam issue on this site; I also am a blogger, and I was wanting to know your situation; we have developed some nice practices and we are looking to exchange strategies with others, please shoot me an e-mail if interested. http://www.i80equipment.com/bucket-trucks-medium.shtml
Rodger (11.24.12)
When I originally commented I clicked the "Notify me when new comments are added" checkbox and now each time a comment is added I get three emails with the same comment. Is there any way you can remove people from that service? Many thanks! http://www.series7examprep.com/need-a-series-7-exam-tutor/
Veronique (11.24.12)
Good day! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche. Your blog provided us valuable information to work on. You have done a marvellous job! http://www.cctvsecuritypros.com/cables--connections--tools. html
Xuan Bao (06.19.12)
Thanks a lot! You save my time :D
Kiran Banda (06.18.12)
How do I refresh the control when there is a change in the underlying select control ? I am looking at something like a "cascaded dropdowns". Regards, Kiran Banda
Sujilesh (04.19.12)
Thanks man...!! Great plugin..
Eli (01.27.12)
I've ran into an issue where I had 4 forms, each with a drop down in one page and all drop downs had the same name. Even though each form is essentially identical the functionality of each needed to be unique and handled via JS. While I kept the name of each drop down as non-unique all 4 handlers were executed while only one was operational. It would be nice to have this script be based on id, rather than name, as it would allow for a nice non-JS degradation of the forms.
Majo (01.16.12)
Hi, I don\'t know refresh content after AJAX refresh. Can you help me with this ?
Gleenk (10.27.11)
It continuously goes in conflict with fancybox or load action.
Jeremy (09.23.11)
Your solution is great, but isn't quite the same as a native select menu. Once the select menu has focus, you should be able to type the letters of the options without having to open the menu. In your example, I should be able to type "Animals", and then your select menu would populate 'Animals' without opening the menu. When the menu is open, you should also be able to type a value, which would then highlight the option in the drop down.
Lukas Oppermann (09.09.11)
Hey, I really like this Plugin, but I have the same problem with the disabled fields. I guess the plugin just treat them as normal. Are there any plans to fix this? Also it would be nice if you could assign a state e.g. "active" to the parent div or the activeSelect div. This would make styling easier.
Lukas Oppermann (09.08.11)
I had a problem that the select menu would get small if I did not set a width in the options menu. This was because I was using a border and the width() command is used to calculate the objects width. To fix it just change line 255: $(this).css({'width' : elementList.width()}); to $(this).css({'width' : elementList.outerWidth()});
Ronald (08.31.11)
When i want to use the option : optionsWidth, it doesn\'t work. i\'ll try directly to the download file like : var options = { styleClass: \"selectDark\", jScrollPane: 1, optionsWidth: 500 } Possible to debug it ? Thanx a lot, great plugin !
Eurico Vidal (08.17.11)
I had a problem with values with spaces (ex.: value="text bla") I corrected thus: on file style-select.js in line 70 this: optionsList += '
Frenchy (07.30.11)
What a great resuorce this text is.
Jorja (07.30.11)
That's way the bestest anwesr so far!
developer (04.18.11)
Hello! I have a big problem with disabled option using styleSelect 2.0.0. If I set value for one option to disabled it works, but without this plugin. If I use this plugin "disabled" option doesn't work anymore. Does someone has any ideas, why "disabled" doesn't work with this plugin? Otherwise nice plugin ;-).
adam (04.07.11)
I really like the direction of this, but it needs to provide automatic handling for option groups. Currently it seems to just drop them entirely.
rubycat (02.22.11)
OMG the tabindex that you force on all the form elements through the script totally messes up accessibility for anyone needing to tab through the page.
jbueza (01.31.11)
are you able to get this up on github? using "$" in a form name throws errors and the community could land a fix for it.
Ray (01.23.11)
Hi, just found a bug in the code. I replaced this line: var realSelector = $('select[name="'+orgSelectbox+'"]'); with var realSelector = mainSelect; --- And now styleSelect works fine for me! The reason I had to change it was my [select] menu did not have a "name" attribute. Hope that helps!
Ray (01.23.11)
Hi, Just testing out your jQuery plugin and came across something you might have missed. When hiding the [select] menu and replacing it with your new one, you must make sure that the selected option is "selected" in the original [select] menu as well.
Nathan Brouse (01.15.11)
i noticed that if you change the height attribute in .styleSelect_item_content from \"height:140px;\" to \"max-height:140px;\" it works well so you don\'t have to do different classes for dropdowns that don\'t have very many options in them and ones that do have a lot of drop downs. figured this comment may help
Simon (01.13.11)
if you use 2 selectbox then 1 hide, then show, background not work until you will select option...why?
Anton (11.26.10)
Hi, the last 2 days I have been working with this plugin, which is excellent and much lighter than UI's upcoming bloated Selectmenu. Just a suggestion, it would be nice to have more styling classes. The div #selectbox_ was not difficult but hacking span.activeSelect was not easy. I also had to do a hover class on the li items as IE does not support li:hover Anyway, thank you very much for making this plugin available. Ciao.
JennyChurch (11.06.10)
People in every country get the loans from different banks, because it is easy and fast.
asxoniles (10.26.10)
sry the comment doesnt allow html code examples: what is was writing was that if you have an identifier tag inside an option element like br (and the < br /> version too) the resulting li element could include this br tag, thus create a second line
asxoniles (10.26.10)
I do have a feature request if thats possible? Can you allow multiline select fields? for example if you have blaline2 you would get: blaline2... something like this would be awesome
Carlos (10.21.10)
Hi, Very nice plugin. I really enjoyed it. You authorize the placement of the plugin as a demonstration and tutorial on wisejs components? In site www.wisejs.com As was done for MB Menu (jQuery plugin), with proper authorization. Initially "not wrapped" and when possible "wrapped" (unbound and bound). Best regards, Carlos
Siim (10.18.10)
Previously commented bugs are fixed.
asxoniles (10.12.10)
dunno if its a bug or an error on my side, but using the minified version i get following error in firebug $(".select1").styleSelect is not a function (?)()10_SEC...rb.html (Zeile 25) noConflict()jquery....min.js (Zeile 26) inArray()jquery....min.js (Zeile 33) [Bei diesem Fehler anhalten] $(".select1").styleSelect({styleClass: "select1_styled"}); the uncompressed js works
Siim (09.30.10)
TO Panos: selectTrigger, is activated on original select box. You can chose wish jQuery event to trigger on original item ('change' or 'click') - when you click on of the menu items.
Daniel (09.28.10)
Is there a way to have a scrollbar in it?
Panos (09.11.10)
How does the selectTrigger works? Can you please explain with an example?
yemmi (10.21.09)
very nice plugin, but there is an issue with IE and Opera10 if u use 2 select one below another, there is problem with visualization, like theese screenshot below: http://bit.ly/4g47nT
d.abinaya (05.07.13)
I want to know how to dynamically resize the select box for lengthy contents ?