Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    whats the best way to print the contents of a div?

    Heyhey,

    If i have three sections of one page that i want to allow people to print individually (via 3 different print buttons)

    am i better off simply having three .htm files to call and print, or is there a way to say "pass the contents of this div to the printer"?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The three html files might be the easy and more accessible solution but you could do it dynamically as well. HTML has the ability to choose stylesheets based off of the media attribute.
    Code:
    <style type="text/css" media="print">
    /*print css here*/
    </style>
    You can have 3 stylesheets where each stylesheet will set one section of content to display:block; and everything else to display:none. Then you can call a javascript function to switch the print stylesheet and then call window.print(). I recommend using a link that has the external pages but also calls the function onclick with return false at the end of the onclick this way if js is enabled they get the dynamic printing, if not they get directed to the external pages.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    its a good idea, but all the sections are visible at once.

    the context is that I'm providing users driving directions to a particular location. there are three ways they can come so I wanted to allow them to print only the direction they want.

    i think i'll go with the html... i'm complicating my life aren't I
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    this is a css question but I'll ask it here because it relates.

    if I use the 3 html file approach, how do i make my links work like this?

    Code:
    <link rel=alternate media=print href="print_linecard.html">
    this prints an external link without opening it... but this particular code is a 'page-wide' code. how do i recode this to get the effect onclick?

    (basically I need to have the href in the above code dependant on what link is clicked)
    Last edited by canadianjameson; 11-06-2006 at 06:48 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You shouldn't be putting links to other pages in the link tag. You should be changing the stylesheet. Look up a stylesheet changer. There are plenty out there. You'll probably want a JS one.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The alternate page to print option only works in IE. All other browsers will just print whatever part of the current page that the current print media stylesheet tells it to.

    What you need to do is set up the Javascript in the print buttons to switch the print media stylesheet to be the one that hides everything except what you want that button to print.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Someones bound to shout at me but take a look at this js example that prints the contents of a div(s), see if this will do

    http://www.huntingground.freeserve.c...s/printing.htm

    Not sure how cross browser it is though
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Seems to work in firefox but would be nice if the popup closed by itself hmm or maybe the content was loaded into a hidden iframe and then the iframe was printed.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Aero, you hit on what i was trying to get at.

    Would loading the div content into a hidden iframe and then printing it work? if so, how?

    Maybe you can explain how changing the stylesheet would help... because a stylesheet (to my knowledge) only changes the appearance of the page, which I don't want.... I just want a section of the page to be printed.

    for ex: http://collab.concordia.ca/english.html --> click on Directions. This is what I want to do. I want to give people the option of just printing their own route instead of the whole page
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You use a stylesheet to change the "print" appearance of the page so that all of the parts you don't want are display:none
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #11
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    hers is what you do:

    create a hidden iframe as suggested.... have the iframe load a html file whos' html is as such:

    Code:
    <html>
    <head>
    <link href="yourcssfile.css">
    <script type=text/javascript>
    function PrinT(){
    self.focus();
    self.print();
    }
    </script>
    </head>
    <body>
    <div id=printarea></div>
    </body>
    </html>

    then in your main page have the buttons call to a function that grabs the innerHTML (or outerHTML, which ever you prefer) of the section of the page you want to print. it then writes that into the iframe. after writing it to the iframe, it then calls the function inside the iframe. and there you have it.



    main file should contain the below some where:
    Code:
    <iframe src="print.html" id=IF1 name=IF1></iframe>
    
    script type=text/javascript>
    function printDiv(divid){
    IF1.document.getElementById('printarea').innerHTML=document.getElementById(divid).innerHTML;
    IF1.PrinT();
    }
    </script>
    be sure that if you are using .css files that both the main window and the iframe have the <link> to them.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Seems to work in firefox but would be nice if the popup closed by itself hmm or maybe the content was loaded into a hidden iframe and then the iframe was printed.
    No iframe was used and it does close in IE but I've yet to find a way to close itself in Firefox
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Other browsers will automatically print the current page when you select print. The only cross browser way to do it is to swap media=print stylesheets that hide everything except the div to be printed.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    To explain what Felgall is talking about, its something like this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link rel="stylesheet" href="defaultstyle.css" type="text/css" media="screen, print" />
    <link rel="stylesheet" href="dir1.css" type="text/css" media="print" id="printsheet" />
    <script type="text/javascript">
    function printDir(what)
    {
    	document.getElementById('printsheet').setAttribute('href',what+'.css');
    	window.print();
    	return false;
    }
    </script>
    </head>
    <body>
    <div class="box" id="directions1">This is directions 1</div>
    <a href="#" onclick="return printDir('dir1');" id="print1">Print Directions 1</a>
    <div class="box" id="directions2">This is directions 2</div>
    <a href="#" onclick="return printDir('dir2');" id="print2">Print Directions 2</a>
    <div class="box" id="directions3">This is directions 3</div>
    <a href="#" onclick="return printDir('dir3');" id="print3">Print Directions 3</a>
    </body>
    </html>
    defaultstyle.css
    Code:
    html, body {
    margin:0;
    padding:0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:0.9em;
    }
    .box {
    border:1px solid #000;
    background:#EEE;
    color:#000;
    margin:3px;
    padding:3px;
    }
    dir1.css
    Code:
    #directions2, #directions3, #print1, #print2, #print3 {
    display:none;
    }
    dir2.css
    Code:
    #directions1, #directions3, #print1, #print2, #print3 {
    display:none;
    }
    dir3.css
    Code:
    #directions1, #directions2, #print1, #print2, #print3 {
    display:none;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #15
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i see i see

    why couldn't i simply re-use the dir1.css, as the others are exact replicas?

    p.s: thank you all for your help, this is awesome
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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