Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2002
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mozilla 1.1 and offsetLeft (long)

    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>

  • #2
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    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+
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, as you can see here 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, offsetLeft seems to be DOM Level 0, and doesn't seem to indicate that it would be useful for these types of measurements (scrollLeft and scrollTop).
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #4
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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...
    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....
    Last edited by beetle; 11-22-2002 at 09:35 PM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •