[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 475
  • Last Modified:

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.
0
APRESTOUS
Asked:
APRESTOUS
  • 3
  • 2
1 Solution
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now