PRINT ATTRIBUTE IN CSS? 1

[phototaker]

I want to place a button under a jpeg file on a page that when cllicked will print out only the jpeg file. I was told to set the print attributes in CSS but can't seem to find that function. Please advise. Thanks Richard

 

[lillu]

Hi,

Check out this link:

Mr3Putt (Programmer) 07/17/03 (posted 07/16/03) 10 replies
Linking to CSS for media="print" ?

Well, actually what you do is you make a stylesheet you want your documents appear when printed then put this into between the <link /> element inside the html's head:

<link rel=&quot;stylesheet&quot; src=&quot;print.css&quot; media=&quot;print&quot; />

http://www.geocities.com/lillamarta

http://www.geocities.com/lillamarta/purple

 

[phototaker]

I guess there is something I am just not getting. Im sure it's my brain,I guess, but I still don't see anywhere to create or select a print.css. Please enlighten me if possible. I read the post of Mr3Putt before I posted mine but its still is a bit foggy. Thanks Richard

 

[lillu]

Hi Richard,

Sorry I was unclear on that. I got confused by that mentioning of css althought to print something does not necessarily involve css just a javascript function:

window.print();

This always prints the current window with all the content. It's here when css comes in. Without opening a new window with a printer friendly page you can tell the browser to print a page for a different media this time (for the printer)

Well, but that's not entirely what you want. You want just the image.

What you actually can do is to create a different file and place everything on that you want to appear when the user clicks on that button that prints your picture. So you would just paste a picture and then open it in a new window then from that window with the image in it you call the event in the button like this

<input type=&quot;button&quot; value=&quot;Print image&quot; onclick=&quot;javascript:window.print();&quot;>

Again, I don't think you want to open new windows.

A workaround is a hidden frame that loads with your page.

<frameset rows=&quot;100%,*&quot;>
<frame src=&quot;mainpage.htm&quot; name=&quot;mainp&quot;>
<frame src=&quot;imagepage.htm&quot; name=&quot;imagep&quot;>
</frameset>

Put this in your main page:

<script language=&quot;JavaScript&quot;>
if (window.print)document.write('<form><input type=&quot;button&quot; value=&quot;Print&quot; onClick=&quot;parent.frames[imagep].focus();parent.frames[imagep].print()&quot;><\/form>');
</script>

Well, I heard there's some css workaround to this problem but I'm more into scripting so you have to check that out yourself.

HTH,

Lillu

If you want to get a job done, ask a busy person. (Sherry Conway Appel - American writer)

http://www.geocities.com/lillamarta

 

[lillu]

Sorry,

I have to correct something in the script:

<parent.imagep.focus();parent.imagep.print()&quot;><\/form>');

or you reference your imagep by its index number in the array of frames:

document.parent.frames[0] this is mainp' index number
document.parent.frames[1] this is imagep' index number

Just getting up you see.... ))




If you want to get a job done, ask a busy person. (Sherry Conway Appel - American writer)

http://www.geocities.com/lillamarta

 

[ThomasJSmart]

with CSS u can make a tag that keeps all the info for printing:

@media print {
body {
background-color: none;
font-size: 12pt;}
.noprint {
display: none;}


}

anything that u dont want to print u give give it the noprint class

<img src=&quot;bla.jpg&quot; class=&quot;noprint&quot; />






I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[phototaker]

Thanks, for the reply. I now realize that I can create a CSS document and type in what ever I want, just like a html page. Now this could be fun and powerful if I ever fully understand how it works. I thought I had could only use the options in the CSS window. I will work on getting this stuff working. The page I want to print only the certificate is

http://toyotagg.com/certificate.htm

Thanks again Richard

 

[ThomasJSmart]

cool toyota discount

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[phototaker]

Thanks, I got it to work by placing the last code you gave me in a CSS page I created and linking the two other images to the CSS document, just like I would if it were text and did not link the certificate to the CSS. Pretty neat. I have to check out more of the possibilities. Thanks again Richard