#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    39
    Rep Power
    11

    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.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    2
    Rep Power
    0
    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.

    ?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    39
    Rep Power
    11
    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.
    Attached Images
  6. #4
  7. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2038
    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?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    39
    Rep Power
    11
    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.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    39
    Rep Power
    11

    Thumbs up


    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
    }

IMN logo majestic logo threadwatch logo seochat tools logo