CODEWITHSUNDEEP
javascriptjquery
Dhwani sanghvi
Dhwani sanghvi

Reputation: 475

Dynamically add n number of div at a same time remove n number of div

Here,I write code for container in which I need only 5 items displays at a time.If suppose 2 elements are added at a same time 2 elemenets should be removed.I have some problem in setTimeout function.Here,i called function 2 times.When first time function calls it add 1 element and at same time reove one.When second time function calls,I pass setTimeout(function({_addContent(2)}, 8000) here it add 2 elements but only remove 1 element bcz it countinues it's counter.Please help me to solve problem.

DEMO:https://jsfiddle.net/xddn8x04/

var followContainer = function() {
    var countdown;
    var count = 0;
    var _addContent = function(count) {

        var followlen = +$('.follow-container .set-follow > .follow').length;
        var _followcontent = ('.follow-suggestions .follow-container');
        var follow = '';
        for (var i = 0; i <= count; i++) {
            follow = ('<div class="follow"><div class="sidebar-img"><div class="img-block"><img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60"><div class="side-icon"><i class="fa fa-plus sidebar-icon"></i></div></div></div><div class="center-block"><div class="name">mayank bliss</div><div class="detail">45777 followers</div></div><div class="right-block"><div title="May 22, 2015" class="date">2015-05-22</div></div></div>');
            $(follow).hide().appendTo('.follow-container .hide-follow').fadeIn(
                    '1000');
            $('.follow-container .set-follow').append(
                    $(".follow-container .hide-follow >.follow"));
            $(".follow-container .set-follow >.follow:lt(" + count + ")").fadeOut(
            '1000');
        }

    }
    var _events = function() {
        var timeoutHandle = window.setTimeout(function() {
            _addContent(1)
        }, 5000);
        setTimeout(function() {
            _addContent(2)
        }, 8000);
    }
    var _init = function() {
        _events();
    }
    return {
        init : _init
    }
}();

Upvotes: 2

Views: 204

Answers (1)

BenG
BenG

Reputation: 15154

You were almost there. you just need 2 small changes:-

remove the = from your for loop. as that was causing _addContent(1) to loop twice, and _addContent(2) to run 3 times.

add :visible to the fadeOut, as it was targeting already hidden elements.

var followContainer = function() {
    var countdown;
    var count = 0;
    var _addContent = function(count) {
        var followlen = +$('.follow-container .set-follow > .follow').length;
        var _followcontent = ('.follow-suggestions .follow-container');
        var follow = '';
        for (var i = 0; i < count; i++) {
            follow = ('<div class="follow"><div class="sidebar-img"><div class="img-block"><img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60"><div class="side-icon"><i class="fa fa-plus sidebar-icon"></i></div></div></div><div class="center-block"><div class="name">mayank bliss</div><div class="detail">45777 followers</div></div><div class="right-block"><div title="May 22, 2015" class="date">2015-05-22</div></div></div>');
            $(follow).hide().appendTo('.follow-container .hide-follow').fadeIn(
                    '1000');
            $('.follow-container .set-follow').append(
                    $(".follow-container .hide-follow >.follow"));
            $(".follow-container .set-follow >.follow:visible:lt(" + count + ")").fadeOut(
            '1000');
        }

    }
    var _events = function() {
        var timeoutHandle = window.setTimeout(function() {
            _addContent(1)
        }, 5000);
        setTimeout(function() {
            _addContent(2)
        }, 8000);
    }
    var _init = function() {
        _events();
    }
    return {
        init : _init
    }
}();
$(document).ready(function() {
    followContainer.init();
});

Fiddle

Upvotes: 1

Related Questions