473,394 Members | 1,742 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

Position reporting function: Flanagan, Yahoo!, Kruze, Prototype ... all broken at least a little.

Hi,

It seems like determining element position in a web page is a difficult
task. In the position reporting source code I've looked at there are
special fixes for at least some versions of Safari and Opera. I am
doing a lot of dragdrop experimentation and in some situations need a
position reporting function. The function doesn't need to report the
positions of exotic elements like images in button elements; however, I
would like a position reporting function that can at least handle
combinations of scrollable elements and tables.

I've been testing these libraries

* David Flanagan's JavaScript 5th ed, p362
* Yahoo! UI v0.11.3
* Matt Kruze's current Object Position library
* Prototype.js v1.5.0_rc1

with the two examples in this page

<URL: http://peter.michaux.ca/temp/position/scale.html>

in the following mainstream browsers

OS X 10.4
* Safari 2
* Opera 9
* Firefox 1.5

Win 98
* IE 6
* IE 5.5

All of the position reporting functions break in at least one of my
test examples.

I don't understand the 2px IE weirdness in the test results. Any ideas?

Does anyone know which versions of Opera and Safari required special
attention? Does anyone have position reporting code that doesn't
browser sniff and also works in these versions of Opera and Safari?

Given the influence this group has (or should have) on JavaScript
practices, I think it incredibly beneficial if the group could offer
the world a position reporting function that works at least up to a
listed set of medium difficulty cases.

Thank you,
Peter

Oct 9 '06 #1
2 1951
pe**********@gmail.com wrote:
It seems like determining element position in a web page is a
difficult task.
Indeed. Or at least, doing it in such a generalized way so as to work
correctly in any context.
* Matt Kruze's current Object Position library
s/z/s/ ;)
<URL: http://peter.michaux.ca/temp/position/scale.html>
OS X 10.4
* Safari 2
* Opera 9
* Firefox 1.5
I do not have a mac to test with. What are the results?
Win 98
* IE 6
* IE 5.5
Similarly, I don't test with Win98. What are the results?
Does anyone know which versions of Opera and Safari required special
attention? Does anyone have position reporting code that doesn't
browser sniff and also works in these versions of Opera and Safari?
Doubtful. Quirks that are specific to browser versions and/or OS are
difficult or impossible to feature-detect. That I know of.
Given the influence this group has (or should have) on JavaScript
practices, I think it incredibly beneficial if the group could offer
the world a position reporting function that works at least up to a
listed set of medium difficulty cases.
I believe my library does, as it seems the others do also. Maybe your test
case is sufficiently complex or your test browsers are sufficiently
broken/quirky.

People like Richard Cornford, who may actually have the experience and
knowledge necessary to solve the quirks you are experiencing, object to the
entire idea of writing a general-purpose position-finding function. And in
cases where he finds a flaw in existing code (like mine) he is cryptic about
the problem and reluctant to give advice. He's just one example - there are
other people who could offer support in writing such a function also, but
object to the very concept of writing such a function.

I've always been in favor of the experts of this group pooling their
knowledge and resources into writing solid, bullet-proof low-level functions
for very basic tasks that work across as many browsers and situations as
possible. There seems to be little interest.

At the very least, libraries like my Object Position and others improve on
the very flawed approach of just walking up the offsetParent chain and
adding up the offset values. That's the typical approach shown on sites like
Quirksmode, and wouldn't even come close to giving you the correct answers
in your test case!

If you find the solution to your problem or if anyone else can offer advice
on how to improve my code to handle more browser quirks and specific
situations, I would of course love to hear it.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Oct 10 '06 #2
Hi Matt,

Matt Kruse wrote:
pe**********@gmail.com wrote:
It seems like determining element position in a web page is a
difficult task.

Indeed. Or at least, doing it in such a generalized way so as to work
correctly in any context.
I'm not really interested in *any* context. Surely the more complicated
cases would bloat the code severly. However the mild to medium cases
which are common should be containable in a relative small function.

* Matt Kruze's current Object Position library

s/z/s/ ;)
<URL: http://peter.michaux.ca/temp/position/scale.html>
OS X 10.4
* Safari 2
* Opera 9
* Firefox 1.5

I do not have a mac to test with. What are the results?
I believe that the only error I found with your library was in Opera 9

"bluebox should be (100,100) and Kruze says is (150,150)"

I would like to know the results in Opera 8 or 7 or which ever Opera
you were using when you wrote the code. Perhaps the browser sniffing
worked then but broke when Opera 9 fixed a bug?

Win 98
* IE 6
* IE 5.5

Similarly, I don't test with Win98. What are the results?
Sorry I meant Windows XP.

Does anyone know which versions of Opera and Safari required special
attention? Does anyone have position reporting code that doesn't
browser sniff and also works in these versions of Opera and Safari?

Doubtful. Quirks that are specific to browser versions and/or OS are
difficult or impossible to feature-detect. That I know of.
Richard Cornford made a suggestion to me in another post that might
give a clue to a last resort type of solution.

<URL:
http://groups.google.com/group/comp.lang.javascript/msg/312ff8d4ea3cb11b>

The idea of creating an element onload and then manipulating and
analyzing it to see the resulting browser behavior is a very
interesting and creative approach. It seems laborious but *if* nothing
else works and this approach will not break as time passes then it
sounds very good to me.

Even if I am way off in suggesting this solution might work in this
case it shows how creatively and cleverly the JavaScript code can be
written. I have been impressed with other sneaky tips suggested here to
avoid browser sniffing.

