Div over the pdf iframe

[veenna]

hi all,

I have one Iframe which opens a PDF on Click of a button.
I want to display a DIV layer over the IFrame. Before loading the PDF the Div layer is Visible on top of the IFrame.But after pdf loads it disappears.

Any Idea about Displaying Iframe over the IFrame with PDF?

regards
Veena

[acoder]

Can you give an example link or some code?

[RamananKalirajan]

Hi Veena,
I also had the same problem. But I fixed the problem by placing an empty iframe beneath the div i.e. an iframe is kept behind the div with the same height and width of the div which is shown over the iframe which shows the pdf.

HTML Code:

<iframe  id  = "docframe" name = "docframe" frameborder="1" style = "background-color:#fffffff;margin-left:8px;" width="99%" height="400px" style="border:none;display:none;"></iframe>
 
<iframe id="theframe" src="" class="frmcls" style="display:none;"></iframe>
<div id="fade" class="black_overlay"> </div>

'docframe' - loads the PDF

'fade' - div which is shown on top of the iframe containing pdf


'theframe' - dummy frame which is kept beneath the div 'fade'

Styles for dummy frame:

.frmcls
        { 
            position:absolute;
            z-index:998;
            -moz-opacity: 0.2;
            opacity:.20;
            filter: alpha(opacity=20);
        }
        iframe{
            border: none;
        }

JS Code

function positionIFrame(divid, frmid)
    {
        var div = document.getElementById(divid);
        var frm = document.getElementById(frmid);
        frm.style.left = div.style.left;
        frm.style.top = div.style.top;
        frm.style.height = div.offsetHeight;
        frm.style.width = div.offsetWidth;
        frm.style.display = "block";    
    }
 
 
    //findPosX and findPosY are included only to put the div over the dropdownbox.
    //They are not necessary in order to position the iFrame under the div
    function findPosX(obj)
    {
        var curleft = 0;
        if (obj.offsetParent)
        {
            while (obj.offsetParent)
            {
                curleft += obj.offsetLeft
                obj = obj.offsetParent;
            }
        }
        else if (obj.x)
            curleft += obj.x;
        return curleft;
    }
 
    function findPosY(obj)
    {
        var curtop = 0;
        if (obj.offsetParent)
        {
            while (obj.offsetParent)
            {
                curtop += obj.offsetTop
                obj = obj.offsetParent;
            }
        }
        else if (obj.y)
            curtop += obj.y;
        return curtop;
    }
 
    function positionDiv(divid, frmid)
    {    
        var div = document.getElementById(divid);
        div.style.left=findPosX(document.getElementById("docframe"))- 8 + "px";
        div.style.top=findPosY(document.getElementById("docframe"))- 25 + "px";
        positionIFrame(divid, frmid);
    }

While showing the div over the iframe just call the function positionDiv('fade', 'theframe');

This will do the rest.

Thanks and Regards
Ramanan Kalirajan