zeroClipboard 복잡한 CSS 문제

Question

나는 이미지의 목록을 가지고 있으며 그 위에 마우스로 복사 할 코드 입력 상자를 임베드 한 옵션 상자가 있습니다. 이제 zeroclipboard를 구현하여 클릭시 복사 기능을 수행하므로 이미지 위에 마우스를 올리면 옵션 상자가 제대로 표시되지만 입력 상자를 마우스로 클릭하여 코드를 복사하면 옵션이 표시됩니다. zeroclipboard에 div가 있기 때문에 닫힌 상태로 옵션 div에서 더 이상 생각하지 않도록 마우스를 움직여 닫습니다.

그래서 해결책은 div를 돌보는 가운데 div를 작성하는 것이었지만 이제는 zeroclipboard div 스타일이 잘못 표시되어 수정 방법을 모릅니다.

다음은 zeroclipboar의 스타일입니다. 설정하려는 스타일이 무엇인지 알지 못하므로 입력 상자 위를 클릭하여 클릭 할 수 있으므로 일반적으로 잘 작동합니다.

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

나는 그게 믿고 (당신의 코드가 어떻게 생겼는지,하지만 당신은 호버 또는 마우스 오버 /로 마우스를 사용하여 옵션 상자를 표시 할 때, 단지 제로 클립 보드 사업부를 포함 ... 이런 식으로 뭔가를하지 않습니다 올바른 개체 ID)를 사용하는 :

나는 제로 클립 보드를 사용

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

Answer 3

, 나는 그것이 내가 필요하지 않은 경우 음의 왼쪽 위치로 이동하는 것이 최선이었다 것으로 나타났습니다. 예를 들면 :

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

나는 확실히 당신의 질문을 이해하지 않지만, 동적으로는 문제가 문제를 해결하는 방법이 될 수있는 원인이되는 곳에서 멀리 이동. 그냥 관심을

Answer 4

:

내 접근 방식은 데이터를 사용은 복사 기능을 활성화하는 속성. 또한 루트 요소에 호버 & 활성 클래스를 설정합니다.

사용법 :

HTML :

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

자바 스크립트 :

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