February 25th, 2004, 11:43 AM
Find id of elements under a css positioned div
I've come up on the old <select> elements showing through <div>s that are made visible on top of them.
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.
February 26th, 2004, 04:22 AM
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.
February 26th, 2004, 05:10 AM
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...
February 26th, 2004, 05:18 AM
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?
February 26th, 2004, 05:36 AM
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 ?
February 26th, 2004, 11:34 AM
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.
var xiframe = document.createElement("iframe");
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";
// hide the div and move it and delete the iframe
hide_menu(xdiv); // function to hide parent layer