Merging JQuery & Javascript
<p>I'm using some JavaScript to copy a value when an input is clicked. This works well.
Normally I do a JavaScript alert, but now I would like to use a query fading div.</p>

<p>If I run the jquery or javascript in separate scripts then they work fine, as soon as I join them they fail.</p>

<p>I think this is because I use a onMouseOver for the copy, but an input click event for the fading alert. </p>

<p>Any idea how I can merge these ?</p>

<pre><code>&lt;script language="JavaScript"&gt;
        function toClip(me,vals) {
                var clip = new ZeroClipboard.Client();
                clip.setHandCursor( true );
                clip.setText(vals);
                clip.glue(me);
        }
&lt;/script&gt;

&lt;script  type="text/javascript"&gt;
    $(document).ready(function() {
$('input').click(function() {
    $messageCont = $('&lt;div class="message_cont"&gt;');
    $message = $('&lt;div&gt;DONE&lt;/div&gt;').hide();
    $messageCont.append($message);
    $('body').prepend($messageCont);
    $messageCont.css({
    "left" : $(this).offset().left,
    "top" : $(this).offset().top
    });
    $message.fadeIn(200, function() {
        setTimeout(function(){
            $messageCont.fadeOut();
            //code to clean up container
        }, 1500)
    })
 })
});
$messageCont.css({
    "left" : $(this).offset().left,
    "top" : $(this).offset().top
});
&lt;/script&gt;
</code></pre>

<p>This is called via :</p>

<pre><code>&lt;div class='copy' onmouseOver="toClip(this,'$val')"&gt;&lt;input type="button" value="Copy"/&gt;&lt;/div&gt;
</code></pre>

<p>Thanks :)</p>

<p>UPDATE 15th April:</p>

<p>Sort of got this working using jquery instead of Javascript.</p>

<pre><code>&lt;input type="button" id="copy_button" data-clipboard-text="Copy Me!" Value="Click ME"&gt;
&lt;script src="js/ZeroClipboard.js"&gt;&lt;/script&gt;
&lt;script&gt;
var clip = new ZeroClipboard( document.getElementById("copy_button"), {
  moviePath: "js/ZeroClipboard.swf"
} );

clip.on( 'complete', function(client, args) {
var $message = $('&lt;div class="message"&gt;DONE&lt;/div&gt;').hide();
var $messageCont = $('&lt;div class="message_cont" /&gt;').append($message).prependTo('body');
$messageCont.css({
   "left" : $(this).offset().left,
   "top" : $(this).offset().top
}).find("div.message").fadeIn(200).delay(1500).fadeOut(function() {
        });
   } );
&lt;/script&gt;
</code></pre>

<p>Only issue I have is it only works with on button. I have lots I'd like it to work with.
Anyone know how to resolve that ?</p>

<p>Thanks :)</p>
