Modal PDF IFRAME with Jquery

Question

So here is my script, works perfectly, no problems. Now why am I posting this on here, mostly so I can enhance it and make it better also i figure this could come to help others! JQUERY! Here is a working sample http://jsfiddle.net/cornelas/4eUgf/2/

    $(document).ready(function() {
        $('.select').click(function () {
        $('.pdf_grey').fadeIn('slow');
        $('.select').hide();
        $('.deselect').show();
   });
     $('.deselect').click(function() {
        $('.pdf_grey').fadeOut('slow');
        $('.select').show();
        $('.deselect').hide();
    });
        $('.pdf_grey').css({'opacity' : 0.8});
    });
    $(document).mouseup(function (e)
{
    var container = $(".pdf_grey");
var deselect = $(".deselect");
var select = $(".select");

    if (container.has(e.target).length === 0)
    {
        container.hide();
       deselect.hide();
       select.show();
    }
});

And here is my HTML

Site Manual

PreviewMinimize | Download

<div class="pdf_grey">
<span class="deselect top_inf"><h3>Close<h3></span><br>
<iframe id="manual" style="border:1px solid #666CCC" title=" Manual" src="Images/pdf/UserMaual.pdf" frameborder="1" scrolling="auto" height="600" width="850" ></iframe>
</div>
</div>  
</div>

AND CSS finally

.pdf_grey {
position: absolute;
left: 500px;
top: 100px;
display: none;
padding: 25px;
background: #333;
}
.deselect {
    display: none;
    cursor: pointer;
}
.select {
    cursor: pointer;
    color: #666;

}
.select:hover {
    color: red;

}

If you notice I wrote this script that it would specifically target class PDF grey and that it would reveal the class which is set to hidden, the div contains a Iframe which loads the PDF. I thought this was a really simple cool way to load a pdf without changing the page. Now.. Million dolla question, how do I make this so that if any has a class of pdf it will load the content it has hidden. I dont want to go crazy on setting up classes as you can see. I figure in the ahref or the something we have to set a class that loads the Iframe. Thanks guys for the help, I will post my script when its complete with anyone who helped name on it, all the modals I have seen are lame and not as responsive.

Answer 1

You'll want to look into the .load function which you supply a source URL to. All you need to do is figure out a way to save your source as a variable and patch it into the load function. If you were to click on thumbnails then: Then whenever .pdf is clicked, first save the src: var src=$(this).parent('a').attr('src'); Then you can use .load and target the iframe using the src variable. It should become pretty clear when looking at the API docs for .load. A couple things to mention about loading offs into iframes: Iframes are meant for external html documents, whereas the object tag is used for external files such as flash, PDF, video, etc. You might want to look into the object tag.

Iframes are extremely difficult to setup any error handling so if your PDF doesn't load, displaying an error can be extremely difficult. There are some workarounds but none I've seen that are good, they mostly rely on setting a timer to see if the iframe has loaded, and some sites/pdfs might take a long time to load resulting in a false error.

Pdfs are tricky to work with as the browser requires a plugin. What about users that don't have a PDF reader installed, again there's no way to error check in this case.

Answer 2

See the example here http://jsfiddle.net/cornelas/4eUgf/4/ The Iframe is now based on the link not the link showing the iframe which loads the page!

    $(document).ready(function() {
        $("a.select").live('click', function (e) {
           e.preventDefault();
           var href = this.href;
          $("#manual").attr("src", href);
        });
    $('.full').css({'opacity' : .7});

    $('.select').click(function () {
        $('.pdf_grey').fadeIn('slow');
        $('.full').fadeIn('slow');
        $('.select').hide();
        $('.deselect').show();
    });
    $('.deselect').click(function() {
        $('.pdf_grey').fadeOut('slow');
        $('.full').fadeOut('slow');
        $('.select').show();
        $('.deselect').hide();
    });

    });
    $(document).mouseup(function (e)
{
    var container = $(".pdf_grey");
    var bkg = $(".full");
    var deselect = $(".deselect");
    var select = $(".select");

    if (container.has(e.target).length === 0)
    {
        container.hide();
        deselect.hide();
        select.show();
        bkg.hide();
    }
});


    <div class="full">
    <div class="pdf_grey">
    <span class="deselect top_inf"><h3>Close<h3></span><br>
    <iframe id="manual" style="border:1px solid #666CCC" title=" Manual" src="" frameborder="1" scrolling="auto" height="600" width="850" ></iframe>
    </div>
    </div>
    <div id="wrapper">
    <p class="1">
    <h3>Site Manual</h3><a href="http://www.ntxmsk.com/pdf/nwpt.pdf#zoom=100" class="select">Preview</span><span class="deselect">Minimize</span> | <a href="Images/pdf/Site_Help_Manual_2012.zip">Download</a><br>
        </p>
    <p class="2">
    <h3>Site Manual</h3><a href="http://www.ntxmsk.com/pdf/HIPPA.pdf#zoom=100" class="select">Preview</span><span class="deselect">Minimize</span> | <a href="Images/pdf/Site_Help_Manual_2012.zip">Download</a>
        </p>
    <div class="topdiv">

    </div>    
    </div>

        body {
        padding:0px;
        margin: 0px;
        }
        .full {
        background: #000;
         width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    display: none;
    }
    .red {
    background: red;
    width: 10%;
    height: 25%;
    }
    .pdf_grey {
    position: absolute;
    left: 25%;
    top: 15%;
    display: none;
    padding: 25px;
    background: #333;

    }
    .deselect {
        display: none;
        cursor: pointer;
    }
        .select {
        cursor: pointer;
        color: #666;

    }
    .select:hover {
        color: red;

    }