Is it possible an iframe can overlapp another?


Joined
Apr 20, 2022
Messages
2
Reaction score
0
Hello!
I am stuck for days now to get an <IFRAME> to overlap another. I am afraid i am missing something very simple, like it'll never work by DOM restrictions. Does anyone know?

I have examples working with two <DIV> instead of <IFRAME>, even one <DIV> and an <IFRAME> is working. I just can not get it using only two <IFRAME>.

My problem, in case pure iframe approach does not work I (and of cause some users with their private extensions) would have to modify hundreds of small applications and not only the main page creating the HTML requesting the iframes.

Background: There is an 25 year old application using iframes (in earlier times even framsets) I want to optimize to support handhelds too.
It has a left frame with a vertical <DL> list to navigate and a right frame for text and data. The left iframe can be used to navigate within its iframe and/or to target pages to the right iframe. As the list grew and grew I decided to offer a vertical dynamic CSS dropdown menu in the left iframe. There was not need for overlapping iframes as it was used on large monitors. I can not depend and do not use javascript.
As the CSS dropdown menu got small (and seems to be simpler to handle by handicaped persons) I also want to support handhelds better by offering a horizontal top iframe menu and a text/data in a bottom iframe too. The horizontal dropdown CSS menu in the top iframe should temporarly overlap the bottom iframe. All three methods vertical <DL> menu/CSS menu and horizontal CSS menu have to be available the same time.

First the failing part iframe.html

<!DOCTYPE html>
<html><head><title>failing overlap iframe test</title></head>
<body>
<div style="position:initial;z-index:1;"><iframe src="file:menu.html" title="menu" id="menu" style="border:0 solid #000;height:100px;"></iframe><br>
<div style="position:initial;z-index:0;"><iframe src="file:text.html" title="text" id="text" style="border:0 solid #000;"></iframe></div>
</body></html>

text.html

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>lot of text</title>
</head>
<body>lof of text</body></html>

menu.html

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>menu</title>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body class="hframe">
<div style="margin-bottom:5px;"><ul class="hframe noborder"><li class="dropdown"> <a href="#" class="dropbtn"><span class="bold">checklist</span></a><div class="dropdown-content"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div></li></ul></div>
</body></html>

menu.css

.noborder {border:0 solid #000;}
.dropdown-content {background-color:#eee;box-shadow:0px 3px 6px 0px rgba(0,0,0,3);display:none;margin-left:18px;margin-top:1px;min-width:100px;position:absolute;}
.dropdown-content a:hover {background-color:#ccc;}
.dropdown:hover .dropdown-content {display:block;}
.hframe li {padding:0;}
.hframe li a,.dropbtn {display:inline-block;padding:0px 0px;text-align:right;text-decoration:none;}
.hframe li a:hover {background-color:#ccc;}
.hframe .dropdown-content a {display:block;padding:3px 6px;text-align:left;text-decoration:none;}
li.dropdown {display:block;}
ul {margin:0px;white-space:nowrap;padding:0}

And these are the two working ones, div.html

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>working overlap div test</title>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body class="hframe">
<div style="margin-bottom:5px;"><ul class="hframe"><li class="dropdown"> <a href="#" class="dropbtn"><span class="bold">checklist</span></a><div class="dropdown-content"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div></li></ul></div>
<div>lof of text</div>
</body></html>

div_iframe.html

<!DOCTYPE html>
<html<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>working overlap div/iframe test</title>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body class="hframe">
<div style="margin-bottom:5px;"><ul class="hframe"><li class="dropdown"> <a href="#" class="dropbtn"><span class="bold">checklist</span></a><div class="dropdown-content"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div></li></ul></div>
<div><iframe src="file:text.html" title="text" id="text" class="noborder"></iframe></div>
</body></html>
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
200
Reaction score
25
I really don't know why you're using iframes, but a css of
Code:
#text{
    position: absolute;
    top: 20px;
    left: 50px;
}

Overlapped to two of them.
 
Joined
Apr 20, 2022
Messages
2
Reaction score
0
The dropdown menu in use of the upper iframe has to overlapp the lower iframe.

The reason is historical. Keeping it will allow to still use all code by changing just one function.
Even switching to <DIV> wih a single <IFRAME> requires changing hundreds may be thousands of functions creating pages. It also changes the behavior of the pages as it is possible to use both iframes independently.
 
Ad

Advertisements

Joined
Mar 11, 2022
Messages
181
Reaction score
24
You can't overlap just the menu. It's all or nothing.
The only way i see is to restrict the height of that iframe to the height of the menu. But actually none of that makes any sence.
If you have access to the src files, use that code on your side instead of loading it by iframe. If not, well.........
 

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

Top