Find position with scrollbar

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
WaldoMonster
Forum Contributor
Posts: 225
Joined: Mon Apr 19, 2004 6:19 pm
Contact:

Find position with scrollbar

Post by WaldoMonster »

The following code will work with Firefox and IE.
But the position is not correct when scrolling in the browser is needed.
Any idea how to fix this?

Code: Select all

function findPosX(obj) 
{ 
var curleft = 0; 
if (obj.offsetParent) 
    { 
    while (obj.offsetParent) 
        { 
        curleft += obj.offsetLeft 
        obj = obj.offsetParent; 
        } 
    }
else if (obj.x) 
    curleft += obj.x;
return curleft; 
}
 

Code: Select all

<img src="test.gif" alt="" width="1024" height="1024" border="0" onClick="alert(event.clientX - findPosX(this));">
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Find position with scrollbar

Post by Eran »

Use the scrollLeft property to find the amount of scrolling involved.

If you want a complete offset calculation routine, you might read the source code to the dimensions plug-in used in the jQuery framework - http://plugins.jquery.com/node/1089
User avatar
WaldoMonster
Forum Contributor
Posts: 225
Joined: Mon Apr 19, 2004 6:19 pm
Contact:

Re: Find position with scrollbar

Post by WaldoMonster »

Thanks for pointing me in the right direction.
I think that a combination of scrollLeft with pageX will result in the right coordinates.

Code: Select all

onClick="alert(document.body.scrollLeft);”
Will popup the right value, but always returns zero when using it in a function.
Any idea how to fix this?
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Find position with scrollbar

Post by Eran »

you might be using IE6? there are some cross-browser problems, see here - http://iescripts.org/help/crossbrowser.html
User avatar
WaldoMonster
Forum Contributor
Posts: 225
Joined: Mon Apr 19, 2004 6:19 pm
Contact:

Re: Find position with scrollbar

Post by WaldoMonster »

Thanks for that link.
I have almost forgotten that I have the content in a frameless DIV tag with the name: content :oops:

Do you have any idea how to use these scroll offset from the content DIV?

self.pageXOffset;
document.documentElement.scrollLeft;
document.body.scrollLeft;
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Find position with scrollbar

Post by Eran »

I have no clue what 'content' div means in your context, or what is a frameless div (aren't they all?)
Offset calculation isn't simple. In my first response I linked you to the jQuery dimensions plugin which is dedicated to that purpose - I suggest you take a look
User avatar
WaldoMonster
Forum Contributor
Posts: 225
Joined: Mon Apr 19, 2004 6:19 pm
Contact:

Re: Find position with scrollbar

Post by WaldoMonster »

I have no clue what 'content' div means in your context, or what is a frameless div (aren't they all?)
The scrollbars are only in the content div.
See screenshot below.

Image
Offset calculation isn't simple. In my first response I linked you to the jQuery dimensions plugin which is dedicated to that purpose - I suggest you take a look
I couldn’t understand the jQuery plug-in code, maybe because it is based on the jQuery framework.
But I have already found a working script: http://acko.net/blog/mouse-handling-and ... javascript
The only problem I have is that the "scroll offset" are not working on the "content" div.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Find position with scrollbar

Post by Eran »

You can query the content div directly like you do the document.body

Something like: (Assuming the content div has an id="content" attribute)

Code: Select all

 
var scrollOffset = getElementById('content').scrollLeft;
 
Post Reply