CODEWITHSUNDEEP
jqueryhtmlcsshoverzeroclipboard
Dennis P
Dennis P

Reputation: 36

Zeroclipboard hover issue

I try to change the color of the entire <tr> on hover, however I can't get it to work with Zeroclipboard, also the cursor doesn't change, does anyone have an idea on how to get this to work?

(Atleast in my browser: Google Chrome Version 37.0.2062.124 m) with Zeroclipboard v2.1.6

My code below:

<html>
<head>
<style type="text/css">
.myTABLE { width: 100%; border-collapse: collapse; border: 1px solid black; background-color: lightgrey; }
.myTABLE td { border: 1px solid black; text-align: center; }
.myTABLE tr:hover { background-color: lightgreen; }
.mycopy.zeroclipboard-is-hover { background-color: lightgreen; cursor: hand; }
.mycopy.zeroclipboard-is-active { background-color: #46962B; }
</style>
</head>

<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>

<br><br><br>
<table class="myTABLE">
<tr><td>test</td><td class="mycopy">Copy 1</td><td>test</td></tr>
<tr><td>test</td><td class="mycopy">Copy 2</td><td>test</td></tr>
<tr><td>test</td><td class="mycopy">Copy 3</td><td>test</td></tr>
<tr><td>test</td><td class="mycopy">Copy 4</td><td>test</td></tr>
<tr><td>test</td><td class="mycopy">Copy 5</td><td>test</td></tr>
<tr><td>test</td><td class="mycopy">Copy 6</td><td>test</td></tr>
</table>

<script type="text/javascript">
var client = new ZeroClipboard( $('.mycopy') );

client.on( 'ready', function(event) {
// console.log( 'movie is loaded' );

client.on( 'copy', function(event) {
event.clipboardData.setData('text/plain', event.target.innerHTML);
} );

client.on( 'aftercopy', function(event) {
console.log('Copied text to clipboard: ' + event.data['text/plain']);
} );
} );

client.on( 'error', function(event) {
// console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
ZeroClipboard.destroy();
} );
</script>
</body>
</html>

Upvotes: 2

Views: 872

Answers (1)

manishie
manishie

Reputation: 5322

You forgot to enclose your javascript in the jQuery(document).ready(function() ... block. Or the short version as in my code below - $(function() ...

Click the button to run the code.

$(function() {
  ZeroClipboard.config({
    swfPath: "http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf"
  });
  var client = new ZeroClipboard($('.mycopy'));

  client.on('ready', function(event) {

    console.log(event.target);
    // console.log( 'movie is loaded' );

    client.on('copy', function(event) {
      event.clipboardData.setData('text/plain', 'test');
    });

    client.on('aftercopy', function(event) {
      console.log('Copied text to clipboard: ' + event.data['text/plain']);
    });
  });

  client.on('error', function(event) {
    // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
    ZeroClipboard.destroy();
  });
});
.myTABLE {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
  background-color: lightgrey;
}
.myTABLE td {
  border: 1px solid black;
  text-align: center;
}
.myTABLE tr:hover {
  background-color: lightgreen;
}
.mycopy.zeroclipboard-is-hover {
  background-color: lightgreen;
  cursor: hand;
}
.mycopy.zeroclipboard-is-active {
  background-color: #46962B;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>

<div class="mycopy">yo</div>
<br>
<br>
<br>
<table class="myTABLE">
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 1</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 2</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 3</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 4</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 5</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 6</td>
    <td>test</td>
  </tr>
</table>

Upvotes: 2

Related Questions