Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have prepared a complete example for my question -
Screenshot with a div and 3 jQuery UI sliders:
HTML code:
<div id="myCanvas"></div>
<p>Select background color:
<span id="swatch"></span>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</p>
CSS code:
#myCanvas {
background: radial-gradient(#FFFFFF, #99CC99);
width: 300px;
height: 60px;
}
#red,
#green,
#blue {
width: 300px;
margin: 15px;
}
#swatch {
padding: 10px;
margin: 5px;
color: #FFF;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}
#green .ui-slider-range {
background: #8ae234;
}
#green .ui-slider-handle {
border-color: #8ae234;
}
#blue .ui-slider-range {
background: #729fcf;
}
#blue .ui-slider-handle {
border-color: #729fcf;
}
JavaScript code:
jQuery(document).ready(function($) {
$('#selectable').selectable();
$('#kukuSlider').slider();
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = '0' + val;
}
});
return hex.join('').toUpperCase();
}
function refreshSwatch() {
var red = $('#red').slider('value'),
green = $('#green').slider('value'),
blue = $('#blue').slider('value'),
hex = '#' + hexFromRGB(red, green, blue);
$('#swatch').text(hex);
$('#swatch').css('background-color', hex);
// why does not the following line work?
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ');');
console.log('background: ' + $('#myCanvas').css('background'));
}
$('#red, #green, #blue').slider({
orientation: 'horizontal',
range: 'min',
slide: refreshSwatch,
change: refreshSwatch,
max: 255,
value: 127
});
$('#red').slider('value', 255);
$('#green').slider('value', 140);
$('#blue').slider('value', 60);
});
Problem:
The background color of #myCanvas div does not change, eventhough I call
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ');');
And I have also tried calling similar code but with a colon:
$('#myCanvas').css('background: radial-gradient(#FFFFFF, ' + hex + ');');
At the same time the background color of the #swatch span changes just fine.
Simple answer: you included the ; at the end of the CSS rule. Remove it.
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ')');
jQuery(document).ready(function($) {
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = '0' + val;
}
});
return hex.join('').toUpperCase();
}
function refreshSwatch() {
var red = $('#red').slider('value'),
green = $('#green').slider('value'),
blue = $('#blue').slider('value'),
hex = '#' + hexFromRGB(red, green, blue);
$('#swatch').text(hex);
$('#swatch').css('background-color', hex);
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ')');
}
$('#red, #green, #blue').slider({
orientation: 'horizontal',
range: 'min',
slide: refreshSwatch,
change: refreshSwatch,
max: 255,
value: 127
});
$('#red').slider('value', 255);
$('#green').slider('value', 140);
$('#blue').slider('value', 60);
});
#myCanvas {
background: radial-gradient(#FFFFFF, #99CC99);
width: 300px;
height: 60px;
}
#red,
#green,
#blue {
width: 300px;
margin: 15px;
}
#swatch {
padding: 10px;
margin: 5px;
color: #FFF;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}
#green .ui-slider-range {
background: #8ae234;
}
#green .ui-slider-handle {
border-color: #8ae234;
}
#blue .ui-slider-range {
background: #729fcf;
}
#blue .ui-slider-handle {
border-color: #729fcf;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="myCanvas"></div>
<p>
Select background color:
<span id="swatch"></span>
</p>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
Also note that you cannot have block level elements, such as div, inside inline elements, such as p.
Related
I have this modal, and would like to make many of them on the same page. I tried a lot, but nope. Any idea how to do this? Thanks.
Here the code:
HTML
<div class="containerofelements">
<div id="s2-01" class="resizeratio">1.00</div>
<div id="s-wrap" class="wrap" style="transform: scale(0.04);">
<div class="elements" style="transform: scale(0.04);">
<div id="s-rr"class="resizeratio">0.04</div>
<div id="s-001" class="slider16" midicc="1, 80" colour="#ff3300"></div>
</div>
</div>
</div>
CSS
.containerofelements {
}
.resizeratio {
display: inline-block;
cursor: pointer;
border-style: solid;
color: red;
width: 50px;
height: 20px;
}
.wrap {
background-color: rgba(0, 80, 128, 1);
transform-origin: 1880px 0;
}
.elements {
width: 1600px;
height: 800px;
transform-origin: 1880px 0;
}
JS
$(document).ready(function() {
$(".resizeratio").click(function() {
var el = $('.elements');
var scale = $(this).text();
el.css({
transform: "scale(" + scale + ")"
});
});
});
$(document).ready(function() {
$(".resizeratio").click(function() {
var el = $('.wrap');
var scale = $(this).text();
el.css({
transform: "scale(" + scale + ")"
});
});
});
I tried to apply separate names, IDs, but no good results without replicating everything which is not a good practice I suppose, a waste of code.
I got these lines of code and want to add them only to a specific div class. So if the background is dark it should be filter: invert(1); and when the background is brighter filter: invert(0);. How can I do that? Hope you can help me...I'm still at the very beginning of understanding js.
function isDark( color ) {
var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
return ( match[1] & 255 )
+ ( match[2] & 255 )
+ ( match[3] & 255 )
< 3 * 256 / 2;
}
$('div').each(function() {console.log($(this).css("background-color"))
$(this).css("filter", isDark($(this).css("background-color")) ? 'invert(1)' : 'invert(0)');
});
You can check the condition separately in an if else statement as below.
$('div').each(function() {
var color = $(this).css("background-color");
if (isDark(color)) {
$(this).css("filter", 'invert(1)');
} else {
$(this).css("filter", 'invert(0)');
}
});
OR
if you want a css class to be added, you can do it as below
$('div').each(function() {
var color = $(this).css("background-color");
if (isDark(color)) {
$(this).addClass("inverted");
} else {
$(this).addClass("not-inverted");
}
});
in which the styles can be added for the new class in your CSS as below.
.inverted {
filter: invert(1);
}
.not-inverted {
filter: invert(0);
}
See the snippet below.
function isDark(color) {
var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
return (match[1] & 255) +
(match[2] & 255) +
(match[3] & 255) <
3 * 256 / 2;
}
/*
$('div').each(function() {console.log($(this).css("background-color"))
$(this).css("filter", isDark($(this).css("background-color")) ? 'invert(1)' : 'invert(0)');
}); */
$('div').each(function() {
var color = $(this).css("background-color");
if (isDark(color)) {
$(".logo").css("filter", 'invert(1)');
} else {
$(".logo").css("filter", 'invert(0)');
}
});
body {
height: 400vh;
}
.logo {
position: fixed;
top: 40px;
right: 20px;
background-image: url(https://image.freepik.com/free-vector/bicycle-shop-logo-design-vector_53876-40626.jpg);
background-repeat: no-repeat;
background-size: 100px;
height: 100px;
width: 100px;
background-color: black;
}
.blabla {
background-color: black;
height: 50vh;
}
.blablabla {
background-color: grey;
height: 50vh;
}
.blablablabla {
background-color: red;
height: 50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo"></div>
<div class="blabla">test</div>
<div class="blablabla">test</div>
<div class="blablablabla">test</div>
Here is my current setup.
2 radio button to select either year or month
2 sliders, one for year and another one for month
Textbox which will display value of the slider
using onclick radio function, I am displaying only one slider depends upon the year\month selection.
when I change option between year and month, I would like to update the slider and textbox value accordingly. For example, if the year slider is on year 15 and when I change radio button to month, the slider should move to 180 (15*12) and textbox should update as 180.
As of now, I am able to display\hide the slider depends on the radio selection and update the textbox with slider value. But this value is not getting converted between year and month.
How can I achieve this ?
Fiddle : https://jsfiddle.net/anoopcr/vvemxcL3/
Below is my current code:
HTML:
<div class="inputQ">
<div class="InputQuest">Loan Tenure</div>
<div><input id="tentext" class="textbox"></div>
<div class="switch-field">
<div class="switch-title"></div>
<input type="radio" id="switch_left" name="switch_2" value="yes" onclick="javascript:yesnoCheck();" checked/>
<label for="switch_left">Yr</label>
<input type="radio" id="switch_right" name="switch_2" value="no" onclick="javascript:yesnoCheck();" />
<label for="switch_right">Mo</label>
</div>
</div>
<div class="MarkWrap1" id="MarkWrap1">
<div id="tenslidery" class="tenslidery"></div>
<div class="T">0</div>
<div class="T">5</div>
<div class="T">10</div>
<div class="T">15</div>
<div class="T">20</div>
<div class="T">25</div>
<div class="T">30</div>
</div>
<div class="MarkWrap2" id="MarkWrap2">
<div id="tensliderm" class="tensliderm"></div>
<div class="Tm">0</div>
<div class="Tm">60</div>
<div class="Tm">120</div>
<div class="Tm">180</div>
<div class="Tm">240</div>
<div class="Tm">300</div>
<div class="Tm">360</div>
</div>
Jquery:
$( "#tentext" ).val( "20");
$("#tenslidery").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 30 ,
value: 20,
step: .1,
animate: true,
range:'min',
slide: function( event, ui ) {
$( "#tentext" ).val( ui.value );
}
});
$("#tentext").on("keyup",function(e){
$("#tenslidery").slider("value",this.value);
});
$("#tensliderm").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 360,
value: 240,
step: 1,
animate: true,
range:'min',
slide: function( event, ui ) {
$( "#tentext" ).val( ui.value );
}
});
$("#tentext").on("keyup",function(e){
$("#tensliderm").slider("value",this.value);
});
function yesnoCheck() {
if (document.getElementById('switch_left').checked) {
document.getElementById('MarkWrap1').style.display = 'flex';
document.getElementById('MarkWrap2').style.display = 'none';
}
else if (document.getElementById('switch_right').checked) {
document.getElementById('MarkWrap2').style.display = 'flex';
document.getElementById('MarkWrap1').style.display = 'none';
}
}
CSS:
.tenslidery {
height:8px;
flex-basis:100%;
margin:0 calc((100% / 7) / 2);
}
.T {
font-size: 11px;
font-family:verdana;
margin-top:15px;
flex:1;
text-align:center;
position:relative;
}
.T:before {
content:"";
position:absolute;
height:15px;
bottom:100%;
width:1px;
left:calc(50% - 1px);
background:#c5c5c5;
}
.MarkWrap1 {
width:83%; /*Adjust this to adjust the width*/
margin: auto;
display:flex;
flex-wrap:wrap;
}
.Tm {
font-size: 11px;
font-family:verdana;
margin-top:15px;
flex:1;
text-align:center;
position:relative;
}
.Tm:before {
content:"";
position:absolute;
height:15px;
bottom:100%;
width:1px;
left:calc(50% - 1px);
background:#c5c5c5;
}
.MarkWrap2 {
width:83%; /*Adjust this to adjust the width*/
margin: auto;
display:none;
flex-wrap:wrap;
}
.tensliderm {
height:8px;
flex-basis:100%;
margin:0 calc((100% / 7) / 2);
}
.switch-field {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
overflow: hidden;
width:auto;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
float: left;
}
label[for=switch_right]
{
border:1px solid #ccc;
border-radius:4px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
}
label[for=switch_left]
{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
.switch-field label {
display: inline-block;
width: 35px;
background-color: #eee;
color: black;
font-size: 18px;
font-weight: normal;
text-align: center;
text-shadow: none;
height:25.4px;
line-height:1.4;
padding:2px;
cursor: pointer;
}
.switch-field label switch-right ( background:red;)
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: deeppink;
-webkit-box-shadow: none;
box-shadow: none;
}
I simply explicitly calculate the the values and submit to both slider and input box, should solve your problem
function yesnoCheck() {
var markWrap1 = $('#MarkWrap1');
var markWrap2 = $('#MarkWrap2');
var text = $('#tentext');
var value;
if ($('#switch_left').is(':checked')) {
markWrap1.css('display', 'flex');
markWrap2.css('display', 'none');
value = +$('#tensliderm').slider("option", "value") / 12;
text.val(String(value));
$('#tenslidery').slider('value', value);
} else if ($('#switch_right').is(':checked')) {
markWrap2.css('display', 'flex');
markWrap1.css('display', 'none');
value = +$('#tenslidery').slider("option", "value") * 12;
text.val(String(value));
$('#tensliderm').slider('value', value);
}
}
see https://jsfiddle.net/kevinkassimo/ayhenhL5/8/
Just as a tidy up and to add readability...
This will keep both sliders and the input in sync at all times, so if you need to get any current value elsewhere, it will be correct.
var yearVal;
var monthVal;
var yearSelected;
configure();
function updateVal(val) {
yearVal = yearSelected ? val : val / 12;
monthVal = yearSelected ? val * 12 : val;
}
function switchSliders() {
document.getElementById('MarkWrap1').style.display = yearSelected ? 'flex' : 'none';
document.getElementById('MarkWrap2').style.display = yearSelected ? 'none' : 'flex';
}
function updateSliders() {
$("#tenslidery").slider("value", yearVal);
$("#tensliderm").slider("value", monthVal);
}
function updateTenure() {
$("#tentext").val(yearSelected ? yearVal : monthVal);
}
function yesnoCheck() {
yearSelected = document.getElementById('switch_left').checked;
updateTenure();
switchSliders();
updateSliders();
}
function configure() {
$("#tenslidery").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 30,
value: 0,
step: .1,
animate: true,
range: 'min',
slide: function (event, ui) {
updateVal(ui.value);
$("#tentext").val(ui.value);
}
});
$("#tensliderm").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 360,
value: 0,
step: 1,
animate: true,
range: 'min',
slide: function (event, ui) {
updateVal(ui.value);
$("#tentext").val(ui.value);
}
});
$("#tentext").on("keyup", function (e) {
updateVal(Number(this.value));
updateSliders();
});
yearVal = 20;
monthVal = yearVal * 12;
yearSelected = true;
$("#tentext").val(yearVal);
updateSliders();
}
I encounter the following problem: how can I create a stacked bar chart that can hold 3 variables only. (x, y, z) and x + y + z = 100%.
What's important is how can I make the colors edges between x y and y z of the bars faded as shown in the figure below? (Any popular library can be used)
You can use a single linear gradient in css with four percentage locations to achieve the desired result. You don't need to specify the 0% and 100% colors, but you do need to start and end the fades a few percentage points on either side or you'll get a hard color change. Here's a function that will help you center the labels too, but it doesn't handle validation or edge cases.
function updateGradientBar(agree, depends, disagree) {
let
padding = 3,
agreeFadeStart = agree - padding,
dependsFadeStart = agree + padding,
dependsFadeEnd = agree + depends - padding,
disagreeFadeStart = agree + depends + padding,
labelAgree = $('#gradient-bar .label.agree'),
agreeLabelPosition = agree / 2,
labelDepends = $('#gradient-bar .label.depends'),
dependsLabelPosition = agree + (depends / 2),
labelDisagree = $('#gradient-bar .label.disagree'),
disgreeLabelPosition = agree + depends + (disagree / 2);
$('#gradient-bar').css(
'background',
'linear-gradient(to right, green ' + agreeFadeStart + '%,' + 'orange ' + dependsFadeStart + '%, orange ' + dependsFadeEnd + '%,' + 'red ' + disagreeFadeStart + '%)');
labelAgree.css('left', agreeLabelPosition + '%').text(agree + '%');
labelDepends.css('left', dependsLabelPosition + '%').text(depends + '%');
labelDisagree.css('left', disgreeLabelPosition + '%').text(disagree + '%');
}
updateGradientBar(35, 40, 25);
#gradient-bar {
height: 20px;
border-radius: 4px;
background: blue;
position: relative;
}
#gradient-bar .label {
color: white;
font-weight: bold;
position: absolute;
top: 50%;
transform: translatex(-50%) translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gradient-bar">
<div class="label agree"></div>
<div class="label depends"></div>
<div class="label disagree"></div>
</div>
I made a static solution for that using CSS:
You only have to "replace" the % unities with the appropriate values using javascript (this will not be a big deal).
The Solution: first: there is no possiblity to intersect colors in pure css. so I added to absolute positioned divs on the bar with a background color containing transparency.
HTML:
<div class="bar">
<div class="agree">
20%
</div>
<div class="seperator part1">
</div>
<div class="independants">
30%
</div>
<div class="seperator part2">
</div>
<div class="disagree">
50%
</div>
</div>
And the CSS:
.bar {
display: flex;
width: 100%;
border: 1px solid #000;
border-radius: 3px;
}
.bar > div {
height: 20px;
color: #fff;
text-align: center;
}
.agree {
flex: 1 0 20%;
background: green;
}
.independants {
flex: 1 0 30%;
background: orange;
}
.disagree {
flex: 1 0 50%;
background: red;
}
.seperator {
position: absolute;
width: 5%;
z-index: 20;
}
.part1 {
left: 16%;
background: linear-gradient(to right, rgba(122,188,255,0) 0%,rgba(249,186,97,0.44) 44%,rgba(237,176,64,1) 100%);
}
.part2 {
left: 50%;
background: linear-gradient(to right, rgba(255,164,28,1) 0%,rgba(249,186,97,0.56) 44%,rgba(237,176,64,0) 100%);
}
Check out the Fiddle for it here: https://jsfiddle.net/taxostd0/5/
I put an loading gif for on click span case. The issue is that, when the website is charged appears this gif without lick on span.
Look at this:
I want to appear the gif ONLY when an user click on some span.
The script is the following:
<!-- This is the span -->
<span class="label label-<?=$tag?><?=$selected?" selected":" hidden-print"?> customer-<?=$i?>" onclick="connect('customer-<?=$i?>', '<?=$customer?>', '<?=$tag?>');"><?=$tag?></span><?
<!-- This is the function for onClick case -->
<script>
function connect(customerId, customerValue, tagValue){
var label = $("span.label-"+tagValue+"."+customerId);
var connectar = !label.hasClass('selected');
console.log("haciendo " + connectar + " la conexión entre " + customerValue + " y " + tagValue);
$(document).ajaxStart(function(){
$('#loader').show();
}).ajaxComplete(function(){
$('#loader').hide();
});
$.getJSON( "/api/connect.php?customerId="+customerValue+"&tagId="+tagValue+"&connect="+connectar, function( data ) {
console.log('error: ' + data.error);
if(data.error == "false"){
if(data.connected == "true"){
label.addClass("selected");
label.removeClass("hidden-print");
}
if(data.connected == "false"){
label.removeClass("selected");
label.addClass("hidden-print");
}
}
});
}
</script>
Where is the problem?
PD: customerId, customerValue and tagValue are only parameter to insert data in the database. The proccess to appaer the gif is in ajaxStart and ajaxComplete.
Regard
UPDATE!
<!-- The gif is here -->
<img id="loader" src="loading.gif" alt="loading"/>
#loader{
display:none;
}
Here is all the css:
/*th.tag {
text-align:center;
}
td.tag {
text-align:center;
}*/
.main{
max-width:768px;
}
.container-striped > div.customer:nth-child(odd){
background-color: #f9f9f9;
}
div.row.customer{
margin-top: 5px;
margin-bottom: 5px;
padding-top: 10px;
padding-bottom: 10px;
}
/*div.customer-name{
background-color: #e7e7e7;
}*/
.label{
background-color: #808080;
}
/* #group tag colors */
.label.label-Detallista{
background-color: rgba(255, 0, 190, 0.22);
}
.label.label-Detallista.selected{
background-color: #ff00bf;
}
.label.label-Emprendedor{
background-color: rgba(8, 8, 138, 0.19);
}
.label.label-Emprendedor.selected{
background-color: #08088A;
}
.label.label-Creativo{
background-color: rgba(215, 223, 0, 0.24);
}
.label.label-Creativo.selected{
background-color: #D7DF01;
}
#loader{
display:none;
}
/* #end */