Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question How do I hide print button from browsers W/ JS turned off?

    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:
    Code:
    <a href="javascript:window.print()"><img src="images/PrintButton.png"></a>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    CSS
    Code:
    input#print{
    display:none;
    }
    Javascript
    Code:
    window.onload=function(){
    document.getElementById('print').style.display='inline';
    }
    html
    Code:
    <input type="image" alt="Print" value="Print" src="images/PrintButton.png" id="print">
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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 . The js part should be something like
    Code:
    window.onload=function(){
    var elm=document.getElementById('print')
    elm.style.display='inline';
     elm.onclick=function (){
      window.print();
     }
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Oops, I missed the important part . The js part should be something like
    Code:
    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:

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

  • #7
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Bill Posters View Post
    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.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I think this is what Bill Posters suggested.
    Code:
    var str='<input type="image" alt="Print" value="Print" src="images/PrintButton.png" onclick="window.print();">';
    document.write(str);
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    gabe882 (12-13-2009)

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by abduraooft View Post
    I think this is what Bill Posters suggested.
    Code:
    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!

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by abduraooft View Post
    I think this is what Bill Posters suggested.
    Code:
    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.


  • Users who have thanked Bill Posters for this post:

    gabe882 (12-13-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •