Develop Reference

How to change animated status bar value with same class but different part

I do need for these status bars to work for each own. Maybe also the buttons could worked. I tried to acquire the value of "data-bar" without succeed (the script does still can process the "data-max"). And seems that the script does apply to all bars, not individually, while I need that it differs for each bar.
In html:
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>
<br>
<!-- Trying to set attr value manually -->
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>
In script:
<script>
/* Requiring jQuery.js */
$(document).ready( function(){
/* Print the bar elements at the screen */
$(".stat-bar").html(
"<div class='stat-bar-main-shade-min'></div>" +
"<div class='stat-bar-main-shade-plus'></div>" +
"<div class='stat-bar-main'></div>" +
"<div class='stat-bar-text'></div>"
);
/* Animating a changed variable */
setInterval(function(){ // 2 second interval change
/* Get attr value from the stat bar */
var bar = $(".stat-bar");
if (bar){ // bar
var maxStat = bar.attr("data-bar-max");
/* Probably working area (remove "//" from a case and add it to all other case) */
/* Case A (testing): randomized attr value for "[data-bar]" (it works) */
// var currentStat = Math.floor((Math.random() * 100) + 50);
/* Case B (testing):: manual attr value for test (it works) */
var currentStat = 41;
/* Case C (what is demanded): getting attr value from "[data-bar]" (doesn’t works) */
// var currentStat = bar.attr("data-bar");
/* END Probably working area */
if (currentStat > maxStat){currentStat = maxStat;
} else if (currentStat < 0){currentStat = 0;
} else {currentStat = currentStat;}
} // END bar
var a = currentStat * (100 / maxStat);
$(".stat-bar-text").html("<span class='stat-bar-text-stat'>" + currentStat + "</span>" + "/" + "<span class='stat-bar-text-stat'>" + maxStat + "</span>" + " " + "<span class='stat-bar-text-stat'>" + "(" + Math.round(a) + "%" + ")" + "</span>");
setTimeout(function(){
$(".stat-bar-main-shade-min").animate({"width": a + "%"}, 800);
$(".stat-bar-main-shade-plus").animate({"width": a + "%"}, 300);
$(".stat-bar-main").animate({"width": a + "%"}, 700);
}, 400);
}, 2000); // END 2 second interval change
});
</script>
In css:
<style>
.stat-bar{
background-color: #ACB597;
height: 26px;width: 60vw;
margin: 0 auto;
overflow: hidden;
border: solid 1px #686E59;
border-radius: 4px;
box-shadow: inset 0 0 0 0.5px #888E79;
}
.stat-bar-main{
background-color: #464D51;
height: 30px;width: inherit;
bottom: 50px;
position: relative;
}
.stat-bar-main-shade-min{height: 100%;width: 100%;}
.stat-bar-main-shade-plus{
height: 100%;width: 100%;
bottom: 24px;
position: relative;
}
.stat-bar-main-shade-min, .stat-bar-main-shade-plus{
background: linear-gradient(90deg, rgba(70,77,81,1) 95%, rgba(70,77,81,0) 100%);
opacity: 0.35;
}
.stat-bar-text{
color: rgba(255,255,255,0.8);
font: 400 10px "opensans";
letter-spacing: 0.09em;
line-height: 24px;
height: 24px;
bottom: 78px;
position: relative;
box-shadow: inset 0 0 5px transparent;
}
</style>

