?
Solved

Embeded PDF and z-index

Posted on 2009-04-08
5
Medium Priority
?
8,399 Views
Last Modified: 2012-05-06
I have a menu that opens either videos or pdfs into an iframe. It is a very user friendly way of helping my users go through out content and the videos pertaining to the content. The only problem is that when I embed a pdf file it covers the drop down menus to navigate to other docs.

This is my page structure

************************drop down menu*************************

  ------------------------------iframe----------------------------

    _____________video or pdf embeded___________

I need to figure out a way to get the drop down to appear over the pdf. I have gone through all the work arounds in the search engines. There is one to make it hide the pdf when being moused over, I cannot allow that one.

I have tried the classic approach of how to do this with flash (setting wmode to transparent), and it doesn't work for PDFs.

Please help! Thank you very much.

Here is my embed code for the PDF:

<object style="width:700px; height:350px; z-index:-50;">
<param name="wmode" value="transparent" />
<param name="src" value="http://www.fabuso.com/starteconome/pdf/GB_Introduction.pdf">
<embed src="http://www.fabuso.com/starteconome/pdf/GB_Introduction.pdf" wmode="transparent" style="width:700px; height:350px; z-index:-50;"></embed> 
</object>

Open in new window

0
Comment
Question by:Shaye Larsen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 16

Expert Comment

by:hankknight
ID: 24103352
If you want this to work with all browsers you will need to place the drop down menu inside an iframe.
0
 
LVL 11

Expert Comment

by:level9wizard
ID: 24106298
Can you provide the full html code? At first glance It looks as though defining position: relative; or position: absolute; to the object and/or embed might solve this.
0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 24116812
I can't do it from an iframe as a drop menu can't drop outside of the iframe's boundaries.

I can't seem to get it to work with your suggestions still. Sorry, can't supply all the code. Thanks for your help, but like other posts have said, it isn't possible because "The problem occurs because both .doc and .pdf are using their native programs for display - neither one is native to the browser. I don't know of any workaround available today." source = http://www.webmasterworld.com/html/3503870.htm

For now I think I will have to move away from using PDFs unless someone is certain on a solution.
0
 
LVL 16

Accepted Solution

by:
hankknight earned 2000 total points
ID: 24116891
The problem is legacy version of IE give iframes a z-index of infinity.  The only way to truly solve this problem is to place an iframe on top of an iframe, so it has a z-index of infinity plus one.  The menu code has to be BELOW the other code or has to be parsed with JavaScript after the other iframe was rendered.

->>  I can't do it from an iframe as a drop menu can't drop outside of the iframe's boundaries

Actually, you can.  Look for a drop down menu with IE5 support, and it should do the trick.  Here is an example:

http://dhtmlgrounds.wordpress.com/2009/02/10/vertical-dropdown-menu-ie6-z-index-bug-fixed/
http://br.geocities.com/romulonf@rocketmail.com/vertical-menu-1/vertical.html
0
 
LVL 1

Author Closing Comment

by:Shaye Larsen
ID: 31568223
Thank you
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question