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" />
Related
I would like to be able to update a CSS variable via JS, but when I make the variable update the CSS pseudo element get's destroyed (i.e. just disappears).
Here's the SCSS code:
:root {
--test-thing: "";
}
.folder-1-open span::after {
width: 90%;
height: 85%;
bottom: 0;
left: 5%;
background-color: #fff;
z-index: 3;
content: var(--test-thing);
}
I'm trying to manipulate the variable thusly:
const root = document.documentElement
root.style.setProperty('--test-thing', "Hello World")
The CSS above works perfectly fine on the element (a label) that it's applied to, basically just a white square, but as soon as I try and update the CSS variable --test-thing to add a string via the content prop, the whole thing just disappears.
Is it not possible to do this with a pseudo element or class?
From researching related posts on SO, my understanding was that this was possible using CSS variables.
For context, I’m working off this example of a pure CSS interactive folder (when it’s open is when I’d like to update content proper dynamically).
Ok, I figured out why this is happening, sort of. Still not 100% sure why, but it has something to do with the fact that the new value isn't in quotes. Just put the value in quotes and it works fine.
const root = document.documentElement
root.style.setProperty('--test', "'Hello World'") // <-- this needs to be in quotes
:root {
--test: "";
}
#test {
height: 100px;
width: 100px;
background: #ccc;
}
#test:after {
content: var(--test);
min-width: 100px;
background: #000;
min-height: 30px;
color: #fff;
}
<div id="test">
</div>
My brain is going crazy on figuring out how to modify the background color within a div that has a class, with an inline style controlling the color of the div.
I'd like to know how I would be able to change the background color from within one div but leave the other div's background color intact. As you can see, the div's contain the same class names, but the inline style color is what I'm trying to update. I'm also unable to modify the structure of the html page, otherwise, this would be a piece of cake.
With a css class I can write something like this to look at the current class and replace it with another class but In this situation this isn't an option since this syntax would change all the divs with the similar divs.
$('.tx-cal-event').toggleClass({"sx-abc-event"});
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(182, 232, 198);"></div>
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(128, 128, 128);"></div>
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(166, 166, 166);"></div>
I imagine to somehow identify the one color in a div and make it transparent via a button. I have the button variable but its the actual syntax for changing the color when it is referenced in an inline style element.
Any help would be appreciated.
Based on the code pen snippet I modified the selector to use the pseudo selector. This snippet hides the other two divs and retains the styling for the 1st one.
Code Pen link :https://codepen.io/charanrajgolla/pen/MQeYmB
More information about n-th Child can be found over here: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
Code Sample :
$(document).ready(function() {
$("button").click(function() {
$(this).parents('.dimensions').find('p:nth-child(2n+1), p:last-child').fadeToggle(700);
});
});
/* This is the css in question */
.tx-cal-event {
color: black;
font-family: "ABeeZee";
}
.sx-abc-event {
font-size:100%;
background-color: #CCC!important;
border-radius: 2px;
overflow: hidden;
}
.nx-cal-event-month {
padding: 20px;
border-radius: 3px;
}
/* this css is for formatting of the elements and not important in finding what is being asked for */
body {
background-color: #000;
font-size: 80%;
color: black;
}
.dimensions {
width: 300px;
margin: 0 auto;
padding-top: 20px;}
.btn-css {
background: rgb(0,112,210);
color: white;
padding: 10px 20px 10px 20px;
border: none;
border-radius: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dimensions">
<button class="btn-css">Click Button</button>
<p class="tx-cal-event nx-cal-event-month" style="background-color: rgb(182, 232, 198);">
If I click the button, 1 and 2 should be hidden, but this row should remain visible, alongwith keeping the background-color value of <br>rgb(182, 232, 198).</p>
<p class="tx-cal-event nx-cal-event-month" style="background-color: rgb(128, 128, 128);">1. This Should Dissappear</p>
<p class="tx-cal-event nx-cal-event-month" style="background-color: rgb(166, 166, 166);">2. This Should Dissappear</p>
</div>
you can try
$('#tx-cal-event').css({'background-color':'transparent'});
Try below jquery:
$('.tx-cal-event').css('background-color', 'transparent !important');
Or define this css in you class like below
<style>
.bg-none{
$background-color: transparent !important;
}
</style>
// Then in your javascript
<script>
$('.tx-cal-event').addClass('bg-none');
</script>
Change background-color to initial using css() jQuery. No need to use !important
Stack Snippet
$("div.nx-cal-event.nx-cal-event-month").css({
"background-color": "initial"
});
.nx-cal-event.nx-cal-event-month {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(222, 174, 234);"></div>
To remove the inline style property use css method with an empty string as second parameter:
Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. As a consequence, the element's style for that property will be restored to whatever value was applied.
Usage
$('.tx-cal-event').css('background-color', '');
I'm trying to figure out if it's possible to read a div's margins with JavaScript if those margins are set in external css file.
So far I am able to read div's margin data when it is written as an inline style (not in CSS file but inside HTML):
(function() {
var banner = document.getElementById('banner');
var move = document.getElementById('box');
banner.onclick = function() {
alert(move.style.marginLeft);
};
})();
Here is JSFiddle:
https://jsfiddle.net/b0kaLk1f/
It works well but just remove style="margin-left: 500px" and it will stop working. I'd like to read CSS data from style.css file rather than from inline styles.
The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.
(function() {
var banner = document.getElementById('banner');
var move = document.getElementById('box');
banner.onclick = function() {
var style = window.getComputedStyle(move, null);
alert(style.marginLeft);
};
})();
#box {
margin-left: 500px;
-webkit-transition: 0.5s;
transition: 0.5s;
background: #af0000;
width: 500px;
height: 300px;
}
#banner {
border: solid 1px #000;
overflow: hidden;
width: 500px;
height: 300px;
}
<div id="banner">
<div id="box"></div>
</div>
Essentially you are trying to maintain state in the form of style properties, which is not a good idea. You will have to retrieve them and set them. Instead, use a class to move the extended banner back and forth. The code is shorter and simpler:
banner.onclick = function () {
ext.classList.toggle('hide_extended_banner');
};
See https://jsfiddle.net/b0kaLk1f/2/.
I am currently doing some styling and have thought up an interesting way to do something. I want to create a piece of text that stands out among every other bit of text on the page. Below you can see the way I've done this.
var el = document.querySelectorAll('span[class^=impact]')[0],
col = el.className.split('-')[1];
el.style.textShadow = '2px 2px 0 #' + col;
html, body {
width: 100%;
height: 100%;
margin: 0;
background-image: url('http://i.imgur.com/UxB7TDq.jpg');
}
[class^=impact] {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: Impact, sans-serif;
font-size: 72pt;
font-weight: 800;
text-transform: uppercase;
}
<span class="impact-008080">impact</span>
As you can see I'm basically getting the first half of the class and applying styles to it and grabbing the second half of the class in JavaScript and applying the shadow then. What I want to do is omit the JavaScript completely and keep it all in CSS.
I do not have a list of colours. Any and all hex colours are supported obviously. I would prefer to keep this format.
CSS attr
Theoretically, this type of thing is what the CSS attr property could be used for when browser support exists. Note that this won't work now, but when browser support does exist, it might look something like this:
HTML
<span class="impact" data-shadow="#008080">Impact</span>
CSS
.impact {
/* you text and positioning styles here */
text-shadow: 2px 2px attr(data-shadow);
}
You can read more about the attr property here:
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
But for now...
Your best bet is probably to continue to use JavaScript, but instead of appending the hex code to the class name, store the hex value in a data attribute of the element, allowing you to keep the class name consistent for all instances of that element.
HTML
<span class="impact" data-shadow="#fff">Impact</span>
CSS
.impact {
/* your text and position styles here */
}
JS
var el = document.querySelector(".impact"),
shadow = el.dataset.shadow;
el.style.textShadow = '2px 2px ' + shadow;
Here's a JSFiddle for reference: http://jsfiddle.net/galengidman/xx6r1n2o/
I am using:
document.getElementsByClassName("topbar")[0].style.background = "#FFFFFF";
The StackOverflow topbar CSS is
.topbar {
width: 100%;
background: #2f2f2f;
background: rgba(0,0,0,0.86);
height: 34px;
line-height: 1;
}
so why isn't it working? My Javascript code does nothing! I'm new to Javascript, so please be easy on me:)
OK, I'm very curious what you might be trying to achieve here, but to answer your question, background is a property of the style object:
document.getElementsByClassName("topbar")[0].style.background = "#FFFFFF";
Since you mention Chrome, you can use querySelector and .style to change the background color:
document.querySelector(".topbar").style.background = "#FFFFFF";