Well I have been working with some vehicle route timelines in which I show a timeline of vehicles using a range slider the problem is first I only need to manage the move and stop vehicle cases only in which I'm using this react-timeline-range-slider package which I totally change its CSS its only show one color but I change the disabled color to red to show that vehicle is stopped the problem is now I need to deal with idle and Overspeed case also, So I need to make the custom range slider with dynamic multiple background color
<TimeRange
error={error}
step={60000}
selectedInterval={selectedInterval}
timelineInterval={[startTime, endTime]}
// onUpdateCallback={this.errorHandler}
onChangeCallback={this.onChangeCallback}
onUpdateCallback={this.onUpdateCallback}
disabledIntervals={stopIntervals ?? disabledIntervals}
ticksNumber={6}
formatTick={(ms) => {
return moment(new Date(ms)).format('hh:mm a');
}}
/>
style.css
.react_time_range__track__disabled {
background: #dc3939 !important;
}
related to this question but it's in jquery and I need dynamic background color in this its static
colors Related question
Something like this but with a more dynamic multiple background colors
Related
I have a calendar on my site where the user can select a time range. I'm using the react-advanced-datetimerange-picker library for this, but I'm changing the library's default styles and ran into a problem.
I would like to change the background color in the box that I marked with a red arrow in the photo below. I also took a screenshot of the developer panel so you can see the styles and markup.
It seems like an easy task, but I've tried many options with no success.
What do I need to write in my .css file so that I can change the background color?
https://codesandbox.io/s/hopeful-khorana-gbjuiz
Simply change the background from #FFFFFF to any color you want!
There are many methods to achieve that
As seen in the screenshot
The input has a class inputDate
First Method
**
Assuming u want to set the background color to orange.
.inputDate{
background: Orange;
}
Another method:
You can use inline styling by adding style="background: orange" to the input
<input style="background: orange" class="inputDate"..... />
I implemented material paginator and the number of items per page and buttons(next and previous) are hided by the global backgroud color. I have attached 2 images and global background color of one of them is deactivated and can see the number of pages and buttons(next and previous).
I need to keep the background color and make visible the number of items per page and next and previous buttons.
I did read few releted articles and made few changes for example,
::ng-deep my-style-class {
background-color: unset;
}
All of them were not worked.
Can you please give me a suggestion to make visible number of pages and next, previous buttons without disabing the global background color.
The reason why it's not working is that this code is expecting a class called mat-paginator and mat-icon-button.
::ng-deep .mat-paginator .mat-icon-button
{
background-color: YourColor;
}
I'm currently working on a Responsive E-Commerce Product Slider Using HTML CSS & JavaScript.
Which inlcudes jQuery Core 3.6.0 from https://code.jquery.com/ and light slider from http://sachinchoolur.github.io/lightslider/
I've managed to get it working, however there is this random background color always allpied to the most left slide.
At first i thought that i ay have accidentlly applied background color to it. But then i realized if one of the slide has a background color all of them shoud've. and it's always on the most left one.
I've checked the color code using paint (which is rgb(231,155,155) it's also not in any of my colors in the rest of the html.
I've try to search the files using keyword("color") where it could've caused this. But i just can't seems to find it.
I've also checked my own scss file for any possible reason but both the slideshow container and the slide
doesn't even have a back ground property set to them.
Much Appreciate to anyone who can provide assistant.
So i find the problem and i'm posting it here if anyone ran into the same problem.
So currently i have two slide show in my html and one of them has a groups of dot on the bottom of the slide show displaying which image is it displaying out of all.
By doing that it is set to 'active' and in the other slide(the one above) the most left slide is also set to 'active' by sachinchoolur (http://sachinchoolur.github.io/lightslider/).
so all i did was change one of the 'active' to 'activedot'
.active,.dot:hover {
background-color: rgb(238, 160, 160);
}
to
.activedot,.dot:hover {
background-color: rgb(238, 160, 160);
}
and in the corospoinding javascript file change the 'active' to 'activedot'
This problem could not be only for the WordPress cms, but also any other page.
I need assistance using the WordPress storefront theme/woocommerce via styling specific page children.
There are three categories in the navigation tab for someone to hover over where a dropdown list will occur for each tab with different pages/items related to the category being hovered over.
All the pages within each tab/category on the nav bar should have a different background.
Example: If I hover over a nav tab "shoes" a drop down list will show different several shoe brand: Nike, Adidas, Sketchers. All the pages that are on the Shoe tab should have the same background color of red.
Another nav tab might be Hats whereon after hovering a drop-down list of several hat brands show. All the pages in that hat tab should have the same background color of blue because it is of the hat tab.
I do not see any html tags in the DOM with specific classes to put css so all page elements will get the same effect.
Example:
.container .hats {
background: blue;
}
There are no elements where I can apply the styles to. if I just used .container, then all pages will get the same color.
Any help?
EDIT
My bad, I was not specific in my question.. It is not changing the nav background colors ex: but when the user clicks on a specific brand "nike" under the main tab "shoes", the page that that gets loaded into the browser will display products of nike in a red background.
I found another post which helped in changing the specific CSS.
Change CSS when the current URL contains a certain string
Using JavaScript, you are able to search for specific parts of the url.
If the URL contains the term or index you want, you can make changes the elements on the documents.
<script type="text/javascript">
$(document).ready(function () {
if (window.location.href.indexOf("hats") > -1) {
$(".site-content").css("background-color", "red");
} if (window.location.href.indexOf("shoes") > -1) {
$(".site-content").css("background-color", "green");
}});
</script>
The downside I noticed was that the page does not update the specified css immediately but a small delay is seen between the background color change.
Alternatively, you can use plain css targeting the product class in the body for each item. It will be tedious if you had a lot of pages, but the provides no delay in changing the background colors from default to the set value.
I have a container with a light blue background on my page and I would like for the background to get sequentially darker with each click. At this point, I'm happily setting my array of colors manually (we'll leave that question for another day) but I'm unable to get the background color to change or iterate over the array like I would like.
Currently, I'm getting alerts that there was an error in parsing my background color. I've tried setting background-color for .content in the css document and removing it, but neither way works (except if I remove it, then there's no background color at all)
Here's a rough sense of the code I have so far. I built it based on this jsfiddle from another thread, though it does not match entirely: http://jsfiddle.net/arunpjohny/3eGM5/
$(document).ready(function() {
var blues = ['#c4c4fd', '#5d5dbc'],
counter = 0;
$(".content").click(function() {
$(".content").animate({
backgroundColor: blues[counter++]});
#the text in this div also changes on click, so here's my animation for that.
#This is working fine, but I figured I'd include it just to be safe
var current = $('.active');
var next = current.next('.section');
if(next.length === 0) {
next = $('.section').first();
};
current.fadeOut(400).removeClass('active');
next.delay(100).fadeIn(1500).addClass('active');
});
});
Is there an obvious solution to this that I'm missing? I'm still pretty new to jQuery and putting everything together, so any advice or any direction you can point me in would be greatly appreciated!
Your color isn't being animated because you need to use the jQuery Color plugin to animate colors.
So you'd need to include the jquery color plugin in your markup and then change your animate code to look similar to this.
$("#block").animate({
backgroundColor: $.Color(blues[counter++])
}, 1500 );