HTML Radio buttons styled as Toggle Buttons - javascript

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.

Related

Is there an alternative for the :checked function javascript radio buttons for normal buttons?

I have recently come across the :checked function in javascript for radio buttons and I really wanted to use it with normal buttons. Is there any alternatives that I can use to mimic the effect of the :checked function. I have heard of using hidden states before. Basically, I want to retrieve the value of the button when clicked and only the button that I clicked value has to be received. Could anyone give some suggestions? Thanks.
Listen for a click event on the button and then the value is available with .value
document.getElementById("myBtn").value
That said... It's not great UX to use buttons to store a value. The expected process is to use buttons to do something with a group of data. Eg: "save", "submit", "update"
If I understand your question correctly, you can mimic the effect of the :checked attribute by adding classes to your buttons upon being clicked, since this is not available in buttons. You can add a class such as "checked" once the button is clicked, and when retrieving the value, just check whether the button contains this class. Just an idea.

checkbox with multiple conditions

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

How to preserve "expanded" state of additional form fields with JavaScript when clicking the back button in IE?

I have a form that has two radio buttons. When one of the radio buttons is clicked, JavaScript is used to set a group of sub-fields using display: block.
How can I make it so the selected radio button and sub-fields will expand when clicking the back button in IE? This issue does not occur in Webkit or Firefox.
It needs to work with plain JavaScript, so no jQuery!
One popular methods is to use a URL-hash to represent the UI state. As the UI changes, you build up a hash:
document.location.hash = "R1=true;R2=false"
When you re-load the page, look at the hash and use JavaScript to set the relevant UI elements. How you represent your elements is up to you.

Style / Replace a select box using prototype / scriptactulous

I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png
I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.
For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.

Multiple/addable drop down lists in asp.net mvc

Is it possible to have multiple drop down lists in asp.net mvc?
What I'm trying to do is have a drop down list, say with many colours, Red, Green, Blue, Black etc. Then next to it a text box which the user can enter a number.
However there should be then a small + little sign next to it so that another drop down list appears underneath it allowing the user to select another colour. The number of times they can add drop down boxes should ideally be unlimited. Is this possible? I know I can put hidden drop down lists underneath them then enable/show them when the user clicks the + button, but this will only mean a limited number of drop down lists!
Thanks
This has nothing to do with ASP.net mvc. It is a pure JavaScript. Use jQuery to add ddl dynamically.
Sure, you can add as many pull-down menus to your page as you like (and it sounds like you are comfortable with the scripting to do so). Just make sure to add a unique name to each of those menus so you can access the values in your controller.
you can add an ajax action link that will update a div with a drop down list and the same div. So you can add as many dropdown list you want.

Categories