zeroClipboard complex css problem

Question

i have list of images and on mouse over there is option box shows under it, which has embeded code input box to copy from. now i implemented zeroclipboard on it, for making copy function work on click, so when i do mouse over on image, it shows the option box properly, but when i take mouse to click on the input box to copy the code, the option gets closed, thinking its not in option div anymore, because zeroclipboard has div on top of it so mouse goes on it and it gets closed.

so solution was to create that div inside the option div, which has been taking care of, but now zeroclipboard div style is showing wrong and i dont know how to fix it.

following are the style for zeroclipboar, i dont know what style to set on it, so its above the input box, so i can click on it and so it works fine like it usally does.

    on line 107 in zeroclipboard.js
var style = this.div.style;
    style.position = 'absolute';
    style.left = '' + box.left + 'px';
    style.top = '' + box.top + 'px';
    style.width = '' + box.width + 'px';
    style.height = '' + box.height + 'px';
    style.zIndex = zIndex;

Answer 1

$("input[name='htmlcode'], input[name='directlink'], input[name='emaillink'], input[name='imgcode']").live('mouseover', function() {

        clip = new ZeroClipboard.Client();
        clip.setHandCursor( true );
        clip.setText($(this).val());

        var width = $(this).width();
        var height =  $(this).height()+10;
        var flash_movie = '<div>'+clip.getHTML(width, height)+'</div>';
        // make your own div with your own css property and not use clip.glue()
        flash_movie = $(flash_movie).css({
            position: 'relative',
            marginBottom: -height,
            width: width,
            height: height,
            zIndex: 101
            })
        .click(function() { // this puts copied indicator for showing its been copied!
            $(this).next('input').indicator({className: 'copied', wrapTag: 'div', text: 'Copied!', fadeOut: 'slow', display: 'after'});
        });

        $(this).before(flash_movie); // if you want to put after and not before, then you have to change the marginBottom to marginTop
    });

Answer 2

Just for your interest:

My approach uses data attributes to activate the copy functionality. In addition to that it sets hover&active classes on the root Element.

Usage:

HTML:

 <button data-zc-copy-value="this is the text to copy">some text<button>

Javascript:

  $(document).on('mouseover', '*[data-zc-copy-value]', function() {
      var that = $(this),
          width = that.outerWidth(),
          height =  that.outerHeight();

      if(that.data("zc-activated") !== "true"){
        // init new ZeroClipboard client
        clip = new ZeroClipboard.Client();
        clip.setHandCursor( true );
        clip.setText(that.data('zc-copy-value'));

        var flash_movie = '<div>'+clip.getHTML(width, height)+'</div>';
        // make your own div with your own css property and not use clip.glue()
        flash_movie = $(flash_movie).css({
          position: 'relative',
          marginBottom: -height,
          width: width,
          height: height,
          zIndex: 101
        });

        // delegate mouse events
        flash_movie.hover(function(){
          that.addClass('hover');
        },function(){
          that.removeClass('hover');
        });
        flash_movie.mousedown(function(){
          that.addClass('active');
        });
        flash_movie.mouseup(function(){
          that.removeClass('active');
        });

        // add flash overlay
        $(this).before(flash_movie); // if you want to put after and not before, then you have to change the marginBottom to marginTop

        that.data("zc-activated", "true");
      }
    });

Answer 3

I don't know what your code looks like, but when you display your options box using hover or mouseover/mouseout, just include the zero clipboard div... something like this (I believe that is the correct object ID to use):

$('img.someimage, .optiondiv, #ZeroClipboardMovie_1').hover(function(){
  $('.optiondiv')
  // positioning stuff here
  .show()
})

Answer 4

When I used zero clipboard, I noticed that it was best to move it to a negative left position when I didn't need it. Such as:

#clipboardContainer {position:absolute; top:0; left:-1000px;}

I don't quite understand your question, but dynamically moving it away from where it is causing you problems might be a way to solve your problem.