copy to clipoard

by Akram kamal

HTML

<script src="http://www.quackit.com/common/js/ZeroClipboard/ZeroClipboard.min.js"></script>
<div class="code-snippet">
				<span class="button" id="copy-button-bodyTextNo1" data-clipboard-target="bodyTextNo1" title="Click to copy">✂ Copy to Clipboard</span>
				<pre class="prettyprint overthrow prettyprinted" id="bodyTextNo1"><span class="typ">AddType</span><span class="pln"> video</span><span class="pun">/</span><span class="pln">ogg </span><span class="pun">.</span><span class="pln">ogv
</span><span class="typ">AddType</span><span class="pln"> video</span><span class="pun">/</span><span class="pln">mp4 </span><span class="pun">.</span><span class="pln">mp4
</span><span class="typ">AddType</span><span class="pln"> video</span><span class="pun">/</span><span class="pln">webm </span><span class="pun">.</span><span class="pln">webm</span></pre>
				</div>

CSS

div.code-snippet {
background: #fff4c8;
border-left: 6px solid #fc0;
padding: 0 10px 10px;
}

div {
display: block;
}

div.code-snippet span.button {
color: #fc0;
cursor: pointer;
}

JavaScript

// from here :
// http://www.quackit.com/html_5/tags/html_video_tag.cfm

var clientbodyTextNo1 = new ZeroClipboard( document.getElementById("copy-button-bodyTextNo1") );
		$( document ).ready(function() {
            
		clientbodyTextNo1.on( "ready", function( readyEvent ) {
		  // alert( "ZeroClipboard SWF is ready!" );
		
		  clientbodyTextNo1.on( "aftercopy", function( event ) {
		    // `this` === `client`
		    // `event.target` === the element that was clicked
		    //event.target.style.display = "none";
		    alert("Copied text to clipboard: " + event.data["text/plain"] );
		  } );
		} );
            
            });