My website uses old-school Java applets for a key piece of content. As the site matures we are adding extra content around this applet, which includes hover content and jQuery UI dialog boxes.
The problem is that these hover content and dialog boxes appear beneath the applet and their content is obscured.
I have tried the common ways to solve the problem, such as z-index and wmode=transparent but these do not work. I have also seen answers to this question that say it is just not possible, but these questions were a few years old.
Does anyone have any suggestions how to force the applet behind other content, or any other clever workarounds? I have created a page to isolate and demonstrate the problem – http://blog.ajcw.com/demo/display-behind-applet.htm
(the dialog opens in the centre of the page so you’ll need to resize your window to see it on top of the applet)
Summary
- Both the jQuery UI dialog box and info hover need to appear above the applet
- I have tried
z-indexandwmode - I cannot use an alternative to the applet
- A jQuery workaround is acceptable
- Affects all browsers other than Firefox 3.6+
My current solution is to hide the applet when the pop-up is active, but I would like to find a more elegant solution.
It seems that it still isn’t possible, as per the alternate question referenced in the original post.
For the record I have used the workaround of adding
visibility:hiddento the applet when pop-up content is launched within the page.