473,569 Members | 2,789 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Absolute position of a relative element

Hi,

how can I get the absolute position of a relative element?

We dynamically create a page with multiple segments which are relatively
ordered among each other. In these segments we have input fields.
When such an input field is focused I need it's absolute position.
Is there a way to do so with IE > 6?

thanks...

bye Stephan...
Jul 23 '05 #1
10 2354
On Mon, 14 Jun 2004 17:20:57 +0200, Stephan Koser wrote:
....
Is there a way to do so with IE > 6?


That would be IE 7, IE 8,.. would it? ;-)

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #2

"Andrew Thompson" <Se********@www .invalid> schrieb im Newsbeitrag
news:1r******** *************** ******@40tude.n et...
On Mon, 14 Jun 2004 17:20:57 +0200, Stephan Koser wrote:
...
Is there a way to do so with IE > 6?


That would be IE 7, IE 8,.. would it? ;-)


Oh, sorry - that's completely wrong. I mean: IE >= 5 !

bye...
Jul 23 '05 #3
On Mon, 14 Jun 2004 17:20:57 +0200, Stephan Koser <sk****@web.d e> wrote:
Hi,

how can I get the absolute position of a relative element?

We dynamically create a page with multiple segments which are relatively
ordered among each other. In these segments we have input fields.
When such an input field is focused I need it's absolute position.
Is there a way to do so with IE > 6?

thanks...

bye Stephan...


Hi Stephan,

