Develop Reference

Change input spinner number and with that change input value

I'm trying to make an item card for a web shop that sels food. What I'm trying to do is that on the first click on the button with the cart icon the amout of item is increased by +1 (now it is increasing by steps that I have set on input element). But I also want it to increase the value (weight/amount) of the product by the step that is defined on the input value and the cart icon has to change to the plus icon (That I managed to do). And for the minus button the logic is reversed... so i click the - button the value/weight goes down and amount goes down and if it reaches 0 they should dissaper.
EXAMPLE:
I click the cart icon the amount increases to 1 and value/weight increases to 0.25kg... if I click the cart button again the amount goes to 2 and weight increases to 0.5kg. Now if I click the - button the amount goes down to 1 and weight to 0.25kg and if I click it again the amount should go to 0 and weight to 0 and the button wit - icon and the input field should disappear.
MY PROBLEMS:
My first problem is that I cant manage to set the amount to increase
by 1 and value/weight by the defined step
My second problem is that my code keeps hiding the [-] button and
input field on every click not when it reaches 0
Is this approach even correct or have I overcomplicated the thing I'm
trying to do? Is there an easier solution to this?
I'm providing the jsfiddle in this link so that you can have a loot at my code and hopefully understand and help me out with a couple of my problems...
My HTML layout:
<div class="container">
<div class="row">
<div class="col-6 col-md-4 col-lg-3 product-card-wrapper">
<div class="product-card">
<div class="row">
<div class="col-12">
<div class="product-card-image-wrapper">
<a href="#" class="product-image-link">
<div class="product-card-image"></div>
</a>
<div class="prodAmountBox"><span class="prodAmount valueOnChange hidden"></span> kg</div>
</div>
</div>
<div class="col-12">
<div class="product-card-body">
<div class="product-heading">
<h3>File mignon</h3>
</div>
<div class="heartIT-btn-holder">
<a href="#" class="heartIt">
<div class="crossFadeImg">
<img src="./assets/images/heart.svg" alt="" class="img-fluid bottom" />
<img src="./assets/images/heart_black.svg" alt=""
class="img-fluid top transparent" />
</div>
</a>
</div>
<div class="product-desc">
<p class="m-0">Dry aged steak cca. 250g</p>
</div>
<div class="product-price-box">
<div class="product-price">8,78<span> €/pc.</span></div>
<div class="price-per-full-unit">Price per kg: 43.89 €</div>
</div>
<div class="product-weight">
<input id="changedInput" data-name="Item One" data-price="8.78" type="number" value=""
data-decimals="2" min="0.25" max="999" step="0.25" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My javascript + jQuery:
$(document).ready(function () {
$("input[type='number']").inputSpinner({
decrementButton: "<strong class='decreaseInCart'>-</strong>",
incrementButton: "<strong class='addToCart'>+</strong>",
buttonsClass: 'btn-outline-secondary',
groupClass: 'flex-nowrap'
});
var $changedInput = $('#changedInput');
var $valueOnInput = $('#valueOnInput');
var $valueOnChange = $('.valueOnChange');
$changedInput.on('input', function (event) {
$valueOnInput.html($changedInput.val());
});
$changedInput.on('change', function (event) {
$valueOnChange.html($changedInput.val());
});
//Klik event ki zamenja sliko košarice z plus znakom
$('.btn-increment').click(function () {
$('.input-group-prepend').css('display', 'block');
$('.input-group-text').css('display', 'block');
$('.form-control').css('display', 'block');
$('strong').removeClass('addToCart');
});
$('.btn-decrement').click(function () {
$('.input-group-prepend').css('display', 'none');
$('.input-group-text').css('display', 'none');
$('.form-control').css('display', 'none');
$('strong').addClass('addToCart');
});
});
For the input field I'm using this plugin

