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 use scrollIntoView with overflow:hidden and without scrolling the page?

How to use scrollIntoView on container which has overflow:hidden and it shouldn't scroll the page?
Here is an example: at the bottom of the page text in container <div class="cnt'> which has fixed width and overflow hidden. I want to scroll items in this container without scrolling the page.
At the top of the page two buttons to scroll to first and last element. If i click on button it will scroll text in the container and scroll to that container at the bottom of the page.
I can't use scrollLeft because overflow is hidden. :(
Does anybody know how to solve it?
const cnt = document.querySelector('.cnt')
const spanElements = cnt.querySelectorAll('span');
const lastSpan = spanElements[spanElements.length - 1]
const firstSpan = spanElements[0]
lastSpan.scrollIntoView()
const buttons = Array.from(document.querySelectorAll('button'))
const [buttonToFirstEl, buttonToLastEl] = buttons;
buttonToFirstEl.onclick = function() {
firstSpan.scrollIntoView()
}
buttonToLastEl.onclick = function() {
lastSpan.scrollIntoView()
}
.cnt {
width: 90px;
overflow: hidden;
white-space: nowrap;
padding: 8px;
border: solid #ccc 1px;
}
.filler {
width: 100%;
height: 200px;
border: dashed 2px #ccc;
margin: 20px;
}
.root {
border: solid 1px;
}
<div class="root">
<button id="button">scroll to first element</button>
<button id="button">scroll to last element</button>
<div class="filler">
</div>
<div class="filler">
</div>
<div class="filler">
</div>
<div class="filler">
</div>
<div class="cnt">
<span>
first:tessst
</span>
<span>
2:dddd
</span>
<span>
3:cccddd
</span>
<span>
4:rreeee
</span>
<span>
last:dddrreddd
</span>
</div>
</div>
https://codepen.io/geeny273/pen/bGpxYqG

if you want scrolled element in .cnt class
you need to style every span in .cnt
.cnt span{
/* relative + block for make elements solid & listed*/
position : relative;
display : block;
color: red;
font-size : 16px;
}
and in .cnt parent you need to defined height for making scroll working
.cnt {
width: 90px;
/* for example 28px */
height : 28px;
overflow: hidden;
white-space: nowrap;
padding: 4px;
border: solid black 1px;
/* overflow y or x for making scroll*/
overflow-y : scroll;
}
i hope this steps help you

