[clovisdParticipant]

Hey guys!

So I’ve got a button on a front page slider. I’d like it to copy text when clicked. Maybe even say ‘Copied’ shortly when clicked.

I’ve added this Javascript to Global Javascript for the site:

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

That said, I’m at loss as to how to implement this into Revolution Slider. I’m using this for reference: https://codepen.io/shaikmaqsood/pen/XmydxJ/

[Rue NelModerator]

Hello There,

Thanks for writing in! When you add a button in the Slider revolution, you must add a unique ID to that button. Please look at this screenshot: http://prntscr.com/elc54m

Then you will need to have this code added:

(function($){
  $('#my-button').on('click touchstart', function(){
    copyToClipboard('#ID-of-the-element-containing-the-text-to-copy');
  });
})(jQuery);

And you will have to make sure that you inserted the correct ID of the element that contains the text to be copied.

Hope this make sense.

[clovisdParticipant]

Where do I enter the code?

I tried adding it in the Customizer as well as Slider JS/CSS without much luck.

As for the actual code, I changed it to this: copyToClipboard('http://google.com');

If I wanted to copy the URL http://google.com

[RadModerator]

Hi there,

Please change your code to this

function copyToClipboard( the_text ) {
  var $temp = jQuery("<input>");
  jQuery("body").append($temp);
  $temp.val( the_text ).select();
  document.execCommand("copy");
  $temp.remove();
}

The code was to copy text within an element, and what you wish to achieve is to copy the text added directly as input.

Thanks!

[clovisdParticipant]

Hey! Thanks for the input! I’m just not sure where I’m suppose to be entering the code above for that.

I’m trying to use Revolution Slider buttons for this but can’t find the section to insert the code above. ^

Thanks!

[Rue NelModerator]

Hello There,

To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[clovisdParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

Thank you for providing the credentials. I pasted the following code in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

function copyToClipboard( the_text ) {
  var $temp = jQuery("<input>");
  jQuery("body").append($temp);
  $temp.val( the_text ).select();
  document.execCommand("copy");
  $temp.remove();
}

(function($){
  $('.rev-btn').on('click touchstart', function(){
    copyToClipboard('http://google.com/');
  });
})(jQuery);

It’s working fine now. Just change the button ID and use this code for each button:

(function($){
  $('#button-id-1').on('click touchstart', function(){
    copyToClipboard('http://google.com/');
  });
  $('#button-id-2').on('click touchstart', function(){
    copyToClipboard('http://yahoo.com/');
  });
})(jQuery);

Hope this helps!

[clovisdParticipant]

This worked perfectly! Thank you so much. 🙂

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts