Problema css complejo de zeroClipboard

Question

Tengo una lista de imágenes y, con el mouse, hay un cuadro de opciones debajo, que tiene un cuadro de entrada de código integrado para copiar. ahora implementé zeroclipboard en él, para hacer que la función de copia funcione al hacer clic, así que cuando hago el mouse sobre la imagen, muestra el cuadro de opción correctamente, pero cuando tomo el mouse para hacer clic en el cuadro de entrada para copiar el código, cerrado, pensando que ya no está en la opción div, porque zeroclipboard tiene una división encima, por lo que el ratón lo pone y se cierra.

así que la solución fue crear ese div dentro de la opción div, que se ha estado encargando, pero ahora el estilo zeroclipboard div se muestra mal y no sé cómo solucionarlo.

los siguientes son los estilos para zeroclipboar, no sé qué estilo configurar, así que está arriba del cuadro de entrada, así que puedo hacer clic en él y funciona bien como lo hace usualmente.

    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

No sé cómo es su código, pero cuando muestra su cuadro de opciones usando hover o mouseover / mouseout, simplemente incluya la división cero del portapapeles ... algo como esto (creo que es el ID de objeto correcto para uso):

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

Answer 3

Cuando usé cero portapapeles, noté que era mejor moverlo a una posición negativa izquierda cuando no lo necesitaba. Tales como:

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

No entiendo muy bien tu pregunta, pero alejarla dinámicamente de donde te está causando problemas puede ser una forma de resolver tu problema.

Answer 4

Sólo para su interés:

Mi enfoque utiliza atributos de datos para activar la funcionalidad de copia. Además de eso, establece hover & amp; clases activas en el elemento raíz.

Uso:

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");
      }
    });