div on top of iframe work-around not working in Chrome

Question

I have a menu div that I'd like to display on top of a pdf in an iframe. The work-around I have found is to place an empty iframe behind the div. Works fine in Firefox/IE. Chrome still has the menu div behind the iframe. Oh, and I have the Adobe PDF plugin activated. Anyone have experience with this?

See the Fiddle

Div is on top of frame on OSX Chrome 16.0.912.77 – Yuji 'Tomita' Tomita Jan 31 '12 at 22:29 — Yuji 'Tomita' Tomita, Jan 31 '12 at 22:29
Yeah, I'm on Windows 7. Thanks though. – Mark Smithhart Jan 31 '12 at 23:38 — Mark Smithhart, Jan 31 '12 at 23:38

score 1 · Answer 1 · answered Jan 31 '12 at 23:38

If you add it in as an object (with wmode) rather than as an iframe it seems to work fine in Chrome (FYI, I can confirm that it was not working correctly in my version of Chrome: Windows 7, Chrome 16). Try this:

<div id="objectContainer">
    <object id="pdfObject"  data="http://mirror.hmc.edu/ctan/macros/latex/contrib/pdfpages/dummy.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
  alt : <a href="test.pdf">test.pdf</a>
</object>
</div>
<iframe id="emptyIframe" src="about:blank" frameborder="0">something</iframe>
<div id="menu">
    Menu
</div>

This also works in Firefox. However, you might run into problems with IE. I recommend you do a server-side browser detect and then output either the embedded object or iframe depending on the browser.

Thanks Ben... This is actually the direction I was originally headed, but IE8 is quirky with this. If you click on the pdf the menu div goes to the back. It returns to the front if you resize the browser window. Something needs to be triggered. I wonder if there is a way to simulate that... refresh the CSS on any kind of page event? — Mark Smithhart, Feb 01 '12 at 00:03

div on top of iframe work-around not working in Chrome

1 Answers1