zeroclipboard element not working when located ins

Question

I've got a page with jQuery tabs, and I'm trying to link a div element inside a secondary tab with zeroclipboard. Unfortunately, it's not working because I suspect the secondary tab is initially hidden when the page is loaded.

The html is the following:

<span id="form" class="tabs tabs-normal grid100">

   <!-- HEADER BUTTONS -->
   <div class="row_btns_header">
      <button class="btn_neutral">Cancel</button>
      <button class="btn_primary last save">Save</button>     
   </div>

   <!-- TABS -->
   <div class="row">
      <ul id="tabs-list">
        <li><a href="#blog">Blog</a></li>
        <li><a href="#links">Links</a></li>
        <li><a href="#images">Images</a></li>
        <li><a href="#more">More..</a></li>
      </ul>
   </div>

   <!-- DEFAULT TAB -->
   <div id="blog" class="container">

   </div>

   <!-- LINKS TAB -->
   <div id="links" class="container">
        <div id="embed" style="position: relative">
           <a href="#">Copy into the clipboard</a>
        </div>
   </div>

   <!-- etc. -->

The javascript is:

$(".tabs").tabs();

$("#embed").zclip({
        path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
        copy: "aaaaaaaaaaaa"
    });

zeroclipboard works correctly, if I move the #embed div inside the #blog div. I suspect this is because #blog is visible by default.

Any ideas what I need to do in order to get the zeroclipboard element to work when it's located inside a secondary non-default tab?

Much thanks.

Bardi

Answer 1

I realize this is an old thread, but hopefully this helps someone out there.

I just had the same problem and the solution I came up with was to bind the creation of the zclip object to a mouseover event tied to the desired trigger button/link. Also, to prevent the script from reinitializing the zclip object each time a mouseover event occurs, just turn it off when it is first called. Here's an example:

The HTML:

<input type='text' value='Text being copied.'/> <input type='button' class='clipcopy' value='Copy'/>

The Javascript:

$(document).ready(function(){


    $(".clipcopy").on('mouseover', function(){

        //turn off this listening event for the element that triggered this
        $(this).off('mouseover');

         //initialize zclip
        $(this).zclip({
            path: "js/zclip/ZeroClipboard.swf",
            copy: function(){return $(this).prev().prop('value');}
         });

     });
 });

Hope it helps!

Answer 2

The tabs plugin sets the tab panels to display: none, which means the Flash doesn't get started right away. You could try hacking it with CSS:

.container.ui-helper-hidden {
    display: block !important;
    position: absolute;
    left: -99999px;
}

This will override the display: none and instead position the panel off the screen - this way the content is loaded and the panel is measured, but won't be visible to the user. (This is the same way the .ui-helper-hidden-accessible used to work)

Answer 3

The point is initialize it on a mouseover event, I am use jquery.clipboard and this also work

$("a.button-copy-shortcode").on('mouseover', function(event){
    event.preventDefault();

    //initialize clipboard
    $(this).clipboard({
        path: pluginDir+'/tonjoo-tom/assets/js/jquery.clipboard.swf',
        copy: function() {

            var shortcode = $(this).find('.shortcodeValue').text();

            return shortcode;
        }
    });
});