This is the page I'm working on: https://www.maisondefemmes.com/product/choose-your-own-adventure-earrings/
I want the buttons to stay in an active state until unclicked so that the user can clearly see what they have selected.
I have read and followed these instructions, to no avail: Keep button in active state until clicked upon again
NB: The 'button' used to be a toggle switch that I have turned off. Not sure if this is causing an issue.
I've added this JQuery to my theme:
$('.bundled_product_optional_checkbox').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
As well as this CSS:
.bundled_product_optional_checkbox.active {
background-color: #cfb87c !important;
border: 1px solid #cfb87c !important;
}
<label class="bundled_product_optional_checkbox">
<input class="bundled_product_checkbox" type="checkbox" name="component_1592104877_bundle_selected_optional_4" value>
" Add for "
<span class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
</span>
</span>
::after
</label>
Appreciate any answers. Please be kind.
Just create your own class called active
<button class="Toggle Button">Toggle Button</button>
then create your own class active and style it in css
.active{
border: none;
background: teal;
color: white;
}
Now in jQuery toggle the active class on click
$('.toggle-button').click( function() {
$('.toggle-button').toggleClass('active');
});
Now you should have a working toggle switch
Here is the link to my code pen:
https://codepen.io/prabodhpanda/pen/pogNqpQ
answer updated..
if you are not using bootstrap then you can ignore those classes and CDN links : )
$('.bundled_product_optional_checkbox').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
.bundled_product_optional_checkbox.active {
background-color: #cfb87c !important;
border: 1px solid #cfb87c !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-lg btn-default border bundled_product_optional_checkbox">Click me</button>
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 I can show the backdrop when popover appeared and backdrop disappeared when popover disappeared?
$(function(){
var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now</button> <button class="btn btn-sm btn-default " onclick="$(".btn-upgrade-premium").popover("hide");">Activation Code</button>';
$('.btn-upgrade-premium').popover({animation:true, content:content, html:true, placement: 'bottom'});
$('.btn-upgrade-premium').click(function(){
$('#backdrop').toggleClass('modal-backdrop in');
});
});
.btn-upgrade-premium
{
text-shadow: 0px 1px 0px #FFF;
background-image: linear-gradient(to bottom, #FFEEBE 0%, #fec215 100%);
background-repeat: repeat-x;
border-color: #fec215;
z-index: 1052;
}
.btn-upgrade-premium:active
{
background-color: #fec215;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-upgrade-premium btn-sm" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-trigger="focus" data-placement="left">
Upgrade to Premium
</button>
<div id="backdrop"></div>
NOTE:
My problem is the backdrop won't disappeared even I toggled the class.
Simply add position: relative; to the button CSS style .btn-group-sm>.btn, .btn-sm. Button is being covered by #backdrop which is why you can't click it.
If you want to keep the button covered then you may add the same toggle function to the backdrop.
The problem is because of how fixed elements (backdrop) relate to static elements. Since you didn't set a position value for the button, it's default will be static, so setting it to relative will sort the issue. Also pay attention to z-index, but in this case z-index is already set.
read the article
https://css-tricks.com/dangers-stopping-event-propagation/
My Jfiddle
http://jsfiddle.net/davygxyz/ffezrxL5/
I would check to see if this will still work with extra javascript, for now it works.
add this to your code
$(document).on('click', function(event) {
if (!$(event.target).closest('.btn-upgrade-premium').length) {
$('#backdrop').toggleClass('modal-backdrop in');
}
});
I have three buttons and I want to toggle between them. How can I add and remove the toggle and untoggle classes to have to toggle appropriately.
Right now, both buttons can be selected/toggled on. There should only be one button toggled at a time but I also want to be able to deselect/untoggle all of the buttons. So that I have
an option of not toggling the buttons on.
Here's the buttons in my view:
<div id="drawing">
<div style="margin-top: 12px; padding-left: 8px; margin-bottom: 8px">
<button class="small-button" onclick="Drawing.AngleClick()" data-val-btnname="Angle" style="width: 70px; height: 20px;"><span>#Culture.GetString("Angle")</span></button>
</div>
<div style="margin-top: 12px; padding-left: 8px;">
<button class="small-button" onclick="Drawing.PointClick()" data-val-btnname="Point" style="width: 70px; height: 20px;"><span style="font-size:10px !important">#Culture.GetString("Point")</span></button>
<button class="small-button" data-val-btnname="ClearAll" style="width: 70px;" onclick="Drawing.Delete()"><span>#Culture.GetString("ClearAll")</span></button>
</div>
</div>
Here's the js function so far for one of the buttons (I have the same if statement in my other button):
AngleClick: function () {
var button = $('body').find("button[data-val-btnname='Angle']");
if (button.hasClass('small-toggled-button')) {
button.removeClass('small-toggled-button').addClass('small-button');
} else {
button.removeClass('small-button').addClass('small-toggled-button');
}
}
This is an easy method for toggling buttons. Run the snippet to see it work. I simplified your HTML only for the sake of shortening the example--I'm not suggesting you change it.
$(document).ready(function() {
$("#drawing button").click(function(e) {
var isActive = $(this).hasClass('active');
$('.active').removeClass('active');
if (!isActive) {
$(this).addClass('active');
}
});
});
.active {
background: #555555;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="drawing">
<button class="small-button">Angle</button>
<button class="small-button">Point</button>
<button class="small-button">ClearAll</button>
</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 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');
});
<input type="button" value="Share" id="buttonShareMap" style="float:right; width:68px;" disabled="disabled"/>
/* Only enable 'SHARE' btns if a checkbox is selected */
var checkboxes = $("input[type='checkbox']"),
submitButtShare = $("#buttonShareMap");
checkboxes.click(function () {
submitButtShare.attr("disabled", !checkboxes.is(":checked"));
});
This code works fine, only enabling the button if a check box is clicked. However I want to use the css classes 'class="edit red btn"', and although the functionality is still working the button appears visible.
I would like to add one css class if button is enabled and another if it is disabled...How Can I do this? thanks
You can add a new css class here:
submitButtShare.attr("disabled", !checkboxes.is(":checked")).toggleClass('disabled');
now in the css you can use this:
#buttonShareMap.disabled{
background:#c5c5c5;
color:#ddd;
}
checkout the sample demo:
$(':checkbox').change(function() {
$('#buttonShareMap').prop('disabled', this.checked).toggleClass('disabled');
});
.red {
color: red;
background:#0ff;
}
#buttonShareMap.disabled {
background: #c5c5c5;
color: #ddd;
cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' id='buttonShareMap' class='red' value='buttonShareMap' />
<input type='checkbox' />
you can set background color for disable elements, by using below code.
#buttonShareMap:disabled {
background: #f00;
}
Just check the button disabled attr or just the checkbox checked value and set classes accordingly. Below I have used the checkbox state.
checkboxes.click(function () {
submitButtShare.attr("disabled", !checkboxes.is(":checked"));
if(checkboxes.is(":checked"))
{
submitButtShare.addClass('ifButtonEnabled')
.removeClass('ifButtoDisabled');
}
else
{
submitButtShare.addClass('ifButtoDisabled')
.removeClass('ifButtonEnabled');
}
});
Helo,
I have made an example for you: http://jsfiddle.net/o82tfxrb/1/
js:
$(document).ready(function(){
$('#ck').on('change', function(){
if ($(this).is(':checked')){
$('#buttonShareMap').removeClass('red')
.addClass('blue');
}else{
$('#buttonShareMap').removeClass('blue')
.addClass('red');
}
});
});
html:
<input type="checkbox" id="ck" />
<input type="button" class="red" value="Share" id="buttonShareMap"/>
css:
.red{
background-color:red;
}
.blue{
background-color:blue;
color: white;
}
What I am doing is check everytime the user change the checkbox and then I add a class.
I hope it's helps!
Here is the HTML
<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change">
Here is the CSS
input[disabled].btn:hover,input[disabled].btn:hover,input[disabled].btn:focus{
color:yellow}