Question

I am working on a web application that has a menu across the top of every page with sub menus that drop down when a menu item is hovered over. This works fine, except on one page where we are trying to show a pdf in an iframe. The hover menus all end up behind the iframe in this one case. I have tried adjusting the z-index of both the hover menu and the iframe but neither seems to work. This is occurring in both FireFox 3.5 and IE8 so far.

There are two ways my question could be solved. I can either find a way to accurately adjust the CSS so my menu appears in front of the iframe or if there is another way to show the pdf that doesn’t have this issue I could do that too.

Thanks!

Answer 1

When I ran into this issue, I used jQuery to detach the iframe before showing the overlay (and in my case a modal too). Once the user was done with the modal/overlay, I reattached the iframe to the DOM. _viewerFrame and _viewerDiv are just some css selectors of course. In my case there was a wrapping div tag around the iframe element that made detaching and attaching easy.

// detach iframe
_frame = $(_viewerFrame).detach();

function reattach(frame) {
    // append it back to the div it was in (reattaching essentially)
    $(_viewerDiv).append(frame);
    setButtonStates();
    setViewerState();
}

function onOk() {

     ... // other code

     reattach(_frame);
}

function onCancel() {

     ... // other code

     reattach(_frame);
}

// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...

Hope that helps…