CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapbootstrap-4
Giuseppe Pennisi
Giuseppe Pennisi

Reputation: 428

dynamically reorder columns based on the content of an input in bootstrap

i'm creating a simple pokedex to make some practice. I display a list of pokemon using bootstrap, 6 per row. I used the filter function to filter pokemon and display only pokemons that contains in name the input given like in the image.enter image description here

It works well but I'd like to compact the results in as few lines as possible, with a max of six element per row. In other words, i'd like to have "chimchar" next to charizard and go on, until you have six items per row. this is my filter function:

$(document).ready(function(){
    $("#pkmn").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#listPokemon *").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

here my home:

   <!DOCTYPE html>
<html lang="en">
<head>
    <title>Calcolatore IV</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="../js/getListPokemonScript.js"></script>
    <script src="../js/searchRealTimeScript.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body>
    <div class="jumbotron-fluid">
        <h1 align="center">Calcolatore IV USUM</h1>
        <p align="center"> Puoi utilizzare il seguente tool per calcolare le IV del tuo pokemon su SM e USUM </p>
    </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm"></div>
                <div class="col-sm">
                <div class="form-group">
                    <i class="fa fa-search" ></i>
                <label for="pkmn" align="center">Cerca il tuo Pokemon:</label>
                <input type="text" class="form-control" id="pkmn"  align="center">
                </div>
            </div>
                <div class="col-sm"></div>
            </div>
        </div>
    <div class="container-fluid" id="listPokemon"></div>

</body>
</html>

Here the script that create columns and rows:

$(document).ready(function(){

    $('body').css('display', 'none');
    $('body').fadeIn(500);


});
$.getJSON("https://pokeapi.co/api/v2/pokemon/?limit=949", function (pokemonList) {

    for (i = 0; i < pokemonList.results.length; i=i+6) {

        var rowElement = document.createElement("div");
        rowElement.setAttribute("class","row");
        rowElement.setAttribute("id", "row" + i/6);

        $("#listPokemon").append(rowElement);

        for (j = i; j < i+6; j++) {
            var namePokemon = pokemonList.results[j].name;
            var col = document.createElement("div");
            col.setAttribute("class","col-sm-2");
            col.setAttribute("id",namePokemon);


            $("#row"+i/6).append(col);

                //create a card
                var card = document.createElement("div");
                card.setAttribute("class","card");

                card.setAttribute("id","card"+namePokemon);
                $("#"+namePokemon).append(card);


                //create card image
                var cardImage = document.createElement("img");
                cardImage.setAttribute("class","card-img-top");
                var url = pokemonList.results[j].url;
                var idPokemon = url.match(/\d/g);
                idPokemon.shift();
                idPokemon = idPokemon.join("");
                cardImage.setAttribute("src","../Sprites/"+idPokemon+".png");
                $("#card"+namePokemon).append(cardImage);

                //create card body

                var cardBody = document.createElement("div");
                cardBody.setAttribute("class","card-body");
                cardBody.setAttribute("id","body"+namePokemon);
                $("#card"+namePokemon).append(cardBody);

                // create card title


                $("#body"+namePokemon).append("<h6 class='card-title'  style='text-align: center'>" + namePokemon.toString().toUpperCase()+"</h6>");

        }

    }

})

Thanks for the help.

Upvotes: 0

Views: 574

Answers (1)

combatc2
combatc2

Reputation: 1263

You only need one row and the columns will automatically wrap based on "col-sm-2" - so create your row outside of the for loop as seen in the first snippet (I commented out the existing logic) and always append the columns to the outer row (second code snippet): https://jsfiddle.net/gpmnj957/3/

var rowElement = document.createElement("div");
    rowElement.setAttribute("class","row");
    rowElement.setAttribute("id", "rowThatWraps")

for (i = 0; i < pokemonList.results.length; i=i+6) {

    //var rowElement = document.createElement("div");
    //rowElement.setAttribute("class","row");
    //rowElement.setAttribute("id", "row" + i/6);

Second code snippet:

$("#rowThatWraps").append(col);
//$("#row"+i/6).append(col);

Upvotes: 1

Related Questions