...

View Full Version : How do I hide print button from browsers W/ JS turned off?



gabe882
12-11-2009, 06:51 AM
Hi,
I'm trying to make my javascript linked "print" button NOT appear in browsers with js disabled? I'm a total js noob. Any help will be appreciated. Thanks.
Here's my code:


<a href="javascript:window.print()"><img src="images/PrintButton.png"></a>

abduraooft
12-11-2009, 06:59 AM
CSS

input#print{
display:none;
}
Javascript

window.onload=function(){
document.getElementById('print').style.display='inline';
}
html

<input type="image" alt="Print" value="Print" src="images/PrintButton.png" id="print">

gabe882
12-11-2009, 07:20 AM
Thanks abduraooft!
The "print" button now shows/ hides when JS is on/off, but when clicked, it does not pull up a "print" dialogue box in the browser?

abduraooft
12-11-2009, 08:03 AM
The "print" button now shows/ hides when JS is on/off, but when clicked, it does not pull up a "print" dialogue box in the browser?Oops, I missed the important part :o. The js part should be something like

window.onload=function(){
var elm=document.getElementById('print')
elm.style.display='inline';
elm.onclick=function (){
window.print();
}
}

Bill Posters
12-11-2009, 08:30 AM
Even better would be to use js to add the print() link/button to the page. That way, even fewer users might encounter an unusable print link/button.
Have an empty holder element and append the clickable element(s) used to trigger the print functionality.

(I'd also be inclined to go with targeting a class, rather than an id, as it gives you the option to add more than one print link/button to a page using a single function.)

Of course, there s the view that it's not necessarily a good idea to reproduce functionality already provided by browsers themselves such as printing and text-resizing.

Something to consider.

gabe882
12-11-2009, 08:43 AM
Oops, I missed the important part :o. The js part should be something like

window.onload=function(){
var elm=document.getElementById('print')
elm.style.display='inline';
elm.onclick=function (){
window.print();
}
}

Strangely, this works when I preview it in my browsers (Firefox & Safari) locally, but when I view it live on the web, the button doesn't show. I double checked that I had uploaded all the necessary files. I am very new with this and may be calling the script incorrectly?

I have a javascript file named da.js, the css is in the document head, and here is what I put in the xhtml body:



<script src="../Scripts/da.js" type="text/javascript"></script>
<input type="image" alt="Print" value="Print" src="images/PrintButton.png" id="print">

gabe882
12-11-2009, 08:54 AM
Of course, there s the view that it's not necessarily a good idea to reproduce functionality already provided by browsers themselves such as printing and text-resizing.

Something to consider.

Thanks for your comments on this.
That's a good point. My goal is really to show the reader (who wants to print a page) how the page will look when printed, because I have a print style sheet (css) that changes to formatting to almost all text. I want the user to know what to expect when the page prints.

Is there Java Script that can call a print preview? That may be better. I would still want to hide it from non-js enabled browsers.

abduraooft
12-11-2009, 08:56 AM
I think this is what Bill Posters suggested.

var str='<input type="image" alt="Print" value="Print" src="images/PrintButton.png" onclick="window.print();">';
document.write(str);

gabe882
12-11-2009, 09:22 AM
I think this is what Bill Posters suggested.

var str='<input type="image" alt="Print" value="Print" src="images/PrintButton.png" onclick="window.print();">';
document.write(str);


Awesome! That worked. Thank you both very much!

Bill Posters
12-11-2009, 12:40 PM
I think this is what Bill Posters suggested.

var str='<input type="image" alt="Print" value="Print" src="images/PrintButton.png" onclick="window.print();">';
document.write(str);

…though I'd be inclined to avoid using document.write in favour of a less obtrusive approach.

:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum