Question

I was using zclip copy to clipboard function successfully until I started using twitter bootstrap css framework.
Now I can’t seem to use zclip anymore, does anybody have a solution for that?

Some test results:

Here is how I use zclip:

    $('.test').zclip({
        path:"{{ asset('bundles/yopyourownpoet/flash/ZeroClipboard.swf') }}",
        copy: 'test',
        afterCopy:function(){
            alert('The poem has been copied to the clipboard.');
        },
    });

This works fine with the following html:

<div class='test'>test</div>

But whenever I try to use an image, it doesn’t work anymore, the flash thing won’t appear:

<div class='test'><img src="{{ asset('bundles/yopyourownpoet/images/Star.png') }}" alt="Star" height="100" width="100" /></div>

This was working great before I started using bootstrap…
Any hint for using zclip & bootstrap, and have the flash thing over an image?
Thanks a lot.

Answer 1

Well, after a lot of tries, I finally have it working. I had to revert to zeroclipboard and not use zclip anymore.
Here is the code that’s working:

    <div id="d_clip_container" style="position:relative; bottom: 25px; display: inline;">
        <img id='d_clip_button' style="position:relative; top: 25px;" src="{{ asset('bundles/yopyourownpoet/images/CopyPoemPage8.png') }}" alt="Copy Poem" height="71" width="300" />
    </div>

–

    ZeroClipboard.setMoviePath("{{ asset('bundles/yopyourownpoet/flash/ZeroClipboard.swf') }}");
    var clip = new ZeroClipboard.Client();
    clip.setText( 'text to copy' );
    clip.glue( 'd_clip_button', 'd_clip_container' );
    clip.setHandCursor( true );

Note that I had to use a trick, bottom 25px on the container and top 25px on the image, so that the flash thing is superposed with the image.

This is working good, except that the cursor isn’t always changed to pointer when hovering the image.

I think this solution is a bit shady though, so if anybody has a better solution please share it.