Question

To scroll down my chat DIV I am using the following code which is working awesome with Chrome & FF. And estimated to work fine with all rest popular browsers except IE. Can anybody modify the below code or provide me with some other code that does the same work (But should have cross-browser support).

    <style type="text/css">
            #div2
            {
                width:250px;
                height:300px;
                background-color:Aqua;
                padding:10px;
                font-family:Calibri;
                overflow:auto;
            }
        </style>
        <script type="text/javascript">
            window.setInterval(function () {
                abc1();
            }, 10);

            function abc1() {
                var tb1 = document.getElementById('TextBox2');
                var div1 = document.getElementById('div1');
                var div2 = document.getElementById('div2');
                if (tb1.value != div1.clientHeight) {
                    div2.scrollTop = div2.scrollHeight;
                    tb1.value = div1.clientHeight;
                }
            }
        </script>
        <div id="div2">

                <div id="div1" runat="server"></div>
        </div>
<asp:TextBox ID="TextBox2" runat="server" style="visibility:hidden"></asp:TextBox>

Server side code:

while (dr.Read())
{
    String abc1 = dr[1].ToString();
    String abc2 = dr[2].ToString();
    div1.Controls.Add(new LiteralControl(abc1 + ":" + abc2 + "<br />"));
}

Please feel free to use any technology either JavaScript/CSS/Ajax/jQuery/other but how can a scroll bar can behave in the similar manner in all browsers?

Edit 1:

Main issue is IE is not even displaying div1.clientHeight in TextBox2 🙁 Any other way to find height for IE?

Answer 1

My suggestion would be to use jQuery and use its cross browser equivalent for getting the height. i.e. $('#div1').outerHeight() – this will work in IE as well as all other browsers.

---

UPDATE – Your code using jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
    window.setInterval(function () {
        abc1();
    }, 10);
    function abc1() {
        var tb1 = $('#TextBox2');
        var div1 = $('#div1');
        var div2 = $('#div2');
        if (tb1.val() != div1.outerHeight()) {
            div2.scrollTop(div2[0].scrollHeight);
            tb1.val(div1.outerHeight());
        }
    }
</script>