CODEWITHSUNDEEP
javascript
user1087110
user1087110

Reputation: 3763

getOffset function in Chrome and Safari

This code works in Firefox and IE, but not in Chrome or Safari (try clicking td 16).

Q: How can I get it to work Chrome or Safari?

<!DOCTYPE html>
<title>getOffset</title>
<style type="text/css">
table{border:none;width:10000px;position:absolute}
td{width:1000px;height:1000px;border:2px solid}
#the_input{width:100px;height:100px;background:#f00;position:absolute}
</style>
<script>
onload = function(){
var all_td = document.getElementsByTagName('td');
function getOffset( el ) {
    var _x = 0,
    _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}




    for(var i = 0, len = all_td.length; i < len; i++) {
        all_td[i].onclick = function () {
            var x = getOffset(this).left,
            y = getOffset(this).top;
                alert(x + ' x ' + y);
        }
    }
}

</script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>

<input id=the_input value="some text">

Upvotes: 0

Views: 1705

Answers (1)

Yograj Gupta
Yograj Gupta

Reputation: 9869

Just change your code of getOffset to 

function getOffset( el ) {
    var _x = 0,
    _y = 0;
    while( el && el.tagName.toLowerCase() != 'body' && !isNaN( el.offsetLeft ) && !isNaN(el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

As I debugged in chrome it is taking BODY element's scrollLeft and scrollLeft values whereas it is 0 on IE and FF.

Upvotes: 1

Related Questions