Positioning anchor/cell contents within a scrollable div

[phub11]

Hi all,

This is a pretty simple question, but after some hunting on the web I can't find the answer:

I have a table embedded in a scrollable div, and have each cell anchored so that when a click on a button in another table, the div is scrolled to the corresponding cell of the first table. However, it is positioned such that the cell's contents start at the top-left of the window.

Can I add code which centers the contents of the cell/anchor in the middle of the window of the scrollable div?

Thanks!

[johnhjohn]

Could you post some of the code you currently have on your page? This will help me determine what changes to make.

Thanks.

[phub11]

Thanks johnjohn! Below is what I think is all the salient code:

#holderdiv {
width: 170px;
height: 110px;
overflow: scroll;
border: 1px solid black;
}
 
function go(loc) {
i = parseInt(loc.substr(5));
window.location.href = loc;
}
 
 
      <td><input name="pos" onclick="go('#cell1');"
 type="radio"></td>
 
<div id="holderdiv"> 
<table style="text-align: center; width: 1700px" id="table1"
 border="1" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="width: 150px; height: 100px;"><div style="position: relative;" id="cell1">A1<br>
Empty</td>
      <td style="width: 150px; height: 100px;"><div style="position: relative;" id="cell2">A2<br>
Empty</td>
</div>
 

[phub11]

Hi again!

Just seeing if anyone has a suggestion.

Thanks!

[rnd me]

the cell's offsetTop and offsetLeft properties are what you need.

[phub11]

Hi johnjohn+rndme,

Thanks for the reply.

I actually ended up using mootools to do it in JS. It adds a nice sliding effect too!