In the example below, I want to change pad's color via JS to green, but also make it transition to yellow when it is active.
However, changing the color via JS like this: pad.style.background = 'green' will make the transition stop working. If I remove this line, the transition will work fine.
Why is that so and how can I fix this?
let pad = document.getElementsByClassName('pad')[0]
pad.style.background = 'green'
.pad{
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad:active {
background: yellow;
}
<!DOCTYPE HTML>
<body>
<div class="pad"></div>
</body>
The reason for not working is because pad.style.background will add an inline css style which has a priority over a css class
Solution:
use a class instead of inline style like in the code bellow:
let pad = document.getElementsByClassName('pad')[0]
pad.classList.add("green");
.pad {
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad.green {
background: green;
}
.pad:active {
background: yellow;
}
<div class="pad"></div>
It seems like JS is adding green to the :active state too.
Add !important to the active style in your css to make it more of a priority:
.pad:active {
background: yellow!important;
}
This is happening because you're overriding the existing style by applying the style via style attribute on the HTML element.
Instead you should create a new class and apply that using JavaScript, in that case the original styles won't be overidden and the transition would still work
Have your CSS as:
.pad {
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad:active {
background: yellow;
}
.pad-green {
background: green;
}
And then in your JavaScript, do this:
let pad = document.getElementsByClassName('pad')[0]
pad.classList.add('pad-green')
Hope that helps, let me know in the comments if there are any questions.
Related
I am coding this front-end with NextJS framework and after the user clicks the target button, a class will be added to a specific div. This class is supposed to change the div style, once I had added unique styles to this class in my css file.
The original element:
<div class="Home_wordBlockWrapper__nwyZO" id="generated-block"><h3>C</h3></div>
The element after clicking the button:
<div class="Home_wordBlockWrapper__nwyZO filled rightindex" id="generated-block"><h3>C</h3></div>
CSS File:
.wordBlockWrapper {
border: 2px solid rgb(226, 232, 240);
border-radius: 5px;
width: 50px;
height: 50px;
}
.wordBlockWrapper {
justify-content: center;
align-items: center;
text-align: center;
display: flex;
transition: .5 ease-in-out;
}
.filled {
border: 2px solid black;
}
The problem is: Though the class is added, the div style remains the same. Do you guys know where is the error?
Well, I doesn't solved my question with an usual way. But, anyway, my solution was: Instead of trying to add a class to the element and then after stylizing it in the css file, I added a JS script to add the styles in the document element, getting it by its id.
Solution:
var tb = document.getElementsByClassName(styles.wordBlockWrapper)[matching.index]
var targBlockId = document.getElementById(tb.id);
if(targBlockId !== null) {
targBlockId.style.backgroundColor = "#13d178"
targBlockId.style.color = "#fff"
}
This way, the issue is solved adding the styles with a JS script, instead of adding a class to its classList and then stylizing it with css files.
I'm trying to override the background color present in vaadin-combo-box-overlay element.
Here is the css that I want to override, more specifically the background property, source taken from (https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html)
:host {
position: absolute;
#apply(--shadow-elevation-2dp);
background: #fff;
border-radius: 0 0 2px 2px;
top: 0;
left: 0;
.......
}
So I've tried something like:
:root ::content vaadin-combo-box-overlay.vaadin-combo-box-overlay {
background: red !important;
background-color: red !important;
}
Also I've tried with :host but I guess it should be used :root because I use this dropdown in a dialog, and the overlay component doesn't seem to be a child of the dialog. I've tried different combinatons as the one mentioned above without any success.
Also I'm wondering why the background is not parameterized as the text color is:
#selector .item {
cursor: pointer;
padding: 13px 16px;
color: var(--primary-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Specifying a different value for --primary-text-color I'm able to change the text color..
Thanks.
you can do it with javascript like that.
ready: function() {
var domElem=Polymer.dom(this).node.$.YOUR-VAADIN-ELEMENT-ID.$.overlay.style.backgroundColor="red";
}
OR
ready: function() {
var css = '#selector .item { background-color:red; }';
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
Polymer.dom(this).node.$.tourSelector.$.overlay.$.selector.appendChild(style);
}
Would like to have a working CSS selector, but i cant set breakpoints in CSS to find out the right selectors!
You should use dom-module for styling vaading parts see example below:
<dom-module id="combo-box-overlay-styles" theme-for="vaadin-combo-box-overlay">
<template>
<style>
[part~="content"] {
background-color: red;
}
</style>
</template>
</dom-module>
Read more here https://github.com/vaadin/vaadin-themable-mixin/wiki
Thanks Patrick !!
I wasn't thinking about to do try it this way.
Here's what I did, a hacky solution though.
ready : function(){
var combo = this.$$('#comboid');
combo.addEventListener('vaadin-dropdown-opened'', function() {
var overlay = Polymer.dom(this.root).querySelector('#overlay');
overlay.style.backgroundColor = primaryBackground;
});
},
I only have access to the overlay when the combo is expanded, so in the value change listener the combo would be expanded.
Easy question for a lot of you but I'm still learning. I'm trying to get better at toggling between active and inactive states of simple objects.
I have a square div:
<div id = "square"></div>
With the following css to, onclick, make the div extend
#square
{
height: 50px;
width: 60px;
border: 1px solid red;
transition: height 2s ease;
}
#square:active
{
height: 100px;
}
And the following javascript to set up the click event:
var square = document.getElementById("square").addEventListener("click", function()
{
this.classList.toggle("active");
}, false);
But nothing seems to happen when I click. I'm including JS in this because I'm also new to learning JS as well, and I'm trying to get used to simple logic principles.
Here is the fiddle: https://jsfiddle.net/theodore_steiner/fsk6y50k/4/
Any help would be wonderful
The way that you used the class selector is wrong,
#square.active{
height: 100px;
}
It should precede with a dot not a colon
DEMO
I have created a few classes in my javascript file that will be essentially referenced in the CSS file as "tr.Yes" "tr.No" and the new one "tr.override".
I want to override the values of tr.Yes and tr.No with tr.override due to a few added constraints in the JS file. Basically, how would I override them with tr.override that has a background of green?
Thanks guys.
My CSS so far looks as follows:
tr.Yes td.IndicatedDispatch {
background: yellow;
}
tr.No td.IndicatedDispatch {
background: red;
}
If you want the override class to override the yes and no classes define your overrideclass after the other ones in your CSS file and redefine the same rules with different values.
Like this
tr.Yes td.IndicatedDispatch {
background: red;
}
tr.Override td.IndicatedDispatch {
background: green; /* Redefine here*/
}
You can override CSS declarations by making them more specific. Go higher up the DOM.
tr.Yes td.IndicatedDispatch {
background: yellow;
}
becomes:
table tr.Yes td.IndicatedDispatch {
background: red;
}
Related article: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
If you're going to add the override class and leave the original classes, you create a combination rule like this:
tr.Yes td.IndicatedDispatch {
background: yellow;
}
tr.No td.IndicatedDispatch {
background: red;
}
tr.Yes.override td.IndicatedDispatch ,
tr.No.override td.IndicatedDispatch {
background: green;
}
CSS works from top to bottom, i.e selector1 css attributes will be overridden by selector1 css attributes defined at last(MORE SPECIFIC). For example
.myClass{
color: #000000;
}
/*
* Some other code
*
*/
.myClass{
color: #FFFFFF;
}
So at run time color:#FFF color will be picked up.
You could change your selectors to tr.Yes:not(.override) so that they do not take effect when the override class is in effect. Otherwise, both the tr.Yes and the tr.override styling will be merged, and anything from tr.Yes that is not overridden by tr.override will remain.
I'd like to change the css "background-image:" when someone clicks a button.
I'm not sure if I'm able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need?
My current work around is with css and it looks like:
.hello-button {
background-image: url("hello.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
transition: 2s ease-out;
}
.hello-button:hover {
background-image: url("bye.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
transition-delay: .7s;
-webkit-transition-delay: .7s;
-moz-transition-delay: .7s;
-o-transition-delay: .7s;
}
I'd approach it like this. http://jsfiddle.net/darcher/6Ex7h/
jquery
$('.img').on({
click: function(){
$(this).addClass('new-bg').removeClass('bg') // changes background on click
},
mousedown: function() {
// :active state
},
mouseup: function() {
// on click release
},
mouseenter: function() {
// on hover
},
mouseleave: function() {
// hover exit
}
/*
, hover: function(){
// or hover instead of enter/leave
}
*/
})
With these varying states, you can do anything you need. There are also a variety of other states you can use http://api.jquery.com/category/events/mouse-events/
html
<div href="#" class="img bg"></div>
css
.img{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:block;
height:200px;
}
.bg{
background-image:url(http://placehold.it/300x200/white/black);
}
.new-bg{
background-image:url(http://placehold.it/300x200/black/white);
}
there are css only alternatives, but they're not really great on support: http://tympanus.net/codrops/2012/12/17/css-click-events/
You could use javascript for change the background. The following website javascripter is an example of changing background color and manipulating CSS by Javascript. I hope this can help you.
1. CSS pseudo-class selector:active
If you didn't care about persistence you could always use the the pseudo-class ":active". The image will only be affected as long as your mouse is down. As soon as you mouse-up it'll revert. At this moment, that's about as close as you can get in CSS.
.hello-button:active {
background-image: url("image.jpg");
}
JSFiddle Example: http://jsfiddle.net/pkrWV/
2. Change Style Attribute with JavaScript
JavaScript is just about the only way you're going to be able to click on an object, mouse-up and the background is still changed. JavaScript gives you a couple ways to do it too.
You can use JavaScript to change the object's style attribute to update the 'background-image'.
obj.style.backgroundImage = 'url("image.jpg")';
JSFiddle: http://jsfiddle.net/pkrWV/1/
3. Change Class Attribute with JavaScript
Or similarly, you could create two classes in your CSS, and use JavaScript to update the object's class attribute.
/* JavaScript */
obj.className = 'imageOneClassName';
/* CSS */
.imageOneClassName {
background-image: url("image.jpg");
}
JSFiddle: http://jsfiddle.net/pkrWV/2/
My personal favorite method is the third option where you still use CSS to style your obj in different states, and then you use JavaScript to change the class name to update those states. It's less JavaScript, more CSS, and you're keeping everything in their appropriate places.
$(function() {
$('.home').click(function() {
$(this).css('background-image', 'url(images/hello.png)');
});
}):
you have to do like this, there was a relative question see this i hope i helped you...
jquery onclick change css background image
There's no way to do this in pure HTML/CSS, but in javascript you can do it like so:
var button = document.getElementsByClassName("hello-button")[0];
button.addEventListener("click", function(){
button.style.backgroundImage = "url(bye.png)";
});
You can either include this in a <script></script> tag or add it to a .js file and include that by adding <script src="scriptName.js"></script>
Here's a CSS-only solution: http://jsfiddle.net/VVj6w/
HTML
<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>
CSS
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
input[type = "checkbox"] {
display: none;
}
label {
position: absolute;
top: 10px;
left: 10px;
background-color: #eee;
border: 2px solid #ccc;
padding: 5px;
border-radius: 10px;
font-family: Arial, Sans-Serif;
cursor: pointer;
}
#wrapper {
background-color: hsla(0, 100%, 50%, 1);
height: 100%;
width: 100%;
}
input[type = "checkbox"]:checked ~ #wrapper {
background-color: hsla(0, 100%, 50%, 0.1);
}
If you only want it to change while you are clicking, you should be able to use
.hello-button:active {
background-image: url("bye.png");
...
}
If you want it to remain that way after the click (after the mouse button has been released), you will have to use javascript. Something like the following
document.getElementsByClassName("hello-button")[0].addEventListener("click", function(el) {
el.classList.add("clicked");
});
Then in the CSS, update your selector to
.hello-button.clicked