Horizontal Spry Menus Appear Behind Embedded PDFs

Report · Jun 17, 2009

When I create a vertical spry menu, I have no issue with the menus appearing behind embedded PDFS and other objects. We are working through a redesign and I now have to have a horizontal menu that has pull downs in them. When I do this I have a similar issue that someone had here:

http://forums.adobe.com/thread/146490

The problem isn't with flash though, it's PDF and other embedded objects. The menu appears behind them. Is there any solution to this? I've tried working with div tags, z-indexes, everything I can come up with....I'm banging my head trying to figure this out and that isn't helping . Thanks!!

Here's some sample code:

<script src="/code/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/code/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
 
 
<style type="text/css">
<!--
body,td,th {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 12px;
}
body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #FF6300;
}
-->
</style>
 
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="#" class="MenuBarItemSubmenu">Grading/Guidelines</a>
    <ul>
      <li><a href="d_main3.cfm?site=d_sitemaker.cfm">Pro Scout Grading Sheet</a></li>
      <li><a href="lettergrades.pdf" target="_new">Letters, Arrows, Special Teams Grades</a></li>
      <li><a href="specificskillsandcriticalfactors.pdf" target="_new">Specific Skills and Critical Factors</a></li>
      <li><a href="offensesscf.pdf" target="_new">Specific Skills and Critical Factors (Offense)</a></li>
    </ul>
  </li>
</ul>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/code/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/code/SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<br /><br /><br />
<div style="z-index: -1;">
<embed src="lettergrades.pdf" width="500" height="500" autostart="false" style="z-index:-1;"></embed>
</div>

Report · Jun 18, 2009

Can you give me a link to the page?

This sort of problem is often associated with a position being set to absolute somewhere, so if you are unable to post a link check your css, (not the spry css as this is required to have it appear above the other items).

PZ

Report · Jun 18, 2009

Thanks for the response! What you see is the entire code set (minus the includes of course). I can't send you a link, it's an internal site. Also I only have to get this to work in IE, it's for an application not a website. And if I can't get this to work, I would be open to other options.

Report · Jun 18, 2009

Tried your code using one of my files, but removed the z-index from:

style="z-index:-1;"></embed

and have no problems, pdf is behind menu.

Sorry if this does not help, but without seeing the actual page!

PZ

Report · Jun 18, 2009

Okay, I mocked up a page and put it on an external server:

http://www.lizardmaster.com/sample/d_menubar.html

I removed the z-index reference you specified, and it still does the same thing for me.

Thanks!!!

---Alex

Report · Jun 18, 2009

I changes your code slightly and found the problem to be in your css, (you will also have to change the width of the menu background).

Modify the margins as req'd

PZ

Report · Jun 18, 2009

That works for you? It doesn't for me. I used your code (only changed it by putting a few <br>s so that the PDF is actually below the pulldown menu) but it still doesn't work for me.

The menu actually lays on top of the PDF???

http://www.lizardmaster.com/sample/d_menubar2.html

Thanks!

---Alex

Report · Jun 18, 2009

Yes, it will as the page embeds a pdf plug-in which cannot be changed/styled , this is why almost all the pages using this plug-in are full size, (plug-in only).

The only other option is too actually style the page, so that it does not interfere with other items on the page by styling the div's using position, margin, etc..

If you wish to use z-index, then a position must be applied, which can lead to its own problems, as I am assuming that you are using the Air plug-in as your page was not part of an html page.

(If not Air, then where do you intend to use this, as you stated it was not for on-line use?).

PZ

Report · Jun 18, 2009

It's actually an internal application on an intranet. I have the same problem with crystal reports displaying in front of the pulldown as well. I don't care how I have to do it, but it seems all embedded objects (other than flash which can be set to transparent) appear in front of the menu like it's doing here. I actually had a full PDF within an I-Frame originally and that didn't work either so I tried to make this as simple as possible.

The vertical menu does allow for the sub menus to appear over both PDFs and Crystal Reports.

I apologize for not understanding you, this code is working for you in IE? When I look at it the menu is behind the PDF.

I can't move the items out of the way, the actual menu has many more options. I will use another solution if you know of any, but I'm ready to roll with this menu if I can just get it to appear above these items like it does in the vertical version.

Report · Jun 18, 2009

Sorry, when you said application, I was thinking application as in stand alone program.

That is why I moved the pdf viewer to one side.

As far as I know the pdf embedded app. will always sit above anything else, why?

There are some suggestions that using flash to show the pdf file is the best solution but I cannot find much that really helps except :

http://www.pixelwit.com/blog/2008/02/flash-cs3-pdf-integration/

or

http://labnol.blogspot.com/2007/03/how-to-embed-microsoft-office-or-pdf.html

HTH

PZ

Report · Jun 18, 2009

SOLVED!!!!!!!!

Okay, the new version of the SpryMenuBar.js no longer works. I guess in a Dreamweaver Update the .js switched to this -

// SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1

I realized that the vertical menubar was using this version -

/* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */

I rolled back to the 1.4 version and the menus stay above any object now! Thanks for your help, it was because of you I started stepping through the files step by step. I'm not sure how to report this to Adobe?

Report · Jun 19, 2009

Thank you for the feedback, the first thing I normally look at with spry is the version number and as your was up to-date I never suspected that this would cause the problem. It would be a good idea if you could post the problem and the solution on the Adobe labs spry forum, as many have had this problem and come to the same conclusion I did (use flash or move the pdf window out of the way.

What I suggested was a work-around that should not have been necessary, (I will now seriously consider using pdf again as a part of a web page) again thank you for the feedback.

The spry forum can be found at:

http://forums.adobe.com/community/labs/spry

PZ

Report · Jul 29, 2009

Hello, I'm interested in this post since I'm having the same problem,

I have a page which submenu items appears underneath PDF.

I read all the messages in this thread but couldn't understand the final conclusion,

I mean, the person that asked (Dolfan), said something about using spry version 1.4 instead.

So, How can I get that one?, if DW CS4 is being distributed with a "pre release 1.6.1".

I had google for an answer but I get no hint.

Thanks in advance for any information

Report · Jul 29, 2009

I assume this code can be reposted here on Adobe especially with the redistribution comments at the top. Try using the attached version of SpryMenuBar.js. I haven't had any issues since I reverted back.

Report · Jul 29, 2009

Hello Dolfan, thanks for your prompt answer.

Sorry to bother, but how can I download the attachment?,

could you please send it to my email, onest30@gmail.com.

Also, could you please explain how is that you reverted back to version 1.4?

Thanks in advance.

Report · Jul 30, 2009

Hello again Dolfan, I got your email, thanks.

I did what you said, I mean, I replace the old SpryMenuBar.js with the code

you gave me, but still my submenu items falls behind the embeded PDF's.

Any other suggestions?

Thanks in advance

Adobe Community

Horizontal Spry Menus Appear Behind Embedded PDFs