Jump to content



Photo

click image to copy text to clipboard


  • Please log in to reply
4 replies to this topic

#1 +Veggie1232

Veggie1232

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 21-April 06
  • Location: Seattle, Washington

Posted 06 March 2014 - 14:05

Hello. I have a banner on my website and I want to make it so when you hover over the part with the IP text, it has a roll over effect that says something like (copy to clipboard). Then the user just clicks and the IP is copied to their clipboard.

 

Anyone have anything like this or a similar script? I am decent with html and css but that's about it. 

Here is a link to the banner in question: http://miningmojo.co...ight_sample.jpg

 

 

 

Thanks for any help!




#2 Kalint

Kalint

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 16-January 07

Posted 06 March 2014 - 15:16

Ive not seen this for an image but the ones I have seen usually takes a textbox and copy the string value to the clipboard.



#3 OP +Veggie1232

Veggie1232

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 21-April 06
  • Location: Seattle, Washington

Posted 06 March 2014 - 17:14

I have hired someone to do this for me. If anyone is interested ill post the code once its finished.

Thanks



#4 Brian M.

Brian M.

    Neowinian Senior

  • Tech Issues Solved: 11
  • Joined: 07-January 05
  • Location: London, UK

Posted 06 March 2014 - 17:28

If you want it to work properly across browsers - every solution I've seen resorts to flash :(.



#5 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 26
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 06 March 2014 - 20:49

It's quite simple though the zclip plugin doesn't work for me from the zclip website itself but when ripped from their own example demo website it works >.>

$(".elementwithtext").zclip({
	path:'/js/ZeroClipboard.swf',
	copy: function() {
		return $(this).html();
	},
	afterCopy:function(){
		$(this).addClass("copied");
	}
});

The required jquery library: http://pastebin.com/Tw1bkrHC

 

Right click the image that doesn't load below, save it as image and rename it to swf for the swf file  ;)

 

Oh and in the case you use a image you can use the title attribute so something like this:

 

html:

<img src="someimage" title="texttocopy" />

jQuery:

$(".elementwithtext").zclip({
	path:'/js/ZeroClipboard.swf',
	copy: function() {
		return $(this).attr("title");
	}
});

@all

Yeah it always requires flash. Chrome, firefox, opera etc have disabled copy to clipboard in their browsers for security reasons, only internet explorer 8 and older are able to copy to clipboard with javascript. If anyone gets it to work with only javascript it means he found a security hole and at the moment the code is published the security flaw will be patched :p

Attached Images

  • ZeroClipboard.renametoswf.jpg