We Keep Coding

How to make progress bar updates automatically in real time as value changes

I have a progress bar that changes based on the currentCount(I'm gonna replace it with a variable containing numbers value that will automatically increase). Currently, I set it just a static number 850 just for example. I also have input to set the target amount which currently I set to 1000(Can change anytime as we like) just for example.
Currently, the progress bar will only change every time I click the .pstbtn when setting the target amount. I want the progress bar to change automatically, in real-time based on the value changes that will happen in currentCount. To reach 100%, it should be based on the target amount that I set.
Please check out the snippet below.
$(document).ready(function() {
$(".postbtn").on('click', function() {
var currentCount = 850;
var progress = (currentCount / $('#q10').val()) * 100;
progress = (currentCount / $('#q10').val()) * 100;
$("#myBar").width(progress + '%');
$("#label").text(progress + '%');
});
});
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 0%;
height: 100%;
background-color: #4CAF50;
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Total likes target:<br>
<input type="text" name="Total" id="q10" value="1000"><br> <br>
<input class="postbtn" style="width: auto; font-size: 16px;" type="button" value="Set Target">
<br><br><div id="myProgress">
<div id="myBar">
<div id="label"> 0%</div>
</div>
</div>
Hope anyone could help me modify the code to achieve my aim. Thank you in advance!

Is this the sort of effect that you were trying to accomplish? Rather than a text input I changed it to a number and set the step property so that changes are immediately apparent ( dependant upon target number specified )
var currentCount = 850;
/* utility function that take the numeric input and calculates/displays the percentage */
const getpercentage=(i)=>{
/* can not go beyond 100%!!! */
var progress = Math.min( ( currentCount / i ).toFixed(2) * 100, 100 );
$("#myBar").width( progress + '%' );
$("#label").text( progress + '%' );
}
/*
when the button is clicked, open
a dialog to set a new target. Call the
helper to display re-calculated percentage
*/
$('.postbtn').on('click',e=>{
let i=prompt('Set the Target',currentCount);
if( !isNaN( i ) ){
currentCount=i;
getpercentage( $('#q10').val() );
}
})
/* call the helper when the input changes */
$('#q10').on('change',(e)=>{
getpercentage( e.target.value )
});
/* call the helper at pageload */
getpercentage( $('#q10').val() );
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 0%;
height: 100%;
background-color: #4CAF50;
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Total likes target:<br>
<!-- for simplicity changed this to number input -->
<input type="number" name="Total" id="q10" value="1000" step=10><br> <br>
<input class="postbtn" style="width: auto; font-size: 16px;" type="button" value="Set Target">
<br><br>
<div id="myProgress">
<div id="myBar">
<div id="label"> 0%</div>
</div>
</div>

How to add width to an element using jquery each function?

I want to build a loading bar effect using two seperate divs inside each other. I got it all positioned and all that but how can I make one of them increase its width from %1 to %100 with transition? I want it to be filled in 10 sec.
Thanks.
<div class="loading-container">
<div class="outside-loading"></div>
<div class="inside-loading"></div>
</div>

Fairly simple with jQuery animate() which you can customize for step or easing and also use callbacks for start or complete as needed
$('.outside-loading').animate({width: '100%'}, 3000);// using 3 sec for demo
.outside-loading {
background: blue;
width: 0;
height: .5em
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading-container">
<div class="outside-loading"></div>
<div class="inside-loading"></div>
</div>

Vanilla Javascript
Create a function and increase the width with your set interval function. Add a conditional that checks if the width is 100% and if it is, then clear the interval. I also moved the divs within each other and set the display of the inner span tag to inline-block...
You can also target the elements textContent and display the widths progress in percent as well...
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementsByClassName("inside-loading");
var width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem[0].style.width = width + "%";
elem[0].textContent = width + "%";
}
}
}
}
move();
.outside-loading {
width: 100%;
height: 30px;
background-color: grey;
}
.inside-loading {
display: inline-block;
width: 1%;
height: 100%;
background-color: red;
text-align: right;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
<br><br><br>
<div class="loading-container">
<div class="outside-loading">
<span class="inside-loading">
</span>
</div>
</div>

How Can I Change size of the circles?

I saw a code and i was trying to modify the size of the circles, but i don't know whither i can change it using js or css .Is there any way to change it ?
The full code is from:
https://codepen.io/XTn-25/pen/NWqeBaz
hesr is js code:
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});