This is from the X Library (http://cross-browser.com/). You don't have to use the library, but this should give you some ideas. Two library functions are not provided here: xDef() returns true if all it's arguments are 'defined'; xGetElementById () works as you would expect.

function xPageX(e) {
if (!(e=xGetElemen tById(e))) return 0;
var x = 0;
while (e) {
if (xDef(e.offsetL eft)) x += e.offsetLeft;
e = xDef(e.offsetPa rent) ? e.offsetParent : null;
}
return x;
}
function xPageY(e) {
if (!(e=xGetElemen tById(e))) return 0;
var y = 0;
while (e) {
if (xDef(e.offsetT op)) y += e.offsetTop;
e = xDef(e.offsetPa rent) ? e.offsetParent : null;
}
return y;
}
Jul 23 '05 #4
Mike Foster wrote:
<snip>
function xPageX(e) {
if (!(e=xGetElemen tById(e))) return 0;
var x = 0;
while (e) {
if (xDef(e.offsetL eft)) x += e.offsetLeft;
e = xDef(e.offsetPa rent) ? e.offsetParent : null;
}
return x;
}
function xPageY(e) {
if (!(e=xGetElemen tById(e))) return 0;
var y = 0;
while (e) {
if (xDef(e.offsetT op)) y += e.offsetTop;
e = xDef(e.offsetPa rent) ? e.offsetParent : null;
}
return y;
}


As an observation, there are two other considerations in calculating the
position of elements on a page. Borders around elements and elements
within other elements with scrolling overflow that are partially
scrolled. Borders can be coped with either using clientTop/Left or
getting top and left border px dimensions from a calculated style
object, on more recent browsers.

Scrolling on containing elements can be addressed with scrollTop/Left,
where supported, but Opera 7 makes it a pain to attempt that with inline
elements.

In the vast majority of contexts neither of these additional factors
will apply.

Richard.
Jul 23 '05 #5
Mike Foster wrote:
<snip>
function xPageX(e) {
if (!(e=xGetElemen tById(e))) return 0;

<snip> ^

I forgot to mention; wouldn't returning NaN at that point be a better
indicator of failure, as it is always possible that the referenced
element actually is 0px offset into the page.

Richard.
Jul 23 '05 #6
On Tue, 15 Jun 2004 21:03:51 +0100, Richard Cornford <Ri*****@litote s.demon.co.uk> wrote:
Mike Foster wrote:
<snip>
function xPageX(e) {
if (!(e=xGetElemen tById(e))) return 0;

<snip> ^

I forgot to mention; wouldn't returning NaN at that point be a better
indicator of failure, as it is always possible that the referenced
element actually is 0px offset into the page.

Richard.


You're assuming that Javascript programmers actually validate return values - even C programmers don't do that as much as that should ;-) Yes, technically it should return an error code not in the function domain and your suggestion (NaN) fits the bill perfectly. Actually I have many functions which don't return an error code - my reasoning then, as I remember it, was that the functions would be more likely to fail gracefully this way. You have a good point tho and I'm not so sure my original idea worked as well as I thought it might. This just hasn't come up in quite a while :-) I hesitate to make indiscriminate changes because many people are using the core functions. Still, its a good idea so I may have to put this on the to-do list ;-)

Thanks!
Mike
Jul 23 '05 #7
Mike Foster wrote:
Richard Cornford wrote: <snip> You're assuming that Javascript programmers actually validate return
values - even C programmers don't do that as much as that should ;-)
I would be being very short-sighted if I assumed any such thing. The
unfortunate reality is the vast majority of the people authoring
javascript are not programmers, don't really understand what they are
doing and do not apply any standards to what they produce (or even
aspire to). But that is not a good reason for making it difficult for
those that do.

In reality javascript programmers (at least those working with web
browsers) have more reason for being defensive and cautions than C
programmers do. A C program in an equivalent context, interacting with a
DOM, could be written with a fair confidence about the DOM
implementation. At minimum it could expect to only have to work with one
implementation at a time, and that implementation would be known.

Browser scripts are written to be sent out to unknown browser software
where they realistically should expect to find numerous more or less
divergent DOM implementations . Script failure is a consequence so
inevitable in that context that its controlled handling should be
written into the script, and that means checking to see when it can be
predicted, is happening or has happened.

Learning how to do that efficiently is a major part of learning to be
good at browser scripting. for example, if your function returned NaN on
the first call it could reasonably be assumed that it would continue to
do so. There would be no point calling it again. While a non-NaN numeric
return value on the first call would be grounds to assume that all
subsequent calls will also returned non-NaN values (subject to the
element not being removed from the DOM by the script). Testing that you
have a position reporting facility before its use is vital but, once
checked, testing all subsequent returned values would needlessly slow
the script down.

<snip> ... , was that the functions would be more likely
to fail gracefully this way.
It is really the code employing the functions that should be failing
gracefully, as it is the code that would be written with a knowledge of
what was appropriate as a response to failure in its context.

<snip> ... . I hesitate to make indiscriminate
changes because many people are using the core functions. ...

<snip>

Yes, you can be certain that if you change the behaviour of an API, even
objectively for the better, then some of the code written to use
previous versions it will promptly fail.

Richard.

Jul 23 '05 #8
Richard Cornford said:
Mike Foster wrote:
You're assuming that Javascript programmers actually validate return
values - even C programmers don't do that as much as they should ;-)
I would be being very short-sighted if I assumed any such thing. The
unfortunate reality is the vast majority of the people authoring
javascript are not programmers, don't really understand what they are
doing and do not apply any standards to what they produce (or even
aspire to). ...


LOL! I was a C programmer long before I started this Javascript hobby. That
influences my perspectives. I usually refer to scripters as "programmer s"
as a sign of coder respect and camaraderie, and to inspire them to "aspire
to apply standards to what they produce", and to raise the overall
respectability of their craft and industry. Neverthless I do recognize that
many scripters are web designers who are forced to use scripting - and they
don't really want to get too deep into it.

Richard Cornford said: But that is not a good reason for making it difficult for those that do.
Point well taken. I'm sure I will eventually implement your suggestion.
While we're on this topic I'd be grateful for anyone's thoughts on appropriate
error codes to return from other functions. Looking thru my functions I see
3 different data types returned: Number, String and Element.

1. If a function normally returns a number I will return NaN as an error code.

2. If a function normally returns a string, as an error code should it return
null instead of returning an empty string?

3. If a function normally returns an element reference is it appropriate to
return null as an error code? (I think this one is right)
... Testing that you
have a position reporting facility before its use is vital but, once
checked, testing all subsequent returned values would needlessly slow
the script down.


I agree. When I post little demos for people I usually assume that such checks
will be done eariler. Still, these functions are not representative of most of
my 'core' functions which test for object existence before using the object.
Correcting this is also a task now going on my to-do list ;-)

Thanks for your replies,
Mike
Jul 23 '05 #9
Mike Foster wrote:
Richard Cornford said: <snip> ... . Neverthless I do recognize that many scripters are web
designers who are forced to use scripting - and they don't
really want to get too deep into it.
Forced to? Someone is holding a gun to their head? Want to use scripting
certainly, need to be able to offer scripting it in order to compete in
their chosen profession, probably, but I don't see how they could be
"forced to" use scripting.

Unfortunately a combination of a desire to program one of the most
unreliable and inconsistent software environments that exists (the web
browser), and an unwillingness to learn programming at all, is not
likely to results in a successful outcome. And a quick sample of
Internet browser scripts would rapidly reveal how spectacularly
unsuccessful that outcome can be.

<snip> 2. If a function normally returns a string, as an error code should
it return null instead of returning an empty string?
Strings can be a bit of a problem as an empty string is a reasonable
error when a string of data (so non-empty) marks success, and easy to
test by type-converting it to boolean. Returning null is probably the
only sensible option when an empty string could be a meaningful results,
and all strings are != null.
3. If a function normally returns an element reference is it
appropriate to return null as an error code? (I think this one is
right)


That would be my choice, and consistent with return values from
unsuccessful W3C DOM element retrieval methods
... Testing that you have a position reporting facility before
its use is vital but, once checked, testing all subsequent
returned values would needlessly slow the script down.


I agree. When I post little demos for people I usually assume that
such checks will be done eariler.

<snip>

That is always a dilemma because someone seeing a facility employed
without the required associated testing may take it as indication that
doing so is acceptable. While an example that wraps the required testing
directly around the use of the facility being demonstrated (and repeats
those tests for each subsequent use) might be taken as a guide to
implementation, even though that is rarely an efficient style of
implementation. And a full optimal implementation would be a ludicrous
thing to write just to demonstrate the use of one facility for a Usenet
post.

Richard.
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
10993
by: Ken Kast | last post by:
Here's my situation. I have a statically positioned table that has an image in a cell. I also have some layers, defined by absolute-positioned DIVs for some animation. Everything works until I scroll/resize. Then the image "moves" on the screen but the animation doesn't. The net effect is that their relative positioning changes. I'd like...
3
19755
by: Markus Ernst | last post by:
Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following test case element1 and element2 should be placed side by side inside a centered white container element: http://www.markusernst.ch/test.htm
1
24064
by: Knut | last post by:
Hello everybody. This is my first attempt at Javascript, something that is long overdue. But please bear that in mind, and have mercy (= My question is simple: I'm doing a dropdown menu system to work on the <div>'s produced by our CMS, and every menubutton div has a onMouseOver="openSubmenu(this, 'popup1234')", where popup 1234 is...
6
6069
by: Gérard Talbot | last post by:
Hello fellow stylers, When trying this page http://www.gtalbot.org/BrowserBugsSection/PercentualRelativePositioning.html I get different rendered layouts with IE 6, IE 7 beta 2, Firefox 1.5.0.2 and Opera 9.0 build 8367. Firefox 1.5 and Opera 9 will just ignore the CSS declaration
4
5659
by: Samuel | last post by:
Hi, Is it possible to get absolute position of element with javascript? e.g. I have textbox somewhere in table. Textbox relative to table cell position is 0,0. How can I get Textbox absolute position on page?? Please, any ideas, I'm going crazy... thanks
4
7095
by: Petra Meier | last post by:
Hi, I use the common code to determine the position of an element getTop = function(o){ var nTop = null; if(o){ do{ nTop += o.offsetTop;
10
3253
by: Mark | last post by:
According to my book on CSS, if you apply 'position: relative' to a block-level element, it will stay exactly where it is. However, you can then use top, left etc. to offset the element relative to its position. However, looking at other people's stylesheets, I often see 'position: relative' applied to elements but without the use of top,...
30
4856
by: Bassem | last post by:
Hi, I've two div.s. One contains four images, when click on one, a JS function create an image corresponding to it and append it to the second div. I'm attempting to make each new image is to be movable. I'm trying for three days with many searches to create a DragPanel and set its TargetControlID to the certian images on the client side. I...
2
1755
Jezternz
by: Jezternz | last post by:
Okay so I want to place a relative division inside an absolutely positioned division. <div style="position:absolute;left:50px;right:50px;top:50px;bottom:50px"> <div style="position:relative;margin:0 auto;height:100%;width:500px;">testing123</div> </div> This isn't the code from my website but is good enough for demonstration. So I...
0
7612
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7924
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8120
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7672
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
1
5512
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5219
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3653
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
2113
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1212
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.