Help with menu overlay IFrame trick not working

R

rayone

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,819
Latest member
masterdaster

Latest Threads

Top