firefox positioning. Best practices replacing MSIEs pixelToppixelWidth renderStyle

[Jens]

Hi everyone,

I'm trying to build a simple dropdown menu for a website and i need to
need a way to retrieve
the top and left style attributes of an object. However it seems style
attributes like style.top
a not always available, depeding, i think, on whether the object in
question is positioned relatively or absolutely.

I've been able to use event.pageX and event.pageY with some success,
but it's not really apropriate
for what i wan't

MSIE used to have pixelTop which returned a numerical value and also
the renderStyle which would return the calculated style value of a
auto layouted object, but nothing like this available in firefox and I
assume it isn't standard.dhtml anyway.

What is the recommeded (and fool-proof) way to get the x, y co-
ordinates in javascript using standard
non-browser specific dhtml?

I appreciate any feedback you might have on this.

- Jens

 

[Álvaro G. Vicario]

Jens escribió:

I'm trying to build a simple dropdown menu for a website and i need to
need a way to retrieve
the top and left style attributes of an object. However it seems style
attributes like style.top
a not always available, depeding, i think, on whether the object in
question is positioned relatively or absolutely. [...]
What is the recommeded (and fool-proof) way to get the x, y co-
ordinates in javascript using standard
non-browser specific dhtml?

The only foolproof way I know is using a framework: jQuery, mootools,
prototype... They all offer functions to calculate any element size and
position and they've been tested in several browsers.

However, I've never needed to know the absolute position of a menu
element in order to make a drop down menu. Using CSS and relative
positions is usually enough.

 

[Thomas 'PointedEars' Lahn]

Jens escribió:

I'm trying to build a simple dropdown menu for a website and i need to
need a way to retrieve
the top and left style attributes of an object. However it seems style
attributes like style.top
a not always available, depeding, i think, on whether the object in
question is positioned relatively or absolutely. [...]
What is the recommeded (and fool-proof) way to get the x, y co-
ordinates in javascript using standard
non-browser specific dhtml?

The only foolproof way I know is using a framework: jQuery, mootools,
prototype... They all offer functions to calculate any element size and
position and they've been tested in several browsers.

ROTFL. They have been only tested in the latest versions of a few browsers
that their rather clueless developers had available (did you notice that it
is not even mentioned on which platforms the tests that attempt to assure us
of their quality were performed?). And they are poorly written in the first
place (using browser sniffing and making other ridiculous blunders), so them
being tested as working may as well be sheer coincidence.

We have discussed that ad nauseam here before (with no substantial rebuttal
of the criticism from their developers), and you are well-advised not to use
them and not to recommend them as well.


PointedEars

 

[Ãlvaro G. Vicario]

Thomas 'PointedEars' Lahn escribió:

ROTFL. They have been only tested in the latest versions of a few browsers
that their rather clueless developers had available (did you notice that it
is not even mentioned on which platforms the tests that attempt to assure us
of their quality were performed?). And they are poorly written in the first
place (using browser sniffing and making other ridiculous blunders), so them
being tested as working may as well be sheer coincidence.

We have discussed that ad nauseam here before (with no substantial rebuttal
of the criticism from their developers), and you are well-advised not to use
them and not to recommend them as well.

Interesting: all existing frameworks are so terrible that any snippet of
code written by a newbie will have a far superior browser compatibility.

The only problem is that I couldn't care less about your opinions, Mr.
All Developers Suck Except Me, and I'm pretty sure I'm not the only one.
If your strong opinions about everything normally remain undisputed I'd
dare say it's because nobody likes to discuss with you: you tend to
criticize the person when you don't like the opinions and you seem to
think JavaScript is a religion subject to dogma.

*plonk*

 

[Evertjan.]

=?UTF-8?B?IsOBbHZhcm8gRy4gVmljYXJpbyI=?= wrote on 23 jul 2008 in
comp.lang.javascript:

Thomas 'PointedEars' Lahn escribió:

Interesting: all existing frameworks are so terrible that any snippet
of code written by a newbie will have a far superior browser
compatibility.

The only problem is that I couldn't care less about your opinions, Mr.
All Developers Suck Except Me, and I'm pretty sure I'm not the only
one. If your strong opinions about everything normally remain
undisputed I'd dare say it's because nobody likes to discuss with you:
you tend to criticize the person when you don't like the opinions and
you seem to think JavaScript is a religion subject to dogma.

