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]

Re: Finding all elements on specific coordinates

y-e.perio@em-lyon.com (Yep) wrote in message news:<d2d855ea. 0307211240.6899 d5c3@posting.go ogle.com>...[color=blue]
> Rainer Kugeland <rkugeland@t-online.de> wrote in message news:<bfgdgi$2c s$07$1@news.t-online.com>...
>[color=green]
> > 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.[/color]
>
> 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...[/color]

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


<style type="text/css">
div{position:ab solute;left:10p x;top:10px;widt h:100px;height: 100px;}
</style>

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

<script type="text/javascript">
document.onclic k=function(evt) {
var e=window.event, d=document;
if(e && d.elementFromPo int){
var n=e.srcElement, el=n, elems=[];
do {
elems.push(el);
el.style.zIndex = (el.style.zInde x||0)-1000;
el=d.elementFro mPoint(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]

Re: Finding all elements on specific coordinates

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
[color=blue]
> Actually in IE only you could also give a look at the elementFromPoin t
> method, maybe using something near the following (slightly tested
> only):
>
>
> <style type="text/css">
> div{position:ab solute;left:10p x;top:10px;widt h:100px;height: 100px;}
> </style>
>
> <div id="d1" style="backgrou nd:#f00;z-index:10">Hello </div>
> <div id="d2" style="backgrou nd:#0f0;z-index:20">Hello </div>
> <div id="d3" style="backgrou nd:#00f;z-index:30">Hello </div>
>
> <script type="text/javascript">
> document.onclic k=function(evt) {
> var e=window.event, d=document;
> if(e && d.elementFromPo int){
> var n=e.srcElement, el=n, elems=[];
> do {
> elems.push(el);
> el.style.zIndex = (el.style.zInde x||0)-1000;
> el=d.elementFro mPoint(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>[/color]