Find id of elements under a css positioned div

Hi

I've come up on the old <select> elements showing through <div>s that are made visible on top of them.

What I want to do is find out the id's of the select elements under my <div> so that i can hide them using CSS / Javascript.

The basic layout of my page is a grid of <select> elements, each one of these would have a hidden <div> layer associated with it containing extra information etc.

By the side of each of the <select> elements is a little image / button that the user will click and the layer with the extra stuff in is made visible. The layer will overlap a number of <select> elements (not the parent <select> element).

Each <div> pops up in a different position (calculated dynamically as an x,y offset from the parent) can I find the Ids of the elements it overlaps?

Hope this is clear, and thanks in advance.

flipflops.

Hello - no tangible help, but some thoughts...

Perhaps you could calculate all of the positions of a the select elements when the page loads and use that as a basis to work out if your div / layer is over any of them...?

What about scripts for making moveable layers ? - One of them might have some related bit of script that you could adapt.

?

Hi

I've attached a screenshot to make it a bit clearer.

I thought about calculating the postions of all the <select> elements onload() but I don't really want to go down this route - its a kind of last resort thing I think.

1. Its a lot of calculation, most of which will probbaly be redundant i.e. 95% of the hidden <div>s wil never be made visible, so the <select> elements underneath will never need to be hidden.

2. If the page was resized then I'd have to recalculate all of these values anyway.

...So I was looking for an on demand type thing... IF a <div> is shown, just to detect what elements are underneath and alter thier properties accordingly (hide them).

Nothing is ever easy is it?

As for moveable layers, I spenta long time yesterday looking on google for solutions before I posted here and wasn't able to find anything so far...

Thanks

flipflops.

Unfortunately, what you're trying to do can't work... <select>'s are part of your OS, not the browser, so they'll ALWAYS be on top of everything...

Could it work with popup windows?

Thanks for replying.

It can work, because I'm not messing with the z-index etc. - what I want to do is 'physically' remove the <select> elements from the page using either style.visibility = hidden or display = none;

And thats not too hard. The bit thats got me stumped is whether or not I can find the ids of the <select> elements underneath - because unless I know which ones they are I can't hide them !

What do you think ?

flipflops.

I did it but I had to cheat

I've ended up doing it with some nested <div>s one of which contains an <iframe> I've then stuck another <div> over the <iframe> with z-Index and put the content I want in that.

Its not ideal because i've had to change from XHTML strict to XHTML transitional but at the end of the day i suppose its just one of those things.

function show_div(xdiv)
{

var xiframe = document.createElement("iframe");
xiframe.setAttribute("id", "xifone");
xiframe.setAttribute("frameborder", "0");
//xiframe.setAttribute("class", "xif");
document.getElementById(xdiv).appendChild(xiframe);

show_menu(xdiv); // function to show and position parent layer
xiframe.style.width = "100%";
xiframe.style.zIndex = 2;

xiframe.style.height = "100%";
xiframe.style.postion = "absolute";
}

function hide_div(xdiv)
{
// hide the div and move it and delete the iframe
document.getElementById(xdiv).removeChild(document.getElementById("xifone"));
hide_menu(xdiv); // function to hide parent layer
}