CODEWITHSUNDEEP
javascriptjqueryhtml
Surfer87
Surfer87

Reputation: 21

JQuery print button not showing up

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>

Upvotes: 0

Views: 226

Answers (2)

Sam Creamer
Sam Creamer

Reputation: 5361

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.

Upvotes: 0

Ricardo Nu&#241;ez
Ricardo Nu&#241;ez

Reputation: 989

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>

Upvotes: 3

Related Questions