bennadel/code-1.htm

## code-1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Print Part of a Page With jQuery</title>
	<script type="text/javascript" src="jquery-1.3.2.js"></script>
	<script type="text/javascript" src="jquery.print.js"></script>
	<script type="text/javascript">

		// When the document is ready, initialize the link so
		// that when it is clicked, the printable area of the
		// page will print.
		$(
			function(){

				// Hook up the print link.
				$( "a" )
					.attr( "href", "javascript:void( 0 )" )
					.click(
						function(){
							// Print the DIV.
							$( ".printable" ).print();

							// Cancel click event.
							return( false );
						}
						)
				;

			}
			);

	</script>

	<style type="text/css">

		body {
			font-family: verdana ;
			font-size: 14px ;
			}

		h1 {
			font-size: 180% ;
			}

		h2 {
			border-bottom: 1px solid #999999 ;
			}

		.printable {
			border: 1px dotted #CCCCCC ;
			padding: 10px 10px 10px 10px ;
			}

		img {
			background-color: #E0E0E0 ;
			border: 1px solid #666666 ;
			padding: 5px 5px 5px 5px ;
			}

		a {
			color: red ;
			}

	</style>
</head>
<body>

	<h1>
		Print Part of a Page With jQuery
	</h1>

	<p>
		<a>Print Bio</a>
	</p>

	<div class="printable">

		<h2>
			Jen Rish
		</h2>

		<p>
			Jen Rish, upcoming fitness and figure model has some
			crazy developed legs!
		</p>

		<p>
			<img
				src="jen_rish_crazy_legs.jpg"
				width="380"
				height="570"
				alt="Jen Rish Has Amazing Legs!"
				/>
		</p>

		<p>
			I bet she does some <strong>serious squatting</strong>!
		</p>

	</div>

</body>
</html>

