Changing the inner colour of the react bootstrap ProgressBar - javascript
Currently, I am using the React-bootstrap ProgressBar in my code in the following way:
<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px"}}/>
And in my CSS file, I have something like this:
.green-progress-bar .progress-bar{
height: 100%;
border: 1px solid #FFFFFF;
border-radius: 19.5px;
padding-right: 5px;
// I am aware I can do background-color: green;
// but I want to change it within the JS file
}
I would like to change the colour of the actual bar itself, but my attempts don't seem to be working.
For example, I tried:
<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px", "background-colour":"green"}}/>
But this just seems to be changing the outer ProgressBar container as opposed to the actual bar.
Here is a link to the documentation page.
NOTE: I am aware that I can put something like background-color: green; in my CSS file, but I am looking for a solution that changes it within the JS file so that I can later use a variable to change the bar colour.
If you have ref to your bar component you can find it's child by class and then change its color.
useEffect(() => {
if (ref.current) {
const inner = ref.current.querySelector(".progress-bar");
if ( inner ) {
inner.style.backgroundColor = "green";
}
}
}, [ref]);
<ProgressBar ref={ref} now={20} /* other stuff */ />
Related
Using dark or light mode
what is the best way to incorporate something like this into my site? I've tried using plugins but I cant get it to work. Doesn't have to be fancy. Does anyone have it or have used one in the past they can recommend? Otherwise, is there a way to code it using JavaScript?
You could just set a button to trigger a boolean for example and based on its values, change the background-color of the items you want to change into dark mode.
I personally used react context for this one, something like this (kinda perfect how they used theme as an example). You should study it.
It depends on your framework, but if you use Material-UI, it has this option. you can change palette type from light to dark and vice versa to achieve your requirements. Take a look here. But if you don't use any framework, you should make a css structure that has two classes, light and dark, have some properties like color and background color and etc., and when the toggle theme button clicked, you will change all your classes from light to dark for example, also you can use animation for the effects.
There is a multiple solutions for this problem, if you are using a specific framework I suggest you check if there a way to do it with it, if you are not using any framework you still have multiple solutions and I suggest to create for each element you want to change his properties to dark mode another CSS class for each one, and with JavaScript create a function (that can call by a button on the html) that change all the element you want to those external classes, and if you click this button once again is reverse the function and make all the classes be with the original CSS classes
Maybe this should help you to kickstart.
<html class="theme-light">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.theme-light {
--color-primary: #0060df;
--color-secondary: #fbfbfe;
--color-accent: #fd6f53;
--font-color: #000000;
}
.theme-dark {
--color-primary: #17ed90;
--color-secondary: #243133;
--color-accent: #12cdea;
--font-color: #ffffff;
}
.container {
display: flex;
width: 100%;
height: 100%;
background: var(--color-secondary);
flex-direction: column;
justify-content: center;
align-items: center;
}
.container h1 {
color: var(--font-color);
}
.container button {
color: var(--font-color);
background: var(--color-primary);
padding: 10px 20px;
border: 0;
border-radius: 5px;
}
</style>
<script>
// Set a Theme
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
// Toggle From light and dark theme and Vice-Versa
function toggleTheme() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
} else {
setTheme('theme-dark');
}
}
// Onload Theme
(function() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-dark');
} else {
setTheme('theme-light');
}
})();
</script>
<body>
<div class="container">
<h1>Theme Switcher</h1>
<button id="switch" onclick="toggleTheme()">Switch Theme</button>
</div>
</body>
</html>
This is a simple approach that I've used several times:
On the main html file, I load the default theme, for example the light one:
<link rel="stylesheet" href="/themes/light/theme.css" id="linkTheme" />
Then, on the theme changer button/menu option, I change the CSS file of the above link to load the corresponding one, something like:
const handleToggleTheme = (dark) => {
const lightUrl = "/themes/light/theme.css";
const darkUrl = "/themes/dark/theme.css";
if (dark) {
document.getElementById('linkTheme').setAttribute('href', darkUrl);
}
else {
document.getElementById('linkTheme').setAttribute('href', lightUrl);
}
}
React Dropzone to apply css on drop
am working on react with Dropzone. my requirement is i do need to show Dropzone area a text like in the center when we drag files to drop area( text: you are inserting files) + a blue border in the drop area
my code looks like
<Dropzone
disableClick={true}
className={styles.dropStyle}
dropzoneActive={{ borderColor: 'green' }}
onDrop={e => this.props.change(e)}
>
<div>...this is the dropzone area...</div>
</DropZone>
Here border color green is not coming , its taking only dropStyle css+ plus i need to show a text inside the div only when we drag files to zone area.
I mean its a normal div with lot of assets, when we drop only css should apply( means dropzoneActive css should be visible )
Any fiddle will be highly appreciated
Are you using react-dropzone? Since typings does not have a className and dropzoneActive prop I am wondering how you got that working. Anyway...
Here is some code I used for Dropzone
React:
<Dropzone
onDrop={// do stuff here}
accept='image/jpg,image/jpeg,image/png'
multiple={true}
>
{({ getRootProps, getInputProps }) => {
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
{
<p className='fileDrop'>
Try dropping one or more files here
</p>
}
</div>
);
}}
</Dropzone>
CSS:
.fileDrop {
background: #f5f5f5;
border: 1px dashed #c2c2c2;
border-radius: 3px;
text-align: center;
padding: 36px;
font-family: "Montserrat", sans-serif;
font-size: 12px;
font-weight: 600;
}
.fileDrop:hover {
background: rgb(194, 243, 194);
border: 1px dashed #333;
}
I see two ways to achive your goal.
1st is with css like render a div with class hidden and on hover you display the content.
<Dropzone
onDrop={// do stuff here}
accept='image/jpg,image/jpeg,image/png'
multiple={true}
>
{({ getRootProps, getInputProps }) => {
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
{
<p className='hidden-text'>
Try dropping one or more files here
</p>
}
</div>
);
}}
</Dropzone>
.hidden-text {
display: none;
border: 1px solid green;
}
.hidden-text:hover {
display: block or whatever
border: 1px solid blue;
}
2nd is you write your own javascript event handler to render the text on hover.
HTML DOM Style backgroundImage Property for a Slider range
I have an slider range, I want to change it's background-image property using javascript. I tried the following script
document.getElementById("range").style.backgroundImage = "linear-gradient(to top,#fafa6e,#f9f96e,#f8f86e,#f6f76d,#f5f56d,#f4f46d,#f3f36d,#f1f26d,#f0f16c,#efef6c,#eeee6c,#eced6c,#ebec6c,#eaeb6b,#e8e96b,#e7e86b,#e6e76b,#e4e66b,#e3e46a,#e2e36a,#e0e26a,#dfe16a,#dedf6a,#dcde69,#dbdd69,#dadb69,#d8da69,#d7d969,#d5d868,#d4d668,#d2d568,#d1d368,#d0d267,#ced167,#cdcf67,#cbce67,#cacd67,#c8cb66,#c7ca66,#c5c866,#c3c766,#c2c566,#c0c465,#bfc365,#bdc165,#bcc065,#babe64,#b8bd64,#b7bb64,#b5ba64,#b3b864,#b2b663,#b0b563,#aeb363,#acb263,#abb063,#a9ae62,#a7ad62,#a5ab62,#a3a962,#a1a861,#a0a661,#9ea461,#9ca261,#9aa160,#989f60,#969d60,#949b60,#929960,#8f975f,#8d965f,#8b945f,#89925f,#87905e,#848e5e,#828c5e,#808a5e,#7d885e,#7b855d,#78835d,#76815d,#737f5d,#717d5c,#6e7a5c,#6b785c,#68755c,#65735b,#62705b,#5f6e5b,#5c6b5b,#59685a,#55665a,#51635a,#4e605a,#4a5d59,#455a59,#415659,#3c5359,#375058,#314c58,#2a4858)";
But it does not work. Can someone please gives me some hints how can I do it?
Here is the example that I am working on
https://codepen.io/am2222/pen/KKwZBNW
thanks
P.S: I do not want to use jquery or other js libraries
Converting what was done here from jQuery to vanilla js: how to add CSS to -webkit-slider-runnable-track using Javascript
You come to this:
var newScript = document.createElement("style");
var content = document.createTextNode(`input[type="range"]::-webkit-slider-runnable-track {
background-image: linear-gradient(to top,#fafa6e,#f9f96e,#f8f86e,#f6f76d,#f5f56d,#f4f46d,#f3f36d,#f1f26d,#f0f16c,#efef6c,#eeee6c,#eced6c,#ebec6c,#eaeb6b,#e8e96b,#e7e86b,#e6e76b,#e4e66b,#e3e46a,#e2e36a,#e0e26a,#dfe16a,#dedf6a,#dcde69,#dbdd69,#dadb69,#d8da69,#d7d969,#d5d868,#d4d668,#d2d568,#d1d368,#d0d267,#ced167,#cdcf67,#cbce67,#cacd67,#c8cb66,#c7ca66,#c5c866,#c3c766,#c2c566,#c0c465,#bfc365,#bdc165,#bcc065,#babe64,#b8bd64,#b7bb64,#b5ba64,#b3b864,#b2b663,#b0b563,#aeb363,#acb263,#abb063,#a9ae62,#a7ad62,#a5ab62,#a3a962,#a1a861,#a0a661,#9ea461,#9ca261,#9aa160,#989f60,#969d60,#949b60,#929960,#8f975f,#8d965f,#8b945f,#89925f,#87905e,#848e5e,#828c5e,#808a5e,#7d885e,#7b855d,#78835d,#76815d,#737f5d,#717d5c,#6e7a5c,#6b785c,#68755c,#65735b,#62705b,#5f6e5b,#5c6b5b,#59685a,#55665a,#51635a,#4e605a,#4a5d59,#455a59,#415659,#3c5359,#375058,#314c58,#2a4858)
}`);
newScript.appendChild(content);
document.getElementsByTagName("head")[0].appendChild(newScript);
You can just assign the current background color of your input slider in your css to a CSS variable and then use JavaScript to change that variable at anytime using the setProperty() method.
Check and run the following Code Snippet for a practical example of the above approach:
//assign the root element of your document to a variable
let root = document.documentElement;
//change the value of "--rangeColor" accordingly
root.style.setProperty('--rangeColor', "linear-gradient(to top,#fafa6e,#f9f96e,#f8f86e,#f6f76d,#f5f56d,#f4f46d,#f3f36d,#f1f26d,#f0f16c,#efef6c,#eeee6c,#eced6c,#ebec6c,#eaeb6b,#e8e96b,#e7e86b,#e6e76b,#e4e66b,#e3e46a,#e2e36a,#e0e26a,#dfe16a,#dedf6a,#dcde69,#dbdd69,#dadb69,#d8da69,#d7d969,#d5d868,#d4d668,#d2d568,#d1d368,#d0d267,#ced167,#cdcf67,#cbce67,#cacd67,#c8cb66,#c7ca66,#c5c866,#c3c766,#c2c566,#c0c465,#bfc365,#bdc165,#bcc065,#babe64,#b8bd64,#b7bb64,#b5ba64,#b3b864,#b2b663,#b0b563,#aeb363,#acb263,#abb063,#a9ae62,#a7ad62,#a5ab62,#a3a962,#a1a861,#a0a661,#9ea461,#9ca261,#9aa160,#989f60,#969d60,#949b60,#929960,#8f975f,#8d965f,#8b945f,#89925f,#87905e,#848e5e,#828c5e,#808a5e,#7d885e,#7b855d,#78835d,#76815d,#737f5d,#717d5c,#6e7a5c,#6b785c,#68755c,#65735b,#62705b,#5f6e5b,#5c6b5b,#59685a,#55665a,#51635a,#4e605a,#4a5d59,#455a59,#415659,#3c5359,#375058,#314c58,#2a4858)");
:root {
--rangeColor: #3071a9;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 100%;
cursor: pointer;
box-shadow: none;
background: var(--rangeColor);
border-radius: 1.3px;
border: 0.1px solid #010101;
}
<input id="range" type="range" />
How to set padding of Gatsby Link Component to 0px with styled-components
I have made some style changes to the Gatsby Link component using styled-components. However for some reason, when i try to apply a padding of 0px, it still leaves a tiny space (few px) above/below the text (between text and top/bottom border). I used gatsby-default-starter in a codesandbox for the initial build.
HTML/CSS Env (codepen.io):
https://codepen.io/marti2221/pen/mNVJWZ
Gatsby Env (codesandbox):
https://codesandbox.io/s/gatsby-paddinglink-spacing-gedtq
I have tried applying padding via styled-components in a Gatsby environment, as well as a normal html/css environment. When padding is set to 0px on the "a" tag in css/html environment, there is no space around the text, as expected. However when i attempt to add the same padding to the gatsby Link component or even a regular a tag, in a gatsby environment, there is a tiny space between the text and my border. This leads to a larger padding on top/bottom for my BtnLink than expected. I could adjust my padding accordingly, but i would like to know the root cause of this issue.
const StyledLink = styled(Link)`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
`
const StyledA = styled.a`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
`
const BtnLink = props => (
<StyledLink {...props}>{props.children}</StyledLink>
)
const IndexPage = () => (
<Layout>
<BtnLink to="page-2">Request Quote</BtnLink>
<StyledA href="page-2">Request Quotes</StyledA>
<Link to="page-2">Link</Link>
</Layout>
)
My desired result is a gatsby Link component that can be styled the same as a regular link element (ie. 0px padding). My result is link text with some spacing around it in the Gatsby environment. When tested with regular HTML/CSS, results are as expected (no spacing when padding is set to 0px)
You've already made a styled(Link) styledComponent, and saved it to the const StyledLink. const StyledLink = styled(Link)` display: inline-block; font-family: sans-serif; border-radius: 25px; padding: 0px; text-decoration: none; border: 2px solid green; However, this won't have any affect on a regular gatsby Link component. You still need to render this new StyledLink styledComponent instead of a gatsby Link component if you want to see that styled variation on your page. const IndexPage = () => ( <Layout> <BtnLink to="page-2">Request Quote</BtnLink> <StyledA href="page-2">Request Quotes</StyledA> <StyledLink to="page-2">Link</StyledLink> </Layout> )
expand div on click Polymer js without jquery
I'm using Polymer but I'm having some trouble with events and the such. I want to create an expanding search bar, similar to
My current code looks something like the following:
Code:
// This is where things are a little unclear for me. So far, I have tried the following:
expand: function() {
var divToStretch = this.$.stretchMe;
if ( /*search bar is open*/ ) {
//remove "stretched" css from "stretch" div
} else {
//add "stretched" css to "stretch" div
}
}
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
.stretched {
width: 500px;
}
<div class="stretch" id="stretchMe">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>
May I suggest a pure CSS alternative? You can make your search bar receive focus, by adding tabIndex="0". This way you can provide a style for div.stretch:focus, allowing you to dynamically change its size when the user clicks or focuses on the element and making it small again when the user focuses on something else.
It's really simple, elegant, does not need a lot of code and does what you need. Give it a try!
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
div.stretch:focus {
width: 500px;
}
<div class="stretch" id="stretchMe" tabIndex="0">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>
Alternatively, you can make it do the same thing on :hover, if that's what you are after, simply by changing the selector. Or combine both, if you prefer. Below is a :hover example.
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
div.stretch:hover {
width: 500px;
}
<div class="stretch" id="stretchMe">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>
You can use the toggle method of the classList for this:
expand : function() {
this.$.stretchMe.classList.toggle('stretched');
}
The classic way would be as following:
if (/*search bar is open*/) {
divToStretch.style.width = "auto";
} else {
divToStretch.style.width = "500px";
}
But I highly recommend using this.$.stretchMe.classList.toggle('stretched');
Read more here