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

    Join Date
    Jul 2003
    Posts
    39
    Rep Power
    15

    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
    15
    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,166
    Rep Power
    2042
    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?
    Support requests via PM will be ignored!
    Read These: The General Rules Thread | The General FAQ Thread | NEW USERS - How to post a question

  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    39
    Rep Power
    15
    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
    15

    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