*plonk*

Dear friend, I never saw a religion that was not subject to dogma,
your dogma seems to be that you do not like to hear voices that
contradict your opinions, and so killfiling dear Pointed.

That will not flatten his ears or stop him from uttering his meaning, for
this is usenet, but it shows your own sectarianism, to keep your
religious analogy.

btw, [OT] for [off topic] on usenet does not mean you change the subject,
but that the subject at hand is not a subject allowed by charter for a
NG. Wrongly added in this case by you.

==========

Pointed's ROTFL seems to me in response to your "foolproof"
in "The only foolproof way I know is using a framework".

I think here he is completely right, [but for the fact that rolling over
the floor could harm his ears], because those libraries are certainly not
foolproof, you would be a fool not to take that into account.

And not using the libraries and doing the hard work yourself will give
you not only more satisfaction and enhance your learning curve, but the
knowledge that your code does what you wanted it to do, at least on the
platforms you extensively tested.

 

[Jens]

Ok, sticking to event then although it's not perfect.

Follow up question: Where can i find some up-to-date information about
what dhtml firefox. In perticular what style object attributes are set
the by the rendering engine when they are not explicitly set in the
css? For instance, let's say i need to find the absolute x and y co-
ordinates of an object that is positioned relative or using the float
or displayed inline, top and left are not set in the css; Will these
attributes
be set automatically by the rendering engine? Is there some other
method of retrieving them?

 

[Jens]

Ok, sticking to event then although it's not perfect.

Follow up question: Where can i find some up-to-date information about
what dhtml firefox. In perticular what style object attributes are set
the by the rendering engine when they are not explicitly set in the
css? For instance, let's say i need to find the absolute x and y co-
ordinates of an object that is positioned relative or using the float
or displayed inline, top and left are not set in the css; Will these
attributes
be set automatically by the rendering engine? Is there some other
method of retrieving them?

 

[Jens]

Ok, sticking to event then although it's not perfect.

Follow up question: Where can i find some up-to-date information about
what dhtml firefox. In perticular what style object attributes are set
the by the rendering engine when they are not explicitly set in the
css? For instance, let's say i need to find the absolute x and y co-
ordinates of an object that is positioned relative or using the float
or displayed inline, top and left are not set in the css; Will these
attributes
be set automatically by the rendering engine? Is there some other
method of retrieving them?

 

[The Magpie]

Ok, sticking to event then although it's not perfect.

Follow up question: Where can i find some up-to-date information about
what dhtml firefox. In perticular what style object attributes are set
the by the rendering engine when they are not explicitly set in the
css? For instance, let's say i need to find the absolute x and y co-
ordinates of an object that is positioned relative or using the float
or displayed inline, top and left are not set in the css; Will these
attributes
be set automatically by the rendering engine? Is there some other
method of retrieving them?

You seem to be under a misapprehension here, Jens. Let's be blunt (if
a little simplistic) - think of it this way:

DHTML is only available on MSIE. Its not quite true, but its good
enough to work with. All others use a rendering engine based on
stylesheets of which there are three main kinds.

The "local" style is what you mean by the "rendering engine". It
actually tells the browser how to render and where to place things
that are not over-ridden by another stylesheet.

The "page" stylesheet tells the browser that certain defined styles
over-ride the "local" stylesheet.

Finally, the "user" stylesheet is a set defined by the specific
instance of the browser because that's what the specific user wants.

What this means is that the "rendering engine" of Firefox does not say
"put this at x and y position <whatever>, it says "float it to the
right" or "fill the screen width area" and so on. Essentially, you are
asking some "under the hood" questions that you - as a user of the
browser rather than a browser developer - really should *never* need
to ask for.

 

[Thomas 'PointedEars' Lahn]

Ok, sticking to event then although it's not perfect.

Follow up question: Where can i find some up-to-date information about
what dhtml firefox.

This is not a question, it is a gibberish statement. If you are unable
to utter understandable questions in English, then, although this is an
international newsgroup and English is not a requirement, you would be
better of posting in a newsgroup for your native language instead. From
your headers I assume that is German, in which case you should post to
de.comp.lang.javascript (I am posting there, too.)

In perticular what style object attributes are set
the by the rendering engine when they are not explicitly set in the
css?

