Mozilla 1.1 and offsetLeft (long)

tygre

11-19-2002, 06:56 PM

Hello,

I am a newbie with Mozilla. I am trying to get the scrollLeft position of a div that is contained in another div. I know that scrollLeft (IE only) is not implemented in Mozilla, but according to the W3C docs offsetLeft should do the job. The way I read it, I should get the offset compared to the parent element. All I ever get is the offset left of the containing div. I am including some sample code. Could somone help me out?

If you try the code, size the browser so that a scrollbar appears on the div, scroll using the arrow button, then click the button for a list of all the values I have attempted to test for.

Thanks in advance!

<html>
<head>
<script>
function report()
{
var div = document.getElementById("Test");
var dfp = div.firstChild.parentNode;
var dfn = dfp.firstChild.nextSibling;
var dfn2 = dfn.firstChild.nextSibling;

var sMsg = "div: document.getElementById(\"Test\")\n" +
"dfp: div.firstChild.parentNode\n" +
"dfn: dfp.firstChild.nextSibling\n" +
"dfn2: dfn.firstChild.nextSibling\n" +
"div.className: " + div.className + "\n" +
"div.firstChild.nodeName: " + div.firstChild.nodeName + "\n" +
"div.firstChild.nodeType: " + div.firstChild.nodeType + "\n" +
"dfp.nodeName: " + dfp.nodeName + "\n" +
"dfp.nodeType: " + dfp.nodeType + "\n" +
"dfp.className: " + dfp.className + "\n" +
"dfp.firstChild.nodeName: " + dfp.firstChild.nodeName + "\n" +
"dfp.firstChild.nodeType: " + dfp.firstChild.nodeType + "\n" +
"dfn.nodeName: " + dfn.nodeName + "\n" +
"dfn.nodeType: " + dfn.nodeType + "\n" +
"dfn.className: " + dfn.className + "\n" +
"dfn.id: " + dfn.id + "\n" +
"dfn.offsetLeft: " + dfn.offsetLeft + "\n" +
"dfn.pageX: " + dfn.pageX + "\n" +
"dfn.clientX: " + dfn.clientX + "\n" +
"dfn.style.left: " + dfn.style.left + "\n" +
"dfn.getAttribute(\"left\"): " + dfn.getAttribute("left") + "\n" +
"dfn.getAttribute(\"offsetLeft\"): " + dfn.getAttribute("offsetLeft") + "\n" +
"dfn2.nodeName: " + dfn2.nodeName + "\n" +
"dfn2.nodeType: " + dfn2.nodeType + "\n" +
"dfn2.className: " + dfn2.className + "\n" +
"dfn2.style: " + dfn2.style + "\n" +
"dfn2.style.borderLeft: " + dfn2.style.borderLeft + "\n" +
"dfn2.style.left: " + dfn2.style.left + "\n" +
"dfn2.offsetLeft: " + dfn2.offsetLeft + "\n" +
"window.scrollX : " + window.scrollX + "\n" +
"window.pageXOffset : " + window.pageXOffset + "\n";
alert (sMsg);
}
</script>
</head>
<body>
<button onclick="report();">Report Values</button><br>
<div class='ScrollBodyBoth' id="Test" style="height: 275px; width: 100%; padding-left: 15px; overflow: auto;">
<div style='width:600px;' id="testID" class="testClass">
<table class='ScrollBodyContent' cellspacing='0' cellpadding='2'>
<colgroup>
<col width='150px' align='left'>
<col width='150px' align='center'>
<col width='150px' align='center'>
<col width='150px' align='center'>
</colgroup>
<tbody>
<tr class="ScrollBodyContent">
<td>blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</td>
<td>blahblah</td>
<td>blahblah</td>
<td>blahblahblah</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

joh6nn

11-22-2002, 08:34 PM

offsetLeft, last i knew, was an IE proprietary thing. Mozilla supports it, in an (failed, and stupid) attempt at making crossbrowser DHtml easier. if i remember correctly, the mozilla/netscape properties for how far a page has been scrolled, are pageXOffset, pageYOffset. i know that's for NS4, i don't know if it's the same for Moz and NS6+

beetle

11-22-2002, 08:42 PM

Well, as you can see here (http://www.mozilla.org/docs/dom/domref/dom_window_ref.html#1004019) window.pageXOffset and window.pageYOffset exist in Gecko, but I cannot determine any differences between those and window.scrollX and window.scrollY.

Again, referring to my reference (http://www.mozilla.org/docs/dom/domref/dom_el_ref19.html#1028018), offsetLeft seems to be DOM Level 0, and doesn't seem to indicate that it would be useful for these types (http://msdn.microsoft.com/workshop/author/om/measuring.asp?frame=true) of measurements (scrollLeft and scrollTop).

joh6nn

11-22-2002, 08:49 PM

scrollX and scrollY, are probably the new W3C properties, and pageOffsetX/Y, are probably there for backwards compatability with old NS4 scripts.

i think tygre was just mistaken the purpose of offsetLeft/Top.

beetle

11-22-2002, 09:30 PM

tygre. I just took your page an use a loop that examines each property and reports it's value. After examining each property/value, I'm quite certain you CANNOT retrieve this in Gecko. Here's the code I used<html>
<head>
<script>
function report() {
document.getElementById('output').innerHTML = "";
var o = document.getElementById("Test");
// var o = document.getElementById("Test").style;
for (var i in o)
document.getElementById('output').innerHTML += "<b>" + i + ":</b> " + o[i] + "<br>";
}

</script>
</head>
<body>
<button onclick="report();">Report Values</button><br>
<div class='ScrollBodyBoth' id="Test" style="height: 275px; width: 100%; padding-left: 15px; overflow: auto; border: 1px solid black">
<div style='width:600px;' id="testID" class="testClass">
<table class='ScrollBodyContent' cellspacing='0' cellpadding='2'>
<colgroup>
<col width='150px' align='left'>
<col width='150px' align='center'>
<col width='150px' align='center'>
<col width='150px' align='center'>
</colgroup>
<tbody>
<tr class="ScrollBodyContent">
<td> blahblahblahblahblahblahblahblahblahblahblahblahbl
ahblahblahblahblahblahblahblahblahblah</td>
<td>blahblah</td>
<td>blahblah</td>
<td>blahblahblah</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="output"></div>
</body>
</html>You can see from the commented line that I tried it on the object's style as well. I'm surprised you didn't have errors with the following code...var div = document.getElementById("Test");
var dfp = div.firstChild.parentNode;
var dfn = dfp.firstChild.nextSibling;
var dfn2 = dfn.firstChild.nextSibling; div.firstChild.parentNode is a reference back to div so now div == dfp. dfn (dfp.firstChild.nextSibling) is either a textNode, or nothing, which pretty much screws up dfn2. I had to remove all that for my page to work...not sure what you were trying to do with these....