Skip to main content

Printing DIV contents with CSS using JavaScript and jQuery

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#btnPrint").click(function () {
        var contents = $("#dvContents").html();
        var frame1 = $('<iframe />');
        frame1[0].name = "frame1";
        frame1.css({ "position": "absolute", "top": "-1000000px" });
        $("body").append(frame1);
        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
        frameDoc.document.open();
        //Create a new HTML document.
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
        //Append the external CSS file.
        frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
        //Append the DIV contents.
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            frame1.remove();
        }, 500);
    });
});
</script>

Comments

Popular posts from this blog

bootstrap slider back to top

<script src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" > </script> <link rel = "stylesheet" id = "font-awesome-css" href = "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type = "text/css" media = "screen" > copy anywhere in your page <div class="scroll-top-wrapper "> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> <style> .scroll-top-wrapper {     position: fixed; opacity: 0; visibility: hidden; overflow: hidden; text-align: center; z-index: 99999999;     background-color: #2E9BDC; color: #eeeeee; width: 50px; height: 48px; line-height: 48px; right: 30px; bottom: 30px; padding-top: 2px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-rad...

embed play youtube video just from url

<? $videolink='https://www.youtube.com/watch?v=6SDlG8T2KRE'; $ytarray=explode("/", $videolink); $ytendstring=end($ytarray); $ytendarray=explode("?v=", $ytendstring); $ytendstring=end($ytendarray); $ytendarray=explode("&", $ytendstring); $ytcode=$ytendarray[0]; echo "<iframe width=\"420\" height=\"315\" src=\"http://www.youtube.com/embed/$ytcode\" frameborder=\"0\" allowfullscreen></iframe>"; ?>