click and copy jquery dynamic content

Solutions on MaxInterview for click and copy jquery dynamic content by the best coders in the world

showing results for - "click and copy jquery dynamic content"
Dora
02 Jun 2020
1Works great with Dynamically created list. Reading in from a database.
2
3<style type="text/css">
4.fw-code-copy {
5  display: block;
6  position: relative;
7  width: 400px;
8  height: 30px;
9  background: #FFE;
10  border: thin solid #FF0;
11  margin-bottom: 0.5em;
12  padding: 0.5em;
13}
14.fw-code-copy-button {
15  position: absolute;
16  top: 8px;
17  right: 8px;
18  padding: 0.25em;
19  border: thin solid #777;
20  background: #800080;
21  color: #FFF;
22}
23.fw-code-copy-button:hover {
24  border: thin solid #DDD;
25  background: #992699;
26  cursor: pointer;
27}
28</style>
29
30<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
31<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
32
33<span class="fw-code-copy">
34  <span class="fw-code-copy-button">Copy</span>
35  <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-1.css&quot;&gt;</code>
36</span>
37<span class="fw-code-copy">
38  <span class="fw-code-copy-button">Copy</span>
39  <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-2.css&quot;&gt;</code>
40</span>
41<span class="fw-code-copy">
42  <span class="fw-code-copy-button">Copy</span>
43  <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-3.css&quot;&gt;</code>
44</span>
45
46<script>
47new Clipboard(".fw-code-copy-button", {
48  text: function(trigger) {
49    return $(trigger).parent().find('code').first().text().trim();
50  }
51});
52</script>