RBAND

Change city:
Русский
Srpski
English
Change city
0
Other city

Plugin for managing the amount of JQUERY, CSS. Instructions and examples

In this article we will show you how to make a block with a number that can be entered using the keyboard and adjusted using the plus/minus buttons. This method, for example, can be useful in online stores to indicate the number of units of a product being purchased.

quantity.jpg

Preparing for work

Download example

First, we need to write the simplest markup of our block in an html document.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Плагин</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <main>
        <div class="count">
              <span class="minus">—</span> 
              <input type="number" value="1">
              <span class="plus">+</span>
       </div>
    </main>
</body>
</html>

, Where

<input type="number" value="1">

input field of type number with the value “1”,

<span class="minus">—</span>
<span class="plus">+</span>

lowercase elements to further adjust the number in the input field.

Next, we’ll add some styles to make it look nice.

.count {
    display: flex; 
    justify-content: center;
    text-align: center;
    align-items: center;
    max-width: 90px;
    padding: 15px;
    background: #e8f0f6;
    border-radius: 30px;
}
.count input {
    width: 48px;
    border: none;
    border-bottom: 1px #404040 solid;
    background: transparent;
    text-align: center;
    padding: 0;
    margin: 0;
}
.count span {
    cursor: pointer;
}
.count .minus{
    font-size: 12px;
    margin-right: 10px;
}
.count .plus{
    margin-left: 10px;
}
input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

, Where

input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

needed to remove standard input field switches

button

 And now we have a beautiful block for entering a number and regulating it using buttons, but something is missing. We are missing a script that will connect our buttons with the input field and, in fact, will tell us why they are here. JavaScript and the JQuery library will help us with this. To implement this step of our task, we need to connect the standard JQuery library, in our case it is version 3.3.1. JQuery is a wonderful JavaScript Framework that impresses with its ease of understanding and ease of use. To begin with, you will need the framework itself; you can download it on the official JQuery website. Then it needs to be connected next to the CSS file connection in the following way:

<script src="/js/jquery-3.3.1.min.js"></script>

Next, let's move on to writing the code itself by inserting the “script” tag. As a rule, scripts are inserted at the end of the site body or after the selector in which they are used:

<script>
$('.minus').click(function () { // calling the function when clicking on the element
     var $input = $(this).parent().find('input'); // declaring a variable and assigning the value of the input field
     var count = parseInt($input.val()) - 1; // declaring a variable, converting the value to a number, and decreasing it by 1
     count = count < 1 ? 1 : count; // condition saying "If the variable's value is less than 1, set it to 1"
     $input.val(count); // assigning the value attribute of the variable count to the variable $input
});
$('.plus').click(function () { // calling the function when clicking on the element
     var $input = $(this).parent().find('input'); // declaring a variable and assigning the value of the input field
     $input.val(parseInt($input.val()) + 1); // declaring a variable, converting the value to a number, and increasing it by 1
});
</script>

, where we made it so that the value of the “value” attribute of the “input” element increases when you click on the plus and decreases when you click on the minus, and also set a limit so that it would not be possible to minus below one.

knopka2

Now, we will complicate the task a little and make sure that in the passive state the buttons disappear and only the number is visible, and when focusing or hovering over an element, this block is displayed in full. To do this, we need to add styles and a little script using JQ.

And so, first you need to add styles so that they take the following form:

.count {
    display: flex; 
    justify-content: center;
    text-align: center;
    align-items: center;
    max-width: 45px;
    max-height:45px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    padding: 15px;
    margin: auto;
    background: #e8f0f6;
    border-radius: 30px;
    -webkit-transition: max-width 0.5s;
    -moz-transition: max-width 0.5s;
    -o-transition: max-width 0.5s;
    transition: max-width 0.5s;
}
.count:hover,
.count.active {
    max-width: 110px;
    background: #fff;
    border: 1px #c2c2c2 solid;
}
.count:hover input,
.count.active input {
    border-bottom: 1px #404040 solid;
    margin-bottom: -1px;
}
.count input {
    width: 45px;
    border: none;
    background: transparent;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-left: -3px;
}
.count span {
    cursor: pointer;
}
.count .minus{
    font-size: 12px;
    margin-right: 10px;
}
.count .plus{
    margin-left: 10px;
}
input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

where we added box-sizing: border-box; - so that the width/height value is calculated taking into account the internal padding, overflow: hidden; - so that the block cuts off elements that go beyond its limit, margin: auto; - to align the block to the center and transition: max-width 0.5s; - so that the block opens animatedly. We also added styles for the hover effect and the effect when the block is active (which will work after adding the script written below).

knopka3

And so, the hover effect is already working, but this is not enough, we also need it to work when focusing, that is, when we click on an element, for example, to enter manually. To do this, we will add a script:

$( "input" ).focus(function() { // Calling the function when this element is selected
      $(this).parent().addClass('active'); // Adding a class to this element's parent
});
$( "input" ).focusout(function() { // Calling the function when the focus is removed from the selected element
       $(this).parent().removeClass('active'); // Removing the class from the element's parent
});

, where we add the class "active" to the parent element when the input field has focus, and remove it when the focus is lost. An element receives focus when the user clicks on it. Focus usually means "get ready to enter data on this element", this is a good time to initialize or load something. The point where focus is lost is when the user clicks somewhere else or presses Tab to move to the next form field.

As a result, we just see some number in a circle, but when we point at it or click on it, the block expands, showing buttons for adjusting it, as well as the ability to enter it manually using the keyboard.

Andrey
Andrey Perederiy

lead developer

Say thanks to the author, share with friends