I have a PDF file that appears in an IFRAME.
I use the ddsmoothmenu but the dropdowns will not overlay the PDF.
I read I could use the bgiframe plugin to solve the problem, but so
far have been unsuccessful…the PDF always appears on top.
Does anyone have any experience using bgiframe to layer on top of a
PDF in an IFRAME?
Here is my demo code based on the sample files:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html debug="true">
<head>
<meta http-equiv="Content-type" content="text/
html; charset=utf-8">
<title>jQuery bgiframe Visual Test</title>
<!-- load latest build of jquery.js -->
<script type="text/javascript" src="../../../
jquery/dist/jquery.js"></script>
<!-- load dimensions.js (this is what we're
testing! -->
<script type="text/javascript" src="../
jquery.bgiframe.js"></script>
<!-- load firebug lite
<script type="text/javascript" src="http://
brandon.jquery.com/firebuglite/firebug.js"></script>-->
<link rel="Stylesheet" media="screen"
href="../../../jquery/test/data/testsuite.css" />
<script type="text/javascript"
charset="utf-8">
$(function() {
$('#box2').bgiframe
({top:20;left:20;height:400;width:400});
});
</script>
<style type="text/css" media="screen">
#wrapper { position: relative;
width: 100%; font: 12px Arial; }
.box { position:
absolute; z-index: 1; left:0; margin: 5px;
border:
5px solid #666; padding: 5px; width: 450px;
height:
300px; color: #000; background-color: #999; }
</style>
</head>
<body>
<h2 id="userAgent"></h2>
<div id="box1"
class="box">nothing</div>
<div id="box2" style="position:absolute;zindex:
0;top:0;left:0">
<iframe
src="test.pdf"></iframe>
</div>
</body>
</html>
