Print element on a page

What is a print element on a page How do you make a print element on a page? This script and codes were developed by Mia Sno on 16 October 2021, Saturday.

How do I make an print element on a page?
  1. Print element on a page Previews
  2. Print element on a page HTML Codes
  3. Print element on a page JS Codes
Print element on a page Previews

Print element on a page HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Print element on a page</title>
  
  
  
  
  
</head>

<body>
  <div class="content_blocks">
<div>
<p>CONTENT 1:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus, erat et sagittis lacinia, magna nunc laoreet odio, non adipiscing ipsum tellus a lorem. Sed non commodo nisl, sit amet aliquam turpis. Sed gravida elementum nunc ut luctus. Nulla facilisi. Nam euismod blandit porttitor.</p>
<p><a href="javascript:void" class="printThis">Print this block</a></p>
</div>

<div>
<p>CONTENT 2:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus, erat et sagittis lacinia, magna nunc laoreet odio, non adipiscing ipsum tellus a lorem. Sed non commodo nisl, sit amet aliquam turpis. Sed gravida elementum nunc ut luctus. Nulla facilisi. Nam euismod blandit porttitor.</p>
<p><a href="javascript:void" class="printThis">Print this block</a></p>
</div> 

</div>
  <script src='http://equalsquote.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

    <script src="js/index.js"></script>

</body>
</html>

Print element on a page JS Codes

$(document).ready(function () {
$('.printThis').click(function() { 

var content_data = $(this).closest('div').html(); // this variable contains html of this content
var printPage=window.open("toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=650, height=400, left=100, top=25"); // open popup settings with margins for top and left
        printPage.document.write('<html><head><title>My Desired Content</title>'); //page html markup
        printPage.document.write('<link rel="stylesheet" href="print.css" type="text/css" />');//page css to make it look print-friendly - optional of course
        printPage.document.write('</head><body >'); //page html markup
        printPage.document.write(content_data); // drop in the html variable we declared above
        printPage.document.write('</body></html>'); //page html markup
        printPage.print(); // open print dialogue box
        printPage.close(); // close the popup once the print dialogue box is done
        return true; 
    });
 });
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.