I'm wanting a button to change it's appearance AFTER it's been clicked on and have it stay that way. I've tried css using "button:focus" and it'll work, but as soon as another button or anything else is clicked any previously selected button will rever back to it's original styling.
I have default styling set and hover styling set but can't get the visited/clicked-on styling to stay. I don't want it to go back till the page is reloaded. Is this something you can't do with css and have to implement with JS?
This is going to be a bit lengthy, but here is what I have so far:
Html:
<div style="text-align:center;">
<button id=p1Button><span>Player One, please select me! </span></button>
<button id=p2Button><span>Player Two, please select me! </span></button>
</div>
CSS:
button{
width: 16em;
color: white;
background: #0392CF;
font-weight: 800;
font-size: 1.5em;
background-attachment: fixed;
border-radius: .25em;
cursor: pointer;
border: none;
margin: .5;
height: 2.2;
transition-duration: 1.5s;
transition-timing-function: linear;
}
button:hover {
color: white;
background: #F37736;
border-radius: 2em;
width: 13em;
}
button:hover span {
display: none;
}
button:hover:before {
content:"Clicky Clicky!";
letter-spacing: .25em;
}
button:focus {
color: white;
background: #F37736;
border-radius: 2em;
width: 13em;
}
button:focus span {
display: none;
}
button:focus:before {
content:"Clicked!";
letter-spacing: .25em;
}
You need to understand focus is a stage. Whenever the element loses focus it will change back to old style. And what you want to achieve is triggered by a 'click' event. Using JS is the best way to handle it.
document.getElementById('p1Button').addEventListener('click', onClick);
document.getElementById('p2Button').addEventListener('click', onClick);
function onClick(){
this.className += ' YourClassHere';
}
Also I recommand you using jQuery which should be more convenient.
The best way to do this seems to be by using JavaScript. And easier way will be to use jQuery.
In a js file, put the following code to do it with jQuery
$("#p1Button").click(function(){
$(this).addClass("yourClassName");
});
If you don't want to use jQuery, then use the code as follows and in HTML, give a reference to that function like <button onclick="clickedOnButton(this)" id=p1Button><span>Player One, please select me! </span></button>
function clickedOnButton(this)
{
this.className+='yourClassName';
}
Add a class in the css file too
.yourClassName
{
/* Style to use when clicked on button. */
}
Related
Here is what happening. I have a simple button in HTML with a simple action in JS.
Button in HTML:
<button class="btn_open_calc">Open Culculator</button>
Styles in CSS:
.btn_open_calc {
background-color: rgb(232, 209, 237);
width: 200px;
height: 40px;
border-radius: 10px;
font-size: medium;
}
Response in main.js:
var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);
function funcOpenCalc() {
Modal_Container.style.display = 'flex';
}
But when I press the button here is how it starts to look:
When I press on any other place it disappears. But I want to get rid of it at all so it won't appear.
Add outline: none; or outline: 0;(outline 0 vs none difference) to the button's css to remove the outline.
But as MDN notes,
Accessibility concerns
Assigning outline a value of 0 or none will remove the browser's
default focus style. If an element can be interacted with, it must
have a visible focus indicator. Provide obvious focus styling if the
default focus style is removed.
You can add this to your CSS to get rid of it if you really want.
button:focus {
outline: none;
}
example:
var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);
function funcOpenCalc(){
Modal_Container.style.display = 'flex';
}
.btn_open_calc{
background-color: rgb(232, 209, 237);
width: 200px; height: 40px;
border-radius: 10px;
font-size: medium;
}
button:focus {
outline: none;
}
<button class="btn_open_calc">Open Culculator</button>
I am creating a header that, after scrolling, does a variety of things using CSS and Javascript. I must just be overlooking something that is preventing the underline on hover from changing from black to white after scrolling. It is supposed to always be the same color as the links.
Here's the link to see: http://www.exploreloudoncounty.com/
Any ideas? Thanks!
HTML:
<a class="nav__link" href="https://www.exploreloudoncounty.com/explore">Explore</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/join">Join</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/about">About</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/contact">Contact</a>
CSS:
.nav__link {
margin-right: 1em;
font-size: 1em;
color: #000;
text-decoration: none;
transition: 0.4s;
display: inline-block;
}
.nav__link::after {
content: '';
display: block;
width: 0;
height: 2px;
background-color: #000;
transition: width .3s;
}
.nav__link:hover::after {
width: 100%;
}
.nav__link.sticky a {
margin-right: 1em;
font-size: 1em;
color: #fff;
text-decoration: none;
transition: 0.4s;
display: inline-block;
}
.nav__link::after.sticky a {
content: '';
display: block;
width: 0;
height: 2px;
background: #fff;
background-color: #fff;
transition: width .3s;
}
.nav__link:hover::after.sticky a {
width: 100%;
}
JS:
if (scrollPosition > 100){
document.querySelector('.nav__link').classList.add('sticky');
}
else {
document.querySelector('.nav__link').classList.remove('sticky');
}
You should change your css to this:
.nav__link.sticky::after
This because the .sticky class is in the same element as .nav__link.
And if you want to use the a element in your styling you should put this at the front of the code, like this:
a.nav__link.sticky::after
This because the classes are located within this element so the element has to be in front.
What errors do you get if you open console (by pressing F12)?
Because if this is your complete JS, then you'll be getting scrollPosition is undefined.
The source you linked has this JS and you see they declare it at the beginning as:
let scrollPosition = Math.round(window.scrollY);
They also wrapped it in a lodash function called _.throttle, but you can acieve the same with setTimeout, it just makes sure the function gets called every now and then (here 300 milliseconds).
I would like to complement #Kjvhout answer.
That solution works only for the first link due to the wrong selector on the JS part.
In order to fix it, I would do the following:
Remove the JS altogether, if you inspect the dom, you can see that the header contains already a sticky class, so no need to add a new one to the anchors.
Rewrite the CSS to match this DOM structure, something like this should work:
.sticky .nav__link:after {
display: block;
width: 0;
height: 2px;
background: #fff;
background-color: rgb(255, 255, 255);
color: #fff;
background-color: #fff;
transition: width .3s;
}
This should solve the issue and would be a better solution as you can get rid of the unused JS part.
The reason why #Kjvhout answer was working only for the first is the JS part, your selector document.querySelector('.nav__link') is only selecting one HTMLElement, to get all the collection you should use document.querySelectorAll('.nav__link') and then iterate over this collection and apply the corresponding class.
But as I said earlier, my solution is simpler as you don't need to deal with JS.
The specimen of interest is a live webpage at https://store.ashenglowgaming.com/
When customer clicks on an Add to Cart button on the home page, an animation triggers of a turning progress wheel, which I want to target for styling, as I need to override its default color with the color #d53600 and implement a glow to the turning wheel using whatever means available.
This example goes beyond a simple minimal example; it's an real application question, and frankly I have no idea how the turning wheel is being implemented, whether I can style it by CSS, or I must override some JavaScript somewhere.
The question is, firstly, how can I identify the code responsible for the turning wheel? All the information I know how to extract from browser developer tools are the HTML and CSS, which is provided as follows:
HTML AND CSS:
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget a.button,
.site-header-cart .widget_shopping_cart a.button {
background-color: #eeeeee;
border-color: #eeeeee;
color: #333333;
}
1516799947index.css:2 .added_to_cart,
.button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
border: 0;
background: 0 0;
background-color: #43454b;
border-color: #43454b;
color: #fff;
cursor: pointer;
padding: .6180469716em 1.41575em;
text-decoration: none;
font-weight: 600;
text-shadow: none;
display: inline-block;
outline: 0;
-webkit-appearance: none;
border-radius: 0;
<a rel="nofollow" href="/?add-to-cart=116" data-quantity="1" data-product_id="116" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
If I haven't provided some detail of consequence, please ask before down-voting - it is not out of laziness, but rather that I'm just out of my depth and I'm a non-coder trying my best to cope here.
I've managed to find it for you. To change the color you should change the following.
.button.loading:after {
color: #FFFFFF; /* This is the default color */
}
If you want to play around with the specifics of the animation then you should toy with
button.loading:after, input[type="button"].loading:after,
input[type="reset"].loading:after, input[type="submit"].loading:after,
.button.loading:after, .added_to_cart.loading:after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
content: "\f110";
-webkit-animation: fa-spin .75s linear infinite;
animation: fa-spin .75s linear infinite;
height: 20px;
width: 20px;
line-height: 20px;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
}
To change the background color of the button while loading is active you should change the following
.button.loading:hover {
background-color: #eeeeee;
}
Hope this helps.
People usually add the spinner image or gif during saving of data or when it needs to talk to the server via ajax and I see ajax was used when they click add to cart.
$.ajax({
// your ajax code
beforeSend: function(){
$('.loader').show()
},
complete: function(){
$('.loader').hide();
}
});
so you could look for an loading or loader class or look in the ajax javascript itself to get a clue of where it's being called.
I tried adding the :active function to a div in the hopes of forcing it to stay the same color after the hover effect wears off. When they click on the box, the box should remain as that color, and when they click again, the color goes back to normal.
The problem is, the box changes back to it's original color despite being clicked.
Do I need Javascript for this?
.faqOuter{
color: #878787;
background-color: #E7E7E7;
transition: all 0.3s ease;
font-family: "Raleway", Sans-Serif;
font-weight: 500;
text-align: center;
font-size: 20px !important;
height: 30px;
padding: 4px 0 5px 0;
position: absolute !important;
z-index: 1;
}
.faqOuter:hover{
color: #fff;
background-color: #262626;
}
.faqOuter:active{
color: #fff;
background-color: #262626;
}
<h4 class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>
You need to use script for this and toggle the style on each click to get the effect.
First add a class with the desired style and use it to toggle during each click, as given below.
.hover-change {
color: #fff;
background-color: #262626;
}
$('.faqOuter').on('click', function(){
$(this).toggleClass('hover-change');
});
Problem:
The :active and :focus CSS pseudo-classes won't behave as intended since these pseudo-classes are typically used for form elements, and are intended to behave as described below accordingly:
:active
The :active CSS pseudo-class represents an element (such as
a button) that is being activated by the user. When using a mouse,
"activation" typically starts when the user presses down the primary
mouse button and ends when it is released.
Ref: :active - CSS | MDN
:focus
The :focus CSS pseudo-class represents an element (such as
a form input) that has received focus. It is generally triggered when
the user clicks or taps on an element or selects it with the
keyboard's "tab" key.
Ref: :focus - CSS | MDN
Solution:
To achieve the intended behaviour, consider javascript solutions and applying the required changes using classes rather than inline styles - this allows for greater control over applied changes and circumvents specificity issues typically encountered with inline styles.
Vanilla Javascript:
For best practice, and to bind the click event only to the intended element, add an id attribute and get the element by referencing this unique identifier.
Code Snippet:
// Add event listener to element in question and detect the click event
document.getElementById('faqOuter').addEventListener('click', function () {
// Check the class with conditional if statement
if (this.classList.contains('active')) {
// The element in question already has the class `active`, so we remove it
this.classList.remove('active');
} else {
// The element inb question does not have the class `active`, so we add it
this.classList.add('active');
}
});
.faqOuter{
color: #878787;
background-color: #E7E7E7;
transition: all 0.3s ease;
font-family: "Raleway", Sans-Serif;
font-weight: 500;
text-align: center;
font-size: 20px !important;
height: 30px;
padding: 4px 0 5px 0;
position: absolute !important;
z-index: 1;
}
.faqOuter:hover{
color: #fff;
background-color: #262626;
}
/* Additional */
.active {
color: #fff;
background-color: #262626;
}
<h4 id="faqOuter" class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>
jQuery:
Alternatively, the jQuery library can be included using a CDN (content delivery network), allowing for a range of more intuitive and flexible jQuery methods to be applied.
Code Snippet:
// Add event listener to element in question and detect the click event using the .on() method
jQuery('.faqOuter').on('click', function(){
// Toggle the class of the element in question using the .toggleClass() method
jQuery(this).toggleClass('active');
});
.faqOuter{
color: #878787;
background-color: #E7E7E7;
transition: all 0.3s ease;
font-family: "Raleway", Sans-Serif;
font-weight: 500;
text-align: center;
font-size: 20px !important;
height: 30px;
padding: 4px 0 5px 0;
position: absolute !important;
z-index: 1;
}
.faqOuter:hover{
color: #fff;
background-color: #262626;
}
/* Additional */
.active {
color: #fff;
background-color: #262626;
}
<!-- Remmeber to include jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>
On this website, I have images that you can hover over with your mouse and it will display two buttons. I want keyboard-only users to be able to tab through the site, so when they tab, the hoverable menu shows up. I've read a lot of solutions involving :focus and tabindex=0 but I can't seem to make it work. I have attempted to put tabindex=0 on the <a> tags to see if that would do it, but it doesn't. I believe the buttons will be tabbed through just fine if I could just get the hover menu to show up using the tab key. I might be missing something obvious, but I'm a beginner with all of these things. If it's not possible via CSS, can someone suggest a JS solution?
HTML
<div class="thumbnail thumbnail-medium-short">
<div class="nqspCover-container">
<img src="img/stuff.jpg" alt="Front cover" width="180px" height="233px">
<div class="overlay">
<div class="read-button">Read</div>
<div class="buy-button">Buy</div>
</div>
</div>
<div class="nqsp-caption">
<p>stuff</p>
</div>
</div>
CSS
.nqspCover-container {
position: relative;
width: 180px;
height: 233px;
margin: 0 auto;
}
.overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
transition: background 0.5s ease;
}
.nqspCover-container:hover .overlay {
background: rgba(0,0,0,.3);
}
.buy-button{
margin-top: 40px;
}
.read-button, .buy-button{
position: absolute;
width: 65px;
padding: 5px 15px;
border: solid 2px white;
opacity: 0;
transition: opacity .35s ease;
}
.read-button a, .buy-button a{
text-decoration: none;
text-align: center;
color: white;
}
.nqspCover-container:hover .read-button,
.nqspCover-container:hover .buy-button{
opacity: 1;
}
.read-button a:hover, .buy-button a:hover{
text-decoration: underline;
}
.read_button a:focus, .buy-button a:focus{
display: block;
}
Example of the hover menu I need to pop up when they tab to it (don't worry, the background img and buttons definitely won't look like that when it's done):
Only one element can have focus at a time, so you can not do this using :focus alone. That's what the :focus-within pseudo class was made to solve - but be aware of browser compatibility; MicroSofts two current browsers don't support it yet.
You'll need a JS solution or at least a polyfill for :focus-within
(FYI, div elements can't receive focus by default, so you'd need to start by adding the tabindex attribute. tabindex="0" is usually what you want to make an element focus-able in normal DOM order.)
I don't know if "focus" really does what I need it to do at all.
It does what the other pseudo classes do, too - no more or less: Identify/react to an element being in a specific state. What you do with it, or it's descendants/siblings, is up to you - by writing the selectors that target those elements, based on that parent/siblings state.
https://www.google.com/search?q=menu+with+focus-within gets you more detailed explanations & examples, f.e. http://www.scottohara.me/blog/2017/05/14/focus-within.html That one explains the topic pretty well, and also mentions a polyfill, https://allyjs.io/api/style/focus-within.html