i have list of images and on mouse over there is option box shows under it, which has embeded code input box to copy from. now i implemented zeroclipboard on it, for making copy function work on click, so when i do mouse over on image, it shows the option box properly, but when i take mouse to click on the input box to copy the code, the option gets closed, thinking its not in option div anymore, because zeroclipboard has div on top of it so mouse goes on it and it gets closed.
so solution was to create that div inside the option div, which has been taking care of, but now zeroclipboard div style is showing wrong and i dont know how to fix it.
following are the style for zeroclipboar, i dont know what style to set on it, so its above the input box, so i can click on it and so it works fine like it usally does.
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;
$("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
});