View and Copy Source Code of a Particular DIV Layer

Hi Experts

I am trying to build a basic function really. Well it can become complicated i dont know but i have seen it working elsewhere on a website (unfortunately cant remember now).

Basically i have a template.php page which has the following sample code

<div id="template">
<h1>Template Name</h1>
<p>Template Content</p>

Open in new window

Now users see the content but what i want them to be able to do is click a button labelled "copy source code". This will basically copy the content of the div "template" including the HTML tags. The idea is so that they can then paste the CODE in their own coding environments etc.

 I have no idea how to go about this, i have explored jQuery but not too sure. Any ideas or pointers will be GREATLY appreciated  
Who is Participating?
DVation191Connect With a Mentor Commented:
In IE, this is pretty easy:
function copyToClipboard(s) {
    if (window.clipboardData && clipboardData.setData) {
        clipboardData.setData('text', s);

The difficulty in this is making it cross browser.
Details here:
ACEAFTYAuthor Commented:
Hi DVation191

Thanks for your response this is definitly something that im looking for esp. zero clipboard. Just want to make sure of one thing if you can answer thats fine.

The HTML that the user see's on template.php is rendered html. Will Zero Clipboard copy the content of the DIV Layer including the HTML tags?

Thanks anyhow for pointing me in the right direction
Zero Clipboard will grab everything within the <pre> tags, code and all, even if it's rendered HTML from PHP.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.