Member Avatar for paldss

Hello everyone,

I have a site which uses YUI to build a drop down menu system. There are two pages in this site that have embedded .pdf files in them. When one of the pages with the .pdf is open the drop down menu goes behind the .pdf and you cannot see the menu options. I have tried using <embed>, <object>, and <iframe> with the same results. I tried to wrap it in a <div> tag and adjust the z-index with no luck, either.

The site uses php includes to load the pdf. Here is that bit of code:

<?php include_once("../includes/menu.php"); ?>
		<!-- menu ends -->
        <!-- start content -->
        <br /><br />
        <div align="center">
	        <embed src="../images/classes/<?php echo $Array[0]; ?>" width="1000px" height="1000px" />
		</div>
        <!-- end content --><br /><br />
        <!-- begin footer -->
        <?php include_once("../includes/footer.php"); ?>

This does not seem to be an issue in firefox, but it is in explorer, chrome, opera, and safari.

Everything else works great except for this one issue.

Thanks for any help you can give.

  • 5 Contributors
  • 5 Replies
  • 229 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by nil

Dani AI

Generated

As described, the YUI drop-down is being rendered behind embedded PDFs in several browsers while Firefox behaves differently. suggested z-index and tried wmode; correctly pointed out wmode only applies to Flash, and reported mixed IE results. The common cause is that many PDF viewers run as native, windowed plugins that the browser composes above the HTML layer. When the PDF is a windowed plugin it ignores the page stacking context, so z-index (and related CSS fixes) cannot bring HTML on top.

A robust fix is to avoid windowed plugins entirely by rendering PDFs in the DOM. Using an HTML PDF renderer such as Mozilla’s PDF.js makes the document part of the page (canvas/DOM), so menus and overlays behave normally. Minimal client-side rendering example:

<script src="/path/to/pdf.js"></script>

<div id="pdf-container"></div>

<script>
const url = '/path/to/document.pdf';
pdfjsLib.getDocument(url).promise.then(pdf => {
  pdf.getPage(1).then(page => {
    const scale = 1.25;
    const viewport = page.getViewport({ scale });
    const canvas = document.createElement('canvas');
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    document.getElementById('pdf-container').appendChild(canvas);
    page.render({ canvasContext: canvas.getContext('2d'), viewport });
  });
});
</script>

If client-side rendering is not feasible, two practical alternatives are: (1) convert PDF pages to images server-side (for example with pdftoppm or ImageMagick) and serve those images so HTML overlays work normally, or (2) open the PDF in a separate tab/window or via an external HTML viewer (temporary workaround). Example server command:

pdftoppm -png file.pdf page
# produces page-1.png, page-2.png, ...

Notes: moving the dropdown element to a top-level container (append to document.body) helps only when the PDF is not rendered as a windowed plugin. Confirm which PDF handler the browser is using; if it’s a native plugin, the reliable long-term solution is an HTML-based renderer (PDF.js) or image conversion.

Recommended Answers

All 5 Replies

Member Avatar for MJ Pieterse

i think that it has to be adjusted with your z-index. when you set your z-index, make sure that you have a position tag in your class as that could also be the reason for it not taking effect, and make sure that your navigation index is higher than the pdf as well.

Member Avatar for Member #120589

Sorry, was going to suggest wmode="transparent", but didn't work

Edited by Member #120589 because: n/a
Member Avatar for Member #334542

wmode="transparent" will work if you embeded the flash object
zindex will work on webpage, so I think zindex will work. but I have no idea for the implementation

Member Avatar for Member #120589

wmode="transparent" will work if you embeded the flash object
zindex will work on webpage, so I think zindex will work. but I have no idea for the implementation

Yes, I've used wmode on video players in the past, and thought it would work for general object and embed tags. Sadly not the case.

Also tried the z-index, but couldn't get it to work.

Member Avatar for nil

Hello everyone,

I have a site which uses YUI to build a drop down menu system. There are two pages in this site that have embedded .pdf files in them. When one of the pages with the .pdf is open the drop down menu goes behind the .pdf and you cannot see the menu options. I have tried using <embed>, <object>, and <iframe> with the same results. I tried to wrap it in a <div> tag and adjust the z-index with no luck, either.

The site uses php includes to load the pdf. Here is that bit of code:

<?php include_once("../includes/menu.php"); ?>
		<!-- menu ends -->
        <!-- start content -->
        <br /><br />
        <div align="center">
	        <embed src="../images/classes/<?php echo $Array[0]; ?>" width="1000px" height="1000px" />
		</div>
        <!-- end content --><br /><br />
        <!-- begin footer -->
        <?php include_once("../includes/footer.php"); ?>

This does not seem to be an issue in firefox, but it is in explorer, chrome, opera, and safari.

Everything else works great except for this one issue.

Thanks for any help you can give.

I Checked your site in IE and it works perfectly fine.. I didn't find any issue.

If you set Z-index of your pdf file object to lower than Z-index of your menu, it will surely work. Set your menu Z-index value to higher value like 9999 and check it out.

I would also suggest to check out the positioning (relative/absolute) of menu and pdf object. I'd same issue with one of the site I developed.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.