Given the influence this group has (or should have) on JavaScript
practices, I think it incredibly beneficial if the group could offer
the world a position reporting function that works at least up to a
listed set of medium difficulty cases.

I believe my library does, as it seems the others do also. Maybe your test
case is sufficiently complex or your test browsers are sufficiently
broken/quirky.
My test cases were relatively simple: scrolling divs and a table. If
your code can be adjusted to handle this in Opera 9 then perhaps it
does. But the browser sniffing is what makes me nervous and would make
the launch of a page depending on this stressful. I'm not saying I know
the solution but I bet someone here does.

People like Richard Cornford, who may actually have the experience and
knowledge necessary to solve the quirks you are experiencing, object to the
entire idea of writing a general-purpose position-finding function. And in
cases where he finds a flaw in existing code (like mine) he is cryptic about
the problem and reluctant to give advice. He's just one example - there are
other people who could offer support in writing such a function also, but
object to the very concept of writing such a function.
Richard has completely convinced me about the value of layers of
JavaScript. Solutions for the simple cases and then building more
complex cases on top or as separate modules with the same API. I am
sure I don't I implement his idea with finess but already my code has
become much cleaner and more organized and I am more proud of my code.
I am grateful for his advice.
>From what I have read here, I think that the people here that are
reluctant to offer suggestions for a general purpose library have good
reason. I think the existing code libraries advertise that they do it
all and are general purpose when in fact they are not. They make people
think that writting JavaScript will be easy because the libraries
smooth out all the bumps. Perhaps the reluctance to offer suggestions
is a backlash of "I told you so" to show people that JavaScript is not
a toy language and good browser scripting is hard.

I think it would be better to have a library that explains under which
limited circumstances a particular function will work.

I have been reading the code in many JavaScript libraries as a learning
experience. It is really valuable and the better the code the more I
learn. But if the really hard won tricks that the gurus know about,
like position reporting, are kept secret it makes my learning harder
and slower. It is the same situation for other people that genuinely
want to learn too and ultimately more bad JavaScript ends up on the web
without the sharing of the really great tips.

"If I have seen a little further it is by standing on the shoulders of
Giants." - Newton

But, of course, he who figures out one of these hard won secrets has
the right to keep it. Job security.

I've always been in favor of the experts of this group pooling their
knowledge and resources into writing solid, bullet-proof low-level functions
for very basic tasks that work across as many browsers and situations as
possible. There seems to be little interest.
Unfortunate. I bet that even the experienced ones here could learn by
collaborating on something difficult like position reporting. They
would, of course, have to expose just how expert they really are. (I
don't mean that comment directed at any particular person or
sarcastically.)

I would like to read more articles like this

<URL: http://www.jibbering.com/faq/faq_notes/not_browser_detect.html>

At the very least, libraries like my Object Position and others improve on
the very flawed approach of just walking up the offsetParent chain and
adding up the offset values. That's the typical approach shown on sites like
Quirksmode, and wouldn't even come close to giving you the correct answers
in your test case!
I agree but I sure would like to see the browser sniffing out of an
example like yours, Yahoo! UI or Prototype.js that try to fix browser
bugs/differences.

If you find the solution to your problem or if anyone else can offer advice
on how to improve my code to handle more browser quirks and specific
situations, I would of course love to hear it.
I also.

Unifying event listeners and ajax across the browsers seems managable.
Opacity is without sniffing seems harder. But proper position reporting
seems like a real killer.

- Peter

Oct 10 '06 #3

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

Similar topics

3
by: Jonathan | last post by:
We have a production database, but due to the crippling load of some reporting tools, we are looking to have a separate reporting database. Due to it's nature, the reporting database doesn't need...
1
by: lak | last post by:
Hi, I am evaluating Microsoft Reporting Services against Business Objects as a reporting tool against SQL Server. I am primarily a BOBJ developer and am finding RS not easy to use. Can anyone...
10
by: Brett Foster | last post by:
Perhpas somebody can give me a hand with this little problem. Given: var object; -- an object var func; -- a function call back Now, I want to know how to get the following effect: ...
6
by: scot_nery | last post by:
I got this working in all browsers but FF/NS. It's not picking up the event to find the mouse position. In a perfect world, you mouse over the link and a mouse bubble pops up. Thanks for help....
0
by: Joshua V. | last post by:
We are trying to implement Windows Error Reporting from within our VB.Net application. Basically we want to replace the standard unhandled exception message we use with the Windows Error Reporting...
7
by: Csaba Gabor | last post by:
I need to come up with a function function regExpPos (text, re, parenNum) { ... } that will return the position within text of RegExp.$parenNum if there is a match, and -1 otherwise. For...
19
by: firewood | last post by:
Just got a copy of the 5th edition of David Flangan's "JavaScript: The Definitive Guide". It looks, a first scan, to be superb. It will continue, I am sure, to be the only CLJ-endorsed reference...
3
by: antonyliu2002 | last post by:
I am looking for a free reporting package for .net 2.0 against Oracle database 10g. The web application I am working on will let office staff members who don't know much about database generate...
3
by: daveyand | last post by:
Hey Guys, Am stuck, i need to create an overlaying DIV to a webpage, but i want it to go over only the HTML content of the page. So if the page is only within the middle 500px of the screen i...
4
by: vunet.us | last post by:
I have a DIV element. How can I find mouse position (top and left) inside of this DIV? <div onMouseMove="getPositions();" style="width:200px;height:100px"></div> function getPositions(ev){...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
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...
0
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,...
0
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...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.