JQuery print button not showing up

Question

Im very new to jquery, and I'm trying to use it to put a print button at the bottom of my very simple webpage, but I can't get it to show up at all. (I will have more content on the page to print, I simple haven't included it yet as it isn't necessary) Here is the code I have so far:

<html>
<head>
<h1>This is my webpage</h1>
</head>
<body>
<div class="col_2">
<script>
<img src="print.png" class="printMe" alt="Print" title="Print"></a>
$('.printMe').click(function(){
     window.print();
});
</script>
<img src="gvsu.png">
<a href="https://www.linkedin.com"><img src="linkedin.png" alt="HTML tutorial" width="42" height="42"></a>
<a href="https://www.twitter.com"><img src="twitter.png" alt="HTML tutorial" width="42" height="42"></a>
<a href="https://www.facebook.com"><img src="fb.png" alt="HTML tutorial" width="42" height="42"></a>
</div>
</body>
</html>

Ricardo Nuñez · Accepted Answer · 2014-06-12 02:51:44Z

3

I rewrote the code and added the jquery library. This version will work fine. Just replace with your own image.

<html>
<head>
<title>This is your page title</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="col_2">
<h1>This is my webpage</h1>
<img src="print.png" class="printMe" alt="Print" title="Print" />
<img src="gvsu.png" />
<a href="https://www.linkedin.com"><img src="linkedin.png" alt="HTML tutorial" width="42" height="42"></a>
<a href="https://www.twitter.com"><img src="twitter.png" alt="HTML tutorial" width="42" height="42"></a>
<a href="https://www.facebook.com"><img src="fb.png" alt="HTML tutorial" width="42" height="42"></a>
</div>

<script>
$(document).ready(function() {
    $('.printMe').click(function(){
    window.print();
    });
});
</script>

</body>
</html>

edited Jun 12, 2014 at 2:51

answered Jun 12, 2014 at 2:44

Ricardo Nuñez

9891 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sam Creamer · Accepted Answer · 2014-06-12 03:18:58Z

0

Just put your <img> code in your HTML and you should be fine assuming your javascript (jQuery) is good! Here:

<html>
<head>
  <title> Hi </title>

</head>
<body>
    <div class="col_2">
    <h1>This is my webpage</h1>
    <img src="gvsu.png">
    <a href="https://www.linkedin.com"><img src="linkedin.png" alt="HTML tutorial" width="42" height="42"></a>
    <a href="https://www.twitter.com"><img src="twitter.png" alt="HTML tutorial" width="42" height="42"></a>
    <a href="https://www.facebook.com"><img src="fb.png" alt="HTML tutorial" width="42" height="42"></a>
    <img src="print.png" class="printMe" alt="Print" title="Print" />
    </div>
</body>
 <script>
    $(document).ready(function(){
     $('.printMe').click(function(){
         window.print();
     });

    })       
</script>
</html>

edit: I reorganized it a bit for you. Usually, keep your scripts in the head or at the bottom of the page.

edited Jun 12, 2014 at 3:18

answered Jun 12, 2014 at 2:42

Sam Creamer

5,38113 gold badges39 silver badges49 bronze badges

2 Comments

RaviH Over a year ago

For faster page loading time scripts should be at the bottom of the page, not in header. Only CSS should be in the header.

Konsole Over a year ago

You should put the script in the footer or wait till the DOM is ready. Wrap the script inside $(document).ready().

Collectives™ on Stack Overflow

JQuery print button not showing up

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related