How to issue notification when copying url using jQuery?

Admin 1
Viewed 449

I have the following script that simply and easily allows me to copy the URL from an attribute added to an HTML tag:

$(document).ready(function(){
    $('.clipboard').on("click", function(){
        value = $(this).data('ref');
 
        var $temp = $("<input>");
          $("body").append($temp);
          $temp.val(value).select();
          document.execCommand("copy");
          $temp.remove();
    })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="clipboard" data-ref="example.com1">Copy URL</span>
<span class="clipboard" data-ref="example.com2">Copy URL</span>

But I would like to be able to add an effect when copying the url, a notification similar to bitly, for example:

enter image description here

If you can see bitly it emits an effect when copying the url.

I would like to add something similar, but instead of creating the notification from the same copied url, create a similar effect but with the following word: URL copied!

Could you explain to me how I could add this notification?

jquery
2 Answers

One easy solution would be to use one of the many notification libraries that exist. For instance, add this to your header:

<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script>

And then you can create notifications with this line of jquery:

$.notify("URL copied!", "success");

You can check documentation, including styling information, here.

$(document).ready(function(){
    $('.clipboard').on("click", function(){
        value = $(this).data('ref');
 
        var $temp = $("<input>");
          $("body").append($temp);
          $temp.val(value).select();
          document.execCommand("copy");
          $temp.remove();
          
          // Use notify.js to display a notification
          $.notify("URL copied!", "success");
          
    })
})
.notify-success {
  border: none;
  background: none;
  color: red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script>

<span class="clipboard" data-ref="example.com1">Copy URL</span>
<span class="clipboard" data-ref="example.com2">Copy URL</span>

user_56048520

Creating an effect similar to the one you posted is fairly easily achievable.

$(document).ready(function(){
    $('.clipboard').on("click", function(){
        value = $(this).data('ref');

        var $temp = $("<input>");
          $("body").append($temp);
          $temp.val(value).select();
          document.execCommand("copy");
          $temp.remove();

        var message = document.createElement('p');
        message.classList.add('effect');
        message.innerHTML = 'URL copied!';
        this.parentNode.insertBefore(message, this);
        setTimeout(function () {
            $(message).remove();
        }, 2500);

    })
})
@keyframes anim {
  from{ color: orange;}
  to {color: white;}
}

.effect {
  font-weight: 600;
  animation-name: anim;
  animation-duration: 2.5s;
}
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
</head>
<body>
  <span class="clipboard" data-ref="example.com1">Copy URL</span>
  <span class="clipboard" data-ref="example.com2">Copy URL</span>
 </body>
 </html>

user_105912900
Related