zeroClipboard komplekse css probleem

Question

Ek het 'n lys van beelde en op die muis oor is daar opsie boks wys onder dit, wat ingebedde kode invoer boks het om van te kopieer.nou het ek zeroclipboard daarop geïmplementeer, om die kopieerfunksie te laat werk met klik, so wanneer ek oor die prent beweeg, wys dit die opsiekassie behoorlik, maar as ek die muis op die invoerkassie klik om die kode te kopieer, kry die opsie gesluit, dink dit is nie meer in opsie div nie, want zeroclipboard het div bo-op, so die muis gaan daarop en dit word gesluit.

so oplossing was om daardie div binne die opsie div te skep, wat gesorg het, maar nou wys zeroclipboard div-styl verkeerd en ek weet nie hoe om dit reg te stel nie.

Die volgende is die styl vir zeroclipboar, ek weet nie watter styl om daarop te stel nie, so dit is bo die invoerkassie, sodat ek daarop kan klik en so werk dit goed soos dit gewoonlik doen.

    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

Ek weet nie wat jou kode lyk, maar wanneer jy jou opsies box by met hover of mouse over / mouseout vertoon, net insluit die nul knipbord div ... iets soos hierdie (ek glo dit is die korrekte voorwerp ID vir gebruik):

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

Answer 3

Toe ek nul-knipbord gebruik het, het ek opgemerk dat dit die beste was om dit na 'n negatiewe linkerposisie te skuif wanneer ek dit nie nodig het nie.Soos:

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

Ek verstaan ​​nie mooi jou vraag nie, maar om dit dinamies weg te skuif van waar dit jou probleme veroorsaak, kan dalk 'n manier wees om jou probleem op te los.

Answer 4

Net vir jou belangstelling:

My benadering gebruik data skryf aan die kopie funksie te aktiveer. Behalwe dat dit stel hover & aktiewe klasse op die hoof element.

Gebruik:

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