Copy to clipboard in boot block 3

Question

I want to add a copy to clipboard button on my website. The site uses the Bootstrap 3 structure. I want my button to work similarly to the Copy to clipboard button used here: http://twitterbootstrapbuttons.w3masters.nl/

I tried to include this code: http://jsfiddle.net/T2uXr/ , but I was not successful with it.

JavaScript:

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

CSS

 body { padding: 20px } 

HTML

 <hr /> <h5>These copy to clipboard links are working...</h5> <p><a href="#" data-copy="http://test.one.com/" class="copy">Copy Original Link</a></p> <p><a href="#" data-copy="http://test.two.com/" class="copy">Copy Medium Link</a></p> <p><a href="#" data-copy="http://test.three.com/" class="copy">Copy Web Link</a></p> <hr /> <h5>If I put these links inside the bootstrap dropdown, they stop working...</h5> <div class="btn-group"> <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"> View copy clipboard links <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#" data-copy="http://test.one.com/" class="copy">Copy Original Link</a></li> <li><a href="#" data-copy="http://test.two.com/" class="copy">Copy Medium Link</a></li> <li><a href="#" data-copy="http://test.three.com/" class="copy">Copy Web Link</a></li> <li class="divider"></li> <li><a href="mailto:" title="Email URL Links">Email URL Link</a></li> </ul> </div> 

Any ideas on how I should add this to a button on my Bootstrap 3 site? Or are there other good alternatives?

Thanks!:)

Answer 1

This is how I fixed the problem while working on it until late at 4:00 and posted my problem ( click here to see), hope it will help someone not burn their night :) I tried to do what it does current Bootstrap site for copying code, but Bootstrap currently uses the old zeroClipboard plugin. I tried to do the same thing as Bootstrap, but with the latest zeroClipboard (for now).

HTML: Please note that I did not add all the code in one line, I do not bring pre and code in the second line or indentation, so that the code looks good, it will be copied to the clip.

 <div class="highlight"><pre><code>Some code/text goes here</code></pre></div> 

CSS

 /* ZeroClipboard styles */ .zero-clipboard { position: relative; display: none; } .btn-clipboard { position: absolute; top: 0; right: 0; z-index: 10; display: block; padding: 5px 8px; font-size: 12px; color: #777; cursor: pointer; background-color: #fff; border: 1px solid #e1e1e8; border-radius: 0 4px 0 4px; } .btn-clipboard-hover { color: #fff; background-color: #563d7c; border-color: #563d7c; } @media (min-width: 768px) { .zero-clipboard { display: block; } .zero-clipboard .btn-clipboard { top: -16px; border-top-right-radius: 0; } } 

JavaScript: place ZeroClipboard.swf where the JS file is located.

 // Config ZeroClipboard ZeroClipboard.config({ hoverClass: 'btn-clipboard-hover' }) // Insert copy to clipboard button before .highlight $('.highlight').each(function () { var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>'; $(this).before(btnHtml) }); var zeroClipboard = new ZeroClipboard($('.btn-clipboard')); var htmlBridge = $('#global-zeroclipboard-html-bridge'); // Handlers for ZeroClipboard zeroClipboard.on('ready', function (event) { htmlBridge .data('placement', 'top') .attr('title', 'Copy to clipboard') .tooltip(); // Copy to clipboard zeroClipboard.on('copy', function (event) { var highlight = $(event.target).parent().nextAll('.highlight').first(); event.clipboardData.setData("text/plain", highlight.text()) }); // Notify copy success and reset tooltip title zeroClipboard.on('aftercopy', function () { htmlBridge .attr('title', 'Copied!') .tooltip('fixTitle') .tooltip('show') .attr('title', 'Copy to clipboard') .tooltip('fixTitle') }); }); // Notify copy failure zeroClipboard.on('error', function () { ZeroClipboard.destroy(); htmlBridge .attr('title', 'Flash required') .tooltip('fixTitle') .tooltip('show'); }); 

Answer 2

Your code looks great and your jsfiddle code is working correctly. I tried it on Safari, Chrome, and Firefox on Mac OS X, and they all worked. Since your code requires Flash, make sure Flash is installed and enabled.