To get this correctly, (i.e with support for all writing-mode, direction and block-inline options) you'd basically have to rewrite scrollIntoView from scratch, while omitting the loop that goes up the tree of scrolling-boxes. This is not a trivial task.
If you don't need a bullet proof solution though, you can simply get the nearest scrolling-box and check by how much it should be scrolled to show the start of your element:
const cnt = document.querySelector('.cnt')
const spanElements = cnt.querySelectorAll('span');
const lastSpan = spanElements[spanElements.length - 1]
const firstSpan = spanElements[0]
const buttons = Array.from(document.querySelectorAll('button'))
const [buttonToFirstEl, buttonToLastEl] = buttons;
buttonToFirstEl.onclick = function() {
scrollIntoParentView( firstSpan );
}
buttonToLastEl.onclick = function() {
scrollIntoParentView( lastSpan );
}
function scrollIntoParentView( elem, options ) {
const directions = getSimpleScrollIntoViewDirections( elem, options );
const left = directions.inline_direction || 0;
const top = directions.block_direction || 0;
const new_options = {
left,
top,
behavior: (options && options.behavior) || "auto"
};
directions.scrolling_box.scrollBy( new_options );
}
function getSimpleScrollIntoViewDirections( elem, { block = "start", inline = "start" } = {} ) {
const element_bbox = elem.getBoundingClientRect();
const scrolling_box = getNearestScrollingBox( elem );
const scrolling_box_bbox = scrolling_box.getBoundingClientRect();
const block_direction = Math.round( element_bbox.top - scrolling_box_bbox.top);
const inline_direction = Math.round( element_bbox.left - scrolling_box_bbox.left);
return {
scrolling_box,
block_direction,
inline_direction
};
}
function getNearestScrollingBox( elem ) {
if( !elem.isConnected ) { return null; }
const elem_computed_styles = getComputedStyle( elem );
// not in specs, but that seems to be what browser implementations do
if( elem_computed_styles.getPropertyValue( 'position' ) === "fixed" ) {
return null;
}
const scrolling_box = elem.parentElement;
if( !scrolling_box ) {
return elem === document.scrollingElement ? null : document.scrollingElement;
}
const computed_styles = getComputedStyle( scrolling_box );
const scroll_x = computed_styles.getPropertyValue( "overflow-x");
const scroll_y = computed_styles.getPropertyValue( "overflow-y");
if(
(scroll_x === 'clip' && scroll_y === 'clip') ||
(scrolling_box.offsetHeight <= scrolling_box.scrollingHeight) ||
(scrolling_box.offsetWidth <= scrolling_box.scrollingWidth)
) {
return getNearestScrollingBox( scrolling_box );
}
return scrolling_box;
}
.cnt {
width: 90px;
overflow: hidden;
white-space: nowrap;
padding: 8px;
border: solid #ccc 1px;
}
.filler {
width: 100%;
height: 200px;
border: dashed 2px #ccc;
margin: 20px;
}
.root {
border: solid 1px;
}
<div class="root">
<button id="button">scroll to first element</button>
<button id="button">scroll to last element</button>
<div class="filler">
</div>
<div class="filler">
</div>
<div class="filler">
</div>
<div class="filler">
</div>
<div class="cnt">
<span>
first:tessst
</span>
<span>
2:dddd
</span>
<span>
3:cccddd
</span>
<span>
4:rreeee
</span>
<span>
last:dddrreddd
</span>
</div>
</div>

scrollLeft and scrollTop work well with overflow:hidden. I check scrollLeft property on first span element instead of its container
changing scrollLeft on parent element of span, solve this issue
firstSpan.parentElement.scrollLeft = 0;
const cnt = document.querySelector('.cnt')
const spanElements = cnt.querySelectorAll('span');
const lastSpan = spanElements[spanElements.length - 1]
const firstSpan = spanElements[0]
lastSpan.scrollIntoView()
const buttons = Array.from(document.querySelectorAll('button'))
const [buttonToFirstEl, buttonToLastEl] = buttons;
buttonToFirstEl.onclick = function() {
firstSpan.parentElement.scrollLeft = 0;
}
buttonToLastEl.onclick = function() {
const cnt = lastSpan.parentElement;
cnt.scrollLeft = cnt.scrollWidth;
}
.cnt {
width: 90px;
overflow: hidden;
white-space: nowrap;
padding: 8px;
border: solid #ccc 1px;
}
.filler {
width: 100%;
height: 200px;
border: dashed 2px #ccc;
margin: 20px;
}
.root {
border: solid 1px;
}
<div class="root">
<button id="button">scroll to first element</button>
<button id="button">scroll to last element</button>
<div class="filler">
</div>
<div class="filler">
</div>
<div class="filler">
</div>
<div class="filler">
</div>
<div class="cnt">
<span>
first:tessst
</span>
<span>
2:dddd
</span>
<span>
3:cccddd
</span>
<span>
4:rreeee
</span>
<span>
last:dddrreddd
</span>
</div>
</div>

jquery change time interval on click and when click function is done reset back to default

