Question

The div:

<div id="hilo" style="width:48%;height:380px;overflow:auto;float:right;">

The Javascript:

$('#re').click(function() {
    var error = 0;
    if($("#texto").val() == ""){
        $("#texto").css("border","solid 1px #990000");
        error = 1;
    }
    if(error == 1){
        return false;
    } else {
        var texto = $("#texto").val();
        var conv = $(this).attr("name");
        $.ajax({
            type: "POST",
            url: "ajaxHilo.php",
            cache: false,
            data: {
                'texto' : texto,
                'conv_id' : conv,
                'regresar' : 'ultimo'
            },
            success: function(data,status){
                $("#hilo").append(data);
                $("#texto").val("");
                var hei = $('#hilo').prop('scrollHeight');
                alert(hei);
                $("#hilo").animate({ scrollTop: hei}, 500);
                return false;
            },
            error: cualquierError
        });
    }
   });

the element with the id = re is a button.

I get the strangest results for the size of the overflowed divs, the script inserts a new div into the div hilos with just two lines of new content every time, no more than 30 or 40 pixels each, however, the count starts in 1473 and then jumps to 2193 and then 2913 and so on…

Firefox scrolls to the bottom but IE gives me different numbers (smaller ones) and don’t scroll to the bottom at all…

I hope is not too confusing…

Answer 1

I would add a div inside “hilo” named “hilo_content”, append the data from the ajax response to it, and then use .outerHeight() to get the height value. So something like this:

<div id="hilo" style="width:48%;height:380px;overflow:auto;float:right;">
    <div id="hilo_content"></div>
</div>

and in the success callback:

success: function(data,status){
    $("#hilo_content").append(data);
    $("#texto").val("");
    var hei = $('#hilo_content').outerHeight();
    alert(hei);
    $("#hilo_content").animate({ scrollTop: hei}, 500);
    return false;
}