Float a Div over an Embedded Pdf/Applet a Solution for Safari

Question

I have nav menu html that I would like to be able to open over top of objects underneath it. Fx. An applet or an embedded pdf file. However, floating a div over an embeded element or applet doesnt work in all browsers (need safari, ie8+, firefox, chrome). By doesnt work i mean it does not appear on top.

Looking at various posts i came to the following code:

    <!DOCTYPE html>
<html>
<head>
     <script type="text/javascript">
        function showHideElement(element){
            var elem = document.getElementById(element);

            if (elem.style.display=="none"){
                elem.style.display="block"
            }
            else{
                elem.style.display="none"
            }
        }
    </script>
    <style>
        div:hover {
            background-color:red !important;
        }
    </style>
</head>
<body>
    <div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me to toggle elem (ie)</div>
    <div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>

    <div style="position:absolute;z-index:20;margin-left:200px;">
    <iframe visible="true"  id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >

     </iframe>
     </div>

    <div style="position:absolute;z-index:10;margin-left:100px;">
        <iframe visible="true" style="z-index:1" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
        </iframe>
     </div>
</body>
</html>

This works on all browsers now except Safari, is there anyway to make it work on Safari (I'm using 5.1.4 Windows) as well?

I see no mention of Safari on previous posts...

Thanks

score 0 · Answer 1 · answered Dec 15 '12 at 00:44

I'm still looking for a solution to this myself. So far I have found nothing that works with Safari. I have tried wrapping the embedded PDF in an iframe, in a div, setting it to visibility:hidden, display:none, and/or both on a click event (so the pop-up modal dialog show up on top of the PDF area), etc. Nothing works with Safari. Here's what's really weird though. At work I'm on a Windows 7 PC and when one mouses over the icons of open apps on the taskbar, a preview window comes up with a miniature version of the app in it. When I mouse over my open Safari, the image that comes up displays my fixes working properly! And when I click on the image to get the actual Safari window to come to the forefront ... everything is "broken" again. Now THAT is BIZARRE.

Please contact me if you find a working solution for Safari, and I will do likewise.

Float a Div over an Embedded Pdf/Applet a Solution for Safari

1 Answers1