Print element on a page

Developer
Mia Sno
Size
2,081 Kb
Views
36,432
  1. Print element on a page Previews
  2. Print element on a page HTML Codes
  3. Print element on a page JS Codes

How do I make an 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 12 August 2022, Friday.

Print element on a page Previews
IQ Test

Print element on a page - Script Codes 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 - Script Codes 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; }); });
Print element on a page - Script Codes
Print element on a page - Script Codes
Home Page Home
Developer Mia Sno
Username mrs_snow
Uploaded August 12, 2022
Rating 3
Size 2,081 Kb
Views 36,432
Do you need developer help for Print element on a page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mia Sno (mrs_snow) Script Codes
Name
Smooth Scroll To Anchor With jQuery
Add id to body tag based on url jQuery
Sticky Navigation or Section with jQuery
Sample fancybox 2 overlay with no wrapper and custom close
QA list with content property
Img Swap on hover or mouseover with JQuery
Placeholder sample for IE
Toggle graph phases with menu of phases
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!