CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jsPlayer
jsPlayer

Reputation: 1245

jQuery adding/removing scroll dynamically not working

I am making a post scenario and I am trying to add a scroll dynamically when the dynamic input.length reached a certain point. My case when there is more than 5 dynamic input IS created, a verticle scroll is added so the div won't take any more verticle body length, also removing the scroll when the user removes to where the inputs are less than 5. Why my code is not working?. I do want to do this dynamically based on the number of created inputs, not using CSS to make a set height.

$(document).ready(function() {
    var max_fields      = 100; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    console.log('check length', wrapper.length);

    var add_scroll = wrapper.css("overflow", "scroll");
    var remove_scroll = wrapper.css("overflow", "hidden");

    function checkForScroll() {

        if (wrapper.length > 5) {
            add_scroll;
        }
        if (wrapper.length < 5) {
            remove_scroll;
        }
    }
    checkForScroll();


    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
            checkForScroll()
            console.log('check length', wrapper.length);

        }
    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
        checkForScroll()
        console.log('check length', wrapper.length);

    })
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>
      <div class="input_fields_wrap">
            <button class="add_field_button">Add More Fields</button>
            <div><input type="text" name="mytext[]"></div>
        </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <script src="./js/test.js"></script>

</body>

</html>

Upvotes: 1

Views: 665

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

It looks like you're trying to create some function pointers (or function variables if you prefer)

var add_scroll = wrapper.css("overflow", "scroll");
var remove_scroll = wrapper.css("overflow", "hidden");

function checkForScroll() {
    if (wrapper.length > 5) {
        add_scroll;
    }
    if (wrapper.length < 5) {
        remove_scroll;
    }
}
checkForScroll();

as jquery using chaining, most calls will return the original jquery object, so:

var add_scroll = wrapper.css("overflow", "scroll");
add_scroll === wrapper

so calling add_scroll; makes the same sense as wrapper; or $("#wrapper") - ie does nothing.

You need to convert them to functions and then call them as such;

var add_scroll = function() { wrapper.css("overflow", "scroll") };
...
add_scroll();  // not the extra () to call the method

Next, when you call:

var wrapper = $(".input_fields_wrap");

it returns just the div with class "input_fields_wrap". As there's only ever one of these, wrapper.length will always ===1.

You're interesting in how many inputs there are inside the wrapper, so change the check to:

wrapper.find("input").length

You're then checking if ..length > 5 and ..length < 5 - what if length === 5? sometimes 5 will have a scroll, sometimes it won't (depending on whether you're adding or removing), so change to a simple if/else

if (wrapper.find("input").length) > 5)
    add_scroll();
else
    remove_scroll();

Finally, you can use the same test for your max limit, so no need to keep track of how many, giving:

$(document).ready(function() {
  var max_fields = 100; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  
  var add_scroll = function() { wrapper.css("overflow", "scroll"); };
  var remove_scroll = function() { wrapper.css("overflow", "hidden"); };

  function checkForScroll() {
    console.log("input length", wrapper.find("input").length)
    if (wrapper.find("input").length > 5)
      add_scroll();
    else 
      remove_scroll();
  }
  checkForScroll();

  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (wrapper.find("input").length < max_fields) {
      //max input box allowed
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
      checkForScroll()
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    checkForScroll()
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <div><input type="text" name="mytext[]"></div>
</div>

If you run the above snippet, you'll find that it adds the scroll bars, but doesn't actually make them scroll as the wrapper div expands to fit the content.

To actually make them scroll, you'll need to add a max-height.... which leads back to my original (deleted) comment that you just set max-height:500px;overflow-y:auto; (actual height depending on number of inputs) :)

Upvotes: 3

Related Questions