CSS hover menu appearing behind pdf iframe
When I ran into this issue, I used jQuery to detach the iframe before showing the overlay (and in my case a modal too). Once the user was done with the modal/overlay, I reattached the iframe to the DOM. _viewerFrame and _viewerDiv are just some css selectors of course. In my case there was a wrapping div tag around the iframe element that made detaching and attaching easy.
// detach iframe
_frame = $(_viewerFrame).detach();
function reattach(frame) {
// append it back to the div it was in (reattaching essentially)
$(_viewerDiv).append(frame);
setButtonStates();
setViewerState();
}
function onOk() {
... // other code
reattach(_frame);
}
function onCancel() {
... // other code
reattach(_frame);
}
// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...
Hope that helps...
Main menu CSS is behind pdf inside iframe in IE
I've noticed this problem with Internet Explorer in the past (in my case, an iframe with a Flash element inside it.)
My workaround is to put an empty iframe on the page, behind the element that you actually want to show. This will "cover up" the other iframe, but allow your element to be visible.
In your case, putting the following code inside each LI tag seems to work:
<iframe style="background-color: transparent; left: 0; top: 0; width: 100%; height: 100%; position: absolute; border-width: 0; z-index: -1"></iframe>
Of course, those styles should probably just be in a class, and you'd give that class to the iframe.
drop down menu going behind iframe containing pdf
drop-downs are major pains in IE- esp in IE6 and with flash. You might need to absolutely place the elements on the page. The ones you specify first will appear above the others.
Dropdown menu hides behind iframe
The dropdown is a child of the #banner with class="banner" that has position
sticky. I added z-index: 1; to that parent element and it's working fine.
Don't forget to close the iframe tag...
// This script is for the Issues dropdown
var dropdown = function() {
document.getElementById("issuesDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.bannerDropdown')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}body {
background-color: #002e63;
}
.article {
width: 100;
height: 100%;
position: fixed;
z-index: 0;
}
.banner {
width: 100%;
position: -webkit-sticky;
position: sticky;
top: 0;
display: block;
background: #003e63;
cursor: pointer;
z-index: 1;
}
.bannerText {
height: inherit;
width: 33.34%;
position: -webkit-sticky;
position: sticky;
top: 0;
display: block;
background: #003e63;
border-bottom: .2em solid #001463;
font-family: arial;
font-size: 18pt;
text-align: center;
vertical-align: middle;
color: #fff;
cursor: pointer;
line-height: 42px;
}
.bannerText:hover {
color: #808080;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: .5em;
font-family: arial;
font-size: 14pt;
text-decoration: none;
display: block;
border-bottom: .2em solid #001463;
background: #003e63;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #1958a0
}
.bannerDropdown {
background-color: #003e63;
color: #fff;
padding: 0;
font-size: 18pt;
border: none;
cursor: pointer;
z-index: 1;
}
.bannerDropdown:hover,
.bannerDropdown:focus {
color: #808080;
z-index: 1;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}<link rel="stylesheet" href="style.css">
<div id='banner' class='banner'>
<img id='bannerimage' class='banner' src='banner1920x130.png' alt='The Spartan Spotlight' onclick="location.href='main.html'">
<div id='issues' class='bannerText' style='float: left;' class='dropdown'>
<div onclick="dropdown()" class="bannerDropdown">Issues</div>
<div id="issuesDropdown" class="dropdown-content">
<a href="#">Issue 3 - Coming soon...</a>
<a href="issue-2.html">Issue 2 - December 2017</a>
<a href="issue-1.html">Issue 1 - November 2017</a>
<a href="#">Older Issues</a>
</div>
</div>
<div id='contact-us' class='bannerText' style='float: right;' onclick="location.href='style.css'">Contact Us</div>
<div id='the-team' class='bannerText' style='margin: 0 33.3%;' onclick="location.href='style.css'">The Team</div>
</div>
<script>
</script>
<iframe class='article' src="issue-1.pdf#toolbar=0" width="100%" height="100%" type='application/pdf' frameborder=0></iframe>Nav menu sitting behind iFrame
Have you tried the empty iframe technique ?
It was not working before because you need to add an empty iframe inside each submenu ul tag.
HTML
<div id="outer">
<div id="inner">
<div id="navMenu">
<ul id="menu">
<li>
<a href="#">Menu 1</a>
</li>
<li><a href="#">Menu 2</a>
<ul class="sub-menu">
<iframe class="cover" src="about:blank"></iframe>
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li><a href="#">Menu 3</a>
</li>
<li><a href="#">Menu 4</a>
<ul class="sub-menu">
<iframe class="cover" src="about:blank"></iframe>
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 5</a>
</li>
</ul>
</div>
CSS
#outer {
position: relative;
left:0;
top: 0;
width: 100%;
z-index: 3;
}
#inner{
background: red;
}
.cover {
position: absolute;
border: none;
top: 0;
left: 0;
width: 100%;
z-index: -2;
height:100%;
}
#pdf {
position: relative;
top:0;
z-index: 1;
}
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
z-index:3;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
z-index:3;
}
ul#menu li:hover ul.sub-menu {
display:block;
position:absolute;
z-index:3;
}
EXAMPLE
http://jsfiddle.net/gDuCE/701/
Related Topics
Why Doesn't This CSS Transition Work on Svg Inside an Anchor
Margin-Top Percentage Does Not Change When Window Height Decreases
Nesting Inside CSS :Not() Selectors
What Is That Thing Between CSS "Selectors" Called
How to Identify and Eliminate Unused CSS Styles from My Bloated Stylesheet
How to Load CSS Rules Dynamically in Webkit (Safari/Chrome)
How to Make Ie Support Min-Width/Max-Width CSS Properties
Datagrid/Celltable Styling Frustration -- Overriding Row Styles
Apply Style to First Element in a Row of Similar Elements
:First-Letter Selector Doesn't Work for Link
Create CSS for Internet Explorer Only
Unicode Character for "X" Cancel/Close
How to Make My Font Bold Using CSS
Fluid Container in Bootstrap 3
How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width