Sorin D. Sorin D. - 3 months ago 8
CSS Question

Aligning + and - for shopping basket incrementer

I want to have my code like in this image
enter image description here

It is a simple shopping basket incrementer. I put the border around for 1 but i'm not sure how to align + and - and put the border around. I searched for many incrementers but I couldn't find one like in the image.

Someone please give me a help.



$(function() {

$(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');

$(".button").on("click", function() {

var $button = $(this);
var oldValue = $button.parent().find("input").val();

if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}

$button.parent().find("input").val(newVal);

});

});

input[type=text] {
float: left;
width: 40px;
font: bold 20px Helvetica, sans-serif;
padding: 3px 0 0 0;
text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#">
<div class="numbers-row">
<input type="text" id="incrementer" value="1">
</div>
</form>
</body>
</html>




Answer

try below code:

$(function() {

  $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');

  $(".button").on("click", function() {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();

    if ($button.text() == "+") {
  	  var newVal = parseFloat(oldValue) + 1;
  	} else {
	   // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
	    } else {
        newVal = 0;
      }
	  }

    $button.parent().find("input").val(newVal);

  });

});
input[type="text"] {
  float: left;
  font: bold 20px Helvetica,sans-serif;
  padding: 5px 11px;
  text-align: left;
  width: 50px;
}
.inc.button {
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  left: 57px;
  padding: 0 6px 0 8px;
  position: absolute;
}
.dec.button {
  border-left: 1px solid #ccc;
  left: 57px;
  padding: 0 10px;
  position: absolute;
  top: 25px;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#">
  <div class="numbers-row">
    <input type="text"  id="incrementer" value="1">
  </div>
</form>
</body>
</html>