Print preview with specific content

[izzysanime]

Hi,

I was looking for a script that can make a print preview, but I need it to print only specific stuff. Mainly, all i need is for it to not print the submit and print buttons.

Thanks
Josh

[mwinter]

I was looking for a script that can make a print preview, but I need it to print only specific stuff. Mainly, all i need is for it to not print the submit and print buttons.

Create a print style sheet that hides the unnecessary elements. You link to it in a similar way to normal, only adding a media attribute:

<link rel="stylesheet" ... media="print">

[izzysanime]

ok, but how do you define the specific areas? Do you mean use div id= whatever?

I used this source http://javascript.internet.com/misce...o-preview.html

which has its on print style css, which is good, It can print preview it, but then it just prints the entire page. I made divs with ID=content.

Thanks
josh

[mwinter]

ok, but how do you define the specific areas? Do you mean use div id= whatever?

That's one way. Alternatively, you could use the class attribute. Even the document hierarchy (how the elements are nested within other elements) if that's sufficient.

I used this source http://javascript.internet.com/misce...o-preview.html

Don't. Once again, javascript.internet.com is proving to be a complete waste of bandwidth.

Without a link to your current document, and with a clear indication of what needs to be removed, I can't be too specific.

[izzysanime]

I dont suppose you have a good example of this?

[boogyman]

I dont suppose you have a good example of this?

Without a link to your current document, and with a clear indication of what needs to be removed, I can't be too specific.

??? Did you not understand what Mike said replied with? please give us a link and what you want removed

[izzysanime]

O , i understood, i thought there might be an example before you guys looked at it.

I just needed to take out the submit and print button at bottom.

http://wareriver.com/clients/fs/invoice_form.html

[mwinter]

I dont suppose you have a good example of this?

Not at the moment, no. There might be a demonstration somewhere on my webspace, but I'm not going to look for it now (it's too late and I'll be going to sleep soon).

As you've placed the controls in a div element, this container can be hidden. First, remove the link and script element that refer to print_preview.css, and delete that file from your Web server. It's junk and if it were tangible, I'd advise you to burn it. Then, change the remaining link element from

<link rel="stylesheet" href="form_files/style.css">

to:

<link rel="stylesheet" href="form_files/style.css" type="text/css" media="all">

and add below that:

<link rel="stylesheet" href="form_files/print.css" type="text/css" media="print">

where print.css contains:

#nav {
    display: none !important;
}

If you discover any other tweaks necessary for printing, insert them into that file.

Hope that helps

[izzysanime]

ok, thanks for helping me. Unfortunately that does nothing. Am i supposed to change

<input type="button" name="print" value="Print" id="print" onclick="print_preview(); return false;"/>

to something different?

The Print button does not work now.

Thanks, have a good night sleep ^_^
Josh

[mwinter]

Unfortunately that does nothing.

Doubtful.

Am i supposed to change

<input type="button" name="print" value="Print" id="print" onclick="print_preview(); return false;"/>

to something different?

Yes, you remove it.

The Print button does not work now.

It's not supposed to. The browser itself will make the changes necessary. Every browser that I can remember using has a print preview function built in, and it will use the print style sheet to determine how to render the document.

Why duplicate functionality that someone else (the browser vendor) already went through the trouble of writing?