Is it possible to create a custom dropdown box using javascriit and css.
for which i need to place a background-image for dropdown box using javascript
If yes or no ? if yes . give any suggestion ?
without using JQuery
You can check out jQTransform
Here is a good tutorial on creating custom drop-down.
JQTransform (as suggested by Olafur) is sufficient for me. But if you need more control such as adding icons, it's worth looking at the tutorial.
This might be overkill; but SproutCore gives you input elements composed from images instead of from native HTML elements. There are probably other frameworks that do similar things.
The basic idea is to create a div or something, as CrazyJugglerDrummer suggests, and put click handlers on it. The handlers set up animation to mimic a select element. And when one of your pseudo-select items is selected, you use JavaScript to send that value to an actual select or input element that is hidden.
Related
I need to add multiple attribute to a select list, but unfortunately the dropdown list is not editable through HTML since it is a drag and drop feature of a CMS (Spiceworks user portal) I am using.
The CMS is quite outdated; my only other option is to add checkboxes which would make the page extremely long, since there are a total of 15 options to select. (In my example, this is different)
There is no listbox option in the CMS, which is why I need to use javascript to force the dropdown to act like a listbox.
Please look here at what I tried to do: https://jsfiddle.net/jamiedewitz/sdyn0xqz/
Is there a way to force javascript to add the multiple attribute to the dropdown list or is this just wishful thinking?
Sure
const addMultiple = select => select.setAttribute('multiple', true);
You can then use a CSS selector to target one or multiple elements
addMultiple(document.querySelector('#custom_ticket_form_field_55'))
document.querySelectorAll('select').forEach(addMultiple)
By the way, id="custom_ticket_form_field_55" is used in multiple places in your HTML, so actually the first variation wouldn't work. If you can, try to make your ids unique.
Note that it also breaks accessibility because your label doesn't point to the select anymore.
https://angular-ui.github.io/bootstrap/ with the Static arrays example in the Typeahead section...
If I wanted to do something like being able to select multiple states, one after the other, how would I add that into the Typeahead code? Also, is there anyway that when I click the input - it shows all the selections possible with a scroll bar?
Edit: I really like this one however it doesn't allow for multi-select: http://ghiden.github.io/angucomplete-alt/
Here is what I ended up using: https://github.com/tamtakoe/oi.multiselect
try to use chosen:
chosen at github
Chosen works very well with angular and css frameworks, because chosen only hide your original multiselect component, without affect DOM parts.
I am using dijit.form.Select as a replacement for the HTML SELECT.
I am unable to get it to allow me to select an item purely by typing as you can with the HTML version. Ie, if you have a list of US states you can hit C several times to select Conneticut. What am I missing? TIA
And yet, it works on the web page below....
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test%5FSelect.html
When designing a select element that is visually consistent with a UI theme, CSS is often not powerful enough to completely control the look of select element, as some browsers treat CSS stylings on a select element differently. So the next best thing for many is to develop a faux-select with javascript so that way you have a better looking select element.
What you're left with is something that looks like a select element, but isn't, and the real select is hidden nearby, typically.
That means that there is a good possibility that when the developer was making that javascript version of the select element, they didn't do their diligence to at least program the minimum features that come native with the HTML version. (after all, it would be a lot of work to do string searching and sorting on a keyup event... and i'm not surprised they didn't do it)
to add insult to injury, sometimes the plugin actually allows for the change event on the native select to still be focused beneath the surface, which is why your typing works sometimes.
A chap named Bob Tarling has solved my problem. Much obliged Bob!!
See this link for his solution http://dojo-toolkit.33424.n3.nabble.com/Sharing-a-solution-for-type-ahead-in-Select-and-help-request-to-adapt-tt3995899.html#none
I am wondering if anyone knows of a good way to display a checkbox in html with a black box in the middle, like the third checkbox in the image below?
I have seen this in a lot of interfaces, but can't find a good one online to check source. Apologies if this is already posted elsewhere but I have not had luck with the search terms I have been trying.
Thanks.
It's called the indeterminate state. See this jsFiddle example.
$("#c").prop("indeterminate", true);
Ref: https://developer.mozilla.org/en-US/docs/HTML/Element/Input and https://developer.mozilla.org/en-US/docs/CSS/:indeterminate
The following post contains some examples:
How to style checkbox using CSS?
There is link in the answer Collection of checkbox styles from CSSDeck contains similar examples.
Checkboxes are rendered by the browser. Thus the style is determined by the application chosen by the user. If you want to have customized form controls, you will have to use something like jQuery UI or something similar, which will basically simulate a form control with other means and store the value in a hidden form field.
How can a checkbox inside a drop down menu using javascript to be implemented so that every time you click the menu to change situation?
The website you have linked presents a list along this lines: http://jsfiddle.net/XJWkH/
Of course this is just a raw example but basically this is the way the dropdown list on the site works. When you click on a dropdown/submenu element, jQuery adds or removes 'checked' class on that element.
jQuery is the easiest path here. I have used this plugin with great success and have rolled my own as well.
Good luck!