Ask your JavaScript questions! Pay money and get answers fast! (more info)

bootstrap dropdown conflicting with onClick event zClip JavaScript

  • SOLVED

Hello,

I am having a issue with [[LINK href="http://twitter.github.com/bootstrap/components.html#buttonDropdowns"]]bootstrap dropdown[[/LINK]].

Please see this [[LINK href="http://jsfiddle.net/Vr4Ky/8/"]]jsfiddle[[/LINK]]. [[LINK href="http://jsfiddle.net/Vr4Ky/8/"]]http://jsfiddle.net/Vr4Ky/8/[[/LINK]]

This is my code I am using to get it to work on multiple links.


$("a.copy").on('click', function (e) {
e.preventDefault();
}).each(function () {
$(this).zclip({
path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy: function() {
return $(this).data('copy');
}
});
});


This code simply does a copy top clipboard using this jquery plugin [[LINK href="http://www.steamdev.com/zclip/"]]http://www.steamdev.com/zclip/[[/LINK]]

This works on multiple plain links, but does not work on links inside a [[LINK href="http://twitter.github.com/bootstrap/components.html#buttonDropdowns"]]bootstrap dropdown[[/LINK]].

Can anyone please help me get my script to also work on links inside the dropdown.

[[LINK href="http://jsfiddle.net/Vr4Ky/8/"]]http://jsfiddle.net/Vr4Ky/8/[[/LINK]]

Thanks

Answers (1)

2013-01-11

Christianto answers:

Hi,

on the source code, zClip will check if an element is visible or not, so it won't work on item that is hidden.
for bootstrap dropdown, we can set the element to open, run zClip, and close the dropdown.

also its necessary to set the dropdown-menu list position to relative, so the flash element will positioned correctly (since it set to absolute)

[[LINK href="http://jsfiddle.net/Vr4Ky/27/"]]this of jsfiddle for example[[/LINK]].

hope this help.


Josh Cranwell comments:

Ahhh nice one!!!

I would have never figured that out.

Though do you know why my hover states have stopped working and what I need to do to get them to work as per

[[LINK href="http://jsfiddle.net/Vr4Ky/8/"]]http://jsfiddle.net/Vr4Ky/8/[[/LINK]]


Thanks


Christianto comments:

its not working because the element that we hover if the zClip work is a flash element not the <li> or <a> element,
you can right click or check the source code to see it.

<div class="zclip" id="zclip-ZeroClipboardMovie_4" style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;"><embed id="ZeroClipboardMovie_4" src="http://www.steamdev.com/zclip/js/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboardMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&amp;width=160&amp;height=26" wmode="transparent"></div>


Josh Cranwell comments:

Ahhh I see. Perfect.

Many many thanks for your help.

Josh