<div> layer on top of PDF

Asked 27/2, 2009 at 1:7 Answered 29/10, 2012 at 18:7

So, the problem I face is like this: I have a layer, which it will be placed on top of a pdf on the page. The PDF is either using to embed, or iframe to include it. However, CSS style doesn't apply on PDF (because it is a plug-in? ). Therefore, even I put z-index:1000 for the , that layer still goes behind the PDF. any idea how to fix that?

here is th 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>

Kissiah answered 27/2, 2009 at 1:7 Comment(1)

BTW, the "always-on-top" tag is possibly my favorite so far. – Wooden 27/2, 2009 at 1:37

After reading some forums... (here some comments)

The PDF is loaded by the Acrobat Reader plugin. It kind of does it's own thing and has nothing to do with any of the HTML or even the browser for that matter (apart from being loaded by the browser). People have the same problem with the Flash plugin, and there's no solution for that. So I would imagine there's no solution for this either. Your best bet is to redesign your menus so they don't move into the space occupied by the pdf.

If it is a plugin, then you cannot reliably place other elements over the top of it. Browsers usually let go of most of their ability to 'layer' elements when plugins are involved.

The there is no direct support for overlaying 'z-indexing' a div either in the Api or Dom. The plug-in loads an executable file that, in very simple terms, punches a hole in the browser window. Using the 'iframe shim' technique is the standard workaround although transparency can be tricky.

My SOLUTION: Two iframes, each one inside a div with different z-index, when you click the yellow div, the empty iframe is displayed (in front of the pdf iframe), so you can see the green div inside the pdf document.

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

Swamy answered 2/4, 2009 at 22:33 Comment(4)

good idea. I also face another challenge where there are div layers that can be drag & move around the window.. So, when it is moved above the pdf, it will be partially "hidden" by the pdf. :) I think that's the tougher challenge which I haven't solved it nicely yet. – Kissiah 5/4, 2009 at 2:47

"People have the same problem with the Flash plugin, and there's no solution for that." This statement is incorrect. You can add an attribute 'wmode=opaque' to the embed tag for flash content and the flash can be shown behind the html. – Aleedis 28/3, 2011 at 6:10

While this would be a great answer, the div and iframe are not transparent, and as soon one makes them transparent, it is no longer displayed above the pdf – Pugliese 14/8, 2012 at 18:7

@Aleedis Your statement is incorrect too on IE11. Setting wmode=opaque doesn't make the object tag be displayed under a div` – Folliculin 31/10, 2017 at 9:48

There is a jquery plugin, bgiframe, that makes implementing this fix fairly simple.

Aeschines answered 27/2, 2009 at 1:24 Comment(0)

Generally you can get around these z-index issues by placing an iframe shim directly under the div. That is, it has the same size and location (but no actual content). I'm not 100% sure this works for PDFs, but I know this fixes some other z-index issues (such as select boxes on IE6).

iframe shims can be a pain if you're placing the div dynamically, since you have to move the iframe shim with it.

Wooden answered 27/2, 2009 at 1:21 Comment(1)

then place the iframe shim dynamically with an appendTo to the parent of the div element. (I know this was posted in 2009 and you've probably done this a whole lot, but for someone reading this, might aswell just leave a small comment here) – Hoopla 12/4, 2013 at 8:45

I just found a solution to this. Use the google pdf viewer in the iframe to display your pdf on the page then it works like any other div.

example:

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

Zenas answered 20/4, 2011 at 20:32 Comment(1)

That would be a great solution, but the fact is that IE8 does not allow it to be displayed in a frame, giving a message "This content cannot be displayed in a frame", and similar FireFox does not display it, only chrome but chrome does anyway not suffer from the problem here and you can write directly on a PDF – Pugliese 14/8, 2012 at 18:5

If it's IE your testing, then it could be the same issue as with ComboBox. Try inserting iframe into div.

Yarkand answered 27/2, 2009 at 1:17 Comment(0)

A solution for some circumstances is to wrap the iframe with a div and use the style attribute 'clip' on the div, or 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>

Pons answered 29/10, 2012 at 18:7 Comment(0)

Recommended topics

Hot tags