I have a custom content slider where the slide happens every after 5 seconds.The slider also have Next and Prev functionalities.
Problems:
When I click next the slide doesn't happen immediately.
After clicking next/prev the slider starts to slide very fast.
What I want to do:
1.When I click next/prev I want the slider to slide immediately without waiting for the 5 seconds interval. And when the slide is done reset the time interval to default ie 5 seconds.
<div id="content-slide">
<div id="content-slide-container">
<div class="content content-1"><h2>1</h2></div>
<div class="content content-2"><h2>2</h2></div>
<div class="content content-3"><h2>3</h2></div>
<div class="content content-4"><h2>4</h2></div>
<div class="content content-5"><h2>5</h2></div>
<div class="content content-6"><h2>6</h2></div>
<div class="content content-7"><h2>7</h2></div>
<div class="content content-8"><h2>8</h2></div>
<div class="content content-9"><h2>9</h2></div>
<div class="content content-10"><h2>10</h2></div>
<div class="content content-11"><h2>11</h2></div>
<div class="content content-12"><h2>12</h2></div>
<div class="content content-13"><h2>13</h2></div>
<div class="content content-14"><h2>14</h2></div>
<div class="content content-15"><h2>15</h2></div>
<div class="content content-16"><h2>16</h2></div>
</div>
</div>
<div id="navigation">
<span id="prev-slide">Prev</span>
<span id="next-slide">Next</span>
</div>
css
#content-slide {
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
#content-slide-container{
width: 3200px;
height: 100px;
}
.content {
width: 200px;
height: 100px;
background-color: #FF1493;
float: left;
}
.content h2{
font-size: 25px;
text-align: center;
}
#navigation{
width: 800px;
height: 20px;
margin: 0 auto;
}
#prev-slide{
width: 100px;
height: 20px;
float: left;
background-color: #000000;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}
#next-slide{
width: 100px;
height: 20px;
float: right;
background-color: #000000;
color: #FFFFFF;
text-align: center;
cursor: pointer;
}
js
$(document).ready(function(){
var foo = {
content_width : 200,
box : $("#content-slide-container"),
interval : 0,
counter : 1,
pause : 5000,
bar : false
};
function startSlider(){
foo.interval = setInterval(function(){
// Next
if(foo.bar){
foo.box.animate({'marginLeft':'+='+(foo.content_width)});
foo.counter--;
if(foo.counter<= 1){
foo.bar = false;
}
// Prev
}else{
foo.box.animate({'marginLeft':'-='+(foo.content_width)});
foo.counter++;
if(foo.counter>=16){
foo.bar = true;
}
}
},foo.pause);
}
startSlider();
function pauseSlider(){
clearInterval(foo.interval);
}
foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);
$('#prev-slide').click(function(){
if(foo.counter>1){
foo.bar = true;
startSlider();
}
});
$('#next-slide').click(function(){
if(foo.counter<16){
foo.bar = false;
startSlider();
}
});
});
JSFIDDLE here

Well I made slight updates to your function which is as below:
See inline comments
DEMO
$(document).ready(function(){
var foo = {
content_width : 200,
box : $("#content-slide-container"),
interval : 0,
counter : 1,
pause : 5000,
bar : false
};
function startSlider(){
foo.interval = setInterval(function(){
// Next
if(foo.bar){
slideLeft()//keep sliding left in a separate function
// Prev
}else{
slideRight()////keep sliding right in a separate function
}
},foo.pause);
}
//2 new functions for slideLeft and slideRight
function slideLeft(){
foo.box.animate({'marginLeft':'+='+(foo.content_width)});
foo.counter--;
if(foo.counter<= 1){
foo.bar = false;
}
}
function slideRight(){
foo.box.animate({'marginLeft':'-='+(foo.content_width)});
foo.counter++;
if(foo.counter>=16){
foo.bar = true;
}
}
//end
startSlider();
function pauseSlider(){
clearInterval(foo.interval);
}
foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);
$('#prev-slide').click(function(){
if(foo.counter>1){
foo.bar = true;
pauseSlider(); //on click clear interval
slideLeft() //call slideLeft
startSlider() //start the slide again with interval
}
});
$('#next-slide').click(function(){
if(foo.counter<16){
foo.bar = false;
pauseSlider() //on click clear interval
slideRight() //slide Right
startSlider() //start it again
}
});
});

