vestman / select-or-die Goto Github PK
View Code? Open in Web Editor NEWYet another jQuery plugin to style select elements. Demo at http://vst.mn/selectordie/
License: MIT License
Yet another jQuery plugin to style select elements. Demo at http://vst.mn/selectordie/
License: MIT License
Hi, I seem to have encountered an issue where the select menu is not opening up when you load the page with the parent container hidden.
I'm using jquery's slideToggle(); from a click event to show the form with the selectordie inside it. There are no errors in the console.
If on the otherhand, the parent container is display: block on the page load, SoD functions perfectly.
Thanks
Love, love, love the work you've put in to this โ would love to see ARIA-tags for accessibility as well, though.
I'm using mixitup jQuery plugin for content filtering. It works good with plain selects: http://codepen.io/patrickkunka/pen/Fqocw
But when I use selectordie to customize the selects, mixitup stops working.
Here is how mixitup fires:
$filters.on('change', 'select', function(e){
...
});
How can I make it working?
I added a "size" to the configuration and it seems to break the dropdown. I see a drop down but it's only about 5 pixels tall with no data inside. Any idea what I'm doing wrong?
$("#add-collection select").selectOrDie({
cycle: true,
size: 3
});
Fantastic widget! Thank you so much for your work on this.
I have a request, unless the functionality is there and I'm not using it correctly! When I use placeholder text, I've noticed when you submit a form, the placeholder text is showing in the select boxes rather than the selectors showing the previously selected list item. Is there a way of doing this?
Thanks!
Similar issue to a similar plugin found here: selectize/selectize.js#182
Clicking on the scrollbar in IE (tested on IE8 and IE11) fires the blur event and closes the dropdown
The website you link to for instructions on usage in the github readme is no longer available. Can you for historical purposes please update the github readme to include the basic configuration instructions that you were hosting off-site before.
It may be a surprise people are still using the plugin but they are. In my case it's because it was used in a shopify theme that I still have to support and the client doesn't want to change.
On SOD elements with a placeholder, the label shows the first option on select, rather than the placeholder or the selected option, both in Internet Explorer 10 and Chrome 43, on Windows 8.
Works fine in Firefox though, oddly.
Are there any plans to update this plugin soon?
In order to "update" an already existing select field with a new config, I have to destroy the old SoD field first, and then re-create on with the new settings.
Is there a way to do something like:
$('#select').selectOrDie('update', {
onChange: function() {
// ...
}
})
Tested on Google Chrome Version 33.0.1750.5;
Right click on links enabled SOD and choose inspect element then click on page (everywhere), you will see the issue!
Hello,
How do I go about getting the result from SoD when submitting it through an HTML form? I have printed out the $_POST data, and the selection data is nowhere to be found. How do I go about getting this information?
There seems to be an issue with the plugin when you have multiple select fields on the same page. The plugin works great on desktop but on iPad and iPhone anytime you press an item all select or die elements get reset โ visually. The values of the select elements work though. I saw that this was a previous issue, and apparently it was resolved but I am still having this issue.
placeholderOption & placeholder settings don't allow me chose any option. When field lose focus widget back to placeholder.
Tested on android & chrome emulator
Hi there, I've been having trouble styling the sod in a fluid container. If I use percentages, I need to set the sod_list_wrapper to width=101% so that it matches the sod_select element. However, on certain screen dimensions, the sod_list_wrapper appears to be a pixel or two smaller than the sod_select, making the edges look jagged and not clean at all. Do you know of any solutions for this?
For instance, when the select input is inside an overflow:hidden container, the option list is hidden too. That looks normal, but it doesn't look as a default select option list behaviour.
Would it be possible to add an option in order to choose where the option list will be appended (such as body) ? Then it'll surely have to follow the input if it moves (as scrolling).
Like :
listParent : 'body'
or :
listParent : $('body')
P.S. : Tell me if you have no time to develop this, I could eventually make it.
Hi,
Sorry to all of you who has been using the Select or Die. I haven't had the time to look at the issues that's been submitted. I will make sure to take a look at them ASAP.
After selecting a value with the keyboard, and then click on the sod_label the label is changed. Upon navigating away from the field, the sod_label is reset to the original selected value, not the active value.
Can you change the font to use a web-safe font instead of the google font?
The google font import makes an unnecessary call when the font is overridden in my project styles. When using bower it is not best practice to change anything in the packages you use. I import the package .css into my .css and then override specific rules. This doesn't work for the font @import. I can also copy the package .css to my project folder, but again this is not ideal as I'd essentially be forking the code locally.
This is a super small issue, but solving it would make this this already awesome plugin even awesomer!
Hey,
Love your script. Making some dumb mistake on implementing with a filterable list of options. Do I need to add something to call in order to get it to trigger the filtered option when it has been selected?
Thanks,
Justin
Hi,
was implementing this in one project and saw today that the plugin does not seem to work on the latest version of Firefox 30.0.
Please check your plugin homepage for example:
http://vst.mn/selectordie/
Otherwise, a great plugin, keep up the good work!
.sod_label gets .sod_placeholder class after click outside select box.
Can't get SoD work with jquery steps (https://github.com/rstaib/jquery-steps/)
Click on a select doesn't pen the options list.
I'm soooooo disapointed because it's a very nice plugin but does'nt work on IE 11 on Win7, (not changing the item on selection even if the "onChange" function seems to be triggered...)
I hate IE... I don't want to debug on IE sorry
But works fine on my Chrome and FF !
A select
is inline (phrasing) content, and thus a common practice is to place them within p
elements. So the select-or-die replacement element should follow this.
I would like to reopen #1, as there currently is no support for this but its a pretty useful feature.
I made a little jsFiddle to explain the bug : http://jsfiddle.net/Ls3mcvLu/6/
Select something on the first select. The onChange event is triggered as expected.
Then, select something on the second dropdown. The second dropdown trigger the onChange event and show the value selected on the first select? Notice there is no listener for the event on the second dropdown?
I want to make s-o-d copy over the data attributes on my source select option tags. Is this possible? I see that they aren't copying over by default.
Hi, I'm going to host this lib on cdnjs.
I think this is the homepage of this lib.
But I cannot access it.
Is there any problems or the url is wrong?
cdnjs/cdnjs#8502
I needed to trigger a function on clicking the select, so I added callback function just like onChange and added it to the "triggerSod" function.
So my request is for more Callback functions, for instance: onOpen, onClose, etc.
Maybe more people would find these useful.
Hello, it`s a really cool plugin. Better select what I see. But it need to multiselect. Very need. Can you, please, do it.
Thanks in advance. and sorry for my English...
Hi,
I tested your plugin on IE9 and IE10 from your website (http://vst.mn/selectordie/) and I noticed that it doesn't work. Indeed when I change the active option the select won't update.
And in your compability section you wrote it works on IE8+.
Do you have any issues?
After you make a selection on IOS and click on another input field, it resets the selection.
On your live demo site, it doesn't have this issue. Maybe the current download is not up to date?
So when you've got many selects in row and tabbing through them they ain't loses focus.
Also when SoD select catch the focus and you switch value by arrows or holding some keys on keyboard and then you tab to the next field selected value is still selected, but if you just click somewhere value returns to the previous state. In the last case only pressing enter will actually set the selected value.
Here is a gif to illustrate this issue. Red border color is set only for .sod_select.focus
For example if you press "1" on the num pad String.fromCharCode(e.which) will return "a"
Hi.
Problem is subject.
Without whit option all works fine.
Link to documentation is dead.
For some reason, when you navigate back or forward in chrome, some of the select fields break. This is even happening on your demo site.
To reproduce:
You'll notice then that the first select on your demo page is empty.
If you click this select, you'll notice the error "Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined" in the console
The rest of the selects work, other than the one in the "Disable / Enable" section. If you click on this select, you get another error "Uncaught TypeError: Cannot set property 'nodeValue' of null".
I have a strange issue on IE (IE11, IE10, IE9 and IE8 ). When I try to select an option from the select it always selects the first possible option and I can't figure out the cause of it.
If hte dropdown is selected but not folded out, and I navigate with arrow keys, the select is not updated when I tab. Only when I click enter.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.