Grow your CSS skills. Land your dream job.

Printing a div

  • # September 21, 2011 at 6:28 pm

    This is Probably a dumb question but is there some easy way to make a div a link or something to when you click the link it prints.

    # September 21, 2011 at 6:59 pm

    To clarify: You mean so when you click a link/button your printing options pop up?

    # September 22, 2011 at 12:16 am

    What I am actually wanting is a div with only text in it, to pull up the printing options when you click on it anywhere. But I only want it to print what is inside the div and nothing else on the page. Sorta like printing text on a page but only certain text. It’s kinda confusing let me know if you don’t understand.

    # September 22, 2011 at 12:18 am

    I didn’t want to have to make a print stylesheet but there may be no other way for what i’m wanting.

    # September 22, 2011 at 5:13 am

    I’m sure you could so this with javascript (and probably a print stylesheet) but I have no talents whatsoever on that score.

    # September 22, 2011 at 7:27 am

    Yeah, I’ve never heard anything being done like this.

    # September 22, 2011 at 9:30 am

    I didn’t think I was going to be able to do it. I wish there was some kind of plugin for it.

    # September 22, 2011 at 9:35 am

    Plug in? Is this for a CMS…in which case there probably is.

    # September 22, 2011 at 9:45 am

    I’ve done something like this before… the problem is the browser, by default, will print the entire page. So the trick is to open up a new window with the content you want printed, then have the browser print the contents of that window.

    I put together an example for you… it has a few variables you can modify such as “autoPrint” which when true will automatically start printing, well the print option window should pop up. Otherwise you need to click the print button inside the popup window. Then manually close the popup – I don’t think there is any way around that.

    I hope that helps!

    # September 22, 2011 at 9:48 am

    @ Mottie Very nice…and JS as I thought although less complex that I had imagined.

    # September 22, 2011 at 10:03 am

    That is exactly what I’m looking for thanks everyone.

    # March 16, 2013 at 12:28 pm

    How Can i load CSS If i use CTRL+P in Google Chrome.

    I can maintain the print command from button click events like that. But when i use CTRL + P in google Chrome …it does not inherit the CSS.

    # March 19, 2013 at 6:54 pm

    Hi vebbymastidude!

    You should just include the print styling in your main css. Use a link with media=”print” or use an inline `@media print`. Check out [this guide](http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml).

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".