It seems like it's using this as a dependency. So in order to change the circle size, you need to add size property which defaults to 100:
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300 // <-- here, the size changes the circle radius
})
and in order to stop overlapping the circles, you also need to modify the CSS a little bit by increasing the width of the .progressbar element:
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
So the full example would look like this:
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>

mixitup not working with price slide range

i working on mixitup plugin with jRange slider jquery plugin and is working good without jRange slider, but when i include jrange slider for mobiles price its not filter and not show product within the range. how to filter multiple selector. for example when click on iphone products , its show all iphone product but i want to also show iphone products with in price range. or any other products.
how to fix the problem.
jQuery(document).ready(function($) {
var price_mega = {};
main_filter();
$('.slider-input').jRange({
from: 0,
to: 400,
format: '$%s',
showLabels: true,
isRange : true,
onstatechange: function(value){
result = value.split(',');
price_mega = result;
main_filter();
}
});
function main_filter(){
$('.container').each(function(index, el) {
var min_price = Number(price_mega[0]);
var max_price = Number(price_mega[1]);
// console.log(min_price);
var active = $(this).data('active');
var wrap = $(this).closest('.main-wrapper');
var target = wrap.find('.target_filter');
var filter = wrap.find('.controls .filter');
// var filter = wrap.find('.container').find('.target_filter').filter(function(){
// var price = Number($(this).attr('data-price'));
// return price >= min_price && price <= max_price
// });
wrap.find('.container').mixItUp({
selectors: {
target: target,
filter: filter
},
load: {
filter: active,
}
});
});
}
});
.controls {
padding: 1rem;
background: #333;
font-size: 0.1px;
}
.controls button{
font-size: 27px;
color: gray;
margin-left: 20px;
}
.mixitup-control-active {
background: #393939;
}
.mixitup-control-active[data-filter]:after {
background: transparent;
}
.mix,
.gap {
display: inline-block;
vertical-align: top;
}
.mix {
background: #fff;
border-top: .5rem solid currentColor;
border-radius: 2px;
margin-bottom: 1rem;
position: relative;
display: none;
}
.mix.green {
color: #91e6c7;
}
.mix.pink {
color: #d595aa;
}
.mix.blue {
color: #5ecdde;
}
.mix,
.gap {
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}
#media screen and (min-width: 541px) {
.mix,
.gap {
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
}
}
#media screen and (min-width: 961px) {
.mix,
.gap {
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
}
}
#media screen and (min-width: 1281px) {
.mix,
.gap {
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.js"></script>
<script src="http://nitinhayaran.github.io/jRange/jquery.range.js"></script>
<link href="http://nitinhayaran.github.io/jRange/jquery.range.css" rel="stylesheet"/>
<div class="main-wrapper">
<div class="controls">
<button type="button" data-filter="all" class="filter">All</button>
<button type="button" data-filter=".samsung" class="filter">Samsung</button>
<button type="button" data-filter=".iphone" class="filter">Iphone</button>
<button type="button" data-filter=".blackberry" class="filter">Blackberry</button>
<div style="margin-top: 5%;height: 22px;">
<input type="hidden" class="filter slider-input" value="0,400" />
</div>
</div>
<div class="container" data-active=".samsung">
<div class="target_filter mix samsung" data-price="200">samsung 1(price $200)</div>
<div class="target_filter mix blackberry" data-price="111">blackberry 1(price $111)</div>
<div class="target_filter mix samsung" data-price="165">samsung 2(price $165)</div>
<div class="target_filter mix iphone" data-price="300">iphone 1(price $300)</div>
<div class="target_filter mix iphone" data-price="340">iphone 2 (price $340)</div>
<div class="target_filter mix samsung" data-price="100">samsung 3 (price $100)</div>
<div class="target_filter mix blackberry" data-price="89">blackberry 2(price $89)</div>
<div class="target_filter mix iphone" data-price="232">iphone 3(price $232)</div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
</div>

Looking for a solution to load a url once then be able to click on element

I need help with loading a URL one time into a HTML5 audio player and then be able to click on an elements to do additional controls.
This is the code so far:
<div class="primary">
<article id="145">
<div class="loaddata" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3" onclick="setTimeout(function() { document.getElementById('145').classList.add('dataloaded'); }, 1)"> Load "Song1" </div>
</article>
<article id="139">
<div class="loaddata" data-rel="http://feeds.soundcloud.com/stream/327164631-scott-johnson-27-tms-1281.mp3" onclick="setTimeout(function() { document.getElementById('139').classList.add('dataloaded'); }, 1)"> Load "Song2" </div>
</article>
<article id="133" class="dataloaded">
<div class="loaddata" data-rel="http://archive.org/download/DTH20170611/DTH20170611.mp3" onclick="setTimeout(function() { document.getElementById('133').classList.add('dataloaded'); }, 1)"> Load "Song3" </div>
</article>
The player:
<div class="audio-player-wrapper">
<div class="mejs__button mejs__group-left">
<div class="rewind-btn">
<button title="Rewind 15 seconds">15</button>
</div>
<div class="playpause-btn">
<button title="Play" class="play" id="ppbtn"></button>
</div>
<div class="forward-btn">
<button title="Forward 15 seconds">15</button>
</div>
</div>
<div class="current-time">00:00</div>
<div class="duration-time">00:00</div>
<div class="mejs__button mobile-mute">
<button class="mobile-mute-btn mobile-mute-off"></button>
</div>
<audio width="100%" height="75px" id="audio-player" controls="controls">
<source id="sourceMp3" src="#" type="audio/mp3">
</audio>
</div>
JS:
$(".loaddata").on("click", function() {
var mp3Url = $(this).data('rel');
$("#audio-player_html5").attr('src', mp3Url);
});
$(".loaddata").click(function(){
$('.dataloaded').removeClass();
$('#ppbtn').click();
});
What the code above does is when a user clicks on loaddata the JS loads the url in data-rel into the src in sourceMP3. Then it scans 'primary' for any class called dataloaded and removes it. One millisecond later, it adds dataloaded to the article ID. Then the player starts playing the loaded URL in jquery $('#ppbtn').click();.
What I'm trying to find is a way to load the URL on the first click then be able to control the play/pause button after the first click. I tried doing .one() on loading the URL once but when all three elements have been clicked once, it won't load the URL in the clicked element and all three elements div.loaddata can control the player.
I guess the easy way of explaining it: remove existing .dataloaded, add URL to player, add .dataloaded to the article that was clicked then be able to click on play/pause button only on the div.loaddata with 'dataloaded'.
New question: is there a way to change a function when you click on an element? Like a new onclick?

I saw this answer this morning (but had a busy day!) .. I created a jsfiddle for playing multiple sounds some time ago but when I re-read the question this evening, it seemed not quite enough to cover what you were trying to do.
I found that there is a library called MediaElement.js available; the source code is outlined extensively in this article and there is a demo also
Alternately there is very good (slightly lengthy!) article about designing a custom audio player by Rose (second name not given) on her website where there is also a demo
Best of all though, a fellow SO-er gives a wonderful answer to a similar question (about a year ago) and there is a jsfiddle provided in that answer (top pick i think..)
the code (hope there's room!):
var audio_player = $("#audio-player");
var play_button = $('#play');
var progress_bar = $("#progressbar");
var time = $("#time");
var mute_button = $('#mute');
var volume_bar = $('#volume');
var more_info = $('#more-info-box');
var info_tray = $("#info-tray");
var player = document.getElementById('player');
var duration = 0;
var volume = 0.75;
player.onloadedmetadata = function() {
duration = player.duration;
progress_bar.progressbar("option", { 'max' : duration });
};
player.load();
player.volume = 0.75;
player.addEventListener("timeupdate", function() {
progress_bar.progressbar('value', player.currentTime);
time.text(getTime(player.currentTime));
}, false);
function getTime(t) {
var m=~~(t/60), s=~~(t % 60);
return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
}
function getProgressBarClickInfo(progress_bar, e) {
var offset = progress_bar.position();
var x = e.pageX - offset.left; // or e.offsetX (less support, though)
var y = e.pageY - offset.top; // or e.offsetY
var max = progress_bar.progressbar("option", "max");
var value = x * max / progress_bar.width();
return { x: x, y: y, max: max, value: value };
}
volume_bar.progressbar({
value : player.volume*100,
});
volume_bar.click(function(e) {
var info = getProgressBarClickInfo($(this), e);
volume_bar.progressbar('value', info.value);
player.volume = info.value / info.max;
});
progress_bar.progressbar({
value : player.currentTime,
});
progress_bar.click(function(e) {
var info = getProgressBarClickInfo($(this), e);
player.currentTime = player.duration / info.max * info.value;
});
play_button.click(function() {
player[player.paused ? 'play' : 'pause']();
$(this).toggleClass("fa-play", !player.paused);
$(this).toggleClass("fa-pause", player.paused);
});
mute_button.click(function() {
if (player.volume == 0) {
player.volume = volume;
} else {
volume = player.volume;
player.volume = 0;
}
volume_bar.progressbar('value', player.volume * 100);
$(this).toggleClass("fa-volume-up", player.volume != 0);
$(this).toggleClass("fa-volume-off", player.volume == 0);
});
more_info.click(function() {
audio_player.animate({
height: (audio_player.height() == 50) ? 100 : 50
}, 1000);
});
#audio-player {
height: 50px;
width: 500px;
overflow: hidden;
background-color: #2B2B2B;
color: white;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
#controls {
height: 50px;
background-color: #808080;
width: 350px;
}
.time {
font-size: 10px;
color: white;
position: relative;
top: 14px;
margin: 5px;
}
.ui-progressbar {
background: #2B2B2B;
}
.ui-progressbar-value {
background: white;
}
#progressbar, #volume {
height: 10px;
display: inline-block;
border-radius: 0px;
border: none;
position: relative;
top: 16px;
}
#progressbar {
width: 150px;
}
#play, #mute {
font-size: 16px;
width: 20px;
position: relative;
top: 17px;
}
#play {
margin-left: 15px;
}
#volume {
width: 50px;
}
#more-info-box {
display: inline-block;
width: 150px;
height: 50px;
position: relative;
left: 350px;
top: -50px;
padding-top: 18px;
text-align: center;
font-family: sans-serif;
font-size: 12px;
color: white;
}
#more-info-box, #more-info-box > span {
cursor: context-menu;
}
#info-tray {
display: inline-block;
color: white;
position: relative;
width: 100%;
top: -65px;
height: 50px;
padding: 5px;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<audio id="player">
<source src="http://www.noiseaddicts.com/samples_1w72b820/2543.mp3" type="audio/mpeg" />
</audio>
<div id="audio-player">
<div id="controls">
<i id="play" class="fa fa-pause"></i>
<span id="start-time" class="time">00:00</span>
<div id="progressbar"></div>
<span id="time" class="time">00:00</span>
<i id="mute" class="fa fa-volume-up"></i>
<div id="volume"></div>
</div>
<div id="more-info-box">
<span id="more-info">MORE INFO</span>
</div>
<div id="info-tray">
Track: <span id="track">Semper Fidelis March</span>
</div>
</div>
Hope one of these solutions helps!

I was able to find a working solution. It's not pretty but it works.
First I had two elements, one that loads the data and other controls the player.
<article id="145">
<div class="loaddata" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3" onclick="setTimeout(function() { document.getElementById('145').classList.add('dataloaded');document.getElementById('145').classList.add('dataloaded'); }, 1);"> Load "Song1" </div>
<div class="front-playpause">song loaded</div>
</article>
JS:
$(".loaddata").on("click", function() {
var mp3Url = $(this).data('rel');
$("#audio-player_html5").attr('src', mp3Url);
$('.dataloaded').removeClass();
$('#ppbtn').click();
});
$(".front-playpause").click(function(){
$('#ppbtn').click();
});
CSS:
.front-playpause {display:none}
.dataloaded .front-playpause {display:block}
.dataloaded .loaddata {display:none}
When loaddata is clicked, it adds the class 'dataloadedto the article ID and then the CSS hidesloaddataand then displaysfront-playpause` and that's how I found a work around.
Thanks everyone for the help.