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, its actually easier to blow your pants off than to, um, to actuallyput that button on your page.

So stay here and hear what I have to say. Period.

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.


Too Bad.

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: NOW the Coding Part - Er, I Meant Copy/pasting Part

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.

Why did I have to put the code in a link?

Because when I had the code in notepad, and I copy/pasted the code, and the instructable editor actually rendered the code.

Yup. It actually put a button there.

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

https://cortanabatch.zohosites.com/files/WebPages/...

UPDATE:

Ho woohoo! I cant believe I got featured!

Calloooh! Callay! I chortle.

Comments

About This Instructable

512views

9favorites

License:

Bio: Hi! I am a young rabbit who first bumped into humans (and the interesting lives they live) when I discovered that a farmer had moved ... More »
More by EliyahuGeorgios:Cool, Decorative Lamp - From Recycled Parts!Computer ProgrammingHow to Put a Fancy (and Flexible) Redirect on Your Site
Add instructable to: