How to keep :active css style after click a button - html

Once the button is clicked I want it to stay with the active style instead of going back to normal style. Can this be done with CSS please? Im using blurb button from DIVI Theme (WordPress). Please help me!
code:
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:hover {
color: red !important; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:selected {
background-color: #ff4b46;
color: #fff; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:active {
color: white !important;
background-color: red;
width: 140px;
height: 100px; }

CSS
:active denotes the interaction state (so for a button will be applied during press), :focus may be a better choice here. However, the styling will be lost once another element gains focus.
The final potential alternative using CSS would be to use :target, assuming the items being clicked are setting routes (e.g. anchors) within the page- however this can be interrupted if you are using routing (e.g. Angular), however this doesnt seem the case here.
.active:active {
color: red;
}
.focus:focus {
color: red;
}
:target {
color: red;
}
<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>
Javascript / jQuery
As such, there is no way in CSS to absolutely toggle a styled state- if none of the above work for you, you will either need to combine with a change in your HTML (e.g. based on a checkbox) or programatically apply/remove a class using e.g. jQuery
$('button').on('click', function(){
$('button').removeClass('selected');
$(this).addClass('selected');
});
button.selected{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Item</button><button>Item</button><button>Item</button>

We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
HTML
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
To make button change content:
HTML
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
Hope it helps!!

In the Divi Theme Documentation, it says that the theme comes with access to 'ePanel' which also has an 'Integration' section.
You should be able to add this code:
<script>
$( ".et-pb-icon" ).click(function() {
$( this ).toggleClass( "active" );
});
</script>
into the the box that says 'Add code to the head of your blog' under the 'Integration' tab, which should get the jQuery working.
Then, you should be able to style your class to what ever you need.

Related

Active border on certain page CSS/HTML

So I'm in the making of doing a border button that is active when you are on that page. But when you press on the second border button, the first ones border removes and the second one is visible. It's basically the same thing as the ones on this site. The "Questions, Jobs, Documentation Beta, Tags" buttons. One lights up as you are on that page and the other turns off. I tried looking it up on google but couldn't find. And I tried looking at the code by "inspecting element" through Google Chrome.
Make sure you have the exact same HTML on each page. Then in each page, style the corresponding button differently by assigning an 'active' class only to that button. For example:
On the Home page
<a class="button active" href="index.html">Home</a>
<a class="button" href="about.html">About</a>
On the About page
<a class="button" href="index.html">Home</a>
<a class="button active" href="about.html">About</a>
CSS
.button {
background-color: grey;
}
.active {
background-color: orange;
}
The simplest way I could think off is by adding an "active" Class to the button you want to light up on that page.
Requires a little bit of CSS and HTML. If you want the result element to be "activatable" without changing the page, you'll need some JS, as well.
$('button').on('click', function() {
$('button').removeClass('active');
$(this).addClass('active');
});
button.active {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="active">Active Page</button>
<button>Not Active Page</button>

How can I change the radio button 'selected' state appearance?

I have customized the radio buttons for the product attributes on a Prestashop store but now the selected size does not change appearance (desired background:#000;color:#fff) when selected.
Product page here: http://catwalk-boutique.ro/pantofi/11-pantofi-piele-4578-burgundy.html
What I want to find out is either where to edit the "selected" state of the radio button or what could block the display of the selected state (if that is the case).
Below are the bits of code altered so far:
• in product.tpl:
{elseif ($group.group_type == 'radio')}
<ul style="padding-left:5px">{assign var=groupquantity value= $group.attributes_quantity}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li>
<input id="radio_{$groupName|escape:'html':'UTF-8'}-{$id_attribute}" type="radio" class="attribute_radio" name="{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />
<label for="radio_{$groupName|escape:'html':'UTF-8'}-{$id_attribute}" data-comb-quantity="{*$groupquantity[$id_attribute]*}{foreach from=$combinations item=foo}{if $group_attribute == $foo.attributes_values[2]}{$foo.quantity}{/if}{/foreach}" class="radio_btn_round" >{$group_attribute|replace:' EU':''|escape:'html':'UTF-8'}</label>
</li>
{/foreach}
</ul>
{/if}
• and the CSS:
label.radio_btn_round {
background-color: #F8F8F8;
border: 1px solid #C8CCD2;
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle!important;
line-height: 29px;}
input.attribute_radio {display: none;}
Any ideas are much appreciated. Thanks.
The markup that Prestashop has generated for this makes this not possible with straight CSS:
<li>
<div>
<span class="checked"><input value="37" selected></span>
</div>
<label>37</label>
</li>
CSS has no way of going "up" the DOM (selecting the parent div or li from the "selected" radio button).
Because jQuery is available on your site, I think your best bet is to add some light jQuery that can do this for you, and provide a class on the label which you can then address via CSS:
// wait until the document is ready
jQuery(function($) {
// watch for changes to the radio inputs
$(document).on('change', 'input[type="radio"]', function() {
$('.attribute_list li')
// remove the class from all li elements
.removeClass('checked')
// find the "checked" radio button
.find('input[type="radio"]:checked')
// go up the dom to the nearest li
.closest('li')
// and add the "checked" class
.addClass('checked');
});
});
Then, in your CSS, this selector will allow you to change the styles you want:
li.checked label.radio_btn_round {
background: #000;
color: white;
}

Disable a link in Bootstrap

The first example didn't work. I need to have always a list to disable links? Or what is wrong with my first demo?
<a class="disabled" href="#">Disabled link</a>
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled">Disabled link</li>
...
</ul>
https://jsfiddle.net/7y0u2amy/
I think you need the btn class.
It would be like this:
<a class="btn disabled" href="#">Disabled link</a>
It seems that Bootstrap doesn't support disabled links. Instead of trying to add a Bootstrap class, you could add a class by your own and add some styling to it, just like this:
a.disabled {
/* Make the disabled links grayish*/
color: gray;
/* And disable the pointer events */
pointer-events: none;
}
<!-- Make the disabled links unfocusable as well -->
Link to disable<br/>
Non-disabled Link
I just created my own version using CSS. As I need to disabled, then when document is ready use jQuery to make active. So that way a user cannot click on a button until after the document is ready. So i can substitute with AJAX instead. The way I came up with, was to add a class to the anchor tag itself and remove the class when document is ready. Could re-purpose this for your needs.
CSS:
a.disabled{
pointer-events: none;
cursor: default;
}
HTML:
<a class="btn btn-info disabled">Link Text</a>
JS:
$(function(){
$('a.disabled').on('click',function(event){
event.preventDefault();
}).removeClass('disabled');
});
If what you're trying to do is disable an a link, there is no option to do this. I think you can find an answer that will work for you in this question here.
One option here is to use
123n
Disabled href tag
You cant set links to "disabled" just system elements like input, textfield etc.
But you can disable links with jQuery/JavaScript
$('.disabled').click(function(e){
e.preventDefault();
});
Just wrap the above code in whatever event you want to disable the links.
I just removed 'href' attribute from that anchor tag which I want to disable
$('#idOfAnchorTag').removeAttr('href');
$('#idOfAnchorTag').attr('class', $('#idOfAnchorTag').attr('class')+ ' disabled');
Thanks for #jacob-van-lingen's comment, You can extend .btn-link in your global style
a.disabled{
#extend .btn-link
}
I developed the following solution because when I apply class styles such as btn disabled offered by Bootstrap 5 to an <a> element inside a card, margin and padding are applied to the element:
.disabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
Disabled Link
I liked the answer by Sercan and I added a tiny jQuery to it, so that the links are also not followed on click:
$(document)
.on("click",
"a.disabled",
function () {
return false;
});
and for the look from the Answer above:
.disabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}

Bootstrap Button Inside List View Not Working

I am trying to get a button inside a list view in bootstrap to get to two different links and it always follows the list view link, not the button link if I press the button. How do I achieve this?
<a href="foo.html" class="list-group-item">
<p>This links somewhere different than the button</p>
<button href="bar.html" class="btn btn-success">Example</button>
</a>
This doesn't appear to be easily accomplished with Bootstrap as-is, but a few tweaks can get us what we want. The main problem is that nested anchors aren't really valid HTML. However, we can achieve the same result by absoultely positioning a link above another link.
Have a look at this JS Bin:
http://jsbin.com/febivi/2/
In summary:
Add a new class to the list-group that will define our new container:
<ul class="list-group action-list-group">
<li class="list-group-item">
<a class="list-group-link" href="http://stackoverflow.com">Cras justo odio</a>
<a class="btn btn-sm btn-default" href="http://google.com">Go</a>
</li>
<li class="list-group-item">
<a class="list-group-link" href="http://stackoverflow.com">Cras justo odio</a>
<a class="btn btn-sm btn-default" href="http://google.com">Go</a>
</li>
</ul>
The primary link is ".list-group-link" and the secondary link is the ".btn" action.
Next we add some CSS to style list-group-item's inside action-list-group:
.action-list-group {
position: relative;
}
/* remove the list group padding since our nested anchor tag will now have it */
.action-list-group .list-group-item {
padding: 0;
}
.action-list-group .list-group-item > a.list-group-link {
display: block;
/* inherit from .list-group-item */
padding: 10px 15px;
color: #555;
}
/* re-add the link styling */
.action-list-group .list-group-item > a.list-group-link:hover {
background: #f5f5f5;
text-decoration: none;
}
.action-list-group .btn {
position: absolute;
right: 5px;
margin-top: 5px;
top: 0;
}
Where it says "inherit", if you were using the Sass version of Bootstrap you could use sass's #include or #extend to include the same styling as bootstrap's .list-group-item > a.
There is javascript solution that you can use as well. The one benefit being that you can then have your button element in the flow of the list-group.
HTML:
<a href="foo.html" class="list-group-item">
<p>This links somewhere different than the button</p>
<button data-href="bar.html" class="btn btn-success">Example #1</button>
</a>
JQUERY:
$('.list-group-item').on('click', function (event) {
event.preventDefault();
$target = $(event.target);
if ($target.is('button')) {
window.location=$target.data('href');
} else {
window.location=$target.closest('a').prop('href');
}
});
Basically, the click handler works to prevent the normal behavior of the list-group-item anchor tag using event.preventDefault(). Then using event.target, you can get the element that dispatched the event. If the target was a button, you retrieve its data property and set the window.location to it. Otherwise, the jQuery closest() method is used to find the nearest anchor tag and use its href value to set the window.location. In jQuery, the closest method starts with the current element (which could be the anchor itself or any of its ancestors that are not button elements) and travels up the DOM from there.
Also, note that since the button element does not have an href attribute, this example uses a data attribute to store the link reference.

change the background colour of divs when clicked

I have tabs comprised of the following, When I clicked on any of the divs, I need background colour change to blue and if I clicke on other div, the previous tabs colour needs to set to original and new clicked div colour to be blue and so on:
This is my html:
<div class="zoom_controls">
<a class="db" id="prof_cpu_d" href="#" data-chart="line" data-range="1m">Real Time</a>
<a class="db" id="prof_cpu_w"href="#" data-chart="line" data-range="3m">Weekly</a>
<a class="db" id="prof_cpu_m" href="#" data-chart="line" data-range="6m">Monthly</a>
</div>
I have this:
.zoom_controls a:active {
background-color: #a6d1ff;
}
it does not seem to be working
how would I do this in css?
You need to use Javascript/jQuery to toggle the class. You can't do this with pure CSS.
Modify CSS
.zoom_controls a.active {
background-color: #a6d1ff;
}
jQuery
$('.zoom_controls a').on('click', function(event){
event.preventDefault();
$('.zoom_controls a').removeClass('active'); //Remove color for all with class .zoom_controls
$(this).toggleClass('active'); //Apply bgcolor to clicked element
});
Codepen sketch
Update
If you are, for some reason, thinking about a:hover, then you do it like this in CSS.
.zoom_controls a:hover {
background-color: #a6d1ff;
}
Otherwise, if you are looking to target the 'active' state of the link, you are doing it correctly.
The :active state only applies when the anchor is active -- that is, when the user is clicking on it. When that click ends, so does the state. What you want can't be done with pure CSS.
CSS:
.zoom_controls a.active {
background-color: #a6d1ff;
}
jQuery:
$('.zoom_controls a').on('click', function(ev) {
ev.preventDefault();
$(this).addClass('active').siblings('.active').removeClass('active');
});
JSBin demo
You can use the JS library jquery to select the active tabs and assign the the background color. The nice bit with using jquery is it's compatibility with other browsers.
It does work, but it's not doing what you want. Because active is only a dynamic pseudo-class that determines the styling of an active element (in this case any link inside the div with class zoom_controls when it's being clicked).
You might need JavaScript for this job, that or an unnecessarily complex CSS 3 solution.