ScrollIntoView For Table Row Not Working in IE 8

Hi, Can someone please explain why the following does not work in IE8. Basically i'm just trying to scroll a Table Row into view contained within an overflow DIV. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
<head>  
<script language="javascript" src='scripts/jquery-1.3.2.js'></script>
<script language="javascript" src='scripts/jquery.scrollTo-1.4.2.js'></script>      
<stylesheet type="text/css">
    table {border-collapse: collapse;}
    th, td {margin: 0; padding: 0.25em 0.5em;}

    html, body 
    {
        height: 100%;
        width:100%;
        overflow:hidden;
    }

    body  
    {
        height:100%;
        overflow:hidden;
    } 

    #scrollpanel
    {
        height:100px;
        overflow-x:hidden;
        overflow-y:scroll;
        width:200px
    }

</style>
  <script>
    $(document).ready(function()
    {       
        var scrollToDiv = document.getElementById("scrollToDiv");
        scrollToDiv.scrollIntoView(true); // Works

        var scrollToRow = document.getElementById('scrollToRow');
        scrollToRow.scrollIntoView(true); // Wont Work in IE8

        //$.scrollTo("#scrollToRow"); // Using JQuery Scroll To Lib doesn't work
        //location.hash = 'scrollToAnchor'; // this work
    });

</script
 </head>
 <body> 
    <div id="scrollpanel">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div id="scrollToDiv">Scroll Here</div>
</div>
<br>
<div id="scrollpanel">
    <table id="tblRI"/>
        <tbody id="tbody1">
            <tr id="tr1">
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr id="tr2">
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr id="tr3">
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr id="tr4">
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr id="scrollToRow">
                <td><A NAME="scrollToAnchor">ScrollHere</A></td>
                <td>Data 02-02</td>
            </tr>
        </tbody>
    </table>
</div>
  <body>
 </html>

Well it seems ScrollIntoView doesn't work for Table Row elements. If I change to use a Column selector instead it works fine.

<tr id="scrollToRow">
   <td id="tdScrollToColumn"><A NAME="scrollToAnchor">ScrollHere</A></td>
   <td>Data 02-02</td>
</tr>

$(document).ready(function()
{       
  var scrollToDiv = document.getElementById("scrollToDiv");
  scrollToDiv.scrollIntoView(true); // Works

  var scrollToRow = document.getElementById('scrollToColumn');
  scrollToRow.scrollIntoView(true); // Works in IE8

  //$.scrollTo("#scrollToRow"); // Using JQuery Scroll To Lib doesn't work
  //location.hash = 'scrollToAnchor'; // this work
 });

ansaurus

tags:

views:

answers:

ScrollIntoView For Table Row Not Working in IE 8

related questions