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>

Changing Range Slider background via Javascript

I'm trying to change the background color of a range slider via Javascript.
I'm not getting any errors, however the background color isn't changing at all. All the other values that change work, just not the background style.
<input type="range" min="1000" max="6000" value="2000" step="100" class="slider" id="myRange" name="myRange"/>
.slider{
-webkit-appearance: none;
width: 100%;
height: 20px;
background: linear-gradient(90deg, rgb(244, 237, 144) 60%, rgb(244, 237, 144) 60%);
outline: none;
opacity: 1;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 12px;
box-shadow: 0px 0.1px 10px -2px #000000;
}
document.getElementById('myRange').addEventListener('input', function(){sliderChange(this.value)});
function sliderChange(val) {
document.getElementById('myRange').style.background = 'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%);';
if (val == 6000) {
var value = '6,000+';
} else {
var value = val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
document.getElementById('sqftValue').innerHTML = value;
var base = val * 0.12;
var discount = base * 0.2;
var cost = base - discount;
document.getElementById('cost').innerHTML = cost.toFixed(0);
}
What am I missing here?

Try removing the semi-colon from the end of the value you're setting it to.
range.style.background =
'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)';
The value above should like this.
range.style.background =
'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)'
const range = document.getElementById('myRange')
range.addEventListener('input', function(){
sliderChange(this.value)
});
function sliderChange(val) {
range.style.background = 'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)';
}
.slider{
-webkit-appearance: none;
width: 100%;
height: 20px;
background: linear-gradient(90deg, red 60%, blue);
outline: none;
opacity: 1;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 12px;
box-shadow: 0px 0.1px 10px -2px #000000;
}
<input type="range" min="1000" max="6000" value="2000" step="100" class="slider" id="myRange" name="myRange" />
Also, using two percentage values doesn't do anything by the way.

avoid displaying several divs each on a new line (IE11)

The user can save some pictures from a list that will be stored in a div containing the thumbnails of the saved pictures. I dynamically resize the containing div to be big enough to contain all the thumbnails. As long as I use an img tag to contain the thumbnails everything works fine, as in the following screenshot:
The code I use to build the div:
currentPictures.innerHTML += "<img class='preview' id='spic" + picId + "' " +
"onclick='showImageOnCanvas(\"" + sourceImg + "\", " + picId + ")' " +
"oncontextmenu='removeSavedPicture(\"spic" + picId + "\");' " +
"src='" + sourceImg + "'> ";
css for .preview:
.preview {
cursor: pointer;
width: 80px;
height: 54px;
border: black 2px solid;
}
This is the css of the containing div (some of this values are changed programmatically according to the number of thumbnails saved):
#currentPictures {
margin: auto;
position: absolute;
top: 38px;
left: 300px;
width: 300px;
height: 320px;
z-index: 16;
background-color: #DDDDDD;
border: 1px solid #999999;
padding: 16px 16px 16px 16px;
border-radius: 6px;
font-family: arial;
text-align: center;
vertical-align: middle;
font-size: 12px;
display: none;
overflow-y: none;
overflow-x: scroll;
-ms-user-select: none;
}
Now I want to put the img in a div, in order to add some text to the picture. The problem is that as soon as I wrap the img in a div, the divs are stacked and not put next to each other, as in this screenshot:
The code:
currentPictures.innerHTML += "<div><img class='preview' id='spic" + picId + "' " +
"onclick='showImageOnCanvas(\"" + sourceImg + "\", " + picId + ")' " +
"oncontextmenu='event.preventDefault(); removeSavedPicture(\"spic" + picId + "\");' " +
"src='" + sourceImg + "'></div> ";
I tried to use different display styles on the div but with no success.
I'm pretty sure I'm missing something obvious. Thanks!

how to add CSS to -webkit-slider-runnable-track using Javascript

