I have a datepicker that has a special highlight using beforeShowDay. However, the highlight style prevents the selected ("ui-btn-active") style, which is automatically applied when a cell is clicked. What is the best approach to get the selected style on top?
<div id="datepicker"></div>
.Highlighted a{
background: none !important;
background-color: #990066 !important;
}
$('#datepicker').datepicker({
beforeShowDay: function (date) {
return [true, SelectedDates[date] ? 'Highlighted' : ''];
}
});
Adding this has no effect:
.Highlighted ui-btn-active a{
background: none !important;
background-color: white !important;
}
On your beforeShowDay code add the ui-btn-active class to the selected elements after adding them Highlighted class.
Remember elements can have multiple classes.
beforeShowDay: function (date) {
var selected = $("#datepicker").datepicker('getDate');
if (date.getDate() != selected.getDate()) return [true, SelectedDates[date] ? 'Highlighted' : ''];
else return [true, '']
}
Related
I am using react grid and I would like to set the hover color and rowSelectedColor for each row differently, When I tried overwriting the hover background color it applies to every row not each row.
example - https://plnkr.co/edit/UwszBQxteLy9vPE3
I tried using rowClassRule for achieving the functionality but it did not worked, I am expecting row should have there own unique hover color and selected background color based on some condition ex: age>10 then hover-color: Red
Your code seems working to me, you just didn't passed the correct classname to your other rules.
Here's the code edited, with one new class
// main.js
const gridOptions = {
rowData: getData(),
columnDefs: [
{ headerName: 'Employee', field: 'employee' },
{ headerName: 'Number Sick Days', field: 'sickDays', editable: true },
],
rowClassRules: {
// row style function
'warning': (params) => {
var numSickDays = params.data.sickDays;
return numSickDays > 1 && numSickDays <= 5;
},
// row style expression
'breach': 'data.sickDays >= 5',
'new': 'data.sickDays >= 7'
},
};
For the style you don't need to put !important to override, try to understand why the style you want does not apply before using !important
// styles.css
.warning {
background-color: sandybrown;
}
.warning:hover {
background-color: purple;
}
// you set the class to 'blue' but the class did not exists in your style, so I set it to 'breach' because that's a class you had
.breach {
background-color: lightcoral;
}
.breach:hover {
background-color: black;
color: white;
}
.new {
background-color: greenyellow;
}
The edited and working sandbox : https://plnkr.co/edit/CijuUinXkVUJkRFG
Information
I am learning TypeScript and am translating my already existing CoffeScript code into TypeScript (Lit Web Component).
Issue
I have an issue with the following line in understanding how it would be translated into TypeScript:
render: ->
className = if (#props.firstProp) in #props.secondProp then "buttons buttons-active" else "buttons"
The code basically changes the styling of a toggle button.
If a specific prop exists it triggers the custom button class and if its clicked, the active styling is applied.
What I expect
I want to click on the switch and change its css styling whilst also setting the condition to true/false. If its true, then use the container-style-light button button-active styling, when clicked again, set it to false and change the styling back to just container-style-light button.
#customElement('toggle-button')
export class ToggleButton extends ElementLit {
static styles = css`
button { border-width: 1px;
border-style: solid;
width: 50px;
min-width: 50px;
height: 50px;
border-radius: 25px;
font-size: 0.9rem;
margin: 0;
padding: 0;
}container-style-light button {
border-color: var(--highlight);
color: var(--highlight);
background-color: var(--background);
}
container-style-light button button-active {
background-color: var(--highlight);
color: var(--foreground);
}
#property()
condition = true;
constructor() {
super();
this.disabled = false;
this.displayName = `${this.condition}`
}
render() {
return html`
<style>${ToggleButton.styles}</style>
<label>
<button type="button"
?disabled="${this.disabled}"
#click=${this.onClick}>
${this.displayName}
</button>
</label>`;
}
private onClick(_e: Event) {
//change the styling of the .button to button-active, set condition to true
//if clicked on again, revert to the .button styling, set condition to false
}
}
What would be the simplest way to do this in typescript? I appreciate the help as I have many similar components which I want to translate.
Create classes object with property name as button class and set value to boolean. Use classMap directive to map classes to btn. and toggle on button onclick.
const classes = {
button_active: this.toggleBtnState;
}
private onClick(_e: Event) {
this.toggleBtnState = !this.toggleBtnState
}
render() {
return html`
<style>${ToggleButton.styles}</style>
<label>
<button type="button"
?disabled="${this.disabled}"
#click=${this.onClick}>
${this.displayName}
${classMap(classes)}
</button>
</label>`;
}```
Single Product page displays In stock/ Out of stock; both Text = red.
I need to change In stock = green, and Out of stock remain red.
Help would be great!
Figured it out.
p.stock.out-of-stock {
color: #ff0000 !important;
}
and
p.stock.in-stock {
color: #ff0000 !important;
}
into the Custom CSS and adjusting the Hex code accordingly.
Not sure how to delete my question but maybe it will help someone else.
Can't do that only with css but you can do this with JavaScript and a api.
For example this is a html
<div>
<p class="stock">Stock</p>
</div>
JavaScript
var stock = document.querySelector('.stock');
function countProducts(){
fetch('http://127.0.0.1:8000/stock')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
if (myJson != 0) {
stock.style.color= 'green';
}else{
stock.style.color = 'red';
}
});
}
But if you want to know how to do it in css. It's like this
HTML
<div>
<p class="stock">Stock</p>
<p class="NoStock"> No Stock </p>
</div>
//If there is a stock
.stock{
color: 'green';
display: inherit;
}
.noStock{
color: 'red';
display : 'none';
}
//If there is not a stock
.noStock{
color: 'red';
display: 'inherit';
}
.stock{
color: green;
display: 'none';
}
I was wondering if there was a way to change a button's style, in css, after it's been clicked, so not a element:active.
If you're looking for a pure css option, try using the :focus pseudo class.
#style {
background-color: red;
}
#style:focus {
background-color:yellow;
}
Each link has five different states: link, hover, active, focus and visited.
Link is the normal appearance, hover is when you mouse over, active is the state when it's clicked, focus follows active and visited is the state you end up when you unfocus the recently clicked link.
I'm guessing you want to achieve a different style on either focus or visited, then you can add the following CSS:
a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }
A recommended order in your CSS to not cause any trouble is the following:
a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
You can use your web browser's developer tools to force the states of the element like this (Chrome->Developer Tools/Inspect Element->Style->Filter :hov):
Force state in Chrome Developer Tools
It is possible to do with CSS only by selecting active and focus pseudo element of the button.
button:active{
background:olive;
}
button:focus{
background:olive;
}
See codepen: http://codepen.io/fennefoss/pen/Bpqdqx
You could also write a simple jQuery click function which changes the background color.
HTML:
<button class="js-click">Click me!</button>
CSS:
button {
background: none;
}
JavaScript:
$( ".js-click" ).click(function() {
$( ".js-click" ).css('background', 'green');
});
Check out this codepen: http://codepen.io/fennefoss/pen/pRxrVG
Try to check outline on button's focus:
button:focus {
outline: blue auto 5px;
}
If you have it, just set it to none.
What is the code of your button? If it's an a tag, then you could do this:
a {
padding: 5px;
background: green;
}
a:visited {
background: red;
}
A button
Or you could use jQuery to add a class on click, as below:
$("#button").click(function() {
$("#button").addClass('button-clicked');
});
.button-clicked {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>
If your button would be an <a> element, you could use the :visited selector.
You are limited however, you can only change:
color
background-color
border-color (and its sub-properties)
outline-color
The color parts of the fill and stroke properties
I haven't read this article about revisiting the :visited but maybe some smarter people have found more ways to hack it.
An easy way of doing this is to use JavaScript like so:
element.addEventListener('click', (e => {
e.preventDefault();
element.style = '<insert CSS here as you would in a style attribute>';
}));
all answers is true for hover, focus,...
if you want change background-color when you click and be stay that clicked state, you could do this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
<script>
const element = document.querySelector("body")
let taskDone = false
// function for show button
const elementShow = () => {
element.innerHTML = `
<button id="done-button" style="background-color : ${!taskDone
? "#4dd432" : "#fd67ad"};" onclick=doneTask()>
${!taskDone ? "Done" : "not done yet"}
</button>
`
}
elementShow()
// click Done button
const doneTask = () => {
taskDone = (taskDone ? false : true)
elementShow()
}
</script>
</html>
When a object is dragged and dropped from one div to another, the format in li gets changes to text only. I want it in the same format and style i.e 'li' after droping it.
$(function() {
$("#catalog ul").sortable({
zIndex: 10000,
revert: true
});
$("#catalog").accordion();
$("#catalog ul").draggable({
appendTo: "body",
helper: "clone",
zIndex: 10000
});
$("#dialogIteration ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$(this).removeClass("ui-state-default");
}
});
$("ul, li").disableSelection();
$("#dialogIteration").dialog();
});
Sample Code here
The style of item <li class="ui-state-default"/> in original list is defined by CSS rules:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid lightGrey;
background: #E6E6E6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
}
...
After you dragged it to new container, and drop it, you created another element to hold the content $("<li></li>").text(ui.draggable.text()) which doesn't have the same className as the original element, so the style is ripped off.
You can either fix it by changing it to
$('<li class="ui-state-default" />').text(ui.draggable.text()).appendTo( this )