javascript - Copy to clipboard in bootstrap 3 -

i want add "copy clipboard" button on website. site uses bootstrap 3 framework. want button work "copy clipboard" button used here: http://twitterbootstrapbuttons.w3masters.nl/

i tried incorporate code: http://jsfiddle.net/t2uxr/, have had no success 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 clipboard links 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 put these links inside bootstrap dropdown, 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 should add button on bootstrap 3 site? or there other alternatives?

thanks! :)

here how have fixed issue while working on till late night 4:00 , posting issue (click here see), hope 1 not burn night :) tried how bootstrap current website copying it's code, bootstrap using old zeroclipboard plugin. have tried make same bootstrap did latest zeroclipboard (as of now).

html: note how have not added code in 1 line, not bring pre & code in second line or indent make code else intend copied clip board.

<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 js file is.

// config zeroclipboard zeroclipboard.config({     hoverclass: 'btn-clipboard-hover' })  // insert copy 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 zeroclipboard zeroclipboard.on('ready', function (event) {     htmlbridge         .data('placement', 'top')         .attr('title', 'copy clipboard')         .tooltip();      // copy clipboard     zeroclipboard.on('copy', function (event) {         var highlight = $(event.target).parent().nextall('.highlight').first();         event.clipboarddata.setdata("text/plain", highlight.text())     });      // notify copy success , reset tooltip title     zeroclipboard.on('aftercopy', function () {         htmlbridge             .attr('title', 'copied!')             .tooltip('fixtitle')             .tooltip('show')             .attr('title', 'copy clipboard')             .tooltip('fixtitle')     }); });  // notify copy failure zeroclipboard.on('error', function () {     zeroclipboard.destroy();     htmlbridge         .attr('title', 'flash required')         .tooltip('fixtitle')         .tooltip('show'); });