Develop Reference

How to use :root, instead of a class [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 11 months ago.
Improve this question
I want to use :root instead of a class here, how would I do that here?
Is this something that I am able to do?
That is all, or everything I am trying to do in the code.
This is what :root is.
:root {
}
And this is the working code I have. https://jsfiddle.net/s6xocny3/
How would I be able to do that if it is possible?
Can this one be updated and fixed? Can it be modified?
https://stackoverflow.com/a/71656076/17974392
Also, I am not using setInterval.
(function randomBackground() {
const classNames = [
"bg1",
"bg2",
"bg3",
"bg4",
"bg5",
"bg6",
"bg7",
"bg8",
"bg9"
];
const random = Math.floor(Math.random() * classNames.length);
document.querySelector("body").classList.add(classNames[random]);
}());
.bg1 {
--color-a: linear-gradient(120deg, #155799, #159957);
}
.bg2 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg3 {
--color-a: linear-gradient(45deg, #102eff, #d2379b);
}
.bg4 {
--color-a: linear-gradient(90deg, #360033 30%, #0b8793 100%);
}
.bg5 {
--color-a: linear-gradient(115deg, #0a0e88, #00b1ce);
}
.bg6 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg7 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg8 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg9 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: var(--color-a);
background-repeat: no-repeat;
}

Set into :root, your color vars, then change the background-image: var(--color-a); with the random color.
(function randomBackground() {
const varNames = [
"color-a",
"color-b",
"color-c"
];
const random = Math.floor(Math.random() * varNames.length);
document.body.style.backgroundImage = 'var(--' + varNames[random] + ')';
}());
:root {
--color-a: linear-gradient(120deg, #155799, #159957);
--color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
--color-c: linear-gradient(45deg, #102eff, #d2379b);
/* ... */
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: var(--color-a);
background-repeat: no-repeat;
}

You can redefine the value of a custom css property using setProperty. For example:
document
.documentElement
.style
.setProperty('--dynamic-background', bgs[random]);
Here's a snippet similar to you that only uses 1 custom css property and updates its value through javascript:
function randomBackground() {
const bgs = [
"linear-gradient(120deg, #155799, #159957)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(45deg, #102eff, #d2379b)",
"linear-gradient(90deg, #360033 30%, #0b8793 100%)",
"linear-gradient(115deg, #0a0e88, #00b1ce)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
]
const random = Math.floor(Math.random() * bgs.length);
document
.documentElement
.style
.setProperty('--dynamic-background', bgs[random]);
};
randomBackground();
:root {
--dynamic-background: linear-gradient(120deg, lime, red);
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: var(--dynamic-background);
background-repeat: no-repeat;
}

Javascript Can't Update Gradient

I can't seem to update the linear gradient I've applied to my navbar. It works fine when I
set it in my css file like so
.navbar-light {
background-image: linear-gradient(rgba(255, 204, 153, 1), 75%, rgba(255, 204, 153, 0));
}
But it doesn't seem to work through Javascript even though I can set other attributes within the same function like so
function myFunc() {
var nav = document.getElementById("myNavbar");
nav.style.backgroundImage = "linear-gradient(rgba(255, 204, 153, 1), 90%, rgba(255, 204, 153, 0));"
console.log(nav.style.backgroundImage);
}
What am I doing wrong here?

eh those semicolons :P
(function myFunc() {
var nav = document.getElementById("myNavbar");
nav.style.backgroundImage = "linear-gradient(rgba(255, 204, 153, 1), 90%, rgba(255, 204, 153, 0))" // look on your code here
})()
.navbar-light {
background-image: linear-gradient(rgba(255, 204, 153, 1), 75%, rgba(255, 204, 153, 0));
}
div.box{
width: 100px;
height: 100px;
border: 1px solid black;
}
<div class="box navbar-light"> 1 </div>
<div id="myNavbar" class="box"/> 2 </div>

Regular expression to match linear-gradient and its content from a string

I get computed background style of an element and the result is like this:
rgba(0, 0, 0, 0) linear-gradient(45deg, rgba(126, 47, 182, 0) 0%, rgba(126, 47, 182, 0) 25%, rgba(249, 71, 157, 0) 80%, rgba(249, 71, 157, 0) 100%) repeat scroll 0% 0% / auto padding-box border-box
What regular expression can I use to match only linear-gradient(45deg, rgba(126, 47, 182, 0) 0%, rgba(126, 47, 182, 0) 25%, rgba(249, 71, 157, 0) 80%, rgba(249, 71, 157, 0) 100%)

Try the regex:
linear-gradient\([^(]*(\([^)]*\)[^(]*)*[^)]*\)
See demo in https://regex101.com/

jQuery - mousemove for Mobile

I am trying to recreate the same effect showed below on mobile devices.
I have tried to use .vmousemove however, the div only move when I touch and realise. What I am trying to achieve is that the div follows the finger movement on screen.
Is this something possible to achieve with jQuery?
Also I can I centre the mouse in the middle of the div?
$('#cont').mousemove(function(e) {
var offs = $(this).offset(),
p = {
x: offs.left,
y: offs.top
},
mPos = {
x: e.pageX,
y: e.pageY
},
x = mPos.x - p.x - 100,
y = mPos.y - p.y - 100;
$('.gray', this).css({
left: x,
top: y,
backgroundPosition: -x + 'px ' + -y + 'px'
});
});
#cont {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.gray {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: url('img/grid.png');
opacity: 0.9;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5defb2+0,edd92d+46,d156ea+57,7eea9b+100 */
background: rgb(93, 239, 178);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5defb2', endColorstr='#7eea9b', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="cont">
<div class="gray"></div>
</div>

var timer;
$('#cont').mousemove(function(e) {
timer = window.setTimeout(function() {
var offs = $(this).offset(),
p = {
x: offs.left,
y: offs.top
},
mPos = {
x: e.pageX,
y: e.pageY
},
x = mPos.x - p.x - 100,
y = mPos.y - p.y - 100;
$('.gray', this).css({
left: x,
top: y,
backgroundPosition: -x + 'px ' + -y + 'px'
});
},10000)
return false;
})
I am not sure if it works or not just idea

Slider Bar with Trail?

I would like there to be an orange gradient trail behind the slider bar as it moves. Here's the fiddle.
Orange Gradient Code:
background: linear-gradient(to bottom, rgba(241,194,16,1) 0%,rgba(239,192,14,1) 11%,rgba(243,186,17,1) 29%,rgba(242,181,15,1) 39%,rgba(243,172,18,1) 57%,rgba(241,168,14,1) 68%,rgba(244,164,17,1) 79%,rgba(240,158,20,1) 100%);
The finished version should look like this, and I only want it through JavaScript or jQuery and HTML/CSS.

How's this?
$(function() {
$(".vHorizon").change(function() {
var slider = $(this);
var min = slider.prop('min');
var max = slider.prop('max');
if (!min) min = 0;
if (!max) max = 100;
var percent = (slider.val() - min) / (max - min);
var cover = slider.next();
var coverWidth = cover.attr('mwidth');
cover.css('width', 'calc(' + percent + ' * ' + coverWidth + ')');
});
$(".vHorizon").change();
});
input[type=range].vHorizon,
.vHorizonCover {
-webkit-appearance: none;
background-color: #8a9398;
height: 26px;
width: 590px;
margin: 65px 0 0 5px;
border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-image: url("http://i.imgur.com/ZmVoXyE.png?1");
background-repeat: no-repeat;
width: 20px;
height: 52px;
}
.vHorizonContainer {
position: relative;
}
.vHorizonCover {
position: absolute;
top: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba(241, 194, 16, 1) 0%, rgba(239, 192, 14, 1) 11%, rgba(243, 186, 17, 1) 29%, rgba(242, 181, 15, 1) 39%, rgba(243, 172, 18, 1) 57%, rgba(241, 168, 14, 1) 68%, rgba(244, 164, 17, 1) 79%, rgba(240, 158, 20, 1) 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='vHorizonContainer'>
<input type="range" class="vHorizon" />
<div class='vHorizonCover' mwidth='590px'></div>
</div>
It won't work as well in IE 10 or earlier (the css pointer-events property is not supported).
I created a div to cover the slider, and changed its width using jQuery based on the slider's value.