## code-2.js
// Create a jquery plugin that prints the given element.
jQuery.fn.print = function(){
	// NOTE: We are trimming the jQuery collection down to the
	// first element in the collection.
	if (this.size() > 1){
		this.eq( 0 ).print();
		return;
	} else if (!this.size()){
		return;
	}

	// ASSERT: At this point, we know that the current jQuery
	// collection (as defined by THIS), contains only one
	// printable element.

	// Create a random name for the print frame.
	var strFrameName = ("printer-" + (new Date()).getTime());

	// Create an iFrame with the new name.
	var jFrame = $( "<iframe name='" + strFrameName + "'>" );

	// Hide the frame (sort of) and attach to the body.
	jFrame
		.css( "width", "1px" )
		.css( "height", "1px" )
		.css( "position", "absolute" )
		.css( "left", "-9999px" )
		.appendTo( $( "body:first" ) )
	;

	// Get a FRAMES reference to the new frame.
	var objFrame = window.frames[ strFrameName ];

	// Get a reference to the DOM in the new frame.
	var objDoc = objFrame.document;

	// Grab all the style tags and copy to the new
	// document so that we capture look and feel of
	// the current document.

	// Create a temp document DIV to hold the style tags.
	// This is the only way I could find to get the style
	// tags into IE.
	var jStyleDiv = $( "<div>" ).append(
		$( "style" ).clone()
		);

	// Write the HTML for the document. In this, we will
	// write out the HTML of the current element.
	objDoc.open();
	objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
	objDoc.write( "<html>" );
	objDoc.write( "<body>" );
	objDoc.write( "<head>" );
	objDoc.write( "<title>" );
	objDoc.write( document.title );
	objDoc.write( "</title>" );
	objDoc.write( jStyleDiv.html() );
	objDoc.write( "</head>" );
	objDoc.write( this.html() );
	objDoc.write( "</body>" );
	objDoc.write( "</html>" );
	objDoc.close();

	// Print the document.
	objFrame.focus();
	objFrame.print();

	// Have the frame remove itself in about a minute so that
	// we don't build up too many of these frames.
	setTimeout(
		function(){
			jFrame.remove();
		},
		(60 * 1000)
		);
}
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<title>Print Part of a Page With jQuery</title>
	<script type="text/javascript" src="jquery-1.3.2.js"></script>
	<script type="text/javascript" src="jquery.print.js"></script>
	<script type="text/javascript">

	// When the document is ready, initialize the link so
	// that when it is clicked, the printable area of the
	// page will print.
	$(
	function(){

	// Hook up the print link.
	$( "a" )
	.attr( "href", "javascript:void( 0 )" )
	.click(
	function(){
	// Print the DIV.
	$( ".printable" ).print();

	// Cancel click event.
	return( false );
	}
	)
	;

	}
	);

	</script>

	<style type="text/css">

	body {
	font-family: verdana ;
	font-size: 14px ;
	}

	h1 {
	font-size: 180% ;
	}

	h2 {
	border-bottom: 1px solid #999999 ;
	}

	.printable {
	border: 1px dotted #CCCCCC ;
	padding: 10px 10px 10px 10px ;
	}

	img {
	background-color: #E0E0E0 ;
	border: 1px solid #666666 ;
	padding: 5px 5px 5px 5px ;
	}

	a {
	color: red ;
	}

	</style>
	</head>
	<body>

	<h1>
	Print Part of a Page With jQuery
	</h1>

	<p>
	<a>Print Bio</a>
	</p>

	<div class="printable">

	<h2>
	Jen Rish
	</h2>

	<p>
	Jen Rish, upcoming fitness and figure model has some
	crazy developed legs!
	</p>

	<p>
	<img
	src="jen_rish_crazy_legs.jpg"
	width="380"
	height="570"
	alt="Jen Rish Has Amazing Legs!"
	/>
	</p>

	<p>
	I bet she does some <strong>serious squatting</strong>!
	</p>

	</div>

	</body>
	</html>
	// Create a jquery plugin that prints the given element.
	jQuery.fn.print = function(){
	// NOTE: We are trimming the jQuery collection down to the
	// first element in the collection.
	if (this.size() > 1){
	this.eq( 0 ).print();
	return;
	} else if (!this.size()){
	return;
	}

	// ASSERT: At this point, we know that the current jQuery
	// collection (as defined by THIS), contains only one
	// printable element.

	// Create a random name for the print frame.
	var strFrameName = ("printer-" + (new Date()).getTime());

	// Create an iFrame with the new name.
	var jFrame = $( "<iframe name='" + strFrameName + "'>" );

	// Hide the frame (sort of) and attach to the body.
	jFrame
	.css( "width", "1px" )
	.css( "height", "1px" )
	.css( "position", "absolute" )
	.css( "left", "-9999px" )
	.appendTo( $( "body:first" ) )
	;

	// Get a FRAMES reference to the new frame.
	var objFrame = window.frames[ strFrameName ];

	// Get a reference to the DOM in the new frame.
	var objDoc = objFrame.document;

	// Grab all the style tags and copy to the new
	// document so that we capture look and feel of
	// the current document.

	// Create a temp document DIV to hold the style tags.
	// This is the only way I could find to get the style
	// tags into IE.
	var jStyleDiv = $( "<div>" ).append(
	$( "style" ).clone()
	);

	// Write the HTML for the document. In this, we will
	// write out the HTML of the current element.
	objDoc.open();
	objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
	objDoc.write( "<html>" );
	objDoc.write( "<body>" );
	objDoc.write( "<head>" );
	objDoc.write( "<title>" );
	objDoc.write( document.title );
	objDoc.write( "</title>" );
	objDoc.write( jStyleDiv.html() );
	objDoc.write( "</head>" );
	objDoc.write( this.html() );
	objDoc.write( "</body>" );
	objDoc.write( "</html>" );
	objDoc.close();

	// Print the document.
	objFrame.focus();
	objFrame.print();

	// Have the frame remove itself in about a minute so that
	// we don't build up too many of these frames.
	setTimeout(
	function(){
	jFrame.remove();
	},
	(60 * 1000)
	);
	}