This question already has answers here:
Use images instead of radio buttons
(10 answers)
Closed 8 years ago.
I want the functionality of a radio button, yet have the option of choosing based on an image. For example, I am going to have a label (Payment Methods). I would like to set up various DIV/Images with each accepted payment (Credit/card, PayPal, western union, etc). Instead of choose a small little circle radio button, id rather them just click the image and have a border or an image change to indicate that method has been chosen.
It would be even better yet if I could have this functionality with a DIV element, that way I can add just put whatever I want in the DIV (text, images, etc) and have the DIV itself have some sort of border that appears on selection.
Is this possible using input type=radio? If this isn't possible using radios, than how you would suggest the implementation of this? If this has been implemented please link :)
It is not possible to directly style the checkbox or radio button, however, what I do in these situations is I make my own custom checkbox, using jQuery, and based on the user selection, I do one of two thigs:
1) Change the value of a hidden field,
2) Change the value of a checkbox that DOES exist, but that is not displayed to the user, so display:none; would be applied to it.
It is quite simple, make you checkbox out of a div even, lets say 15px high and 15px wide, and bind click events to it using jQuery. You can then toggle the class each time it is clicked, which in turn gives you freedom over styling it, and based on the class or click state, you can assign the actual checkbox value to your hidden field or hidden check box.
Does this help?
A good resource for this is:
http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/
Or if you'd have a plug-in do the work:
http://plugins.jquery.com/taxonomy/term/1360
Related
Situation
I have a grid with a lot of information. At the beginning of every new line there's a checkbox.
Aim
Click on a checkbox and it will be checked. Click on the same checkbox again and it will still be clicked, however the icon is different. Once you click a third time onto the box it will go into unchecked.
Problem
I am able to do get the checkbox checked and unchecked, however I don't know how to only change the icon after my checkbox is already checked.
Let's take this as an example.
In the example only input type="checkbox" is used and not the whole grid. It would be an overkill for the question.
How would I go from unckecked (green background) -> checked 1 (red) and then -> checked 2 (random color)?
I might imagine this to be a simple and noobish task, but I'm kinda struggling with it.
You can use the :indeterminate CSS pseudo-class selector to style your checkbox while it was in indeterminate state as you asked.
Reference Link: https://tympanus.net/codrops/css_reference/indeterminate/
First, you have to create a custom checkbox, refer to the following page
How to create custom checkbox
Then, add your custom js to that custom checkbox. Hope this help
I have a group of 6 radio groups on an xPage, each with a list of values 1-6. I am looking for a method to allow the user to only select each number once. A user will not be able to pick the number 1 for radioGroup1 and radioGroup2.
I am struggling to come up with a good way to do this.
The two methods I thought of were building an array in js, using the array for the values in the radioGroup, then removing values picked from the array and doing a partial refresh on the other radioGroups.
The second method was simply wipe the value of a radioGroup if the duplicate value was detected in another radioGroup.
I guess I could just do a validator to compare the values on the submit.
Any thoughts on the best way to approach this in xPages?
I suggest a twofold approach:
Client side: add an onChange listener to the radio buttons. When a value changes you run through the buttons and disable (gray out) the same number in the other radio groups. This is fast and good for the user since the UI doesn't "dance". You need a "picking" order. e.g. a column left (if organized in columns) can always overwrite the right column(s). You also need to eventually clear a radio button before disabling it
On the server side have a validator (one function called by all) that double checks that - in case someone tries to trick you with Firebug
Bonus Idea:
Radio buttons are bad for this type of UI (they are good as backing data store). Overlay them with a background graphic based on the radio button state like a checkmark, an empty square (for selectable) or a gray X (for disabled). Would make a great custom control.
I am trying to get a checkbox with a label to function so that when you have text selected in a contenteditable div, clicking on the label will not lose the selection from the div. The label still needs to apply the standard checkbox tick/untick upon clicking it, but keep the focus & selection intack on the div.
Doing a simple focus() on the div won't help as the selection will be gone (and caret is at the beginning). I could of course look into a way for storing the selection object and trying to assign it back after the label click, but isn't there any simpler way of keeping the selection?
(the reason I need to do this with label & checkbox is because I will be using jQuery UI buttons and I will need the the toggle functionality of them)
On a similar note, if you click the checkbox, you usually still keep the selection in the div, but at least on FF4, if you press the checkbox very frequently (<1s), it will lose the selection. Any idea what's going on there? answered below
example: http://jsfiddle.net/niklasvh/gULM9/
It's a Firefox bug marked 490367.
According to the bug description, double-click functionality on input fields will act unusually when there is a contenteditable div on the page.
I noticed the strange behavior while trying to replicate it manually so I guessed it was a bug. I don't know of any workarounds.
I saw this post:
How can I highlight certain options in a HTML select using jQuery
which is similar to what I need to do, except a bit too complicated for my understanding. In the html body, I have a dynamically changing select form. The user can select multiple items from this form, and click a button ("Display") to run a javascript function. This function already goes through the list to determine which ones have been selected and uses the information somewhere else.
I would like it so that when the user clicks "Display", the items that were selected will be highlighted (and each with a specific color).
What do you think?
Yes! I figured it out.
myList.options[i].style.backgroundColor='yellow';
Instead of having the typical disks with labels to the right, I want the options to be presented as clickable buttons. The selected option should appear to be pushed or pressed in.
I want to do this in HTML, but an example of this are the top left buttons in the program Audacity where you select the cursor/tool mode.
What's the best way to do this?
(source: freemusicsoftware.info)
There are a number of JavaScript plugins for doing this:
Prototype demo
Just replace the images they're using with your images and you should be good to go.
Probably the best way is to create a real radio button, and then control the rendering of an element based upon the status on the radio button with javascript. If the radio button is selected, render background-a, else background-b (or use a sprite). Control the status of the radio button via the click event of your custom element.
Using this jQuery UI plugin, you can customize radio buttons and/or checkboxes to look however you want.