Short URL Clipboard

Displays "Copied!" next to Short Url after clicking.

HTML

<html>
<head>
    <title>Zero Clipboard Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
    <script language="JavaScript">
        ZeroClipboard.setMoviePath( 'http://v2.christopherburton.net/wordpress/wp-content/themes/murtaugh-HTML5-Reset-Wordpress-Theme-8aa6329/_/flash/ZeroClipboard.swf' );
        var clip = null;
        
        function $(id) { return document.getElementById(id); }
        
        function init() {
            clip = new ZeroClipboard.Client();
            clip.setHandCursor( true );
            
            clip.addEventListener('load', function (client) {
                debugstr("Flash movie loaded and ready.");
            });
            
            clip.addEventListener('mouseOver', function (client) {
                // update the text on mouse over
                clip.setText( $('fe_text').value );
            });
            
    clip.addEventListener('complete', function (client, text) { 
jQuery(".credits").prepend('<div class="alert">Copied!</div>');
        jQuery('.alert').fadeOut(1500); 
});        
            
            clip.glue( 'd_clip_button', 'd_clip_container' );
        }

    </script>
</head>
<body onLoad="init()">

    <!-- Upload Form -->
<br>
<ul class="credits">
    <li><span>Short Url: </span>
        <input id="fe_text" onChange="clip.setText(this.value)" value="chrisburton.me/6chars" />
    </li>
    
    <div id="d_clip_container">
        <div id="d_clip_button" class="my_clip_button"></div>
    </div>
</ul>

</body>
</html>

CSS

body {
    background: #f7f7f7; 
    font-family:arial,sans-serif; 
    font-size:9pt; 
    margin: 50px;
}


.credits {position: relative; width:300px; line-height: 15px;}
span {position: absolute; top: 0;}

input#fe_text {
    display: block;
    background: transparent; 
    color: #bbbbac; 
    border:none; 
    margin-left: 55px; 
    font: normal 14px/15px "courier new";
}

input:hover {color: #181818;}
.alert {position: absolute; left: 0; margin-left: 225px;}
#d_clip_container {
    position: absolute;     
    top: 0;
}

        .my_clip_button {
            width:170px;
            height:15px;   
            background-color:transparent;  
            cursor:default; 
margin-left: 55px;    
        }
        .my_clip_button.hover {color: #bbbbac;}
        .my_clip_button.active { }