Cannot focus in a box using CSS - javascript

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>

Related

HTML button becomes "selected" with little blue outline after it is clicked which is not needed to be

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>

Apply styling only on the text inside a DIV

I'm having a div in HTML which is dynamically creating from the server side. I want to apply css in HTML(front-end) only on that div if and only if its having some-content. If it doesn't have any content then I have no need to apply the new styling.
The sample of HTML code is:
<div class="attr-marker">
Some-text-content <!-- Apply New Styling on it -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
<i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>
And the CSS which I tried but failed is:
.attr-marker text {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
I can achieve it by using javascript but I want purely CSS solution so it'll help me to minimize the code.
You can set default style for empty div by using :empty pseudo selector. And then for regular div, just set the style as given above.
Or you can use :not(:empty) Pseudo Selector to set the style for the div that is not empty.
Here's an example:
.attr-marker:not(:empty) {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Let me know in case you have any questions.
Regards,
AJ
You can use the :empty pseudo-class. However your server will need to output the .attr-marker div with no whitespace.
Like...
<div class="attr-marker"></div>
not
<div class="attr-marker">
</div>
And then the css would be,
.attr-marker:empty {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Additional reading, https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
Writing .attr-marker text { } means you want to access child elements with tag text of class attr-maker. No such tag exists in HTML.
There are specific CSS text and CSS font properties which work only on text. They are to be used in the text's parent element (in your case div with class name attr-marker):
.attr-marker {
/* text properties */
/* some other properties */
}
Properties like display: block;, width: 12px;, height: 12px; and so on, won't work on text.
That being said, you don't need to worry whether your CSS properties will be applied to the text or to the whole div. If you're using the right properties, you can be sure they are only applied to the text.
As for the content(text) presence, you don't need to worry about it. If there is no text, CSS won't change anything.
Either add another class to that div from the server side if it will send content or wrap content with another element and give it some styling.
Edit:
If you know exact position of your element then you can select it with nth-child pseudo-class:
.attr-marker:nth-child(1):not(:empty) {
border: 1px solid #333;
background-color: yellow;
}
If these markers are block rendered elements, the browser should not display them, unless they have content, therefore you can trust the browser to not render the elements with no content, use the max-width and max-height properties below:
.attr-marker {
display: block;
max-width: 12px;
max-height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
/*If required*/
overflow:hidden
}

Why is this not changing color after scrolling? CSS/Javascript

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.

How to identify code responsible for, and style a turning wheel animation

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.

Change button styling after clicked

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. */
}

Categories