I'm trying to achieve this but it doesn't work.
Here it is the CSS sheet:
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #000000;
}
#carte label {
border: inline-block;
cursor: pointer;
}
#carte label img {
padding: 3px;
}
the HTML part:
<div id="carte">
Select a card:<BR>
<input type=radio name="carte" id="cart1" class='input_hidden' />
<label for="cart1">
<img src="cart1.jpg" alt="carte1" />
</label>
<input type=radio name="carte" id="cart2" class='input_hidden' />
<label for="cart2">
<img src="cart1.jpg" alt="carte2" />
</label>
<input type=radio name="carte" id="cart3" class='input_hidden' />
<label for="cart3">
<img src="cart3.jpg" alt="carte3" />
</label>
</div>
and the javascript:
$('#carte label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
When I assign the selected class to an image it is ok, I see it with the black border. but it seems the javascript part to assign the class doesn't work.
I there any other way to assign the correct classes to the images?
Thanks for your support.
Are you sure you want to use jQuery?
With sane browsers you can solve it with pure css: http://jsfiddle.net/VSR86/4/
HTML:
<div id="carte">
<label>
<input type="radio" name="carte" value="cart1" >
<img src="http://placekitten.com/100/100">
</label>
...
CSS:
label input + img {
border: 10px solid transparent;
}
label input:checked + img {
border: 10px solid blue;
}
Of course some javascript fallback will be necessary for IE8 and older.
https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
IE8 fix
Updated CSS:
label input.checked + img,
label input:checked + img {
border: 10px solid blue;
}
JS fallback:
if(/* this browser is IE8 or worse */){
$(document).on('click','label:has(input[type="radio"])',function(){
var $r = $(this).find('input');
adjustRadio( $r.attr('name'), $r.val(), 'checked');
});
}
function adjustRadio( name, value, className ){
// wait for other event handlers to run
setTimeout( function(){
$('input[type="radio"][name="'+name+'"]').each( function(){
var $r = $(this);
$r.toggleClass( className, $r.val() === value );
});
},1);
}
You could use the toggleClass function for some simplicity :)
http://api.jquery.com/toggleClass/
Since people are picky, here's a fiddle for you sir
http://jsfiddle.net/8B3SW/1/
$('#carte label').click(function(){
$(this).toggleClass('selected').siblings().removeClass('selected');;
});
Related
I am trying to make our dinky radio buttons into lovely toggle buttons on our donation page. The HTML cannot be modified, and as it stands the inputs are wrapped in divs, then followed by the labels. I have zero knowledge of JS/jQuery and I imagine this task requires some.
Here is my fiddle: https://jsfiddle.net/cgz63qhd/
body {
padding: 10px;
font-family: sans-serif;
}
div.donation-levels {
margin: 3px 0;
}
.donation-level-container {
display: inline-block;
}
.donation-level-container input {
visibility: hidden;
}
.donation-level-amount-container {
text-align: center;
margin: 5px 2px;
padding: 0.7em 2em;
color: #ffffff;
background-color: #1a92b4;
border-radius: 5px;
display: inline-block;
cursor: pointer;
font-size: 22px;
}
.donation-level-amount-container:hover {
background: #e8525f;
color: #ffffff;
}
.donation-level-label-input-container input:checked~label {
background: #e8525f;
}
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5942" value="5942" onclick="evalMatchingGift('$35.00');" type="radio">
</div>
<label for="level_flexibleexpanded5942" onclick="">
<div class="donation-level-amount-container">
$35.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5942expandedsubmit" value="true" type="hidden">
</div>
</div>
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5943" value="5943" onclick="evalMatchingGift('$60.00');" type="radio">
</div>
<label for="level_flexibleexpanded5943" onclick="">
<div class="donation-level-amount-container">
$60.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5943expandedsubmit" value="true" type="hidden">
</div>
</div>
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5944" value="5944" onclick="evalMatchingGift('$120.00');" type="radio">
</div>
<label for="level_flexibleexpanded5944" onclick="">
<div class="donation-level-amount-container">
$120.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5944expandedsubmit" value="true" type="hidden">
</div>
</div>
Here is my inspiration donate page: https://action.audubon.org/donate/now
Alas, their labels are set up better so I think they were able to make the buttons with pure CSS (?).
My buttons currently are looking decent, are sized fine and colored nicely, but they just won't stay that coral color when clicked! Can someone help me out?
I've seen a lot of questions here on this topic but I can't seem to get anything to work.
I'm sure there are other issues in the code, please point them out if you see them!
$(".donation-level-amount-container").on("click", function() {
$('.donation-level-amount-container').each(function() {
$(this).removeClass('active');
});
$(this).toggleClass('active');
})
And css
.active {
background:#e8525f;
color:#ffffff;
}
Working fiddle:
https://jsfiddle.net/29exoa4k/2/
You need this piece of jQuery:
$(function() {
$(document).on('click','.donation-level-amount-container',function(){
$('.donation-level-amount-container').removeClass('active');
$(this).addClass('active');
});
});
Update also to this CSS:
.donation-level-amount-container:hover, .donation-level-amount-container.active {
background:#e8525f;
color:#ffffff;
}
Here is the updated jsfiddle.
You want something like this
$(".donation-level-amount-container").on("click", function() {
$(this).css("background", "red");
})
or to toggle an active class
$(".donation-level-amount-container").on("click", function() {
$(this).toggleClass("active");
})
You need this
$(".donation-level-amount-container").on("click", function() {
$(".donation-level-amount-container").css("background", "#1a92b4");
$(this).css("background", "#e8525f");
})
and css !important for background property
.donation-level-amount-container:hover {
background:#e8525f!important;
color:#ffffff;
}
here's your updated fiddle https://jsfiddle.net/cgz63qhd/3/
Indeed, this can not be done with pure CSS, since you can't traverse upward in the DOM using CSS selectors. As previous answers mentioned, it can easily be done with jQuery, but it can also be done in vanilla javascript.
var donationButtons = document.querySelectorAll('.donation-level-amount-container');
var defaultBg = '#1a92b4';
var activeBg = '#f00';
donationButtons.forEach(function(btn){
btn.onclick = function(){
donationButtons.forEach(function(btn){
// deselect previously selected buttons
btn.style.background = defaultBg;
});
this.style.background = activeBg;
}
});
I'm certain this can be done smoother, but this is the first solution that popped up in my head.
How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS or do I have to use Javascript?
Thanks in advance
This is the HTML code of my buttons.
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>
Pure CSS
Change your button to another element (like span)
Use a label and checkbox to control the toggle status
Use :checked CSS selector and + sibling selector
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
.H1toH5 input:checked + .seatButton { background: red; }
<div class="H1toH5">
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
</div>
How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS
Try utilizing css :focus pseudo class , background-color
button {
background-color:yellow;
}
button:focus {
background-color:orange;
}
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>
no just the one that is clicked, but i want to be able to click on
many buttons not just one
var elems = document.getElementsByClassName("seatButton");
for (var i = 0; i < elems.length; i++) {
elems[i].onclick = function() {
var color = window.getComputedStyle(this, null)
.getPropertyValue("background-color");
this.style.backgroundColor = color === "rgb(255, 255, 0)"
? "rgb(255, 165, 0)" : "rgb(255, 255, 0)";
};
};
button {
background-color:yellow;
}
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>
You can do this with css a ::before pseudo element and the html checkbox input tag
input.toggle-btn {
visibility: hidden;
}
input.toggle-btn::before {
content: attr(value);
display: inline-block;
padding: 5px;
background: #fff;
font-size: 14pt;
color: #aaa;
border-radius: 5px;
border: 1px solid #aaa;
visibility: visible;
}
input.toggle-btn:checked::before {
background: rgb(50,150,250);
color: #eee;
border-color: #eee;
}
<input class="toggle-btn" type="checkbox" value="Hello">
This code will toggle a specific class when you click on it. If you click on the button again it will then return to it's original state.
$('.seatButton').click(function () {
$(this).toggleClass('activeClass');
});
Or just use the CSS Pseudo selected as people have specified above. There are many ways to achieve what you want!
No. You need to add/remove a class with javascript. To make #tpie feel better about himself, here is the code for that. Using jQuery:
$('.seatButton').on('click', function(){
$(this).toggleClass('is-active');
});
I am using image radio buttons which are working fine. However one of the radio buttons needs to be checked by default. However when this is set, it will not display the border around the checked image as it will when you click to select.
I have tried quite a few different things such has checked via html as well as javascript onload to no avail.
(Note there is only one radio button to select, this is because currently there is no 2nd option however there will be in the near future hence why we are pre checking it)
Any ideas?
<script type="text/javascript">
$(document).ready(function() {
$("a.radio-color-picture").click(function(){
var $id = $(this).attr('id');
$("a.radio-color-picture").removeClass('radio-color-border');
$("a#" + $id).addClass('radio-color-border');
});
});
function set_radio($inputid) {
$("input#" + $inputid).click();
}
</script>
<style type="text/css">
a.radio-color-picture {
border: 2px solid transparent;
display: inline-block;
height: 160px;
margin-right: 10px;
text-decoration: none;
width: 160px;
}
a.radio-color-picture:hover {
border:2px solid #d13a7a;
}
a.radio-color-border {
border:5px solid #d13a7a;
}
a#color {
background: url("<?php echo get_bloginfo('wpurl');?>/wp-content/themes/Impreza/_customimages/thumbnail.jpg") no-repeat scroll 0 0 white;
}
.hidden {
left: -10000px;
position: absolute;
top: -1000px;
}
</style>
<input type="radio" value="CHAR" name="color" id="color" class="hidden" checked="checked" />
<a id="color" href="javascript:set_radio('color');" class="radio-color-picture"> </a>
Cheers :)
This could actually be done much simpler :
Demo
Javascript :
$(document).ready(function(){
$('a.radio-color-picture').click(function(){
$(this).prev('input.hidden').click();
return false;
});
});
HTML (make sure you use unique ids !)
<input type="radio" value="CHAR" name="color" id="color" class="hidden" />
<a data-idinput="color" id="link" class="radio-color-picture"> </a>
<input type="radio" value="CHAR2" name="color" id="color2" class="hidden" checked="checked" />
<a data-idinput="color2" id="link2" class="radio-color-picture"> </a>
<input type="radio" value="CHAR3" name="color" id="color3" class="hidden" />
<a data-idinput="color3" id="link3" class="radio-color-picture"> </a>
And this is the main trick in CSS (only for IE >= 9) :
input.hidden:checked + a {
border:5px solid #d13a7a;
}
Edit : Demo for older versions of IE compatibility
to show the css to default checked you have to add the css 'class' or 'id' by default to the pre checked radio button and its respective href tag.
I need to create a priority field in my HTML form. Currently i am using radio buttons but it does not suffice my needs. The radio button should change background color onclick depending on the level of priority. Also i am not able to read the values to the controller.
The priority field should change colors according to the matrix above. In the form only the first row is present for the priority field.
This is the HTML i am using for priority
` <input type="radio" id="1" class="priority">
<input type="radio" id="2" class="priority">
<input type="radio" id="3" class="priority">
<input type="radio" id="4" class="priority">
<input type="radio" id="5" class="priority">`
I am using spring MVC framework.
Any help would be appreciated
UPDATE: updated FIDDLE
add value attribute to the radio buttons like
<input type="radio" name="1" id="r1" value="a rating">
then some script to read the radio button values like:
var htmlStr = $(this).attr("value");
$(".indicator").html(htmlStr);
I've tried some workaround for the sake of "changing color" in this Fiddle
Added this html, to act as the radio buttons that changes color:
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
with this css, to take it under the radio buttons:
.circ{
height: 12px;
width: 12px;
border-radius: 50%;
background: gray;
display: inline-block;
position: relative;
bottom: 20px;
margin-left: 5px;
margin-right: 4px;
}
Then add z-index: 9 to the radio button css rule to make it stay on top of the .circ divs and be clickable. Finally, add opacity: 0 to make it invisible, so the .circ divs under will appear on screen. Now you can change the color of the .circ divs accordingly using some script.
PS: You can't just edit radio button's background color, instead use background images
I am not sure if i understud your question correct, but if so this demo code (jsfiddle) might help.
(its just a demo, and would still have to be adapted for your needs)
It simply sets the color class on the Click event of every RadioButton.
CSS
.color1 {
background:red;
}
.color2 {
background:green;
}
.color3 {
background:yellow;
}
HTML
<div class="priority">
<input type="radio" name="1" id="1">
<input type="radio" name="1" id="2">
<input type="radio" name="1" id="3">
<input type="radio" name="1" id="4">
<input type="radio" name="1" id="5">
</div>
Script
$(function () {
$(".priority input").on("click", function () {
$(".priority").attr("class", "priority color" + this.id);
});
})
tested with Chrome 34+
As per your requirement you can use jQuery plugin Colourful rating system. It comes with good options so that you can set the color as required.
DEMO
example as follows:
the HTML
<ul id="rating">
<li>This is just a piece of crap</li>
<li>Nothing too new or interesting</li>
<li>Not bad, I like it</li>
<li>I would like to see more of this</li>
<li>This is the best thing I've seen</li>
</ul>
CSS
#rating { list-style:none; }
#rating li { display:inline; float:left; }
#rating li a { display:block; width:80px; height:80px; border:1px solid #888; background-color:#333;
text-indent:-9999px; box-shadow:0 0 5px #888; border-radius:40px; }
#ratinginfo { clear:left; width:350px; }
#ratinginfo p { text-align:center; padding:10px;
box-shadow:0 0 5px #888; border-radius:40px; }
After we're done loading jQuery and the Color plugin, we're ready to use jQuery to now animate the circles to the right colour and display the text.
// Variable to set the duration of the animation
var animationTime = 500;
// Variable to store the colours
var colours = ["bd2c33", "e49420", "ecdb00", "3bad54", "1b7db9"];
// Add rating information box after rating
var ratingInfobox = $("<div />")
.attr("id", "ratinginfo")
.insertAfter($("#rating"));
// Function to colorize the right ratings
var colourizeRatings = function(nrOfRatings) {
$("#rating li a").each(function() {
if($(this).parent().index() <= nrOfRatings) {
$(this).stop().animate({ backgroundColor : "#" + colours[nrOfRatings] } , animationTime);
}
});
};
// Handle the hover events
$("#rating li a").hover(function() {
// Empty the rating info box and fade in
ratingInfobox
.empty()
.stop()
.animate({ opacity : 1 }, animationTime);
// Add the text to the rating info box
$("<p />")
.html($(this).html())
.appendTo(ratingInfobox);
// Call the colourize function with the given index
colourizeRatings($(this).parent().index());
}, function() {
// Fade out the rating information box
ratingInfobox
.stop()
.animate({ opacity : 0 }, animationTime);
// Restore all the rating to their original colours
$("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
});
// Prevent the click event and show the rating
$("#rating li a").click(function(e) {
e.preventDefault();
alert("You voted on item number " + ($(this).parent().index() + 1));
});
for complete documentation and source code click HERE
I have this markup one of my web pages,
<div class="radio-spoof">
<input type="radio" name="enquiry" value="General enquiry" class="radio"/>
<div class="checked"></div>
</div>
<label for="general_enquiry">General enquiry</label>
<div class="radio-spoof">
<input type="radio" name="enquiry" value="Request a brochure" class="radio" checked="true"/>
<div class="checked"></div>
</div>
<label for="request_a_brochure">Request a brochure</label>
Basically what I am doing is trying to spoof some radio buttons, so I can have good looking ones, when a radio is checked I want to display .checked which is set to display:none by default. I need to check for a checked radio button on DOMReady and when ever a radio is clicked, currently I have this page, but it does not seem to be making the selection of the .checked div correctly.
if($('input[type=radio]:checked')) {
console.log("!");
$(this).parent().children('div').show();
}
I would expect the code above the select the radio buttons parent, and then look for a child div (.checked) and show it. Am I mistaken?
`
$(function(){
$(':radio').change(function(){
var $this = $(this);
console.log($this);
$(':radio[name='+this.name+']').next().hide();
if($this.is(':checked')){
$this.next('.checked').show();
}
});
});
For above issue, i have done solution on codebins. So, try it on http://codebins.com/codes/home/4ldqpb6
Solution:
$(document).ready(function() {
$('input[type=radio]').each(function() {
if ($(this).is(':checked')) {
$(this).next('.checked').show();
}
$(this).click(function() {
if ($(this).is(':checked')) {
$(this).next('.checked').show();
}
});
});
});
demo you need to register an event when check box state changes : http://jsfiddle.net/FtPLS/2/ or http://jsfiddle.net/QCkpG/1/
Also I reckon you should use .next instead of .children.
if you want to hide .checked just do this => $('.checked').hide()
you could use $('input[type=radio]').is(':checked') for your check/uncheck condition.
Hope this helps the cause, :)
code
$(function() {
// here ==> $('.checked').hide(); will hide all the div with checked class
$('input').click(function() { // can use .change instead if you want
if ($('input[type=radio]').is(':checked')) {
alert('!')
$(this).parent().next('div').show(); // whatever you wanna show or
//$(this).next('div').show();
}
});
});
It seems to me that you're trying to get custom-styled radiobuttons? A pretty cool way without JS I had in a project was this (adapted to your code):
HTML
<div class="radio-spoof">
<input id="radio-1" type="radio" name="enquiry" value="General enquiry" class="radio"/>
<label for="radio-1">General enquiry</label>
</div>
CSS
.radio-spoof input {
position: absolute;
left: -9999px;
} /* not display: none so it is tabbable */
.radio-spoof label {
display: inline-block;
padding-left: 35px; /* width of your custom image + spacing to text */
height: 30px;
line-height: 30px; /* height of your custom image */
background: url(your/custom/image) center left no-repeat;
}
.radio-spoof input:checked + label {
background-image: url(your/custom/active/image);
}
The checkbox toggles everytime the label gets clicked, they're connected through input id and label for, and the label gets the input style.
If you want the checkboxes to look like default if they're not checked you can set it up like this:
CSS
.radio-spoof input + label { display: none }
.radio-spoof input:checked {
position: absolute;
left: -9999px;
}
.radio-spoof input:checked + label {
display: inline-block;
padding-left: 35px; /* width of your custom image + spacing to text */
height: 30px;
line-height: 30px; /* height of your custom image */
background: url(your/custom/image) center left no-repeat;
}
Then you have default radios and if they're checked the label takes their place...