I am using Jquery UI datepicker and I am trying to change the background color for each day in a month.
For this I am using beforeShowDay function in Jquery UI date-picker.
As an example I am trying to change the background color for odd days in a month and my script changes only border color.
I am not sure where the mistake is, How do I over ride the entire back ground color in Jquery to achieve the desired result.
please help.
Script Used:
$(document).ready(function() {
//$("#datepicker").datepicker();
$("#datepicker").datepicker({ inline: true, beforeShowDay: highlightOdds});
});
function highlightOdds(date) {
return [true, date.getDate() % 2 == 1 ? 'odd' : ''];
}
Css Used:
.odd { background-color: green; }
hii All I found it myself,
I just modifed the css as given below and it works cool :)
.odd a.ui-state-default {color:white;
background-color: red;
background: red;}
thank u all :)
Related
I'm trying to scale an image with css transition upon clicking some text.
The checkmark image should animate out and in each time the link is clicked. In iPhone Chrome however the checkmark doesn't animate - simply jumps from one state to the other, seemingly ignoring the css {transition: transform 200ms}.
It seems to work everywhere except iPhone Chrome browser - I've gone through everything as best as I can but it's totally stumped me!
Codepen link: https://codepen.io/anon/pen/oqBJzr
CSS:
.checkmark {
width: 35px;
-webkit-transition: transform 200ms;
transition: all 200ms;
}
.checkmark.scale {
-webkit-transform: scale(3);
transform: scale(3);
}
JavaScript:
function checkMarkAnim() {
$('.checkmark').toggleClass('scale');
}
Any pointers on what has gone wrong would really help.
Thank you in advance
Update:
The suggestion to add -webkit-transition: -webkit-transform 200ms; does not seem to have resolved the problem (although I initially thought it had).
After a few days of searching what actually worked for me is just Chrome restart.
This is caused by a known issue in iOS.
For more information, see: https://bugs.webkit.org/show_bug.cgi?id=228333
and https://bugs.chromium.org/p/chromium/issues/detail?id=1231712
Please also add/keep -webkit-transition: transform 200ms;. So in the end you should have:
.checkmark {
width: 35px;
-webkit-transition: transform 200ms;
-webkit-transition: -webkit-transform 200ms
transition: all 200ms;
}
.checkmark.scale {
-webkit-transform: scale(3);
transform: scale(3);
}
See it here working with mobile chrome (iOS): https://codepen.io/miikaeru/pen/aMXYEb
I'm currently trying to use the accordion component of Semantic UI React and can't figure out how to change the color and arrow to white.
https://semantic-ui.com/modules/accordion.html
In the css, you can see that the widget has styling that configures it to black.
Does the component have a way to change the text color?
Is it possible to put a parent div to override the color text? (tried
that but didn't work)
How would you override the color? Any workaround. (This can be done with an override as mentioned below in the comments with the !important tag)
The accordion react component takes in panels
const panels = [
{
title: "test1",
content: "test1"
},
{
title: "test2",
content: "test2"
},
{
title: "super",
content: "test"
}
]
<Accordion className="test" panels={panels}/>
.test{
color:white;
}
The accordion takes in a className, but passing in a style doesn't seem to work at all either. I've tried at each level as well Accordion.Title Tag.
You have to personalized the class of the composant you want to change and you have to "overriding" the css classes of semantic-ui using !important.
.ui.accordion.perso
.title:not(.ui) {
color : #ffffff !important;
}
If you want more info on !important (https://css-tricks.com/when-using-important-is-the-right-choice/)
Peace
Figured it out.
<Accordion>
<Accordion.Title className="test2">
<Icon name='dropdown' />
<label className="label-color"> super</label>
</Accordion.Title>
<Accordion.Content>
</Accordion.Content>
</Accordion>
Realized that I could just use the separate components of an accordion and add my own elements and style it.
I'm trying to add a custom media query to Interchange for retina laptops, but it doesn't seem to be picking up. I'm sure something is in the wrong place or there's wrong syntax somewhere. Any ideas?
HTML:
<div
class="responsive-bg"
data-interchange="
[http://brycekirk.com/man-mountain/small.jpg, small],
[http://brycekirk.com/man-mountain/medium.jpg, medium],
[http://brycekirk.com/man-mountain/large.jpg, large],
[http://brycekirk.com/man-mountain/xlarge.jpg, xlarge]
[http://brycekirk.com/man-mountain/largeretina.jpg, largeretina]"></div>
CSS:
div.responsive-bg {height: 100vh; width: 100%; position: absolute; }
JS:
$(document).foundation();
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';
Interchange Documentation
Codepen
It is NOT working because you are add custom query after the Foundation has initialize, you have to use Foundation reflow or you can set the media query before init code.
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';
$(document).foundation();
Say I have a button like this:
<button>Some Text</button>
And by default the stylesheet has the text as black.
I then have this css:
button {
transition: color 0.15s ease-out;
color: rgba(255,255,255,0.75);
}
button:hover {
transition: color 0.15s ease-out;
color: #fff;
}
The goal is to subtly fade from a grayish off-white, to white, on hover, and then back again to normal button appearance on hover off.
The problem is when i firstly load the page, the black initial color of button is overwritten by the transition that i applied on button, and one can briefly see black text fading to off-white.
How do I make it so that the initial state just loads without animation? Or more precisely, is there a way to achieve something like :hover-off to control the animation only when the hover state turns off?
Sorry i have less reputation to comment. Your animation does not work, please explain clearly what you want to do?
are you trying to achieve this.
button:hover {
transition: 0.5s ease-out;
color : white;
}
If you have to load some JavaScript, you can put it in the <head> after your CSS. Kind of a hack, but it works.
HTML parsing is blocked by <script> tags that initiate requests for external resources. I guess CSS animations won't start until the <body> has been fully parsed and that's the reason this works.
I would like to use a different background color for the Foundation topbar menu in mobile view compared to the desktop view. In the settings file you have $topbar-dropdown-bg to set the color but this is the same for both views. I have tried the following code:
$topbar-dropdown-bg: white;
#media only screen and (max-width : 40em) {
$topbar-dropdown-bg: #dc2a87;
}
But the problem is that all views give the color background but this should be only in the mobile view?
Use scss media query for changing foundation top-bar.
#media #{$small-only} { }
Use it with the bg-background variable.
#media #{$small-only} {
$topbar-dropdown-bg :#fff;
}