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>
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>
