Introduction: Putting a Copy to Clipboard Button on a Webpage

This may sound simple, and I might look silly for putting it on Instructables, but in reality, it's not that easy. There is CSS, Jquery, HTML, some fancy javascript, and, oh well, don't get me started.

Step 1: Get Your Html Doc First, to Fiddle Around

After you create your text file and after you rename it to "copy.html" and after you open it in Visual Studio, or Notepad++, or whatever, ...... ohhhhh. Wait.

You know, instead of walking you through, step by step, like I usually do, explaining basic things over and over ....... I don't have much time, I think I'll have you blindly shove the code into the file.

It's my code.

I developed it. I won't have you profit over my work. Yeah, I know, I usually do, but this time I won't.


Step 2: Add References

Since we are going to be using Jquery and this (really) cool thing-a-boo called "Balloon.css", we must add references first to the top of the file.

Add:

bla bla bla: BLAAAAAAA!!!!

Now remove that and put:

<script src="https://cortanabatch.zohosites.com/files/cdn/lib/jQuery/jQuery.min.js" async></script>
<link rel="stylesheet" href="https://cortanabatch.zohosites.com/files/cdn/lib/Balloon.css/Balloon.css" />

Step 3: Code

Below that, add this code.

oh, no, just get the code from here: http://bit.ly/2t7Dwj7

Copy/paste the code to your file, under the references.

Step 4: Changing That Code to Suit Our - I Mean Your Needs

  1. On line-10, remove the input element.
  2. Now get the input element that you are trying to get to copy to clipboard. Set the id to "link" and set the class to "js-copytextarea" Just do it.
  3. Count all the buttons on your web page you will eventually add the code to.
  4. Remember that number. Now on line 23, 26 and 27, change the [0] to []
  5. OPTIONAL: on line 13 change Copied To Clipboard to Copy

You are done! be sure to check out the demo.

P.S. Did you like (no - love) the styles I put on the button?

Step 5: Demo

Comments

About This Instructable

631views

9favorites

License:

Bio: I like to rhyme all the time.
More by EliyahuGeorgios:Cool, Decorative Lamp - From Recycled Parts!Computer ProgrammingHow to Put a Fancy (and Flexible) Redirect on Your Site
Add instructable to: