Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #8835
| From | David Mark <dmark.cinsoft@gmail.com> |
|---|---|
| Newsgroups | comp.lang.javascript |
| Subject | Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions |
| Date | 2011-12-03 17:14 -0800 |
| Organization | http://groups.google.com |
| Message-ID | <91aa3b1b-7bd7-45da-abe6-9387fbe87a84@m7g2000vbc.googlegroups.com> (permalink) |
| References | <bd12b66f-33f5-43d2-8e22-6f81b42c3d8b@n14g2000vbn.googlegroups.com> <lKvGLxF5SZvOFwvl@invalid.uk.co.demon.merlyn.invalid> <24925190-dfd1-4c2c-a804-8b7fac1fc3ab@m10g2000vbc.googlegroups.com> <jbe5iu$2dr$1@speranza.aioe.org> <b8421d10-ae2d-43c8-9323-03d56e749278@y6g2000yqe.googlegroups.com> |
On Dec 3, 7:38 pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Dec 3, 4:50 pm, "J.R." <groups_j...@yahoo.com.br> wrote:
>
>
>
>
>
>
>
>
>
> > On 03/12/2011 00:38, David Mark wrote:
>
> > > On Nov 11, 4:33 pm, Dr J R Stockton<reply1...@merlyn.demon.co.uk>
> > > wrote:
>
> > >> OneTipmight be the answer to "I have an on-screen element, of known
> > >> size, with an on[dbl]click method; how do I obtain the co-ordinates of a
> > >> [double-]click with respect to a given position in the element itself?"
>
> > > Tricky. :)
>
> > > Your best bet is to see thetipof the day related to coordinates.
> > > From that you should be able to get the coordinates of the element
> > > relative to the viewport (or "window" as I think I referred to it in
> > > that post). So you will need the mouse coordinates relative to the
> > > viewport. Ironically enough, it's trivial to find those in the old IE
> > > versions that lacked pageX/Y properties. But for everything else, you
> > > have to have to subtract the scroll position as pageX/Y are relative
> > > to the document. Depending on context, getting the scroll position is
> > > either trivial (one-liner) or fairly complex. Frustratingly, it's IE
> > > (all versions AFAIK) that needs most of the extra code in this case.
> > > You also have to consider other factors like whether you will need
> > > this to work in quirks mode (hopefully not)
>
> > > It looks like:-
>
> > > // No quirks mode, frames or other windows (just the one running the
> > > script)
>
> > > var getScrollPosition;
>
> > > if ('number' == typeof window.pageXOffset) {
>
> > > // Many "standards-based" browsers feature this non-standard
> > > property
> > > // No ambiguity about what this window property means
>
> > window.pageYOffset is available as of IE9, FF3+, Safari 4+, Chrome 4+,
> > Opera 10+.
>
> > IE 8 and older browsers in standards-compliant mode (strict mode) would use:
>
> > if (document.documentElement && document.documentElement.scrollTop) {
> > return document.documentElement.scrollTop;
>
> > }
>
> > But IE in quirks mode (tested with IE8) would use:
> > if (document.body) {
> > return document.body.scrollTop;
>
> > }
>
> So let's finish this off. If you need it to work in IE 9 and
> virtually every other browser made since the turn of the century:-
>
> if ('number' == typeof window.pageXOffset) {
> getScrollPosition = function() {
> return [window.pageXOffset, window.pageYOffset];
> };
>
> // I suppose jQuery users would prefer gPtrPosRel2Win or some such
> "concise" BS. :)
>
> // Works for mouse or touch
>
> getPointerPositionRelativeToViewport = function(e) {
> return [e.pageX - window.pageXOffset, e.pageY -
> window.pageYOffset]
> };
>
> }
>
> Piece of cake (as this context usually is).
>
> Now, what if you need IE 6-8 to join in the fun?
>
> Put this script inside conditional comments (so the others don't
> download it):-
>
> // Last test is to exclude IE quirks mode and IE 5
>
> if (document.documentElement && 'number' == typeof
> document.documentElement.scrollLeft &&
> document.documentElement.clientWidth) {
> getScrollPosition = function() {
>
> // Note: optimize by saving a reference to documentElement (saves
> two dot operations)
>
> return [document.documentElement.scrollLeft,
> document.documentElement.scrollTop];
> };
>
> getPointerPositionRelativeToViewport = function(e) {
>
> // Yes, we would use these in non-IE browsers too if history of
> implementation
> // wasn't atrocious. Perhaps in a few years...
> // Regardless, you know for sure these work as advertised in
> legacy IE versions
>
> // NOTE: the HTML border "issue" is irrelevant as same offset for
> element positions
>
> return [e.clientX, e.clientY]
> };
>
> }
>
> // Detect API features (never changes, regardless of specific
> renditions used)
> // Self-documenting (really, not like jQuery's claims)
>
> if (getScrollPosition && getPointerPositionRelativeToViewport) {
>
> var el = getElementById('johnstockton');
>
> el.onmousedown = ...
> el.ondblclick = ...
>
> }
>
And actually, the way it ended up (with the two functions working
independently), don't even need getScrollPosition. Could have written
getPointerPositionRelativeToViewport to call the getScrollPosition
function, but that would just slow things down (and retrieving pointer
position needs to be as fast as possible). Better to render the two
functions as a unit (if the other one is needed at all).
if (getPointerPositionRelativeToViewport) {
var el = getElementById('johnstockton');
el.onmousedown = ...
el.ondblclick = ...
}
> Will leave rest as an exercise. Hint: need to add
> getElementRectangleRelativeToViewport (see
> getElementPositionRelativeToViewport from previoustip). Also need
> isPointInRectangle, which is trivial and browser agnostic (so no need
> to make that function's creation conditional).
And may not need the latter either; depends on what this is to be used
for (was envisioning a single canvas with regions delineated by
drawing). As always, YMMV.
Don't forget to buy the book when it comes out. It's got hundreds of
renditions like these, covering virtually every common browser
scripting task. Alternatively, you can download some context-less
blob of BS from the Web and pray it works for at least some of your
visitors for a while; then download another, and another... And
eventually those "best minds in the industry" (quote from a recent
blog post) will solve all of *your* problems perfectly (as if they
know you).
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread
David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-11-10 06:09 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-11-10 16:57 -0200
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-11-10 11:54 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Ant" <not@home.today> - 2011-11-10 19:47 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-11-10 13:07 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Matt McDonald <matt@fortybelow.ca> - 2011-11-10 14:12 -0700
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-11-11 07:26 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Frobernik <nospam@nospam.com> - 2011-11-17 22:43 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 16:08 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Frobernik <nospam@nospam.com> - 2011-12-06 21:18 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-06 14:13 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Gene Wirchenko <genew@ocis.net> - 2011-11-10 13:17 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Evertjan." <exjxw.hannivoort@interxnl.net> - 2011-11-10 22:43 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Richard Cornford" <Richard@litotes.demon.co.uk> - 2011-11-11 00:36 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Gene Wirchenko <genew@ocis.net> - 2011-11-10 19:14 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Richard Cornford" <Richard@litotes.demon.co.uk> - 2011-11-11 09:59 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Gene Wirchenko <genew@ocis.net> - 2011-11-11 11:04 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-11-11 14:39 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-11-12 10:38 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Richard Cornford" <Richard@litotes.demon.co.uk> - 2011-11-12 19:19 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2011-11-12 21:07 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-13 00:42 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Richard Cornford" <Richard@litotes.demon.co.uk> - 2011-11-13 14:33 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2011-11-17 23:14 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Richard Cornford" <Richard@litotes.demon.co.uk> - 2011-11-17 23:55 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-11-13 20:22 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions RobG <rgqld@iinet.net.au> - 2011-11-13 08:29 +1000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-11-13 20:25 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions RobG <rgqld@iinet.net.au> - 2011-11-13 23:05 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Tim Down <timdown@gmail.com> - 2011-11-14 03:41 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions RobG <rgqld@iinet.net.au> - 2011-11-16 16:18 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 16:03 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-11-15 16:52 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 15:54 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2011-11-13 10:38 +0200
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Dr J R Stockton <reply1145@merlyn.demon.co.uk> - 2011-11-11 21:33 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 15:00 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 18:38 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-12-03 19:50 -0200
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-03 15:50 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-03 16:38 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-03 17:14 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-12-04 11:07 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-04 02:45 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-04 13:37 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-04 16:01 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-04 16:28 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-04 18:56 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions John G Harris <john@nospam.demon.co.uk> - 2011-12-05 14:39 +0000
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-05 11:00 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-03 19:17 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-11-13 00:06 -0200
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-13 04:31 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-11-13 13:44 -0200
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-13 18:35 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-11-13 22:00 -0200
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-14 12:40 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-11-14 11:52 -0200
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-14 15:40 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2011-11-17 11:16 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-17 21:06 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2011-11-17 22:13 +0100
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 15:19 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 15:10 -0800
Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 18:04 -0800
csiph-web