Problème CSS complexe zeroClipboard

Question

J'ai la liste des images et sur la souris, il y a une boîte à options sous celle-ci, qui contient une boîte de saisie de code à copier. Maintenant, j’ai implémenté zeroclipboard dessus, pour que la fonction de copie fonctionne avec le clic, donc quand je passe la souris sur l’image, elle affiche la boîte d’option correctement, mais lorsque je prends la souris pour cliquer sur la zone de saisie pour copier le code, l’option obtient fermé, pensant qu'il n'est plus dans l'option div, car zeroclipboard est divisé par dessus, donc la souris passe dessus et se ferme.

La solution a donc été de créer cette div à l’intérieur de l’option div, qui s’est occupée de maintenant, mais le style de zeroclipboard div est erroné et je ne sais pas comment le réparer.

Les éléments suivants sont le style de zeroclipboar, je ne sais pas quel style utiliser, donc sa position au-dessus de la zone de saisie, je peux donc cliquer dessus pour que tout se passe bien, comme d'habitude.

    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

Je ne sais pas à quoi ressemble votre code, mais lorsque vous affichez votre zone d'options à l'aide de la souris ou du survol / souris, vous incluez simplement le div du Presse-papiers zéro ... quelque chose comme ceci (je crois que c'est l'ID d'objet correct utiliser):

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

Answer 3

Lorsque j’utilisais le Presse-papiers zéro, j’ai remarqué qu’il était préférable de le placer en position de gauche négative lorsque je n’en avais pas besoin. Tels que:

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

Je ne comprends pas bien votre question, mais l'éloigner de manière dynamique de l'endroit où il vous pose des problèmes pourrait être un moyen de résoudre votre problème.

Answer 4

Juste pour votre intérêt:

Mon approche utilise des attributs de données pour activer la fonctionnalité de copie. De plus, il place le survol et les classes actives sur l’élément racine.

Utilisation:

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