CODEWITHSUNDEEP
javascripthtmlcss
Errol Fitzgerald
Errol Fitzgerald

Reputation: 3008

Add new item to bottom of scrollabe div

I'm trying to append a div to the bottom of a another div, by clicking a button in javascript, but once the height of the outer container is reached, it no longer scrolls the list to the bottom, after an insert.

Please see the fiddle here

If you click the red add button until you get to about 13 items in the list, it seems something goes wrong with the scrollTop function, and it it no longer functions correctly (hovers around the same spot in).

I'm pretty lost on this, and have tried a bunch of different combinations of css settings for both the container and side div. Please help me.

Upvotes: 0

Views: 88

Answers (3)

Shankar Cabus
Shankar Cabus

Reputation: 9792

Try:

$(document).ready(function () {
var count = 2;

    $("#add").live("click", function () {
        var list= $("#q-d-list");

        // remove the active class from the old item
        var $clone = $(list.find("div:last-child").removeClass("active").clone());
        count+=1;

        var str_count = "q"+count.toString();
        $clone.addClass("active").attr("data-qid",str_count).text(str_count);
        list.append($clone);
        list.scrollTop(list.get(0).scrollHeight);        
    });
});

http://jsfiddle.net/H4Kb3/

Upvotes: 0

Blender
Blender

Reputation: 298364

I've reformatted your code to be more jQuery-esque. The main change, however, was to change the list.scrollTop() function so that it just scrolls to the bottom of list:

$(document).ready(function() {
    var list = $("#q-d-list");

    $(document).on('click', '#add', function() {
        $('.active', list).removeClass("active");

        var count = list.children().length + 1;
        var active = $('<div />', {
            'data-qid': count,
            'class': 'mli active'
        }).text('q' + count).appendTo(list);

        list.scrollTop(list[0].scrollHeight);
    });
});​

Demo: http://jsfiddle.net/MrvcB/19/

Upvotes: 1

Diego ZoracKy
Diego ZoracKy

Reputation: 2285

Use

list.scrollTop(list.get(0).scrollHeight);

rather than

list.scrollTop($(".active").offset().top);

Upvotes: 1

Related Questions