Results 1 to 6 of 6

Thread: Print specific UL / OL List

  1. #1
    Join Date
    Apr 2012
    Location
    Atwater, Ohio
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Print specific UL / OL List

    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
    Last edited by james438; 03-17-2013 at 07:31 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,946
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    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
    Last edited by Beverleyh; 03-17-2013 at 07:00 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,946
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    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/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Apr 2012
    Location
    Atwater, Ohio
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

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

    Thanks

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 03-18-2013 at 07:57 AM. Reason: add second method
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2012
    Location
    Atwater, Ohio
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thats what I was searching for!

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

    Gonzo

Similar Threads

  1. Random image rollover change from specific list of images
    By Jay Dog in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-24-2013, 02:04 PM
  2. script for specific url extraction from a url list
    By buzzbuilder in forum Looking for such a script or service
    Replies: 2
    Last Post: 07-25-2008, 08:15 AM
  3. Using Cross-browser print button to print a different page
    By egghead2000 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-11-2008, 04:40 AM
  4. Print preview with specific content
    By izzysanime in forum JavaScript
    Replies: 10
    Last Post: 05-17-2007, 10:34 PM
  5. cross browser print button specific content
    By sleipner in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-02-2006, 05:35 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •