PDA

Click to See Complete Forum and Search --> : Load Document in layer

entropi
10-09-2003, 02:04 PM
How can I get the layer to go over the iframe?

<iframe id="datamain" src="/mypage.html" width=100% height=100% marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no>
<div id="Layer1" style="position:absolute; width:100%; height:100%; background-color:#FF00FF; layer-background-color:#FF00FF; border: 1px none #000000; visibility:inherit"></div>
</iframe>

Do I need CSS to make then layer do what I want and how do I do that (I am not that experienced with CSS)...

thanks
lillu
10-19-2003, 03:20 PM
Here's how to do it.

Put your existing iframe in a div too to apply style.
Create another div with the style attributes you want to apply to the layer that will go over the iframe (ie. the other div tag)

The functions are very straightforward though a bit wordy and that is to make the example compatible with different browsers.

Lastly, don't worry about CSS - you are already doing well with it, see the style attributes for Layer1.

<HTML>
<HEAD>
<SCRIPT>
function show () {
if (document.all) {
document.all.iframeDiv.style.clip = 'rect(auto auto auto auto)';
document.all.Layer1.style.visibility = 'visible';
}
else if (document.getElementById) {
document.getElementById('iframeDiv').style.clip = 'rect(auto auto auto auto)';
document.getElementById('Layer1').style.visibility = 'visible';
}
}
function hide () {
if (document.all) {
document.all.iframeDiv.style.clip = 'rect(auto auto auto auto)';
document.all.Layer1.style.visibility = 'hidden';
}
else if (document.getElementById) {
document.getElementById('iframeDiv').style.clip = 'rect(auto auto auto auto)';
document.getElementById('Layer1').style.visibility = 'hidden';
}
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="" ONMOUSEOVER="show()"ONMOUSEOUT="hide()">show / hide layer</A>
<DIV ID="iframeDiv" STYLE="position:absolute;left:200px;top:200px;">
<IFRAME NAME="datamain" SRC="page.htm" WIDTH="200" HEIGHT="200"></IFRAME>
</DIV>
<DIV ID="Layer1" STYLE="position:absolute;visibility:hidden;left:200px;top:200px;width:200px;height:200px;background-color:#FF00FF;">
</DIV>
</BODY>
</HTML>
entropi
10-21-2003, 04:23 PM
That worked pretty well, but I am not really trying to hide the layers, nor have the user know that the layers are there. I am trying to create a window with an opaque layer (or a layer with a transparent gif image or something) and put it over the iFrame, thus rendering the iFrame technically viewable, but without the user being able to click on any of the links that might be represented on that page. Or, instead of putting an opaque layer over the iFrame, setting the iFrame inside of a layer in which I can specify certain controls for whatever I am displaying in the iFrame (such as disable links). So far I have found no way to be able to do this except for the idea of putting an "invisible" layer OVER the iFrame. Both must be visible, but only one will actually be SEEN. I dont think this can even be done! :)
lillu
10-30-2003, 02:19 AM
Oh sorry, didn't get it.

Try the filter (IE only) or transparent (for all browsers I think) CSS attributes.

Eg.

<style>
body { background: transparent }
</style>

<p style="filter:alpha(opacity=50);width:100%;">this is text</p>

I should work with layers.
entropi
10-30-2003, 03:09 PM
Now at least I can get the layer in front of the iframe. I am not sure why, but it seems to be the paragraph statement that does something weird to it. The transparent style didnt work for this though... here's what I have so far:

<html>
<head>
<title>Some Darn Title</title>
</head>
<body>

<p style="filter:alpha(opacity=100);width:100%;">

<iframe id="datamain" src="http://www.thiswebsite.htm" width=100% height=100% scrolling=yes>
</iframe>

<div id="Layer1" style="position:absolute; width:100%; height:100%; background-color:#000fff; border: 1px none #000000">
</div>

</body>
</html>

I made the background color blue in the layer so it would be easier to see where it was. Ive tried adding the p style attributes to the div layer, I tried using the
<style>
body { background: transparent }
</style>
and that didnt change anything. If I take the p style out, no matter what, the layer will go behind the iframe. Ive tried putting the iframe WITHIN the layer, and that dosent work either.

Youre closer than I was though. Am I doing this wrong?