Help with menu overlay IFrame trick not working

Discussion in 'ASP .Net Web Controls' started by rayone@gmail.com, Mar 19, 2007.

  1. Guest

    Greetings.

    I've been racking my brain for hours on this and I haven't gotten
    anywhere.

    I've got a very simple menu with a simple display property toggle
    actuator.

    Structure:
    <div display/none>
    <div>
    <a>link
    </div>
    <div>
    <a>link
    </div>
    </div>

    As y'all know select items appear over the menu.
    So I wrote a little function that would insert an iframe before each
    link div. It works fine, but I can never get to the link. It's like
    the iframe has a higher z-index.

    I've set the div z-index to be higher and still I can never get to the
    link, I've placed the link on the div with an onclick... but still
    nothing the iframe ALWAY appears over the <div>/<span>/<a>/<p>/. If I
    make the iframe slightly smaller than the div as soon as I mouseover
    the div it all works, but then the <select> shows through on some
    pages.

    I'm stuck.

    Below is my js function. When ever I alert the z-index the div is
    always higher than the iframe. The div's have no style.

    ANY advice would be really appreciated.



    /******************************start
    js*************************************/
    var tbl = document.getElementById('csqmo');
    var rows = tbl.getElementsByTagName('DIV');
    for (var row=0; row<rows.length;row++){
    if(rows[row].name == 'quickSearchItem'){
    rows[row].id = 'csqmeo'+ row;
    rows[row].style.zIndex = 1000 + (row*5);
    qs_insertIframe(rows[row].id);
    }
    }

    function qs_insertIframe(id){
    var csqmo = document.getElementById(id)
    csqmo.Shim = document.createElement("IFRAME");
    csqmo.Shim.src="javascript:false;";
    csqmo.parentNode.insertBefore(csqmo.Shim, csqmo);
    if (csqmo.style.zIndex > 0){
    csqmo.Shim.style.zIndex = csqmo.style.zIndex - 1;
    }
    //alert(csqmo.style.zIndex)
    //alert(csqmo.Shim.style.zIndex)
    csqmo.Shim.style.position = "absolute";
    csqmo.Shim.style.width="180px";
    csqmo.Shim.style.height="10px";
    csqmo.Shim.style.border = "0px";
    csqmo.Shim.frameBorder = 0;
    csqmo.Shim.style.filter =
    "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
    //csqmo.Shim.disabled = "disabled";
    //csqmo.Shim.innerHTML = '<p>Crap</p>';
    csqmo.Shim.style.top = csqmo.style.top;
    csqmo.Shim.style.left = csqmo.style.left;
    csqmo.Shim.style.width = csqmo.offsetWidth + "px";
    csqmo.Shim.style.height = csqmo.offsetHeight + "px";
    //if (csqmo.Shim.parentNode){
    // csqmo.Shim.parentNode.removeChild(csqmo.Shim);
    //}
    }

    /******************************end
    js*************************************/

    It all works fine, expect the iframe always renders above the div.

    Thanks.
     
    , Mar 19, 2007
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Daedalous
    Replies:
    3
    Views:
    712
    Daedalous
    Jan 16, 2004
  2. Yuk Cheng
    Replies:
    2
    Views:
    134
    Dan Webb
    Jul 19, 2004
  3. plex4r
    Replies:
    0
    Views:
    114
    plex4r
    Mar 9, 2006
  4. Replies:
    11
    Views:
    211
    Kevin Darling
    Oct 4, 2006
  5. Replies:
    6
    Views:
    122
Loading...

Share This Page