You can use each loop to iterate through your divs and get required values i.e : attributes then use $(this).find("someclass") to get reference of divs where you need to change widths and texts.
Demo Code :
$(document).ready(function() {
$(".stat-bar").html(
"<div class='stat-bar-main-shade-min'></div>" +
"<div class='stat-bar-main-shade-plus'></div>" +
"<div class='stat-bar-main'></div>" +
"<div class='stat-bar-text'></div>"
);
setInterval(function() {
//loop through stat bar
$(".stat-bar").each(function() {
//get datas from divs
var maxStat = parseInt($(this).attr("data-bar-max"));
var currentStat = parseInt($(this).attr("data-bar"));
//depend on value change currentstat
currentStat > maxStat ? currentStat = maxStat : currentStat = currentStat;
var a = currentStat * (100 / maxStat);
//find statbartext inside div
$(this).find(".stat-bar-text").html("<span class='stat-bar-text-stat'>" + currentStat + "</span>" + "/" + "<span class='stat-bar-text-stat'>" + maxStat + "</span>" + " " + "<span class='stat-bar-text-stat'>" + "(" + Math.round(a) + "%" + ")" + "</span>");
///same find and apply effect there
$(this).find(".stat-bar-main-shade-min").animate({
"width": a + "%"
}, 800);
$(this).find(".stat-bar-main-shade-plus").animate({
"width": a + "%"
}, 300);
$(this).find(".stat-bar-main").animate({
"width": a + "%"
}, 700);
})
}, 2000); // END 2 second interval change
});
.stat-bar {
background-color: #ACB597;
height: 26px;
width: 60vw;
margin: 0 auto;
overflow: hidden;
border: solid 1px #686E59;
border-radius: 4px;
box-shadow: inset 0 0 0 0.5px #888E79;
}
.stat-bar-main {
background-color: #464D51;
height: 30px;
width: inherit;
bottom: 50px;
position: relative;
}
.stat-bar-main-shade-min {
height: 100%;
width: 100%;
}
.stat-bar-main-shade-plus {
height: 100%;
width: 100%;
bottom: 24px;
position: relative;
}
.stat-bar-main-shade-min,
.stat-bar-main-shade-plus {
background: linear-gradient(90deg, rgba(70, 77, 81, 1) 95%, rgba(70, 77, 81, 0) 100%);
opacity: 0.35;
}
.stat-bar-text {
color: rgba(255, 255, 255, 0.8);
font: 400 10px "opensans";
letter-spacing: 0.09em;
line-height: 24px;
height: 24px;
bottom: 78px;
position: relative;
box-shadow: inset 0 0 5px transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>
<br>
<!-- Trying to set attr value manually -->
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>

Change HTML Button style when click not working in Javascript

I want to change a button color when click the button. This is the code that I used.
function abc() {
var color = document.getElementById("btn").style.background - color;
if (background - color === "#c1580b")
document.getElementById("btn").style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B; background-color: #173B0B; color:#459c5c";
else
document.getElementById("btn").style.cssText = "box-shadow: 0px 0px 0px 3px #c1580b; background-color: #c1580b; color:#ffb734";
}
.btn {
background: #c1580b;
color: #ffb734;
width: 80px;
height: 80px;
line-height: 70px;
display: block;
border-radius: 50%;
text-align: center;
text-decoration: none;
border: 2px solid #000;
box-shadow: 0px 0px 0px 3px #c1580b;
font-size: medium;
}
<button id="btn" class="btn" onclick="abc()">Pause</button>
But this is not working.

I did not quite understand that part of the background - color, but to check the background in hex, you have to go from hex to rgb.
Can see here more examples of how to pass hex to rgb - https://stackoverflow.com/a/4090628/8098173
Here's an example of what you want.
function abc() {
var bt = document.getElementById('btn');
var style = bt.currentStyle || window.getComputedStyle(bt);
var bcolor = rgb2hex(style.backgroundColor);
if (bcolor === '#c1580b') {
bt.style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B; background-color: #173B0B; color:#459c5c";
} else {
bt.style.cssText = "box-shadow: 0px 0px 0px 3px #c1580b; background-color: #c1580b; color:#ffb734";
}
}
// pass rbg to hex
function rgb2hex(rgb) {
if ( rgb.search("rgb") == -1 ) {
return rgb;
} else {
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
}
.btn {
background: #c1580b;
color: #ffb734;
width: 80px;
height: 80px;
line-height: 70px;
display: block;
border-radius: 50%;
text-align: center;
text-decoration: none;
border: 2px solid #000;
box-shadow: 0px 0px 0px 3px #c1580b;
font-size: medium;
}
<button id="btn" class="btn" onclick="abc()">Pause</button>

Here you have a working code.
I would suggest you to avoid the inline onclick="abc()" and opt in favor of a fully-separated code using EventListener (that's good for maintainability).
With Window.getComputedStyle() you get the background color in RGBA; you can then convert it to the HEX code with a simple function that you can find everywhere on the Web, here I used one of them. So, the right way to get the background color is window.getComputedStyle(btn, null)["backgroundColor"] while, if you would like to set it, the correct form would be document.getElementById("btn").style.backgroundColor = "#0000".
/**
* The code inside the function is run only when the DOM is ready.
* This is the only jQuery function used, all the rest is in vanillaJS.
*/
$(document).ready(function() {
/**
* rgb2hex
* Convert RGB to HEX.
* Source: https://jsfiddle.net/Mottie/xcqpF/1/light/
*
* #param {string} rgb
*/
var rgb2hex = function(rgb){
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}
/**
* EventListener of btn click event
*/
document.getElementById("btn")
.addEventListener('click', function() {
// Save the btn into a var so you can use it later
var btn = document.getElementById("btn");
// Notice: getComputedStyle() to get the element background color
var color = window.getComputedStyle(btn, null)["backgroundColor"];
// Transform RGBa to HEX
var hex = rgb2hex(color);
// IF-ELSE with ternary operators
(hex === "#c1580b")
? btn.style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B; background-color: #173B0B; color:#459c5c"
: btn.style.cssText = "box-shadow: 0px 0px 0px 3px #c1580b; background-color: #c1580b; color:#ffb734";
});
});
.btn {
background: #c1580b;
color: #ffb734;
width: 80px;
height: 80px;
line-height: 70px;
display: block;
border-radius: 50%;
text-align: center;
text-decoration: none;
border: 2px solid #000;
box-shadow: 0px 0px 0px 3px #c1580b;
font-size: medium;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button id="btn" class="btn">Pause</button>
</body>
</html>

if always you use this color in HEX format (#c1580b), So:
function abc() {
var elm = document.getElementById( 'btn' );
var color = window.getComputedStyle( elm ).backgroundColor;
if ( color === 'rgb(193, 88, 11)' )
elm.style.cssText = 'box-shadow: 0 0 0 3px #173B0B; background-color: #173B0B; color: #459c5c'
else
elm.style.cssText = 'box-shadow: 0 0 0 3px #c1580b; background-color: #c1580b; color: #ffb734'
}

Your code contains some logical error. The if condition has no sense : background - color means «substract the value of color to the value of background (which seems to be undefined).
To get the background color of the button, you need the following
background = document.getElementById("btn").style.backgroundColor;
if (background === "#c1580b")

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.

HTML5/CSS3 Input Range Styling

so I created a style for input range sliders using HTML5/CSS3. All works fine except for the fill percentage in Firefox (the bit that fills up right to the drag-able button). It works in Chrome. I've tried everything can someone maybe assist me to make it work in Firefox as well. Heres what I have:
CSS :
.my-retirement-sliders input[type='range']::-moz-range-track {
-moz-appearance: none;
border-radius: 5px;
border:none;
height: 6px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #94A14E),
color-stop(0.15, #C5C5C5)
);
}
.my-retirement-sliders input[type='range']::-moz-range-thumb {
-moz-appearance: none;
background: rgb(148, 161, 78);
border: 3px solid #fff;
height: 10px;
width: 10px;
}
.my-retirement-sliders input[type="range"]{
-webkit-appearance: none;
border-radius: 5px;
height: 6px;
background-color: #444;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #94A14E),
color-stop(0.15, #C5C5C5)
);
}
.my-retirement-sliders input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: rgb(148, 161, 78);
border: 3px solid #fff;
border-radius:10px;
height: 15px;
width: 15px;
}
Little-bit of JS:
//SLIDERS
//SET START POINT FOR SLIDERS FILL
var val = ($("#SliderRetAge").val() - $("#SliderRetAge").attr('min')) / ($("#SliderRetAge").attr('max') - $("#SliderRetAge").attr('min'));
$("#SliderRetAge").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
var val = ($("#SliderPostRetExpPerc").val() - $("#SliderPostRetExpPerc").attr('min')) / ($("#SliderPostRetExpPerc").attr('max') - $("#SliderPostRetExpPerc").attr('min'));
$("#SliderPostRetExpPerc").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
//CHANGE FILL %
$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
});

So I managed to fix it for Firefox now as well :D Happy DAYS! So my CSS looks like this
/* Firefox */
.my-retirement-sliders input[type='range']::-moz-range-track {
border:none;
background:transparent;
}
.my-retirement-sliders input[type='range']::-moz-range-thumb {
-moz-appearance: none;
background: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:10px;
height: 13px;
width: 13px;
box-shadow:black 2px 2px 10px;
}
/* Chrome and Opera */
.my-retirement-sliders input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:15px;
height: 20px;
width: 20px;
box-shadow:black 1px 1px 5px;
}
/* IE */
.k-ie .my-retirement-sliders input[type="range"]{
height:81px;
top:10px;
position:relative;
width:300px;
margin-left: 10px;
display: inline-block;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-track {
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-fill-lower {
background: #94A14E;
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-fill-upper {
background: #C5C5C5;
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-thumb {
background-color: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:15px;
height: 15px;
width: 15px;
box-shadow:black 1px 1px 5px;
overflow:auto;
}
AND JS LOOKS LIKE THIS :
//SLIDERS
//SET START POINT FOR SLIDERS FILL
var val = ($("#SliderRetAge").val() - $("#SliderRetAge").attr('min')) / ($("#SliderRetAge").attr('max') - $("#SliderRetAge").attr('min'));
$("#SliderRetAge").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$("#SliderRetAge").css('background-image', '-moz-linear-gradient(left, #94A14E ' + val*100 + '% , #C5C5C5 ' + val*100 + '%)');
var val = ($("#SliderPostRetExpPerc").val() - $("#SliderPostRetExpPerc").attr('min')) / ($("#SliderPostRetExpPerc").attr('max') - $("#SliderPostRetExpPerc").attr('min'));
$("#SliderPostRetExpPerc").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$("#SliderPostRetExpPerc").css('background-image', '-moz-linear-gradient(left, #94A14E ' + val * 100 + '% , #C5C5C5 ' + val * 100 + '%)');
//CHANGE FILL %
$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$(this).css('background-image', '-moz-linear-gradient(left, #94A14E ' + val * 100 + '% , #C5C5C5 ' + val * 100 + '%)');
});

change css3 animation of drop-shadow by javascript or jquery

I gave my img style using css3 -webkit-animation. this css chages a drop-shadow style animated from one property to another. (blink)
THIS IS THE CSS
.firstglow {
height: 200px;
-webkit-animation: hide 0.3s linear 0s infinite alternate;
}
#-webkit-keyframes hide {
0% {-webkit-filter: drop-shadow(3px 3px 40px rgba(255,251,0,1)); }
100% { -webkit-filter: drop-shadow(0px 0px 40px rgba(255,251,0,0.5)); }
}
I need to change my code dynamicly by javascript and changing the color element
This is the jQuery I tried:
$('.firstglow').css("-webkit-animation","newGlow 0.5s linear 0s infinite alternate;");
var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("#-webkit-keyframes newGlow { 0% {-webkit-filter: drop-shadow(3px 3px 40px " + myCharacterColor + " 1)); } 100% { -webkit-filter: drop-shadow(0px 0px 40px" + myCharacterColor + "0.5)); } }", lastSheet.cssRules.length);
this is the fidle:
http://jsfiddle.net/VbzFj/

Try this :
$(document).ready(function (){
$('.firstglow').css("-webkit-animation", "newGlow 0.5s linear 0s infinite alternate");
var lastSheet = document.styleSheets[document.styleSheets.length - 1];
myCharacterColor = 'rgba(182, 17, 17, 0.5)';
var styelRule = "";
if (navigator.userAgent.search("Chrome") >= 0) {
styelRule = '#-webkit-keyframes newGlow{0%{-webkit-filter:drop-shadow(3px 3px 40px ' + myCharacterColor + ');}100%{-webkit-filter:drop-shadow(0px 0px 40px ' + myCharacterColor + ');}}';
}
else if (navigator.userAgent.search("Firefox") >= 0) {
styelRule = '#-moz-keyframes newGlow{0%{-webkit-filter:drop-shadow(3px 3px 40px ' + myCharacterColor + ');}100%{-webkit-filter:drop-shadow(0px 0px 40px ' + myCharacterColor + ');}}';
}
else {
styelRule = '#keyframes newGlow{0%{-webkit-filter:drop-shadow(3px 3px 40px ' + myCharacterColor + ');}100%{-webkit-filter:drop-shadow(0px 0px 40px ' + myCharacterColor + ');}}';
}
lastSheet.insertRule(styelRule, lastSheet.cssRules.length);
});
Here is the Demo.