css - color - div position
<div> capa en la parte superior del PDF (6)
Entonces, el problema que enfrento es así: tengo una capa, que se colocará encima de un pdf en la página. El PDF está usando para incrustar o iframe para incluirlo. Sin embargo, el estilo CSS no se aplica en PDF (porque es un complemento). Por lo tanto, incluso puse z-index: 1000 para el, esa capa todavía va detrás del PDF. ¿Alguna idea de como arreglarlo?
aquí está el código:
<style type="text/css">
<!--#apDiv1 {
position:absolute;
left:543px;
top:16px;
width:206px;
height:223px;
z-index:1000;
background-color:#999999;
}
</style>
<body>
<!-- embed the pdf -->
<object data="test.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
alt : <a href="test.pdf">test.pdf</a>
</object>
<!-- layer -->
<div id="apDiv1" >Whatever text or object here.</div>
</body>
Acabo de encontrar una solución a esto. Utilice el visor de google pdf en el iframe para mostrar su pdf en la página, luego funciona como cualquier otro div.
ejemplo:
<iframe id = "ifr" src = "http://docs.google.com/gview?url=http://www.mysite.com/test.pdf&embedded=true" style = "width: 718px; height: 700px ; " frameborder = "0">
Después de leer algunos foros ... (aquí algunos comentarios)
El PDF se carga con el complemento Acrobat Reader. De alguna manera lo hace y no tiene nada que ver con el código HTML o incluso con el navegador (aparte de que el navegador lo carga). La gente tiene el mismo problema con el complemento de Flash, y no hay solución para eso. Entonces me imagino que tampoco hay solución para esto. Su mejor opción es rediseñar sus menús para que no se muevan al espacio ocupado por el pdf.
Si se trata de un complemento, entonces no puede colocar de manera confiable otros elementos encima de él. Los navegadores suelen soltar la mayor parte de su capacidad de elementos de "capa" cuando se trata de complementos.
No hay soporte directo para superponer ''divi-z'' a div en el Api o Dom. El complemento carga un archivo ejecutable que, en términos muy simples, perfora un agujero en la ventana del navegador. Usar la técnica ''iframe shim'' es la solución estándar aunque la transparencia puede ser complicada.
Mi SOLUCIÓN: dos iframes, cada uno dentro de un div con diferente índice z, al hacer clic en el div amarillo, se muestra el iframe vacío (delante del iframe del pdf), para que pueda ver el div verde dentro del documento pdf.
<html>
<head>
<script type="text/javascript">
function showHideElement(element){
var elem = document.getElementById(element);
if (elem.style.display=="none"){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}
</script>
</head>
<body>
<div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement(''Iframe1'');">click me</div>
<div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>
<div style="position:absolute;z-index:20;margin-left:200px;">
<iframe visible="true" id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
Fernando Rodríguez [email protected]
En general, puede sortear estos problemas del índice z colocando una cuña iframe directamente debajo del div. Es decir, tiene el mismo tamaño y ubicación (pero no contenido real). No estoy 100% seguro de que esto funcione para archivos PDF, pero sé que esto soluciona algunos otros problemas del índice Z (como cuadros de selección en IE6).
Las calzas iframe pueden ser dolorosas si coloca el div dinámicamente, ya que tiene que mover el calce del iframe con él.
Existe un complemento jquery, bgiframe , que hace que la implementación de esta corrección sea bastante simple.
Si es IE su prueba, entonces podría ser el mismo problema que con ComboBox. Intenta insertar iframe en div.
Una solución para algunas circunstancias es envolver el iframe con un div y usar el atributo de estilo ''clip'' en el div, o iframe parent.
<!DOCTYPE html>
<html>
<head>
<title>Test Page - IFramed PDF Document Clipping</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type=''text/javascript''></script>
<style type=''text/css''>
body {padding:0em;margin:0em;font-size:16px;position:relative;}
body * {line-height:1em;}
#TOPNAV {list-style:none;display:block;}
#TOPNAV li {display:inline;}
#IFRAMEWRAPPER
{
display:block;margin:0em;padding:0em;
position:fixed;width:auto;left:0.125em;right:0.125em;top:4.125em;bottom:0.125em;
}
#docFrame {width:100%;height:100%;position:relative;margin:0em;padding:0em;}
input.ACTIVE {background-color:Gray;outline:0.125em solid silver;}
.clearfix {zoom:1;}
</style>
<script type=''text/javascript''>
$(document).ready(function () {
$(''#TOPNAV input'').click(function () {
$("#TOPNAV input.ACTIVE").toggleClass(''ACTIVE'');
$(this).toggleClass(''ACTIVE'');
$("#IFRAMEWRAPPER").css("padding", "1em");
$("#IFRAMEWRAPPER").css("padding", "0em");
$("#IFRAMEWRAPPER iframe").toggleClass("clearfix");
$("#IFRAMEWRAPPER").toggleClass("clearfix");
$("#IFRAMEWRAPPER").hide();
$("#IFRAMEWRAPPER").slideDown(2);
});
$(''#btnCLICK1'').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, auto, 5em)");
});
$(''#btnCLICK2'').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, 5em, auto, auto)");
});
$(''#btnCLICK3'').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(5em, auto, auto, auto)");
});
$(''#btnCLICK4'').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, 5em, auto)");
});
});
</script>
</head>
<body>
<div class=''TOPNAVWRAPPER''>
<ul id=''TOPNAV''>
<li><input type=''button'' id=''btnCLICK1'' value=''RIGHT'' /></li>
<li><input type=''button'' id=''btnCLICK2'' value=''LEFT'' /></li>
<li><input type=''button'' id=''btnCLICK3'' value=''BOTTOM'' /></li>
<li><input type=''button'' id=''btnCLICK4'' value=''TOP'' /></li>
</ul>
</div>
<div id="IFRAMEWRAPPER">
<iframe id=''docFrame'' name=''TargetFrame'' src="YOUR-PDF-DOCUMENT.pdf" onloadeddata='''' seamless=''seamless'' ></iframe>
</div>
</body>
</html>