CODEWITHSUNDEEP
jquery
Rick
Rick

Reputation: 441

Printing Div with Jquery, but don't print it all

I'm using this script, found on StackOverflow, to print a div with all contents. 

<script>
$(document).ready(function(){
    $('#printmodal').click(function(){

        // variables
        var contents = $('#content').html();
        var frame = $('#printframe')[0].contentWindow.document;

    // show the modal div
    $('#modal').css({'display':'block'});

        // open the frame document and add the contents
        frame.open();
        frame.write(contents);
        frame.close();

        //Hide all 'noprint' elements
        $(".noprint").css("display","none");

        // print just the modal div
        $('#printframe')[0].contentWindow.print();

        // hide the modal div
        $('#modal').css({'display':'none'});
    });
});
</script>

However, there are some elements I don't want to print, ie; buttons and such. For these elements, they have been given the classname of 'noprint'. I have a media="print" css, but using the above function does not work. noprint elements are still printing. I tried adding the $(".noprint").css("display", "none"); function, but it still prints those elements. Does anyone know of a way I can make certain elements not print while using the above function?

Upvotes: 2

Views: 1268

Answers (1)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70129

jQuery by default queries only the document from the window where it has been included, not descendant iframe's documents. You can remedy that by setting a context to your selector:

$(".noprint", frame).css("display","none");

Fiddle

Reference

Upvotes: 3

Related Questions