problema css complesso zeroClipboard

Question

ho un elenco di immagini e al passaggio del mouse c'è sotto una finestra di opzione che mostra una casella di input del codice da cui copiare. ora ho implementato zeroclipboard su di esso, per far funzionare la funzione di copia su clic, quindi quando passo il mouse sull'immagine, mostra correttamente la casella di opzione, ma quando prendo il mouse per fare clic sulla casella di input per copiare il codice, l'opzione ottiene chiuso, pensando che non sia più in opzione div, perché zeroclipboard ha div su di esso in modo che il mouse lo accenda e si chiuda.

quindi la soluzione era quella di creare quel div all'interno dell'opzione div, di cui si è preso cura, ma ora lo stile div di zeroclipboard sta mostrando male e non so come ripararlo.

Di seguito è riportato lo stile di zeroclipboar, non so quale stile impostare su di esso, quindi è sopra la casella di input, quindi posso fare clic su di esso e quindi funziona bene come al solito.

    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

Non so come sia il tuo codice, ma quando visualizzi la tua casella delle opzioni usando hover o mouseover / mouseout, includi solo il div zero negli Appunti ... qualcosa del genere (credo che sia l'ID oggetto corretto per uso):

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

Answer 3

Quando ho usato zero appunti, ho notato che era meglio spostarlo in una posizione sinistra negativa quando non ne avevo bisogno. Come ad esempio:

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

Non capisco bene la tua domanda, ma spostarla dinamicamente da dove ti sta causando problemi potrebbe essere un modo per risolverlo.

Answer 4

Solo per il tuo interesse:

Il mio approccio utilizza attributi di dati per attivare la funzionalità di copia. Inoltre imposta le classi attive hover & amp; sull'elemento radice.

Utilizzo:

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