I am trying to change the range slider lower color depends upon the slide. Using below code.
<head>
</head>
<input type="range" min="1" max="100" step="1" value="15"id="myrange" class="myrange">
CSS:
input[type="range"] {
width: 100%;
height: 28px;
-webkit-appearance: none;
outline: none;
border: 0; /*for firefox on android*/
padding: 0 8px; /*for IE*/
margin: 8px 0;
}
/*chrome and opera*/
input[type="range"]::-webkit-slider-runnable-track {
height: 8px;
border-radius: 4px;
transition: 0.3s;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
}
.myrange::-webkit-slider-runnable-track {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
height: 8px; /*trackHeight*/
border-radius: 4px; /*trackHeight*/
transition: 0.3s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background: orange;
width: 28px;
height: 28px;
border-radius: 50%;
margin-top: -12px;
cursor: pointer;
border: 4px solid #fff;
transition: 0.3s;
}
javascript:
var style = $("<style>", {type:"text/css"}).appendTo("head");
$(function() {
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
style.text('.myrange::-webkit-slider-runnable-track{background-image:-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', orange), '+ 'color-stop(' + val + ', gray);}');
});
});
I would like to update the CSS for input[type="range"]::-webkit-slider-runnable-track while using the slider.
I have verified the previous post how to call range::-webkit-slider-runnable-track? on same topic and edited my code accordingly. Really appreciate if someone can help me to identify the issue with code
Fiddle : https://jsfiddle.net/fwmscany/1/

This is working now. Here is the update I made to Javascript
$(function() {
var style = $("<style>", {type:"text/css"}).appendTo("head");
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$('<style type="text/css"></style>').text('input[type="range"]::-webkit-slider-runnable-track { background-image:-webkit-gradient(linear, left top, right top, color-stop('+val+', orange), color-stop('+val+', #C5C5C5));}').appendTo('head');
});
});

Weather with jQuery and YQL suddenly stopped working

I used this code to add the current temperature and weather condition to my site a couple of months ago and I noticed earlier this week that it went blank. I'm assuming I need to update the jQuery or the yahoo api, but everything I try isn't working.
HTML:
<div id="wxWrap">
<span id="wxIntro">
Currently in Galveston:
</span>
<span id="wxIcon2"></span>
<span id="wxTemp"></span>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
CSS:
#wxWrap {
width: 240px;
background: #EEE; /* Old browsers */
background: -moz-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
padding: 2px 13px 2px 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#wxIntro {
display: inline-block;
font: 14px/20px lato,Verdana,sans-serif;
color: #666;
vertical-align: top;
padding-top: 9px;
}
#wxIcon {
display: inline-block;
width: 61px;
height: 34px;
margin: 2px 0 -1px 1px;
overflow: hidden;
background: url('http://l.yimg.com/a/lib/ywc/img/wicons.png') no-repeat 61px 0;
}
#wxIcon2 {
display: inline-block;
width: 34px;
height: 34px;
margin: 1px 6px 0 8px;
overflow: hidden;
}
#wxTemp {
display: inline-block;
font: 20px/28px lato,Verdana,sans-serif;
color: #333;
vertical-align: top;
padding-top: 5px;
margin-left: 0;
}
JS:
$(function(){
// Specify the ZIP/location code and units (f or c)
var loc = '77551'; // or e.g. SPXX0050
var u = 'f';
var query = "SELECT item.condition FROM weather.forecast WHERE location='" + loc + "' AND u='" + u + "'";
var cacheBuster = Math.floor((new Date().getTime()) / 1200 / 1000);
var url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;
window['wxCallback'] = function(data) {
var info = data.query.results.channel.item.condition;
$('#wxIcon').css({
backgroundPosition: '-' + (61 * info.code) + 'px 0'
}).attr({
title: info.text
});
$('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
$('#wxTemp').html(info.temp + '°' + (u.toUpperCase()));
};
$.ajax({
url: url,
dataType: 'jsonp',
cache: true,
jsonpCallback: 'wxCallback'
});
});

Figured it out, yahoo changed the query structure, as you have it now, results.channel is null:
"data":{"query":{"count":0,"created":"2016-03-30T18:27:42Z","lang":"en-
US","results":null}},"status":200,"config":{"transformRequest":[null]....
Take a look at the docs here:
https://developer.yahoo.com/weather/
Also note the following way to query, you have a lot of the logic set up, and might not need to encode your query:
<script>
var callbackFunction = function(data) {
var wind = data.query.results.channel.wind;
alert(wind.chill);
};
</script>
<script src="https://query.yahooapis.com/v1/public/yql?q=select wind from weather.forecast where woeid in (select woeid from geo.places(1) where text='chicago, il')&format=json&callback=callbackFunction"></script>
Fiddles:
Old Fiddle not working, note query: http://jsfiddle.net/omarjmh/yFc6J/162/
New Fiddle working, but the query parsing is now incorrect, either way you can see that the data is in fact returning: http://jsfiddle.net/omarjmh/sbwtfap7/
*I'm logging the repsonse object in the console, open it up and check it out.
Good luck with your app!