Can't get ZClip to work

Question

I know it works even on this site but only when I trigger it via the h1 element, and I need to trigger it via an image (representing copy) but when I try it simply won't work. Here's my Javascript:

$('#copyTxt').click(function(){
       alert($('#Txt2Copy').text());
       $(this).zclip({
           path: '/scripts/js/ZeroClipboard.swf',
           copy: $('#Txt2Copy').text(),
           afterCopy: function(){
               alert($('#Txt2Copy').text() + " was copied to clipboard");
           }
       });
    });

The alert was just for me to make sure it reaches and it does it just won't copy, if I add the beforeCopy I do get a message there but it moves no further.

The id copyTxt has been moved to a span, an img, tr, td, and the table itself but it just WON'T work unless I fire the event from the H1. The HTML in which the image is:

<tr>
          <td><label for="navUrl">Navigation URL &nbsp;<img id="copyTxt" src="/images/copy.png"/></label></td>
          <td id="Txt2Copy"><?= $this->order["order"]["navigationUrl"] ?></td>
        </tr>

Answer 1

This is an absolute positioning problem. This question has been answered here:
zclip not working inside table

I had the same problem it is fixed now!

So in your case add a wrapper to your link, like this:

<div style="position:relative">
<img id="copyTxt" src="/images/copy.png"/>
</div>

Answer 2

I have been having the same problem. In my case I found that zclip just wouldn't work if the click object was in a table cell. So the following html worked:

<a id="copy-button">Copy</a>

But this just wouldn't:

<table><tr><td><a id="copy-button">Copy</a></td></tr></table>

Using firebug I found out that the transparent flash window overlay is getting positioned in the wrong place on the page. When i found out where it was I could click on it and it worked ok. However, I don't understand why it is not positioned over the actual click object.