Develop Reference

Rewind and Fast Forward audio function not working

I wonder why my audio button for rewind and fast forward are not working. Instead of fast forward or vice versa the audio to 15 seconds, the song will start playing from the beginning. Here is my HTML code:
<div class="row clearfix">
#foreach($musics as $music)
<div class="col-lg-12 col-md-12">
<div class="card">
<a href="{{url('music/view/info/'.$music->id)}}">
<img class="card-img-left" src="{{$music->photo}}"/>
</a>
<div class="card-body">
<h4 class="card-title h5 h4-sm">{{$music->title}}</h4>
<p class="card-text">Artist: {{$music->artist}}</p>
<br><br>
<div style="text-align:right">
<audio id="audio">
<source src="{{asset('/storage/audios/After Like.mp3')}}">
</audio>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" id="rewindBTN" onclick="rewind()"><i class="fa fa-fast-backward"></i></button>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" id="playPauseBTN" onclick="playPause()"><i class="fa fa-play"></i></button>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" id="fastforwardBTN" onclick="fastforward()"><i class="fa fa-fast-forward"></i></button>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" onclick="stop()"><i class="fa fa-stop" ></i></button>
</div>
</div>
</div>
</div>
#endforeach
</div>
As for JavaScript
<script>
var audio = document.getElementById('audio');
var playPauseBTN = document.getElementById('playPauseBTN');
var rewindBTN = document.getElementById('rewindBTN');
var fastforwardBTN = document.getElementById('fastforwardBTN');
var count = 0;
function playPause(){
if(count == 0){
count = 1;
audio.play();
playPauseBTN.innerHTML = "<i class='fa fa-pause'></i>";
}else{
count = 0;
audio.pause();
playPauseBTN.innerHTML = "<i class='fa fa-play'></i>";
}
}
function rewind(){
audio.currentTime-=15;
}
function fastforward(){
audio.currentTime+=15;
}
function stop(){
playPause();
audio.pause();
audio.currentTime = 0;
playPauseBTN.innerHTML = "<i class='fa fa-play'></i>";
}
</script>
Seek solution to solve this issue

i dont know why when i change my operation variable inside the function when called into the event listener it doesnt change globally

