Print specific UL / OL List

**Gonzo714** · 03-17-2013, 05:26 PM

Hello folks,
I am in need of the ability to print a specific UL or OL list from any page.
I could only find 1 site that had any insight to this..... this is what they offered...

Code:

#########################################

<!DOCTYPE html
<head>

<style type="text/css" media="print">
body * {
display:none;
}
#print, #print li, #print li img {
display:block;
}
</style>


</head>

<body>

<form action="#" method="post"><label for="print"><input id="print" type="button" name="name" value="Print" size="50" onclick="window.print()" /></label></form>
<ul id="print">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>

</body>
</html>
#####################################

.....which works fine as long as you only have one list to choice from.

How would I alter this to have the ability to print specific lists (ie - list1, list2, list3) with specific Print Buttons (ie print1, print 2, print3)

Below is a non-educated guess on what I need...

Code:

#############################################

<!DOCTYPE html
<head>

<style type="text/css" media="print">
body * {
display:none;
}
#print, #print li, #print li img {
display:block;
}
</style>


</head>

<body>

<form action="#" method="post"><label for="print"><input id="print" type="button" name="name" value="Print" size="50" onclick="window.print()" /></label></form>
<ul id="print">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>


<form action="#" method="post"><label for="print1"><input id="print1" type="button" name="name" value="Print1" size="50" onclick="window.print()" /></label></form>
<ul id="print1">
<li>11</li>
<li>11</li>
<li>11</li>
</ul>

</body>
</html>

#####################################################

I hope I explained myself, due to my lack of HTML / CSS knowledge.

Thanks
Gonzo

**Beverleyh** · 03-17-2013, 05:39 PM

You could give the things you want to print a specific class and then set that class as display:block; in your print CSS;

Code:

<style type="text/css" media="print">
body * { /* hides everything on the page */
display:none;
}
.print { /* show the elements with a class of 'print' (classes can be used in multiple elements and appear with a '.' in front in the CSS) */
display:block;
}
</style>

HTML;

Code:

<ul class="print">
<li>first item</li>
<li>second item</li>
</ul>

<img src="path/to/image.jpg" class="print another-class">

<p id="something" class="print">paragraph to print</p>

Hope that helps

**Beverleyh** · 03-17-2013, 05:57 PM

Sorry, I didn't read the question properly. To print specific elements via different buttons will probably require some form of JavaScript - I haven't tested anything (on iphone) but here are 10 jQuery print plugins that may provide solutions http://www.jquery4u.com/plugins/10-j...-page-options/

**Gonzo714** · 03-17-2013, 06:35 PM

Thank you for your fast responce.
I appreciate your efforts.

Looks like I have some researching to do to understand all this,,lol

Thanks

**jscheuer1** · 03-18-2013, 05:37 AM

Or you could try out this little quickie:

http://home.comcast.net/~jscheuer1/s...intcontent.htm

Code:

<!DOCTYPE html>
<html>
<head>
<title>Q&D Print Demo</title>
<script type="text/javascript">
function popPrint(element, css, css_url){ //function used to popup print the innerHTML of the passed in element
	var html, printWin;
	element = element.tagName? element : document.getElementById(element);
	css = css || ""; //optionally add a default css
	css = "<style type='text/css'>"+css+"</style>";
	css_url = css_url || ''; //optionally add a default print stylesheet url to the popup
	if ( css_url !== '' ) {
		css_url = "<link rel='stylesheet' type='text/css' href='"+css_url+"' media='print' />";
	}
	html = '<html><head><title>'+(element.getAttribute('data-print-title') || '')+'</title>'+css+css_url+'</head>'+element.innerHTML+'</html>';

	printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=no, scrollbars=yes, status=yes' );
	printWin.document.write(html);
	printWin.document.close();
	printWin.focus();
	printWin.print();
	printWin.close(); //not executed in Opera for some reason, user can manually close easily enough
}
</script>
</head>

<body>

<input type="button" value="Print" size="50" onclick="popPrint('print')" />
<div id="print" data-print-title="List One">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>

<input type="button" value="Print" size="50" onclick="popPrint('print1')" />
<div id="print1" data-print-title="List Two">
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</div>
</body>
</html>

Or, perhaps this one would be better:

http://home.comcast.net/~jscheuer1/s...ntcontent2.htm

Code:

<!DOCTYPE html>
<html>
<head>
<title>Q&D Print Demo II</title>
<style type="text/css">
#printarea {display: none;}
</style>
<style type="text/css" title="copyprint" media="print">
#screencontent {display: none;}
#printarea {display: block;}
</style>
<script type="text/javascript">
function enabledisableprintstyle(which){
	var sheets = document.getElementsByTagName('style'), i = sheets.length;
	while(--i > -1){
		if(sheets[i].title === 'copyprint'){
			sheets[i].disabled = which;
			break;
		}
	}
}
enabledisableprintstyle(true);
function copyPrint(element){ //function used to copy print the innerHTML of the passed in element
	var savedtitle = document.title;
	element = element.tagName? element : document.getElementById(element);
	document.getElementById('printarea').innerHTML = element.innerHTML;
	document.title = element.getAttribute('data-print-title') || '';
	enabledisableprintstyle(false);
	window.print();
	document.getElementById('printarea').innerHTML = '';
	document.title = savedtitle;
	enabledisableprintstyle(true);
}
</script>
</head>

<body>
<div id="printarea"></div>
<div id="screencontent">
<input type="button" value="Print" size="50" onclick="copyPrint('print')" />
<div id="print" data-print-title="List One">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>

<input type="button" value="Print" size="50" onclick="copyPrint('print1')" />
<div id="print1" data-print-title="List Two">
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</div></div>
</body>
</html>