jQuery position probleem in Chrome

Door Erwin H op 29-01-2014 12:27 gewijzigd op 29-01-2014 12:30

659 views

Ik probeer een tabel te laten bewegen op basis van de positie van kolommen (of ze wel of niet in beeld zijn). Om dit te bepalen haal ik de positie op van de kolom via de jQuery position() fucntie. Dit werkt in FF, ~~dit werkt zelfs in IE~~.... maar niet in Chrome (en dus ook niet in IE bij nader inzien). Chrome lijkt de positie van de tabel te geven, niet van de kolom. Hier een test code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $('#button1').click(function(){
          var new_col = $('#col_select_table col').eq(0);
          alert(new_col.position().left);
        });
        $('#button2').click(function(){
          var new_col = $('#col_select_table col').eq(1);
          alert(new_col.position().left);
        });        
      });
    </script>
  </head>
  <body>

    <table id="col_select_table">
      <colgroup>
        <col>
        <col>
      </colgroup>
      <tbody>
        <tr>
          <td>test</td>
          <td>123</td>
        </tr>
        <tr>
          <td>test</td>
          <td>456</td>
        </tr>
      </tbody>
    </table>
    <input type="submit" value="kolom 1" id="button1">
    <input type="submit" value="kolom 2" id="button2">
  </body>
</html>

klik op button 1 zou de linker positie van de eerste kolom moeten geven (10 in FF) en klik op button 2 zou de linker positie van de tweede kolom moeten geven (35 in FF). In Chrome geven ze beide 8.
Iemand enig idee wat hier de oorzaak van is en, nog belangrijker, wat ik eraan kan doen? Hoe kan ik Chrome wel de juiste positie ophalen?

Toevoeging op 29/01/2014 13:07:51:

never mind... opgelost door niet de kolom te bekijken, maar de cell in de eerst rij:


      $(document).ready(function(){
        $('#button1').click(function(){
          var new_col = $('#col_select_table tbody tr').eq(0).find('td').eq(0);
          alert(new_col.position().left);
        });
        $('#button2').click(function(){
          var new_col = $('#col_select_table tbody tr').eq(0).find('td').eq(1);
          alert(new_col.position().left);
        });        
      });