Finding all elements on specific coordinates

Discussion in 'Javascript' started by Rainer Kugeland, Jul 21, 2003.

  1. Two problems regarding coordinates:

    a) When I click in the screen then I can easyly find the element on the
    current corrdinates. But is there a way to find the elements which are
    behind the fist on the z-axis?

    b) Is there a fast way to find all elements which are within specific
    coordinates like 100,100 and 200,200? Currently I walk through the whole
    tree and calculate the absolute positions of each elements. It works but
    it's really slow.

    RK
    Rainer Kugeland, Jul 21, 2003
    #1
    1. Advertising

  2. Rainer Kugeland

    Yep Guest

    (Yep) wrote in message news:<>...
    > Rainer Kugeland <> wrote in message news:<bfgdgi$2cs$07$-online.com>...
    >
    > > b) Is there a fast way to find all elements which are within specific
    > > coordinates like 100,100 and 200,200? Currently I walk through the whole
    > > tree and calculate the absolute positions of each elements. It works but
    > > it's really slow.

    >
    > Not really surprising, if you want to increase speed (apart from
    > regular code optimization such as reference keeping) I'm afraid you'll
    > have to change the structure, be it HTML-side with the DOM tree
    > (nesting HTML elements, therefore taking advantage of events bubbling)
    > or javascript-side with some kind of naming conventions (IDs) and
    > maybe related navigation rules. It all depends on _what_ you're trying
    > to achieve...


    Actually in IE only you could also give a look at the elementFromPoint
    method, maybe using something near the following (slightly tested
    only):


    <style type="text/css">
    div{position:absolute;left:10px;top:10px;width:100px;height:100px;}
    </style>

    <div id="d1" style="background:#f00;z-index:10">Hello</div>
    <div id="d2" style="background:#0f0;z-index:20">Hello</div>
    <div id="d3" style="background:#00f;z-index:30">Hello</div>

    <script type="text/javascript">
    document.onclick=function(evt){
    var e=window.event, d=document;
    if(e && d.elementFromPoint){
    var n=e.srcElement, el=n, elems=[];
    do {
    elems.push(el);
    el.style.zIndex = (el.style.zIndex||0)-1000;
    el=d.elementFromPoint(e.x, e.y);
    } while(el!=n);
    elems.toString=function(){
    var buf=[];
    for(var ii=0; ii<this.length; ii++)
    buf.push(this[ii].id);
    return buf.join(", ");
    }
    alert(elems);
    for(var ii=0; ii<elems.length; ii++)
    elems[ii].style.zIndex = +elems[ii].style.zIndex + 1000;
    }
    }
    </script>
    Yep, Jul 22, 2003
    #2
    1. Advertising

  3. Yep,

    thanks for the example. I'll play around with it a bit.
    I also think about skipping leafes when the parent leaf is already out
    of bounds. But I'm still unsure because in this case I'll loose all
    layers which are positioned absolutely...

    RK

    > Actually in IE only you could also give a look at the elementFromPoint
    > method, maybe using something near the following (slightly tested
    > only):
    >
    >
    > <style type="text/css">
    > div{position:absolute;left:10px;top:10px;width:100px;height:100px;}
    > </style>
    >
    > <div id="d1" style="background:#f00;z-index:10">Hello</div>
    > <div id="d2" style="background:#0f0;z-index:20">Hello</div>
    > <div id="d3" style="background:#00f;z-index:30">Hello</div>
    >
    > <script type="text/javascript">
    > document.onclick=function(evt){
    > var e=window.event, d=document;
    > if(e && d.elementFromPoint){
    > var n=e.srcElement, el=n, elems=[];
    > do {
    > elems.push(el);
    > el.style.zIndex = (el.style.zIndex||0)-1000;
    > el=d.elementFromPoint(e.x, e.y);
    > } while(el!=n);
    > elems.toString=function(){
    > var buf=[];
    > for(var ii=0; ii<this.length; ii++)
    > buf.push(this[ii].id);
    > return buf.join(", ");
    > }
    > alert(elems);
    > for(var ii=0; ii<elems.length; ii++)
    > elems[ii].style.zIndex = +elems[ii].style.zIndex + 1000;
    > }
    > }
    > </script>
    Rainer Kugeland, Jul 23, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Suresh  Kumar
    Replies:
    0
    Views:
    589
    Suresh Kumar
    Jul 3, 2003
  2. Suresh  Kumar
    Replies:
    0
    Views:
    515
    Suresh Kumar
    Jul 4, 2003
  3. Replies:
    2
    Views:
    366
  4. mazdotnet
    Replies:
    2
    Views:
    396
    Alexey Smirnov
    Oct 2, 2009
  5. Pallavi

    Finding mouse coordinates

    Pallavi, Dec 1, 2003, in forum: Javascript
    Replies:
    2
    Views:
    154
    Richard Cornford
    Dec 2, 2003
Loading...

Share This Page