Question

My web app has a bunch of lists, each within their own jQuery UI tab. I need to add a ZeroClipboard client to each of the list items in all of the lists so that a user can click to copy the item’s specific URL.

ZeroClipboard calculates the position of each target element in order to place an invisible SWF that catches the user’s click. The problem is that it thinks all of the elements are positioned where they would be without the jQuery UI tabs, nowhere near the place that they end up being.

I’ve tried telling ZeroClipboard to place its added div within the HTML of the list item, as close as I could get to the target element. I’ve also tried various combinations of relative and absolute CSS positioning on the parent elements, so that the added div (which gets an ‘absolute’ position) gets positioned relative to its parent. But I’ve had no luck. So I turn to you, O wonderful Internet! Make me proud!

Answer 1

Found an answer on zeroClipboard complex css problem — it’s not quite the same question, but Basit’s answer there worked for me too.

// make your own div with your own css property and not use clip.glue()
var flash_movie = '<div>'+clip.getHTML(width, height)+'</div>';
flash_movie = $(flash_movie).css({
    position: 'relative',
    marginBottom: -height,
    width: width,
    height: height,
    zIndex: 101
    });
$(this).before(flash_movie); // if you want to put after and not before, then you have to change the marginBottom to marginTop