Div within iframe

Hello Experts,

I have a page with

<div name="f1" id="f1" style="display:block">
<iframe src="src1" id="topFrame" width="100%" height="200" frameborder="0" >
</iframe>
</div>
<br>
<div name="f2" id="f2" style="display:block">
<iframe src="src2" id="mainFrame" width="100%" height="1000" frameborder="0">
</iframe>
</div>

Now I want to show some div from the top frame so that it will be visible on the page.
But it is seen only partially (inside of iframe)
How can I overlay it?
I tried z-index. But it did not help.
APRESTOUSAsked:
Who is Participating?
 
IronhoofsCommented:
You can break out of your current iframe using javascript to change the HTML of the main page

Example code for the main page:

<html>
<div name="f1" id="f1" style="display:block">
<iframe src="sub.html" id="topFrame" width="100%" height="200" frameborder="0" >
</iframe>
</div>
<div id="f3"></div>
</html>

Example code for the iframe (save as sub.html):

<html>
<body>

<script language="javascript">
var oWin = window.parent;
var oDiv = null;

if (oWin) {
      oDiv = oWin.document.getElementById('f3');
      if (oDiv) {
            document.write("DIV found");
            oDiv.innerHTML = "Hello Div!";
      }
      else {
            document.write("DIV not found");
      }
}

</script>

</body>
</html>



0
 
Jagadishwor DulalBraces MediaCommented:
Why not increase the height of your f1 div;
0
 
APRESTOUSAuthor Commented:
It does not have heigth.
Visually remains the div inside of iframe.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
APRESTOUSAuthor Commented:
I don't want to break out of iframe.
I just want to get one div overlayed.

With jquery libraries I can do it.
But it seems to be possible with css
0
 
IronhoofsCommented:
jquery is a javascript library, so that would be essentially the same as my proposed solution. I failed to understand you where looking for a html/css only solution.
0
 
APRESTOUSAuthor Commented:
Sorry I did not look into your code.
"I have read break out of iframe" and I though you suggest script that literrally break out of iframe.
Some sites have it to avoid that their content is shown by third party.

I'd prefer css solution a little "academically" because intuitively I expect that it exists.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.