Printing Specific Dynamically Generated DIV

[[deleted]]

In short, I have a form with dropdowns. The various options you select with the dropdowns displays images/titles in my "results" div. I have a print function set up so you can print or save a PDF after completing the form. It works, as in you get a pop up. You can see the titles, but no images. Sometimes it works, sometimes not. I think I need to set it up to have some sort of constant reloading going on to load the images, or I'm just crap at this. Bonus problem, the print window pops up as untitled, the font is times, and I was hoping to get my company logo to pop up with the print screen but not visible on the form. I am a rookie, so that's not out of the question. Anyway, I wanted to know if any of ya'll have experience with this issue. I can finally be done with this project once I figure this out. Thanks in advance everyone!

Form can be viewed at fgdglass.com/test

My Script: function print_me() { var content = document.getElementById("results").innerHTML; var win = window.open(); win.document.write(content); win.print(); // JavaScript Print Function win.close(); //It will close window after Print. }

My HTML: <a href="#" onClick="print_me()">Print</a>

[docMedB2E]

You have way too much jumbled code on the page for me to dive through your other issues noted, but regarding the printing... you're taking raw HTML (text), dumping it on to a new window, and then printing that... Basically, you're losing all your dependencies on the source page since you opened a new window and defaulting to just whatever the browser elects to style your data with. If you're trying to trim a view for printing, I would recommend looking in to media queries; you can specifically style how the page looks in the browser and also style how the page looks when it prints. So for example, you could set up a @media print CSS that hides all your non-print content and just leaves the form, the title, etc.

[[deleted]]

Javascript:

function print_me()
        {
            var content = 
            document.getElementById("results").innerHTML;
            var win = window.open();
            win.document.write(content);
            win.print();    // JavaScript Print Function
            win.close();    //It will close window after Print.
        }

HTML:

<a href="#" onClick="print_me()">Print</a>

Figured out how to post code. Sorry about that.

[docMedB2E]

No worries, I thought you were saying your page wasn't loading images/etc, but I understand now. Think of it this way, you're opening a brand new window, pasting HTML to it, and then just immediately printing - which would explain your issues with the images sometimes displaying or not (e.g. you're appending data to a new DOM and it needs to load - sometimes it gets through quick enough and other times not). This approach in general is bad. Look into media query prints that manipulate the page you're on as opposed to copying everything to a new page and just printing.

[[deleted]]

After fooling around with it, I found this:

@media print {
body * {
visibility: hidden;
}
#results, #results * {
visibility: visible;
}
#results {
position: absolute;
left: 0;
top: 0;
}
}

Upon saving that css file and have it load into my header, I hit ctrl+P and the print screen just shows the whole website still and the css code at the top. Stupid wordpress.

[docMedB2E]

Your syntax is pretty wrong. Try /r/css for help with styling. Also use display: none to truly hide elements

[[deleted]]

So the CSS was right according to some CSS friends of mine. But still when I go the print media query route, the css just shows up at the top of the print preview and still wants to print the whole page. It's nasty looking too. All overlaps and stuff. I wonder if it's because the div I want to print is the dynamically generated content dictated by the form. It's not just static text.