Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Print Button Problems 2

Status
Not open for further replies.

Mighty

Programmer
Feb 22, 2001
1,682
US
This is a double barrelled question as I am having IE/Netscape problems. On my website, i have a "Printer Friendly" version button which opens the selected page in a new window without all the navigation, etc and with a print button at the bottom. That part works fine.

The code for the print button is as follows:

<IMG ID=&quot;Print&quot; ALIGN=&quot;BOTTOM&quot; BORDER=0 SRC=&quot;images/general/print.jpg&quot; STYLE=&quot;cursor: hand;&quot; onClick=&quot;window.print();&quot;>

The first problem is that the cursor style does not change to a hand in Netscape - works fine in IE5. Any ideas on this.

The second problem happens when you actually print the page. I don't want to the print the Print button when the page is printed. To this end, i added the following code:

function window.onbeforeprint()
{
// Hide the print button
document.getElementById(&quot;Print&quot;).style.display = 'none';
}

function window.onafterprint()
{
// Hide the print button
document.getElementById(&quot;Print&quot;).style.display = 'block';
}

Again, this works fine in IE but not in Netscape. Any advice would be greatly appreciated.

Mighty
 
Hi Mighty
For problem one, try cursor:pointer instead.

For problem two, try using the 'media' class of CSS to hide it when the media type is print.
Here is a link that may help with that:

Hope I helped / Thanks for helping
if ((Math.abs(x)<10&&Math.abs(y)<10) && (((parseInt(Math.abs(x).toString()+Math.abs(y).toString())-Math.abs(x)-Math.abs(y))%9)!=0)) {alert(&quot;I'm a monkey's uncle&quot;);}
 
HellTel,

The cursor: pointer worked - thanks!

I'm not too sure about the media CSS class. I use this on my intranet and I thought it was IE specific. I certainly could never get it to work in Netscape.

Mighty
 
Thanks for the star! [wiggle]

Sorry, I've not actually used the media class myself, just know of its existence. I haven't got Netscape installed at the moment to do any testing of other methods.

Anybody?

Hope I helped / Thanks for helping
if ((Math.abs(x)<10&&Math.abs(y)<10) && (((parseInt(Math.abs(x).toString()+Math.abs(y).toString())-Math.abs(x)-Math.abs(y))%9)!=0)) {alert(&quot;I'm a monkey's uncle&quot;);}
 
<IMG ID=&quot;Print&quot; ALIGN=&quot;BOTTOM&quot; BORDER=0 SRC=&quot;images/general/print.jpg&quot; STYLE=&quot;cursor: hand;&quot; onClick=&quot;window.print();&quot; class=&quot;printimg&quot;>

now create a CSS (call it whatever you want [I'm usin printfriendly.css for this example])and add the link on top of the page you want to print.

<link rel=&quot;stylesheet&quot; media=&quot;print&quot; type=&quot;text/css&quot; href=&quot;printfriendly.css&quot;>

This can co-exist with any other CSS that you may already have on the page.(unless the media is the same and there are conflicting declarations)
Now on your new file just add a class definition like this

.printimg{
visibility:hidden;
}


Voila! the image should magically dissapear when sending to the printer. (or using the Print Preview Feature of IE).

Now if you have Headers, Footers, Navigation and probably even an ad section I'm guessing that you wouldn't like all that to be printed.
For that the best solution using only CSS and not creating a second script to strip all those sections is:


I recommend you read the article and you'll see how easy is to create printer friendly pages with minimum effort.

Suerte! (good luck)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top