web-dev-qa-db-fra.com

<div> couche au-dessus de PDF

Le problème auquel je suis confronté est donc le suivant: J'ai un calque qui sera placé au-dessus d’un pdf sur la page. Le PDF utilise soit l'intégration, soit l'iframe pour l'inclure. Cependant, le style CSS ne s'applique pas à PDF (car c'est un plug-in?). Par conséquent, même si je mets z-index: 1000 pour le, cette couche est toujours derrière le PDF. aucune idée de comment résoudre ce problème?

voici le code:

<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>
csspdfhtmlalways-on-top
20
Murvinlai

Après avoir lu quelques forums ... (ici quelques commentaires)

Le PDF est chargé par le plugin Acrobat Reader. Il fait un peu sa propre chose et n'a rien à voir avec le code HTML ou même le navigateur (à part d'être chargé par le navigateur). Les gens ont le même problème avec le plugin Flash, et il n'y a pas de solution pour ça. Donc, j'imagine qu'il n'y a pas de solution pour cela non plus. Votre meilleur pari est de redéfinir vos menus afin qu'ils ne se déplacent pas dans l'espace occupé par le fichier PDF.

S'il s'agit d'un plugin, vous ne pouvez pas placer d'autres éléments par dessus. Les navigateurs abandonnent généralement l'essentiel de leur capacité à «superposer» des éléments lorsque des plugins sont impliqués.

Il n'y a pas de prise en charge directe de la superposition d'une "div" dans une API, que ce soit dans l'API ou dans Dom. Le plug-in charge un fichier exécutable qui, en termes très simples, perce un trou dans la fenêtre du navigateur. L'utilisation de la technique 'iframe shim' est la solution standard, bien que la transparence puisse être délicate.

Ma SOLUTION: Deux iframes, chacune à l'intérieur d'un div ayant un indice z différent, lorsque vous cliquez sur le div jaune, l'iframe vide s'affiche (devant le pdf iframe), afin que vous puissiez voir le div vert dans le document 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]

25
Fernando Rodríguez

Il existe un plugin jquery, bgiframe , qui facilite la mise en oeuvre de ce correctif.

5
Chris Shaffer

En règle générale, vous pouvez contourner ces problèmes d'index z en plaçant un shim d'iframe directement sous le div. C'est-à-dire qu'il a la même taille et le même emplacement (mais pas de contenu réel). Je ne suis pas sûr à 100% que cela fonctionne pour les PDF, mais je sais que cela résout d'autres problèmes liés à z-index (tels que les zones de sélection sur IE6).

les cales iframe peuvent être pénibles si vous placez la div de manière dynamique, car vous devez déplacer la cale iframe avec elle.

1
Daniel Lew

Je viens de trouver une solution à cela. Utilisez l'afficheur de pdf de Google dans l'iframe pour afficher votre pdf sur la page, puis cela fonctionne comme n'importe quel autre div.

exemple:

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

1
Blake

Si vous testez IE, le problème peut être identique à celui rencontré avec ComboBox. Essayez d'insérer iframe dans div.

0
Migol

Une solution pour certaines circonstances consiste à envelopper l'iframe avec un div et à utiliser l'attribut de style 'clip' sur le div ou 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>
0
Brett Caswell