You shoul move your code to setPrev and setNext functions. They should bee on the same level with startSlider function. Also you should clear interval after $('#prev-slide').click(function(){ and $('#next-slide').click(function(){

How do I start with the tab expanded (toggle)?

So I am modifying a web page and there is a table on the bottom of the page that starts minimized. When you click the arrow it opens upward to reveal the table. I am attempting to modify it so that it already starts off opened when the page loads.
HTML Snippet:
<div class="row" id="cp-toggle">
<div class="col-sm-12">
<div class="col-sm-2 col-sm-offset-5 toggle-button">
<a><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
<div class="col-sm-12" style="height: calc(100% - 25px);max-height: 250px;background-color:#d3d3d3;">
<div style="height: 100%;max-height: 250px;">
<div style="height: 25px;padding-top: 4px;">
<div style="float: left;padding-right: 9px;">
<span> Posts: </span> <span id="posts_count"></span>
</div>
</div>
<div style="overflow-y: scroll;height: 100%;max-height: 225px;">
<table id="result_table" class="table" style="display:table;" >
<thead class="result_thead"></thead>
<tbody class="result_tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Javascript:
var control_panel= (function(){
var container = $('#cp-toggle div:first-child');
var btn = $('#cp-toggle div:first-child').find("div").first();
var table_panel = $('#cp-toggle div:first-child div:nth-child(2)').first();
var open_css = "glyphicon-chevron-up";
var close_css = "glyphicon-chevron-down";
var open = function(){
container.find("span").first().switchClass(open_css, close_css);
var h = table_panel.height() + 25;
container.css("top", "calc(100% - "+ h +"px)");
};
var close = function(){
container.find("span").first().switchClass(close_css, open_css);
container.css("top", "calc(100% - 25px)")
};
var isOpen = function(){
return _.contains(container.find("span").first().attr('class').split(/\s+/), close_css);
};
var toggle = function(){
if (isOpen()){
close();
} else {
open();
}
};
btn.on('click', toggle);
return {
open: open,
close: close,
toggle: toggle,
isOpen : isOpen
};
}());
CSS Snippet:
#cp-toggle > div:first-child {
top: calc(100% - 25px);
position: fixed;
z-index: 25;
}
.toggle-button {
height: 25px;
padding-top: 3px;
background-color: #d3d3d3;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
text-align: center;
cursor: pointer;
}
#cp-toggle a {
color: #111;
}
#cp-toggle a:hover {
color: #777;
}
.tab-pane { height: 100%;}
#email-body { height: calc(100% - 80px); }
.body-view { height: 100%; overflow-y: scroll; }
.marked {
color: #ffd700;
}
.marked:hover {
color: #ffd700;
}
I have tried modifying the javascript to call control_panel.open(); at the end. I have tried altering the toggle to start with open();. None of these seem to have any effect on the code. I am not sure if I am looking in the correct area or if I am doing something incorrectly.

Try this (you tried something similar in a comment, but I'll explain in a minute...):
<script>
window.addEventListener('load', function() {
control_panel.open();
});
</script>
The problem with your original attempt...
<script>onLoad=control_panel.open();</script>
... was that it was setting a variable called 'onLoad' with the value of whatever was returned by running the function control_panel.open(), which it did immediately instead of waiting until the page was loaded. Instead, in my example I'm setting an 'onload' listener on the window, so that when the window finishes loading, then it'll run the control_panel.open() function that it is now aware of.

Mobile slider only responding every other touch

I am trying to build a slider based upon http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/. My goal is to make a horizontal, mobile-only slider that allows you to slide back and forth between the steps in a registration process.
The code works for the most part, but the slider only moves every other touch, and I'm not sure why.
http://codepen.io/anon/pen/zKhao
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="visible-xs mobile-tabs">
<div class="slider-wrap">
<div class="slider" id="slider">
<div class="holder">
<div class="slide-wrapper">
<h4 class="complete">Before you begin</h4>
</div>
<div class="slide-wrapper">
<h4 class="complete">1. Terms & Conditions</h4>
</div>
<div class="slide-wrapper">
<h4 class="current">2. Teams</h4>
</div>
<div class="slide-wrapper">
<h4>3. Add-Ons</h4>
</div>
<div class="slide-wrapper">
<h4>4. Review & Submit</h4>
</div>
</div>
</div>
</div>
</div>
CSS:
a
{
color: #5fa4db;
text-decoration: none;
}
.mobile-tabs
{
height: 45px;
overflow: hidden;
border-bottom: 1px solid #f1f2f4;
white-space: nowrap;
margin-bottom: 10px;
}
.mobile-tabs h4
{
color: #9fa9b2;
display: inline-block;
padding-right: 10px;
padding-bottom: 10px;
font-weight: bold;
font-size: 18px;
}
.mobile-tabs h4.current
{
border-bottom: 5px solid #5fa4db;
color: #0f2034;
}
.mobile-tabs h4.complete
{
color: #5fa4db;
}
/* CSS for mobile tab slider.
Source: http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/
*/
.mobile-tabs .animate {
transition: transform 0.3s ease-out;
}
.mobile-tabs .slider-wrap {
width: 100%;
position: absolute;
}
.mobile-tabs .slider {
width: 100%;
height: 100%;
overflow: hidden;
}
.mobile-tabs .ms-touch.slider {
overflow-x: scroll;
overflow-y: hidden;
-ms-overflow-style: none;
/* Hides the scrollbar. */
-ms-scroll-chaining: none;
/* Prevents Metro from swiping to the next tab or app. */
-ms-scroll-snap-type: mandatory;
/* Forces a snap scroll behavior on your images. */
-ms-scroll-snap-points-x: snapInterval(0%, 1%);
/* Defines the y and x intervals to snap to when scrolling. */
}
.mobile-tabs .holder {
width: 300%;
overflow-y: hidden;
}
.mobile-tabs .slide-wrapper {
float: left;
position: relative;
overflow: hidden;
}
.mobile-tabs .slide div {
width: 300px;
height: 500px;
z-index: 0;
}
JavaScript:
if (navigator.msMaxTouchPoints) {
$('#slider').addClass('ms-touch');
$('#slider').on('scroll', function () {
$('.slide-image').css('transform', 'translate3d(-' + (100 - $(this).scrollLeft() / 6) + 'px,0,0)');
});
} else {
var slider = {
el: {
slider: $("#slider"),
holder: $(".holder")
},
slideWidth: $('#slider').width(),
touchstartx: undefined,
touchmovex: undefined,
movex: 0,
index: 0,
longTouch: undefined,
init: function () {
this.bindUIEvents();
},
bindUIEvents: function () {
this.el.holder.on("touchstart", function (event) {
slider.start(event);
});
this.el.holder.on("touchmove", function (event) {
slider.move(event);
});
this.el.holder.on("touchend", function (event) {
slider.end(event);
});
},
start: function (event) {
// Test for flick.
this.longTouch = false;
setTimeout(function () {
window.slider.longTouch = true;
}, 250);
// Get the original touch position.
this.oldx = this.movex;
// The movement gets all janky if there's a transition on the elements.
$('.animate').removeClass('animate');
},
move: function (event) {
// Continuously return touch position.
this.touchmovex = event.originalEvent.touches[0].pageX;
// Calculate distance to translate holder.
this.movex = -this.oldx - this.touchmovex;
// Defines the speed the images should move at.
var panx = 100 - this.movex / 6;
if (this.movex < 600) { // Makes the holder stop moving when there is no more content.
this.el.holder.css('transform', 'translate3d(-' + this.movex + 'px,0,0)');
}
},
end: function (event) {
}
};
slider.init();
}
In order to emulate the issue, you'll have to view the code on a mobile device (or use Chrome's mobile emulation) and try to slide the slider back and forth. It will move, but only every other time you attempt to slide it.
I am completely lost, and any help will be appreciated.

This isn't really an answer, per se, but I've decided to throw the entire thing out and use jquery UI's Draggable feature to do what I need to do.
http://jqueryui.com/draggable/#constrain-movement