Finding all elements on specific coordinates

[Rainer Kugeland]

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

[Yep]

y-*******@em-lyon.com (Yep) wrote in message news:<d2**************************@posting.google. com>...

Rainer Kugeland <rk*******@t-online.de> wrote in message news:<bf*************@news.t-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:100 px;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]

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:100 px;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>