You are just assigning the value from amount to kilos without processing it. You can solve it with this code $changedInput.val() * 0.25.
You are hiding the minus button without checking the value. You can solve it by if($changedInput.val() != 0).
You can combine selectors if you are performing the same action like this: $(".input-group-prepend, .input-group-text, .form-control").css('display', "none");.
You also have an issue with input values:
<input id="changedInput" data-name="Item One" data-price="8.78" type="number" value="" data-decimals="2" min="0.25" max="999" step="0.25"/>. Step should be 1 and min should 0.
Here is an example fixing all these issues:
$(document).ready(function() {
$("input[type='number']").inputSpinner({
decrementButton: "<strong class='decreaseInCart'>-</strong>",
incrementButton: "<strong class='addToCart'>+</strong>",
buttonsClass: "btn-outline-secondary",
groupClass: "flex-nowrap",
});
var $changedInput = $("#changedInput");
var $valueOnInput = $("#valueOnInput");
var $valueOnChange = $(".valueOnChange");
let $dataFactor = $changedInput.attr("data-factor");
$changedInput.on("input", function(event) {
$valueOnInput.html($changedInput.val())
})
$changedInput.on("change", function(event) {
$valueOnChange.html($changedInput.val() * $dataFactor);
})
//Klik event ki zamenja sliko košarice z plus znakom
$(".btn-increment").click(function() {
$(".input-group-prepend, .input-group-text, .form-control").css('display', "block");
$("strong").removeClass("addToCart");
});
$(".btn-decrement").click(function() {
if ($changedInput.val() != 0)
return;
$(".input-group-prepend, .input-group-text, .form-control").css('display', "none");
$("strong").addClass("addToCart");
});
});
/*___Color_variables___*/
.product-card-wrapper {
padding-left: 10px;
padding-right: 10px;
}
.product-card {
border-radius: 15px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
background: #FFFFFF;
margin-bottom: 15px;
}
.product-card .product-card-image-wrapper {
position: relative;
}
.product-card .product-card-image-wrapper a .product-card-image {
height: 220px;
background: url("https://sharpmagazineme.com/uploads/2018/10/05102018195139.jpg") no-repeat center;
background-size: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.product-card .product-card-image-wrapper .prodAmountBox {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
left: 9px;
bottom: 0;
position: absolute;
color: #FFFFFF;
background: red;
padding: 4px 6px;
font-size: 0.875em;
}
.product-card .product-card-body {
position: relative;
height: 180px;
padding: 10px;
}
.product-card .product-card-body .product-heading {
width: 95%;
}
.product-card .product-card-body .product-heading h3 {
text-transform: uppercase;
font-size: 1em;
}
.product-card .product-card-body .product-heading h3 a {
text-decoration: none;
color: #000000;
}
.product-card .product-card-body .heartIT-btn-holder .heartIt {
position: absolute;
top: 9px;
right: 9px;
background-color: #FFFFFF;
height: 30px;
width: 30px;
border-radius: 50px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
}
.product-card .product-card-body .heartIT-btn-holder .heartIt .crossFadeImg {
position: relative;
height: 30px;
width: 30px;
margin: 5px auto;
text-align: center;
}
.product-card .product-card-body .heartIT-btn-holder .heartIt .crossFadeImg img {
height: 18px;
position: absolute;
top: 2px;
left: 6px;
}
.product-card .product-card-body .heartIT-btn-holder .heartIt .crossFadeImg .transparent {
opacity: 0;
}
.product-card .product-card-body .product-desc {
width: 100%;
}
.product-card .product-card-body .product-desc p {
font-size: 0.875em;
line-height: 18px;
}
.product-card .product-card-body .product-weight {
padding-top: 15px;
padding-bottom: 5px;
position: absolute;
bottom: 7px;
right: 9px;
}
.product-card .product-card-body .product-weight .input-group {
white-space: nowrap;
}
.product-card .product-card-body .product-weight .input-group .input-group-prepend .input-group-text,
.product-card .product-card-body .product-weight .input-group .input-group-append .input-group-text {
display: none;
border: none;
background-color: transparent;
color: #000000 !important;
padding-left: 0;
}
.product-card .product-card-body .product-weight .input-group .input-group-prepend button,
.product-card .product-card-body .product-weight .input-group .input-group-append button {
color: #000000 !important;
background-color: #DEDEDE;
border-radius: 60px;
padding: 5px 0px;
border: none;
font-size: 1.25em;
}
.product-card .product-card-body .product-weight .input-group .input-group-prepend {
display: none;
}
.product-card .product-card-body .product-weight .input-group .input-group-append .btn-increment .addToCart {
content: url("https://w7.pngwing.com/pngs/1022/32/png-transparent-shopping-cart-icon-shopping-cart-logo-icon-shopping-cart-label-coffee-shop-shopping-mall.png");
height: 16px;
width: 16px;
}
.product-card .product-card-body .product-weight .input-group .form-control {
display: none;
padding-right: 6px;
flex: unset;
width: 60px;
border: none;
color: #000000 !important;
background: transparent;
}
.product-card .product-card-body .product-price-box {
padding-top: 0;
position: absolute;
top: 70px;
right: 10px;
width: 100%;
}
.product-card .product-card-body .product-price-box .product-price {
font-size: 1.5em;
text-align: right;
}
.product-card .product-card-body .product-price-box .product-price span {
font-size: 0.675em;
}
.product-card .product-card-body .product-price-box .price-per-full-unit {
margin-top: -5px;
text-align: right;
font-size: 0.75em;
color: #797979;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://shaack.com/projekte/bootstrap-input-spinner/src/_bootstrap-input-spinner.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6 col-md-4 col-lg-3 product-card-wrapper">
<div class="product-card">
<div class="row">
<div class="col-12">
<div class="product-card-image-wrapper">
<a href="#" class="product-image-link">
<div class="product-card-image"></div>
</a>
<div class="prodAmountBox"><span class="prodAmount valueOnChange hidden"></span> kg</div>
</div>
</div>
<div class="col-12">
<div class="product-card-body">
<div class="product-heading">
<h3>File mignon</h3>
</div>
<div class="heartIT-btn-holder">
<a href="#" class="heartIt">
<div class="crossFadeImg">
<img src="./assets/images/heart.svg" alt="" class="img-fluid bottom" />
<img src="./assets/images/heart_black.svg" alt="" class="img-fluid top transparent" />
</div>
</a>
</div>
<div class="product-desc">
<p class="m-0">Dry aged steak cca. 250g</p>
</div>
<div class="product-price-box">
<div class="product-price">8,78<span> €/pc.</span></div>
<div class="price-per-full-unit">Price per kg: 43.89 €</div>
</div>
<div class="product-weight">
<input id="changedInput" data-name="Item One" data-price="8.78" type="number" value="" data-decimals="2" min="0" max="999" step="1" data-factor="0.50"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Your second problem can be solve by wrapping these statements.
$(".btn-decrement").click(function(){
if (someValue === 0){
$(".input-group-prepend").css('display', "none");
$(".input-group-text").css('display', "none");
$(".form-control").css('display', "none");
$("strong").addClass("addToCart");
}
});

How do you wrap four cards around a centered card?

I want to create a homepage with 5 card elements.
I want to have 4 items surrounding the 5th element that is centered.
This is a picture of what I'm trying to do. https://imgur.com/a/3jvHicq
I have tried searching but I haven't found an example that talks about breaking the "wrap" text on the next row as it shows in the picture. I just don't know what else to search for.
I tried absolute position but that was NOT what I needed. I tried changing left: 100px and such to align the items but they wouldn't even move without the absolute position (I don't understand why). I tried using floats but it just created a mess.
.hp-container {
background: rgb(139, 174, 250);
flex: flex;
justify-content: center
}
/* Left Side */
.home-card-1 {
margin: 10px;
background: gray;
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-4 {
margin: 10px;
background: rgb(93, 130, 207);
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Right Side */
.home-card-3 {
margin: 10px;
background: rgb(231, 126, 126);
border-radius: 5px;
border: solid;
border-color: rgb(25, 0, 255);
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-5 {
margin: 10px 10px 10px 550px;
background: rgb(87, 0, 29);
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Middle */
.home-card-2 {
margin: 10px;
background: rgb(122, 177, 165);
border-radius: 5px;
border: solid;
border-color: rgb(37, 0, 0);
Color: white;
text-justify: justify;
text-align: center;
width: 500px;
height: 600px;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>

You can use css grid system. This example shows the basics but you can modify it and make it work as required
.hp-container {
background: rgb(139, 174, 250);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
[class^='home-card-'] {
background: grey;
color: white;
text-align: center;
}
.home-card-2 {
margin: 10px 0;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class='col-1'>
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
<div class='col-3'>
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>

If you are using flex, then you need to modify your html structure a little bit. CSS flex works in 1-d only (for 2-d you should use css grid). Still, if you want to use flex, you need to modify the html structure in such a manner that there are 3 columns with left containing 2 divs, mid containing 1 div and right containing 2 divs:
.hp-container {
background: rgb(139, 174, 250);
display: flex;
justify-content: center;
flex-direction: row;
}
/* Left Side */
.home-card-1 {
margin: 10px;
background: gray;
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-4 {
margin: 10px;
background: rgb(93, 130, 207);
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Right Side */
.home-card-3 {
margin: 10px;
background: rgb(231, 126, 126);
border-radius: 5px;
border: solid;
border-color: rgb(25, 0, 255);
color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-5 {
margin: 10px;
background: rgb(87, 0, 29);
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Middle */
.home-card-2 {
margin: 10px;
background: rgb(122, 177, 165);
border-radius: 5px;
border: solid;
border-color: rgb(37, 0, 0);
color: white;
text-justify: justify;
text-align: center;
width: 500px;
height: 600px;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class="left-wrap">
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="mid-wrap">
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
</div>
<div class="right-wrap">
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>
for css grid, #brk as given a good answer.
Hope it helps. Revert for any doubts.

You can use flex like this:
.hp-container{
display: flex;
flex-direction: row;
}
.card{
color: red;
width: 150px;
height: 200px;
background: yellow;
margin: 10px;
text-align: center;
padding: 5px;
}
.home-card-3{
height: 420px;
}
<div class="hp-container">
<div class="col1">
<div class="card home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="card home-card-2">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="col2">
<div class="card home-card-3">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
</div>
<div class="col3">
<div class="card home-card-4">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="card home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>

Jquery Prev() last 3 tag names to get data attribute

Hey all I am trying to figure out the path of which it takes for me to go from a button click on the ADDtab_138269500 and go back (previous) all the way to the span tag it gets to first going backwords.
JSFIDDLE for you to see
The JS code I have thus far that doesn't seem to be it (as it doesn't have data for that tag):
$(document).ready(function() {
$('[data-item-id="ADDtab_138269500"]').click(function() {
var blah = $(this).prev().prev().closest("div").find('span');
console.log(blah);
});
});
The HTML:
<div class="input-group" style="margin-top: 40px;">
<span data-id="Writter Status" style="color: rgb(255, 46, 49); position: absolute; z-index: 8; text-transform: uppercase; text-shadow: rgba(150, 150, 150, 0.87) 0px 1px 1px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; left: 13px; top: 14px; width: 300px; letter-spacing: 1px;">Writter Status</span>
<span id="lblBG" style="box-shadow: 0px 5px 6px -4px rgba(0,0,0,0.55);border-radius: 4px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; left: 7px; top: 14px; width: 98px; height: 16px; position: absolute; z-index: 3; background-color: rgba(238, 238, 238, 1);"></span>
<div class="input-group-addon" style="width: 33px;">
<img src="data:image/svg+xml;base64,PD94bWw..." id="iconImg_currentUsers" style="width: 20px; height:20px;">
</div>
<div class="col-sm-10">
<span id="inventory" class="tips form-control input-sm" data_tooltip="example 1" style="width: 500px; background-color: rgb(254, 231, 231); height: 37px;" data-cnt="0"><div class="select3-multiple-input-container">
<span class="select3-multiple-selected-item" data-item-id="1" style="padding-right: 5px;">Pending</span>
<span class="select3-multiple-selected-item" data-item-id="2" style="padding-right: 5px;">Approved</span>
<span class="select3-multiple-selected-item" data-item-id="3" style="padding-right: 5px;">Denied</span>
<span class="select3-multiple-selected-item" data-item-id="ADDtab_138269500" style="padding-right: 5px; background-color: rgb(40, 177, 40); z-index: 50;" data-popmodal_id="185">ADD ITEM</span>
<div style="top: 23px; left: 168.344px;" data-popmodal_id="185" data-popmodal="open" class="popModal animated bottomLeft fadeInBottom">
</div>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="select3-multiple-input" placeholder="" style="width: 678px; background-color: rgb(255, 255, 255);"><span class="select3-multiple-input select3-width-detector"></span>
<div class="clearfix"></div>
</div>
</span>
</div>
</div>
<div id=""></div>
What I am looking to achieve is getting the value of data-id="Writter Status" from the top span tag.

The simplest method to achieve this would be to go up the DOM from the button to the nearest parent container of both elements, then find() the span you want to read the data-id from, like this:
$('[data-item-id="ADDtab_138269500"]').click(function() {
var id = $(this).closest("div.input-group").find('span[data-id]').data('id');
console.log(id);
});
.input-group {
margin-top: 40px;
}
.input-group .status {
color: rgb(255, 46, 49);
position: absolute;
z-index: 8;
text-transform: uppercase;
text-shadow: rgba(150, 150, 150, 0.87) 0px 1px 1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
left: 13px;
top: 14px;
width: 300px;
letter-spacing: 1px;
}
.input-group .input-group-addon {
width: 33px;
}
.input-group .input-group-addon img {
width: 20px;
height: 20px;
}
.input-group .select3-multiple-selected-item {
padding-right: 5px;
}
.input-group .select3-multiple-selected-item.highlight {
background-color: rgb(40, 177, 40);
z-index: 50;
}
.input-group .popModal {
top: 23px;
left: 168.344px;
}
.input-group .select3-multiple-input {
width: 678px;
background-color: rgb(255, 255, 255);
}
#lblBG {
box-shadow: 0px 5px 6px -4px rgba(0, 0, 0, 0.55);
border-radius: 4px;
border: 1px solid rgba(204, 204, 204, 1);
border-image: none;
left: 7px;
top: 14px;
width: 98px;
height: 16px;
position: absolute;
z-index: 3;
background-color: rgba(238, 238, 238, 1);
}
#inventory {
width: 500px;
background-color: rgb(254, 231, 231);
height: 37px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<span data-id="Writter Status" class="status">Writter Status</span>
<span id="lblBG"></span>
<div class="input-group-addon">
<img src="data:image/svg+xml;base64,PD94bWw..." id="iconImg_currentUsers">
</div>
<div class="col-sm-10">
<span id="inventory" class="tips form-control input-sm" data_tooltip="example 1" data-cnt="0">
<div class="select3-multiple-input-container">
<span class="select3-multiple-selected-item" data-item-id="1">Pending</span>
<span class="select3-multiple-selected-item" data-item-id="2">Approved</span>
<span class="select3-multiple-selected-item" data-item-id="3">Denied</span>
<span class="select3-multiple-selected-item highlight" data-item-id="ADDtab_138269500" data-popmodal_id="185">ADD ITEM</span>
<div data-popmodal_id="185" data-popmodal="open" class="popModal animated bottomLeft fadeInBottom"></div>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="select3-multiple-input" placeholder="" />
<span class="select3-multiple-input select3-width-detector"></span>
<div class="clearfix"></div>
</div>
</span>
</div>
</div>
Also, you really should not be using inline styling where possible. Extract your CSS rules to an external stylesheet as in the example above. Note how much cleaner the HTML is to read and understand.
Finally, your HTML is currently invalid as div elements cannot be children of span elements.

Horizontal Scroll on hover / on click

First of all thanks in advance for any help.
Case:
I have multiple divs in one line. These divs are in a box and I'm able to scroll horizontally in this box to see the other divs.
I've made two buttons (L for left and R for right) to scroll horizontally when hovering or clicking these buttons.
Problem:
I've already tried with some CSS and JavaScript but I can't seem to get this right.
Does anybody know how to achieve horizontal scroll when hovering / clicking on a button (or arrow)?
I've made a fiddle: https://jsfiddle.net/wsemLhtz/
Would be awesome to get this working with CSS only or simple JavaScript since I have to implement this into a Joomla system. I know there are some jQuery plug-ins out there but in Joomla I have to replace all $-tags with "jQuery" and it's quite annoying to do this in every file.
Best regards.
.box-outer {
width: 20rem;
height: 6rem;
position: relative;
}
.arrow-left {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
left: 0rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.arrow-right {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
right: 10rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.box-inner {
width: 10rem;
height: 6rem;
position: absolute;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
.thumb {
height: 5rem;
width: 2rem;
background-color: green;
border: 1px solid black;
display: inline-block;
}
<div class="box-outer">
<a class="arrow-left">L</a>
<a class="arrow-right">R</a>
<div class="box-inner">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>

You can use that)
var box = $(".box-inner"), x;
$(".arrow").click(function() {
if ($(this).hasClass("arrow-right")) {
x = ((box.width() / 2)) + box.scrollLeft();
box.animate({
scrollLeft: x,
})
} else {
x = ((box.width() / 2)) - box.scrollLeft();
box.animate({
scrollLeft: -x,
})
}
})
.box-outer {
width: 20rem;
height: 6rem;
position: relative;
}
.arrow-left {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
left: 0rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.arrow-right {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
right: 10rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.box-inner {
width: 10rem;
height: 6rem;
position: absolute;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
.thumb {
height: 5rem;
width: 2rem;
background-color: green;
border: 1px solid black;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="box-outer">
<a class="arrow-left arrow">L</a>
<a class="arrow-right arrow">R</a>
<div class="box-inner">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
Fiddle

FIDDLE:
$('a').click(function() {
switch ($(this).text()) {
case "L":
$('.box-inner').scrollLeft(-300);
break;
case "R":
$('.box-inner').scrollLeft(300);
break;
}
});

use jquery like following........
$(".arrow-left").click(function () {
var leftPos = $('.box-inner').scrollLeft();
$(".box-inner").animate({scrollLeft: leftPos - 50}, 1);
});
$(".arrow-right").click(function () {
var leftPos = $('.box-inner').scrollLeft();
$(".box-inner").animate({scrollLeft: leftPos + 50}, 1);
});
EDIT: Here is updated fiddle https://jsfiddle.net/wsemLhtz/5/

There you go ! Solution here using some simple Jquery :)
http://codepen.io/AxelCardinaels/pen/rxMrem
HTML :
<div class="box-outer">
<a class="arrow-left">L</a>
<a class="arrow-right">R</a>
<div class="box-inner">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
CSS :
.box-outer {
width: 20rem;
height: 6rem;
position: relative;
}
.arrow-left {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
left: 0rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.arrow-right {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
right: 10rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.box-inner {
width: 10rem;
height: 6rem;
position: absolute;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
.thumb {
height: 5rem;
width: 2rem;
background-color: green;
border: 1px solid black;
display: inline-block;
}
JS :
$(".arrow-left").click(function(){
// To get actual position
var actualScroll = $(".box-inner").scrollLeft();
// To set new position
$(".box-inner").scrollLeft(actualScroll+50)
})
Hope this is what you were looking for !

Progress bar percentage align with bar

I'm creating a progress bar, currently the percentage are shown in right side, but now I want the percentage able to follow the bar, no matter the blue bar is short or long.
Example that I expect
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
float: right;
margin-top: 10px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: 5px;
}
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>

HTML:
Move popup_survey_whitebox_percent inside popup_survey_whitebox_progressbar_inner:
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
</div>
</div>
CSS:
Change margin-top of popup_survey_whitebox_percent:
.popup_survey_whitebox_percent{
float:right;
margin-top: -15px;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#F30;
}
See Fiddle

You could set the margin-left of the percentage values equal to the width of the progress bar.
$('.popup_survey_whitebox_percent').each(function() {
$(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width'));
});
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
margin-top: 5px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popup_survey_whitebox_percent">75%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div class="popup_survey_whitebox_percent">15%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
<div class="test"></div>

try this
you only need to put your text percentage tag inside the progressbar html tag
div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span>
<br>
</div>
</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span>
</div>
</div>
try this
http://jsfiddle.net/e4wvyamh/