Log in

View Full Version : 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...


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

<!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...


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

<!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;
<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;
<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-jquery-print-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/side/print/printcontent.htm


<!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/side/print/printcontent2.htm


<!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>
Gonzo714
03-18-2013, 11:55 PM
Thats what I was searching for!

I appreciate all the help.... both of ya.

Gonzo