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

Comments

Post a Comment

Popular posts from this blog

c# - Unity IoC Lifetime per HttpRequest for UserStore -

-
i'm trying clean default implementation of accountcontroller.cs comes out of box in new mvc5/owin security implementation. have modified constructor this: private usermanager<applicationuser> usermanager; public accountcontroller(usermanager<applicationuser> usermanager) { this.usermanager = usermanager; } also, have created lifetime manager unity looks this: public class httpcontextlifetimemanager<t> : lifetimemanager, idisposable { private httpcontextbase _context = null; public httpcontextlifetimemanager() { _context = new httpcontextwrapper(httpcontext.current); } public httpcontextlifetimemanager(httpcontextbase context) { if (context == null) throw new argumentnullexception("context"); _context = context; } public void dispose() { this.removevalue(); } public override object get...
Read more

Change the color of an oval at click in Java AWT -

-
i have draw ovals in java, , @ click change color. beginning tried change color after 20 ms, doesn't work. my code is: public class mycomponentnew extends frame { public graphics2d g2d; public mycomponentnew(string title) { super(title); setsize(400, 550); } @override public void paint(graphics g) { this.g2d = (graphics2d) g; this.g2d.setcolor(color.red); this.g2d.filloval(10, 55, 50, 100); } public void changecolor () { this.g2d.setcolor(color.blue); this.g2d.filloval(10, 55, 50, 100); } } and in class main method have: mycomponentnew m; m = new mycomponentnew("fereastra cu baloane"); m.setvisible(true); m.addwindowlistener(new windowadapter() { @override public void windowclosing(windowevent we) { system.exit(0); } }); try { thread.sleep(20); } catch(interruptedexception e) {} m.changecolor(); the color of oval remains red. ...
Read more

I am trying to solve the error message 'incompatible ranks 0 and 1 in assignment' in a fortran 95 program. -

-
i writing program in fortran find velocity of parachuting person in relation time. keep getting error can't fix. new programming , appreciated. the error is v(i+1)=v(i)+[32-((c*v(i)*v(i))/m)]*(h) 1 error: incompatible ranks 0 , 1 in assignment @ (1) and program is program para integer :: real :: v(11) !velocity real :: q !initial velocity real :: h !time step real :: c !drag coefficient real :: m !mass ! gravity equal 32 ft/s^2 write (*,*)'enter time step' read(*,*)h write(*,*)'enter initial velocity' read(*,*)q write(*,*)'enter drag coefficient' read(*,*)c write(*,*)'enter mass' read(*,*)m i=1,10 ! 1 10, 1 being interval. end v(i+1)=v(i)+[32-((c*v(i)*v(i))/m)]*(h) q=v(1) end program you cannot use [] normal parenthesis in expressions. array constructor, [ items ] means array items elements. end do should after line.
Read more