That depends on the rendering/layout engine.

For instance, let's say i need to find the absolute x and y co-
ordinates of an object that is positioned relative or using the float
or displayed inline, top and left are not set in the css; Will these
attributes be set automatically by the rendering engine?

Style *properties* are defined in a user agent's default stylesheet and
rendered by the layout engine accordingly. They can be overwritten in the
cascade with user stylesheets and author stylesheets. In CSS1, author
stylesheets could overwrite user stylesheets with `!important'. In CSS2 and
later, user stylesheets can overwrite author stylesheets with `!important'
instead.

Is there some other method of retrieving them?

Other than recursing upwards over the proprietary offset* properties?
Unfortunately, no.


PointedEars

 

[Thomas 'PointedEars' Lahn]

You seem to be under a misapprehension here, Jens. Let's be blunt (if
a little simplistic) - think of it this way:

No, don't.

DHTML is only available on MSIE. Its not quite true, but its good
enough to work with.

It isn't. Please don't try impose your misconceptions on others.

All others use a rendering engine based on
stylesheets of which there are three main kinds.

At least the IE Developer Toolbar shows how utterly mistaken you are about
MSIE here.

In fact, DHTML does not have anything to do with that. It is instead a
common buzzword for using client-side scripting to manipulate the DOM,
which is by far not only available in MSIE.


PointedEars

 

[The Magpie]

In fact, DHTML does not have anything to do with that. It is instead a
common buzzword for using client-side scripting to manipulate the DOM,
which is by far not only available in MSIE.

I know that Thomas. I also know it is not true "only" MSIE has DHTML
and it is not true all browsers use stacked styles. I am well aware of
various misconceptions and that what I told the OP was not exactly
true in any respect.

I also knew what he asked about and how he had got the odd ideas he
had and I was trying to explain in as simple a way as possible that he
did not need - and it would not help him - to know what went on "under
the hood" of the browser rendering engine.

You do often seem to forget, Thomas, that questions asked are often of
the "what should I do" sort rather than technical aspects of how
things work. Simplicity - even if it is not strictly correct - is
often the best help.

 

[Thomas 'PointedEars' Lahn]

You do often seem to forget, Thomas, that questions asked are often of
the "what should I do" sort rather than technical aspects of how
things work. Simplicity - even if it is not strictly correct - is
often the best help.

IBTD. Simplicity like this, when it it ultimately leads to factually wrong
answers, is the worst kind of help that could be given.


PointedEars

 

[optimistx]

IBTD. Simplicity like this, when it it ultimately leads to factually
wrong answers, is the worst kind of help that could be given.


PointedEars

Yes, the worst kind of help. When a newbie asks 'In which address
do you live, my friend?', then a very useful, accurate and friendly
answer might be:

'You ask an incorrect question. Nobody lives in an address. People
live mostly in houses, not addresses. Case closed.'

 

[Thomas 'PointedEars' Lahn]

You do often seem to forget, Thomas, that questions asked are often
of the "what should I do" sort rather than technical aspects of how
things work. Simplicity - even if it is not strictly correct - is
often the best help.

IBTD. Simplicity like this, when it it ultimately leads to factually
wrong answers, is the worst kind of help that could be given.
[...]

Yes, the worst kind of help. When a newbie asks 'In which address
do you live, my friend?', then a very useful, accurate and friendly
answer might be:

'You ask an incorrect question. Nobody lives in an address. People
live mostly in houses, not addresses. Case closed.'

Apples, oranges. Please trim your quotes.


PointedEars

 

[optimistx]

The Magpie wrote:
You do often seem to forget, Thomas, that questions asked are often
of the "what should I do" sort rather than technical aspects of how
things work. Simplicity - even if it is not strictly correct - is
often the best help.
IBTD. Simplicity like this, when it it ultimately leads to
factually wrong answers, is the worst kind of help that could be
given. [...]

Yes, the worst kind of help. When a newbie asks 'In which address
do you live, my friend?', then a very useful, accurate and friendly
answer might be:

'You ask an incorrect question. Nobody lives in an address. People
live mostly in houses, not addresses. Case closed.'

Apples, oranges. Please trim your quotes.


PointedEars

I trimmed my quotes in the same way as you did now . Should I do as you
do or as you command us to do, captain of this spaceship?