What is the most effective way to attach the function .zclip() to a button, trigger it, and then remove .zclip()? This seems like a simple task, but I'm having trouble getting it to work properly. My page contains numerous buttons, some of which are easily accessible while others are within accordions and tabs. The content that the buttons copy from is dynamic, with some data being loaded via ajax. Additionally, many sections on the page can collapse, and when the flash overlay attached by .zclip() remains open during a collapse, it causes animation glitches.
I've attempted various approaches to solve this issue:
1. Attaching .zclip() to all button elements and then refreshing the page at intervals. While this captures the dynamic data, the performance is poor.
2. Attaching and removing .zclip() based on the mouseenter, mouseleave, mouseover, and mouseout events. However, multiple flash overlays end up bound to a single button due to frequent firing of events.
3. Using .hover() and .hoverIntent() to attach and remove .zclip(). This method behaves better and captures dynamic data, but the events still fire too frequently. Trying a .hover() on the parent section and attaching .zclip() to all buttons in that section improves performance slightly, but it's still not ideal.
I believe there must be a simpler solution to this problem. I can successfully bind .zclip() using .click() and the afterFunction parameter, but I struggle to pass an additional click event to the button to both fire and remove .zclip(). It requires two clicks - one to activate and another to execute the function. Perhaps directing the additional click event to the flash overlay rather than the button itself could resolve this issue. Any guidance would be appreciated.
Visit zClip Homepage
<div id='copy'>Test</div>
<button>Click Here To Copy The Div Above!</button>
<span id='success'>Success!</span>
#copy{
height: 100px;
width: 200px;
padding: 3px;
margin-bottom: 5px;
border: 1px solid black;
border-radius: 6px;
}
#success{
color: rgba(84,240,84,1);
}
$(document).ready(function() {
var copySuccessHide = function(){
$( "#success" ).css({opacity: 0.0, visibility: "visible"});
};
copySuccessHide();/*hide the success indicator*/
var copyData = $("#copy").text();/*get data from copy target*/
var afterCopyFunction = function(){
$("#copy").effect( "highlight" , {color : "rgba(230,255,230,1)" }, 1000 )
$("#success").effect( "pulsate", "fast", copySuccessHide );
$("button").zclip('remove');/*remove zclip*/
};
$("button").click(function () {/*bind zclip to the button on click*/
$("button").zclip({
path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
copy: copyData,
afterCopy: afterCopyFunction,
clickAfter: false
});
});
});