i am new to javascript and i want to build a calculator but when i try to change the global variable operator in the event listener the operator variable changes only locally but when i need the variable in the event listener linked to equal button it takes the initial value of the operator which is empty so i cant choose the opertaor and do my calculations
let current_number = "";
let operator = "";
let previous = "";
let disp = document.querySelector("#current");
let prev = document.querySelector("#previous");
let equal = document.querySelector("#equal");
equal.addEventListener("click", calculate);
let number = document.querySelectorAll(".digit");
let oper = document.querySelectorAll(".operation");
number.forEach((element) => {
element.addEventListener("click", function(e) {
handleNumber(e.target.textContent);
disp.textContent = current_number;
});
});
oper.forEach((element) => {
element.addEventListener("click", (e) => {
handleOperator(e.target.textContent);
prev.textContent = previous + " " + operator;
disp.textContent = current_number;
});
});
function handleNumber(num) {
if (current_number.length < 10) {
current_number += num;
}
}
function handleOperator(op) {
operator = op;
previous = current_number;
current_number = "";
}
function calculate() {
previous = Number(previous);
current_number = Number(current_number);
if (operator === "+") {
previous += current_number;
} else if (operator === "-") {
previous -= current_number;
} else if (operator === "*") {
previous *= current_number;
} else {
previous /= current_number;
}
console.log(previous);
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background: linear-gradient(to right, #2a92c7, #00ffc6);
}
#container {
display: flex;
justify-content: center;
min-height: 100vh;
}
.btn {
border: 1px solid white;
border-radius: 0;
}
#main {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
height: 100px;
}
#current {
font-size: 2rem;
}
#display {
background-color: rgba(13, 42, 6, 0.7);
}
.btn:hover {
background-color: #9ea0a2;
}
.digit {
font: 900;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div
class="row text-light align-items-center justify-content-center"
style="min-height: 100vh"
>
<div id="display" class="col-sm-5 col-xl-4">
<div class="row">
<div id="main" class="col-12 bg-gradient">
<div id="previous" class="col"></div>
<div id="current" class="col"></div>
</div>
<button class="col-6 btn btn-secondary shadow-none">AC</button>
<button class="col-3 btn btn-secondary shadow-none">Del</button>
<button class="operation col-3 btn btn-secondary shadow-none">
/
</button>
<button class="digit col-3 btn btn-secondary shadow-none">1</button>
<button class="digit col-3 btn btn-secondary shadow-none">2</button>
<button class="digit col-3 btn btn-secondary shadow-none">3</button>
<button class="col-3 btn btn-secondary shadow-none operation">
*
</button>
<button class="digit col-3 btn btn-secondary shadow-none">4</button>
<button class="digit col-3 btn btn-secondary shadow-none">5</button>
<button class="digit col-3 btn btn-secondary shadow-none">6</button>
<button class="col-3 btn btn-secondary shadow-none operation">
-
</button>
<button class="digit col-3 btn btn-secondary shadow-none">7</button>
<button class="digit col-3 btn btn-secondary shadow-none">8</button>
<button class="digit col-3 btn btn-secondary shadow-none">9</button>
<button class="col-3 btn btn-secondary shadow-none operation">
+
</button>
<button
id="dicim"
class="digit col-3 btn btn-secondary shadow-none"
>
.
</button>
<button class="digit col-3 btn btn-secondary shadow-none">0</button>
<button id="equal" class="col-6 btn btn-secondary shadow-none">
=
</button>
</div>
</div>
</div>
</div>
</body>
</html>

If you debug you would see what is happening
function handleOperator(op) {
console.log('handleOperator', operator, op);
operator = op;
You will see that your op has a bunch of whitespace in it.
trim it
operator = op.trim();
or better yet use data attributes
<button class="col-3 btn btn-secondary shadow-none operation" data-value="*">*</button>
and reading it
handleOperator(e.currentTarget.dataset.value);

How to make a function work for multiple div's with the same classes in javascript?

I've been trying to make a web-based tallying-application using javascript. I got it to work, but only for the first instance of a class (e.g. first tallying-element).
How do I make the function work for multiple the subsequent instances of the tallying-elements?
Also, I'm using Bootstrap v5.1.3 for the css, but did not add the lengthy code.
Your help is greatly appreciated!
let add = document.querySelector(".add");
let minus = document.querySelector(".minus");
let reset = document.querySelector(".reset");
let counter = document.querySelector(".counter");
add.addEventListener('click', addCounter);
minus.addEventListener('click', minusCounter);
reset.addEventListener('click', resetCounter);
function addCounter(item) {
counter_num = counter.innerHTML
counter.innerHTML = parseInt(counter_num) + 1
}
function minusCounter(){
counter_num = counter.innerHTML
if (counter_num == 0){
return false
}
counter.innerHTML = parseInt(counter_num) - 1
}
function resetCounter(){
if (counter.innerHTML == 0){
return false
}
if (confirm("Weet je zeker dat je de telling wilt resetten?") == true){
counter.innerHTML = 0;
resetCounter = "De telling is gereset!"
} else {}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devide-width", initial-scale="1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Turf-app geadresseerd voorschrijven</title>
<style>
.counter{color:white; font-size: 25px; border-radius: 10%;max-width:50px;}
.tally_container{background-color:lightgrey; border-radius: 10px; padding:20px;}
.add{width: 38px; height: 38px;}
.minus{width: 38px; height: 38px;}
.title-text{color: white;}
.counter2{color:white; font-size: 25px; border-radius: 10%;max-width:50px;}
</style>
</head>
<body class="jumbotron bg-dark">
<h1 class="text-center mx-4 mt-4 mb-5 title-text">Turf-app geadresseerd voorschrijven</h1>
<div class="container" id="1">
<div class="tally_container mt-3 mb-3" name="tally-element">
<div class="vraag-container mb-3">
<h3>Patiënten zonder recept</h3>
</div>
<div class="counter-div text-center">
<div class="mx-2 text-center mb-2 counter bg-dark">0</div>
</div>
<div class="buttons">
<button class="btn btn-success mx-2 add">+</button>
<button class="btn btn-danger mx-2 minus">-</button> <br>
<button class="btn btn-primary mx-3 mt-4 reset">Reset</button>
</div>
</div>
</div>
<div class="container" id="2">
<div class="tally_container mt-3 mb-3" name="tally-element">
<div class="vraag-container mb-3">
<h3>No-shows</h3>
</div>
<div class="counter-div text-center">
<div class="mx-2 text-center mb-2 counter bg-dark">0</div>
</div>
<div class="buttons">
<button class="btn btn-success mx-2 add">+</button>
<button class="btn btn-danger mx-2 minus">-</button> <br>
<button class="btn btn-primary mx-3 mt-4 reset">Reset</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.
let add = document.querySelectorAll(".add");
...
add.forEach(elem => elem.addEventListener('click', addCounter));

With some help, I managed to fix it. Every time a button is clicked, the closest '.counter' should be grabbed. See code.
let add = document.querySelectorAll(".add");
let minus = document.querySelectorAll(".minus");
let reset = document.querySelectorAll(".reset");
add.forEach(elem =>elem.addEventListener('click', addCounter));
minus.forEach(elem =>elem.addEventListener('click', minusCounter));
reset.forEach(elem=> elem.addEventListener('click', resetCounter));
function addCounter(elem) {
let counter = elem.target.closest(".container").querySelector(".counter")
counter_num = counter.innerHTML
counter.innerHTML = parseInt(counter_num) + 1
}
function minusCounter(elem){
let counter = elem.target.closest(".container").querySelector(".counter")
counter_num = counter.innerHTML
if (counter_num == 0){
return false
}
counter.innerHTML = parseInt(counter_num) - 1
}
function resetCounter(elem){
let counter = elem.target.closest(".container").querySelector(".counter")
if (counter.innerHTML == 0){
return false
}
if (confirm("Weet je zeker dat je de telling wilt resetten?") == true){
counter.innerHTML = 0;
resetCounter = "De telling is gereset!"
} else {}
}

Not able to display the image in the cropping area

Trying to display the image to the cropper. The image URL is there in the html src attribute but the image is not appearing.
When I click the edit button, I need to show the current image(The image which is above the edit button) in the cropper. So I can crop the part of the image i want. After cropping the image, if i click the update button, it should be updated. Please help me to complete.
window.onload = function() {
'use strict';
const noImage = 'https://via.placeholder.com/200x65';
var Cropper = window.Cropper;
var URL = window.URL || window.webkitURL;
var container = document.querySelector('.img-container');
var image = container.getElementsByTagName('img').item(0);
var cropBtn = document.querySelector('#crop-btn');
var rotate = document.querySelector('#rotate');
var resetImage = document.querySelector('#reset');
var zoomIn = document.querySelector('#zoomIn');
var zoomOut = document.querySelector('#zoomOut');
var deleteCofirmBtn = document.querySelector('#deleteCofirmBtn');
var profilePicture = document.querySelector('#profilePicture');
var deleteLinkContainer = document.querySelector('.deleteProfileImgWrap');
var modal = $('#modal');
var croppable = false;
var options = {
aspectRatio: 3 / 1,
viewMode: 1,
cropBoxResizable: false,
guides: false,
minContainerWidth: 300,
minContainerHeight: 200,
minCropBoxWidth: 200,
minCropBoxHeight: 65,
movable: true,
preview: '.img-preview',
ready: function() {
croppable = true;
},
};
var cropper = new Cropper(image, options);
var originalImageURL = image.src;
var uploadedImageType = 'image/jpeg';
var uploadedImageName = '';
var uploadedImageURL;
var inputImage = document.getElementById('editImage');
inputImage.addEventListener('click', function() {
const old_image = profilePicture;
image.src = old_image.src;
modal.modal({
backdrop: 'static'
});
cropper.destroy();
cropper = new Cropper(image, options);
console.log(`success`);
});
rotate.addEventListener('click', function() {
cropper.rotate(90);
});
reset.addEventListener('click', function() {
cropper.reset();
});
zoomOut.addEventListener('click', function() {
cropper.zoom(-0.1);
});
zoomIn.addEventListener('click', function() {
cropper.zoom(0.1);
});
deleteCofirmBtn.addEventListener('click', function() {
profilePicture.src = noImage;
$(".deleteProfileImgWrap").hide();
$('.file-upload-label').parent().fadeIn();
deleteLinkContainer.style.display = 'none';
});
cropBtn.addEventListener('click', function() {
let roundedCanvas;
let imgSrc = cropper.getCroppedCanvas({
width: 200,
height: 65
}).toDataURL();
deleteLinkContainer.style.display = 'block';
profilePicture.src = imgSrc;
});
}
#media(max-width: 767px) {
.profile-picture-wrap {
padding: 10px !important;
}
}
.profile-picture-wrap {
padding: 30px;
border: 1px solid #ccc;
border-radius: 4px;
}
.upload-button {
font-size: 1.2em;
}
.file-upload {
display: none !important;
}
.file-upload-label {
color: #007bfc;
font-weight: normal;
cursor: pointer;
}
#profilePicture {
cursor: pointer;
}
.file-upload-label:hover {
font-weight: bold;
}
.profile-pic {
cursor: pointer;
width: 200px;
height: 65px;
}
.profile-pic-wrap {
border: 1px solid #ccc;
padding: 30px 14px;
}
.my-profile-wrp p {
margin-bottom: 25px;
}
/* Cropper css */
.cropper-view-box,
.cropper-face {
border-radius: unset;
}
.profile-picture-wrap {
display: inline-block;
position: relative;
}
.profile-picture-wrap img {
border-radius: 0%;
}
.p-image {
position: unset;
}
.cropper-container {
margin-right: auto;
margin-left: auto;
}
.deleteProfileImgWrap {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet">
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js">
</script>
</head>
<body>
<div class="profile-picture-wrap">
<img id="profilePicture" src="https://cdn.paperindex.com/piimages/left-column/large-pool-of-suppliers.jpg" alt="Profile Picture">
<p id="editImage" class="text-center">Edit</p>
</div>
<p class="mrgn-top-4 deleteProfileImgWrap">Delete Photo
</p>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mrgn-top-100"></div>
<!--topbar-header-wrap-->
</main>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Crop Your Photo</h4> <span></span>
</div>
<div class="modal-body">
<div class="img-container text-center">
<img id="image" src="" alt="Picture" style="width: 100%;max-height: 300px;">
<div class="mrgn-top-15">
<div class="btn-group">
<button id="zoomIn" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Zoom In" class="fa fa-search-plus" aria-hidden="true"></i></button>
<button id="zoomOut" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Zoom Out" class="fa fa-search-minus" aria-hidden="true"></i></button>
<button id="rotate" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Rotate" class="fa fa-repeat" aria-hidden="true"></i></button>
<button id="reset" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Reset" class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="crop-btn" class="btn btn-default" data-dismiss="modal">Add
Photo</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<!-- leftbox -->
<div class="box-2">
<div class="result"></div>
</div>
<!--rightbox-->
<div class="box-2 img-result hide">
<!-- result of crop -->
<img alt="" class="cropped" src="#"></div>
<!-- input file -->
<div class="box">
<div class="options hide">
<input class="img-w" type="hidden">
</div>
<!-- save btn -->
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button><button class="btn save hide" data-dismiss="modal">Update</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.paperindex.com/bootstrap/js/bootstrap.min.js">
</script>
<script src="https://cdn.paperindex.com/js/header/pi-header-functions.js">
</script>
</body>
</html>

function getRoundedCanvas(sourceCanvas) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
/* var width = sourceCanvas.width;
var height = sourceCanvas.height; */
var width = 100;
var height = 100;
canvas.width = width;
canvas.height = height;
context.imageSmoothingEnabled = true;
context.drawImage(sourceCanvas, 0, 0, width, height);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
context.fill();
return canvas;
}
window.addEventListener('DOMContentLoaded', function() {
var image = document.getElementById('image');
var button = document.getElementById('button');
var result = document.getElementById('result');
var croppable = false;
var cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
minContainerWidth: 300,
minContainerHeight: 200,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
ready: function() {
croppable = true;
},
});
button.onclick = function() {
var croppedCanvas;
var roundedCanvas;
var roundedImage;
if (!croppable) {
return;
}
// Crop
croppedCanvas = cropper.getCroppedCanvas();
// Round
roundedCanvas = getRoundedCanvas(croppedCanvas);
// Show
roundedImage = document.createElement('img');
roundedImage.src = roundedCanvas.toDataURL()
result.innerHTML = '';
result.appendChild(roundedImage);
};
});
img {
max-width: 100%;
}
.cropper-view-box,
.cropper-face {
border-radius: 50%;
}
.cropper-point.point-se {
height: 5px !important;
width: 5px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://fengyuanchen.github.io/cropperjs/css/cropper.css" rel="stylesheet" />
<script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="result"></div>
Edit
</div>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div>
<img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture">
<!-- <img id="image" src="https://d1shuhu6tm6s0s.cloudfront.net/piimages/find-suppliers/Paper_Manufactures_PaperIndex_Map.png" alt="Picture">
</div> -->
</div>
<div class="modal-footer">
<button id="button" type="button" class="btn btn-success" data-dismiss="modal">Update</button>
</div>
</div>
</div>
</div>

Html/css/js divs splitting to under block jsfiddle

How do I get the middle block (the block where it says: "hallo") like the image:
How it is:
How I want it:
jsfiddle + script: http://jsfiddle.net/mWmsU/
html:
<div id="container">
<div class="overlay"></div>
<div class="btnbar">
<div class="btn" id="it1"><div class="btnp" id="txt"></div><h2>Knopje 1</h2></div>
<div class="btn" id="it2"><div class="btnp"></div><h2>Knopje 2</h2></div>
<div class="btn" id="it3"><div class="btnp"></div><h2>Knopje 3</h2></div>
<div class="btn" id="it4"><div class="btnp"></div><h2>Knopje 4</h2></div>
<div class="btn" id="it5"><div class="btnp"></div><h2>Knopje 5</h2></div>
<div class="btn" id="it6"><div class="btnp"></div><h2>Knopje 6</h2></div>
<div class="btn" id="it7"><div class="btnp"></div><h2>Knopje 7</h2></div>
</div>
<div class="largebar">
<div class="pointer"></div>
<div class="largebarcontent">
<h1 id="title">Hallo</h1>
</div>
</div>
</div>
It should like a littlebit like ios home screen

Use this... and see the HTML and CSS of the demo...
$(function(){
var currentItem;
var plusLeft;
$(window).bind("resize", resizeWindow);
resizeWindow();
// $(".overlay.largeOpen").css("height", $("body").height());
$(".btn").click(openItem);
$(".overlay").click(function(){
$(currentItem).css("z-index", 9);
$(".row").css("padding-bottom", 0);
$("#"+currentItem.id + " h2").css("visibility", "visible");
$("#container, .overlay").toggleClass("largeOpen");
$(".btn").click(openItem);
});
$("#txt").text(window.innerWidth);
function openItem(){
currentItem = this;
$('html,body').animate({
scrollTop: $(this).position().top
}, 700);
$("#container").toggleClass("largeOpen");
$(this).parent().css("padding-bottom", 100);
$(".pointer").css("left", $(this).position().left+plusLeft);
$(".largebar").css("top", $(this).position().top+117);
$(this).css("padding-button", "117px");
$(this).css("z-index", 101);
$("#"+currentItem.id + " h2").css("visibility", "hidden");
// console.log($(this).css('z-index') == 10);
$(".btn").unbind('click');
}
function resizeWindow(e) {
if(currentItem){
$(".pointer").css("left", $("#"+currentItem.id).position().left+plusLeft);
$(".largebar").css("top", $("#"+currentItem.id).position().top+117);
}
$(".overlay.largeOpen").css("height", $("body").height());
if(window.innerWidth <= 320) plusLeft = 9;
if(window.innerWidth > 320) plusLeft = 20;
}
});
And see this DEMO