Untitled

resize plugin with scrolling
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Resizable </TITLE>
  <link rel="stylesheet" type="text/css" href="Styles/jquery.ui.resizable.css" />

  <script type="text/javascript" src="Scripts/jquery-1.5.1.min.js"></script>
  <script type="text/javascript" src="Scripts/jquery.tools.min.js"></script>
  <script type="text/javascript" src="Scripts/jquery-layout.js"></script>
  <script type="text/javascript" src="Scripts/jquery-ui.js"></script>

  <script type="text/javascript" src="Jquery/jquery.ui.core.js"></script>
  <script type="text/javascript" src="Jquery/jquery.ui.widget.js"></script>
  <script type="text/javascript" src="Jquery/jquery.ui.mouse.js"></script>
  <script type="text/javascript" src="Jquery/jquery.ui.resizable.js"></script>


  <style type="text/css">
   #insertfile {
    overflow: auto;
    position: absolute;
    width:200px; height:100px;
    border: 2px solid #000;
}
td { width: 50px; height: 50px; text-align: center; }
  </style>

  <script type="text/javascript">
   $(function() {
    var currentTd = $('td#currentId');
    var scrtop = currentTd.position().top;
    var scrleft = currentTd.position().left;
    $('#insertfile').animate({
        scrollTop: scrtop,
        scrollLeft: scrleft
    }, 400);

    var top = $(currentTd).position().top;
    var left = $(currentTd).position().left;
    var bottom = $(currentTd).position().top + $(currentTd).height() - $(currentTd).position().top;

    var right = $(currentTd).position().left + $(currentTd).width() - $(currentTd).position().left;


    $("<div id='frontLayer' class='front'></div>").insertAfter('.tableData');

//    var frontDiv = document.getElementById('frontLayer');

    $('#frontLayer').css({
        'border': '3px solid #f00',
        'position': 'absolute',
        'z-index': 2,
        'top': top + 'px',
        'left': left + 'px',
        'height': bottom + 'px',
        'width': right + 'px'
    });

    $('#frontLayer').resizable({
        handles: 'n,e,s,w',
    });

});
  </script>
 </HEAD>

 <BODY>
  <div id='insertfile'>
<table border='1px' class='tableData'>
    <tr><td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>

        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td id='currentId'>scroll to me</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr><td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
    </table>
</div>
 </BODY>
</HTML>