I want change box-shadow sitting with range value like this code:
function cssV(){
var x1 = document.getElementById("range1").value;
var x2 = document.getElementById("range2").value;
var x3 = document.getElementById("range3").value;
var x4 = document.getElementById("range4").value;
var dic = document.getElementById("test").style;
/* dic.boxShadow=x1+"px" x2+"px" x3+"px" x4+"px" green;*/
}
#test{
width:100px;
height:100px;
background-color: red;
box-shadow: 0px 0px 22px 10px green;
}
<input type="range" name="range1" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range1"/>
<input type="range" name="range2" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range2"/>
<input type="range" name="range3" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range3"/>
<input type="range" name="range4" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range4"/>
<div id="test"></div>
You can set Box shadow using css property of jquery as below.
Make sure you add jquery in your code.
function cssV(){
var x1 = document.getElementById("range1").value;
var x2 = document.getElementById("range2").value;
var x3 = document.getElementById("range3").value;
var x4 = document.getElementById("range4").value;
$("#test).css('box-shadow' , "inset " + x1 +"px " + x2+"px "+ x3+"px "+ x4+"px " + "green");
}
Check out this working plunker
dic.boxShadow = x1 + "px " + x2 + "px " + x3 + "px " + x4 + "px " + "green";
Related
I try to build a boxShadow generator, where the user can add multiple layers of boxShadow. Anything like the example below:
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
What I have so far:
A constructor function, which creates my shadows.
function Shadow(paramId) {
this.shadowId = paramId;
this.horizontalValue = 'horizontalRange' + paramId;
this.verticalValue = 'verticalRange' + paramId;
this.blurValue = 'blurRange' + paramId;
this.spreadValue = 'spreadRange' + paramId;
this.colorValue = 'colorInput' + paramId;
}
...and a function, which gets the value of the sliders:
function getRangeValue () {
const shadowBox = document.getElementById('shadowBox');
let shadowId = this.id.slice(this.id.length - 1, this.id.length) - 1; // my Id's are like xOffset1
let xValue = document.getElementById(shadowObjContainer[shadowId].horizontalValue).value;
let yValue = document.getElementById(shadowObjContainer[shadowId].verticalValue).value;
let blurValue = document.getElementById(shadowObjContainer[shadowId].blurValue).value;
let spreadValue = document.getElementById(shadowObjContainer[shadowId].spreadValue).value;
let colorValue = document.getElementById(shadowObjContainer[shadowId].colorValue).value;
shadowParam = `${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
shadowBox.style.boxShadow = shadowParam;
}
It does work, that my sliders do what they are supposed to do. But I don't know, how to create another shadow parameter (", " + shadowParam).
Hopefully someone can help me.
Thank you :)
A working example to work on was helpful. I hypothesized your environment and this is my commented idea.
// The class with all controls for each shadows
let Control = class {
constructor(paramId) {
this.shadowId = paramId;
this.horizontalValue = 'horizontalRange' + paramId;
this.verticalValue = 'verticalRange' + paramId;
this.blurValue = 'blurRange' + paramId;
this.spreadValue = 'spreadRange' + paramId;
this.colorValue = 'colorInput' + paramId;
}
}
// Generates the shadow for each initialized Control class
function getRangeValue() {
const shadowBox = document.getElementById('shadowBox');
let shadowParam = '';
for (let i = 0; i < Controls.length; i++) {
let shadowId = Controls[i].shadowId;
let xValue = document.getElementById(Controls[i].horizontalValue).value;
let yValue = document.getElementById(Controls[i].verticalValue).value;
let blurValue = document.getElementById(Controls[i].blurValue).value;
let spreadValue = document.getElementById(Controls[i].spreadValue).value;
let colorValue = document.getElementById(Controls[i].colorValue).value;
shadowParam = (shadowParam == '' ? '' : shadowParam + ', ') + `${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
}
shadowBox.style.boxShadow = shadowParam;
}
// Initialization of the Control classes based on the "group" of controls named "ShadowControls"
let ShadowControlsEl = document.getElementsByClassName("ShadowControls");
let Controls = Array();
for (let i = 0; i < ShadowControlsEl.length; i++) {
Controls.push(new Control(i + 1));
}
// Generate the first Shadows
getRangeValue();
// Initialize listeners for values change
let AllControls = document.getElementsByClassName('listener');
for (let i = 0; i < AllControls.length; i++) {
AllControls[i].addEventListener('change', getRangeValue);
}
#shadowBox {
width: 100px;
height: 100px;
margin: 50px;
background-color:#ff00ff;
}
<div class="ShadowControls">
<input id="horizontalRange1" class="listener" type="range" min="-100" max="100" value="10">
<input id="verticalRange1" class="listener" type="range" min="-100" max="100" value="10">
<input id="blurRange1" class="listener" type="range" min="0" max="100" value="0">
<input id="spreadRange1" class="listener" type="range" min="0" max="100" value="0">
<input id="colorInput1" class="listener" type="color" value="#FF0000">
</div>
<hr>
<div class="ShadowControls">
<input id="horizontalRange2" class="listener" type="range" min="-100" max="100" value="-10">
<input id="verticalRange2" class="listener" type="range" min="-100" max="100" value="-10">
<input id="blurRange2" class="listener" type="range" min="0" max="100" value="0">
<input id="spreadRange2" class="listener" type="range" min="0" max="100" value="0">
<input id="colorInput2" class="listener" type="color" value="#FFFF00">
</div>
<div id="shadowBox">
Shadow here
</div>
I'm working on a Javascript RGB Color Picker and struggling with the front-end.
A RGB Color Picker results in a color that exists within the combination of three values (R,G,B), with each value having a range of 0 - 255.
This is my project so far, it allows an user to pick a combination from a range selection but it doesn't showcase the value that he picked.
<body>
<div class="picker">
Red <input type="range" min="0" max="255" step="1" id="red" value="115">
Green <input type="range" min="0" max="255" step="1" id="green" value="10">
Blue <input type="range" min="0" max="255" step="1" id="blue" value="162">
<div id="display"></div>
</div>
<script type="text/javascript">
var input = document.querySelectorAll("input");
for (var i = 0; i < input.length; i++) {
input[i].addEventListener("input",
function () {
var
red = document.getElementById("red").value,
green = document.getElementById("green").value,
blue = document.getElementById("blue").value;
var display = document.getElementById("display");
display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")";
}
);
}
</script>
</body>
How do I showcase the selected value from the range selection so that the user knows the combination he is selecting?
I'm new to JS, HTML and CSS so I have no idea what I'm supposed to do.
By default, a div's size is 0 by 0. You just need to add some style to the display to give it some size, then the background will be visible:
<body>
<div class="picker">
Red <input type="range" min="0" max="255" step="1" id="red" value="115">
Green <input type="range" min="0" max="255" step="1" id="green" value="10">
Blue <input type="range" min="0" max="255" step="1" id="blue" value="162">
<div id="display" style="height: 50px; width: 50px;"></div>
</div>
<script type="text/javascript">
var input = document.querySelectorAll("input");
for (var i = 0; i < input.length; i++) {
input[i].addEventListener("input",
function () {
var
red = document.getElementById("red").value,
green = document.getElementById("green").value,
blue = document.getElementById("blue").value;
var display = document.getElementById("display");
display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")";
}
);
}
</script>
</body>
I am trying to build a JavaScript colour picker on my website. It currently works correctly, but I want it to also write the hex value. The hex converter also works fine, but I think I'm having trouble with the actual converting parameters. Take a look at this.
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
var input = document.querySelectorAll("input");
for (var i = 0; i < input.length; i++) {
input[i].addEventListener("input", function() {
var red = document.getElementById("red").value,
green = document.getElementById("green").value,
blue = document.getElementById("blue").value;
var display = document.getElementById("display");
display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")";
document.write(rgbToHex(red + ", " + green + ", " + blue));
});
}
<div id="tools">
<div class="picker">
<P>Red</P> <input type="range" min="0" max="255" step="1" id="red" value="115">
<p>Green</p> <input type="range" min="0" max="255" step="1" id="green" value="10">
<p>Blue</p> <input type="range" min="0" max="255" step="1" id="blue" value="162">
<div id="display"></div>
</div>
It should actually write the hex value to the document, but that does not seem to be working.
Thanks,
Rat (Joey)
Try this if it helps:
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
var input = document.querySelectorAll("input");
for (var i = 0; i < input.length; i++) {
input[i].addEventListener("input", function() {
var red = document.getElementById("red").value,
green = document.getElementById("green").value,
blue = document.getElementById("blue").value;
var display = document.getElementById("display");
display.style.color = "rgb(" + red + ", " + green + ", " + blue + ")";
display.innerHTML = rgbToHex(red , green , blue);
});
}
<div id="tools">
<div class="picker">
<P>Red</P> <input type="range" min="0" max="255" step="1" id="red" value="115">
<p>Green</p> <input type="range" min="0" max="255" step="1" id="green" value="10">
<p>Blue</p> <input type="range" min="0" max="255" step="1" id="blue" value="162">
<div id="display" style = "width:50px; height:50px"></div>
</div>
Hi I'm working on a project where I have four range sliders
every slider change a single css property of the html element (in particular a single webkit filter to everything)
I have:
hue
blur
grayscale
invert
now:
when I use a single slider it's all ok
but when i leave the slider and I use another one it set only one parameter to the style, writing over the previous
here an example of the code
HTML: this is one of the sliders
<section id="filters" class="clearfix">
<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)">
</section>
JS: these are the functions
//filters
//hue
function hueFunction(hueVal) {
var setAs = hueVal + "deg";
document.getElementById("html").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")");
}
//blur
function blurFunction(blurVal) {
var setAs = blurVal + "px";
document.getElementById("html").setAttribute("style", "-webkit-filter:blur(" + setAs + ")");
}
//grayscale
function grayscaleFunction(grayscaleVal) {
var setAs = grayscaleVal + "%";
document.getElementById("html").setAttribute("style", "-webkit-filter:grayscale(" + setAs + ")");
}
//invert
function invertFunction(invertVal) {
var setAs = invertVal + "%";
document.getElementById("html").setAttribute("style", "-webkit-filter:invert(" + setAs + ")");
}
I would like to use every sliders together
Check this.
//filters
//hue
function hueFunction(hueVal) {
apply_filter('hue-rotate', hueVal + 'deg');
}
//blur
function blurFunction(blurVal) {
apply_filter('blur', blurVal + 'px');
}
//grayscale
function grayscaleFunction(grayscaleVal) {
apply_filter('grayscale', grayscaleVal + '%');
}
//invert
function invertFunction(invertVal) {
apply_filter('invert', invertVal + '%');
}
var apply_filter = function (fil, val) {
var filter = document.getElementById('html').style.filter.trim().split(' ').filter(function (a) { return a.trim(); });
var f = false;
filter.forEach(function (v, i) {
if (v.indexOf(fil) === 0) {
filter[i] = fil + '(' + val + ')';
f = true;
}
});
if (f === false) filter.push(fil + '(' + val + ')');
document.getElementById('html').style.filter = filter.join(' ');
};
#filters > input {
display: block;
}
#html {
height: 80px;
width: 80px;
border: 1px solid #000;
background-color: #F00;
}
<section id="filters" class="clearfix">
<label for="hue-rotate">Hue</label>
<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)">
<label for="blur-rotate">Blur</label>
<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="blur-rotate" oninput="blurFunction(this.value)">
<label for="gray-rotate">Grayscale</label>
<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="gray-rotate" oninput="grayscaleFunction(this.value)">
<label for="invert-rotate">Invert</label>
<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="invert-rotate" oninput="invertFunction(this.value)">
</section>
<div id="html"></div>
The filters work in unison in Firefox (43.0.1), but not in Chrome (57.0.2987.133). In Chrome, when I move my mouse over another slider, the previous slider's adjustments are removed. There is a similar question regarding image filters, but it does apply to the Firefox vs. Chrome issue.
var degrees=0;
var percentB=100;
var percentC=100;
function setValues() {
form1.brightness.value=100;
form1.contrast.value=100;
form1.hue.value=0;
}
function bright() {
percentB=form1.brightness.value;
document.getElementById("I").style.filter="brightness("+parseInt(percentB)+"%)"+" contrast("+parseInt(percentC)+"%)"+" hue-rotate("+parseInt(degrees)+"deg)";
}
function cont() {
percentC=form1.contrast.value;
document.getElementById("I").style.filter="brightness("+parseInt(percentB)+"%)"+" contrast("+parseInt(percentC)+"%)"+" hue-rotate("+parseInt(degrees)+"deg)";
}
function hues() {
degrees=form1.hue.value;
document.getElementById("I").style.filter="brightness("+parseInt(percentB)+"%)"+" contrast("+parseInt(percentC)+"%)"+" hue-rotate("+parseInt(degrees)+"deg)";
}
<img src="xbutterfly.jpg" alt="Colorful Flowers" width="800" height="533" id="I" /><br><br>
<form name="form1" id="form1id" style="font-size:90%; text-align:center;">
Brightness: <input type="range" name="brightness" min="0" max="200" step="5" onmousemove="bright()" style="vertical-align:-7px;" /> Contrast: <input type="range" name="contrast" min="0" max="200" step="5" onmousemove="cont()" style="vertical-align:-7px;"
/> Hue: <input type="range" name="hue" min="0" max="360" step="5" onmousemove="hues()" style="vertical-align:-7px;" />
</form>
After fighting with this for 2 hours, I finally saw a solution after posting the question: combining everything into one function.
New HTML:
<img src="xbutterfly.jpg" alt="Colorful Flowers" width="800" height="533" id="I" /><br><br>
<form name="form1" id="form1id" style="font-size:90%; text-align:center;">
Brightness: <input type="range" name="brightness" min="0" max="200" step="5" onmousemove="apply()" style="vertical-align:-7px;" />
Contrast: <input type="range" name="contrast" min="0" max="200" step="5" onmousemove="apply()" style="vertical-align:-7px;"/>
Hue: <input type="range" name="hue" min="0" max="360" step="5" onmousemove="apply()" style="vertical-align:-7px;"/>
</form>
New JavaScript:
<script type="text/javascript">
<!--
var degrees = 0;
var percentB = 100;
var percentC = 100;
function setValues()
{
form1.brightness.value = 100;
form1.contrast.value = 100;
form1.hue.value = 0;
}
function apply()
{
degrees = form1.hue.value;
percentC = form1.contrast.value;
percentB = form1.brightness.value;
document.getElementById("I").style.filter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " hue-rotate(" + parseInt(degrees) + "deg)";
document.getElementById("I").style.WebkitFilter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " hue-rotate(" + parseInt(degrees) + "deg)"; // Not tested as I don't have these browsers. Used for older versions of Safari, Chrome, and Opera per https://www.w3schools.com/jsref/prop_style_filter.asp
}
-->
</script>