Friday, 30 October 2015

CLIP BOARD EXAMPLES CODE

FB Gadgets

-----------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN POST HTML SECTION
READ MORE:
https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
https://www.iamrohit.in/jquery-syntax-highlighter/
https://codepen.io/salsacobo/pen/opwHi
https://codepen.io/chasebank/pen/EKyGKN
-----------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<!-- https://www.jqueryscript.net/text/Copy-To-Clipboard-For-Syntax-Highlighter.html -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Code Box Copy Demos</title>
<!-- Cod Box Copy begin -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" rel="stylesheet">
<link href="https://www.jqueryscript.net/demo/Copy-To-Clipboard-For-Syntax-Highlighter/code-box-copy/css/code-box-copy.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Copy-To-Clipboard-For-Syntax-Highlighter/code-box-copy/js/code-box-copy.js"></script>
<!-- Cod Box Copy end -->
<style>
body { margin: 0; padding: 0; background-color: #fff; font-family: sans-serif; color: #333; font-size: 100%; line-height: 1.5; }
.container { width: 960px; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; }
h1 { margin: 0; padding: 1em 0; font-size: 32px; font-weight: normal; text-align: center; color: #fff; }
h2 { margin: 2em 0 1.5em 0; padding: 0 0 0.15em 0; font-size: 26px; font-weight: bold; border-bottom: 3px solid #eee; }
h3 { margin: 2em 0 0.5em 0; padding: 0; font-size: 20px; font-weight: bold; }
p { margin: 2em 0 1em 0; padding: 0; }
h3 + p { margin-top: 0.5em; }
ul { margin: 0 0 0 1.25em; padding: 0; line-height: 1.875; }
a { text-decoration: none; color: #07a; padding: 5px 6px; background-color: #f5f5f5; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; }
a:hover { text-decoration: none; background-color: #07a; color: #fff; }
.header { background-color: #257; -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.05); box-shadow: 0 0 50px rgba(0, 0, 0, 0.05); }
.main { padding-top: 3em; padding-bottom: 6em; }
.footer { padding: 2em 1em 1.25em 1em; background-color: #f5f5f5; border-top: 1px solid #eee; text-align: center; }
</style>
</head>
<body>
<div class="header">
<div class="container">
<h1>jQuery Code Box Copy Demos</h1>
</div>
</div>
<div class="jquery-script-ads" style="margin-top:50px" align="center"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="main">
<div class="container">
<h2>Usage</h2>
<h3>Sources</h3>
<p>Put the following lines below to the head section. Do not forget to use the copy function :)</p>
<div class="code-box-copy">
<button class="code-box-copy__btn" data-clipboard-target="#example-head" title="Copy"></button>
<pre><code class="language-html" id="example-head">&lt;!-- Cod Box Copy begin --&gt;
&lt;link href=&quot;prism/prism.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;link href=&quot;code-box-copy/css/code-box-copy.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;prism/prism.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;clipboard/clipboard.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;code-box-copy/js/code-box-copy.js&quot;&gt;&lt;/script&gt;
&lt;!-- Cod Box Copy end --&gt;</code></pre>
</div>
<h3>Content you want to copy</h3>
<p>Test it with a simple HTML code like below:</p>
<div class="code-box-copy">
<button class="code-box-copy__btn" data-clipboard-target="#example-html" title="Copy"></button>
<pre><code class="language-html" id="example-html">&lt;div class=&quot;code-box-copy&quot;&gt;
&lt;button class=&quot;code-box-copy__btn&quot; data-clipboard-target=&quot;#example-html&quot; title=&quot;Copy&quot;&gt;&lt;/button&gt;
&lt;pre&gt;&lt;code class=&quot;language-html&quot; id=&quot;example-html&quot;&gt;&amp;lt;div class=&amp;quot;example&amp;quot;&amp;gt;
Lorem ipsum
&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;</code></pre>
</div>
<h3>Plugin initialization</h3>
<p>Put in the head section the plugin initialization's code or in the end of the body section:</p>
<div class="code-box-copy">
<button class="code-box-copy__btn" data-clipboard-target="#example-initialization" title="Copy"></button>
<pre><code class="language-js" id="example-initialization">&lt;script&gt;
$(document).ready(function () {
$('.code-box-copy').codeBoxCopy();
});
&lt;/script&gt;</code></pre>
</div>
<p>Plugin initialization with parameters:</p>
<div class="code-box-copy">
<button class="code-box-copy__btn" data-clipboard-target="#example-initialization-with-parameters" title="Copy"></button>
<pre><code class="language-js" id="example-initialization-with-parameters">&lt;script&gt;
$(document).ready(function () {
$('.code-box-copy').codeBoxCopy({
tooltipText: 'Copied',
tooltipShowTime: 1000,
tooltipFadeInTime: 300,
tooltipFadeOutTime: 300
});
});
&lt;/script&gt;</code></pre>
</div>
<h3>Parameters</h3>
<ul>
<li>tooltipText {string} | Default value: 'Copied'. – text of the tooltip when the user click to the copy button</li>
<li>tooltipShowTime {number} | Default value: 1000. – the time (in milliseconds) until the tooltip appears after fade in and before the fade out</li>
<li>tooltipFadeInTime {number} | Default value: 300. – the fade in time (in milliseconds) until the tooltip appears</li>
<li>tooltipFadeOutTime {number} | Default value: 300. – the fade in time (in milliseconds) until the tooltip disappears</li>
</ul>
<h2>Third-party libraries (MIT Licence)</h2>
<ul>
<li><a href="https://jquery.com/" target="_blank">jQuery</a></li>
<li><a href="http://prismjs.com/" target="_blank">Prism</a></li>
<li><a href="https://clipboardjs.com/" target="_blank">clipboard.js</a></li>
</ul>
<h2>Licence</h2>
<h3>The MIT Licence</h3>
<p>
Copyright 2017 © <a href="https://jablonczay.com" target="_blank" rel="nofollow">jablonczay.com</a>
<br><br>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
<br><br>
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
<br><br>
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
</p>
</div>
</div>
<div class="footer">
<div class="container">
<a href="https://jablonczay.com" title="jablonczay.com" target="_blank" rel="nofollow">jablonczay.com</a>
</div>
</div>
<script>
$('.code-box-copy').codeBoxCopy({
tooltipText: 'Copied',
tooltipShowTime: 1000,
tooltipFadeInTime: 300,
tooltipFadeOutTime: 300
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
EXP:1
-----------------------------------------------------------------------------------------------------------------
<input type="text" value="TextBoardText" id="TextBoxId">
<button id="ButtonId">button</button>
<script>
ButtonId.onclick = function(){
TextBoxId.select();  
document.execCommand("copy");  
}
</script>
-----------------------------------------------------------------------------------------------------------------
syntax highlihter
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Syntax Highlighter</title>
<style>
/**
* SyntaxHighlighter
* https://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* https://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
* 
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
background: none !important;
border: 0 !important;
bottom: auto !important;
float: none !important;
height: auto !important;
left: auto !important;
line-height: 1.1em !important;
margin: 0 !important;
outline: 0 !important;
overflow: visible !important;
padding: 3px 0 !important;
position: static !important;
right: auto !important;
text-align: left !important;
top: auto !important;
vertical-align: baseline !important;
width: auto !important;
box-sizing: content-box !important;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 11px !important;
min-height: inherit !important;
min-height: auto !important;
}
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
}
.syntaxhighlighter.source {
overflow: hidden !important;
}
.syntaxhighlighter .bold {
font-weight: bold !important;
}
.syntaxhighlighter .italic {
font-style: italic !important;
}
.syntaxhighlighter .line {
white-space: pre !important;
}
.syntaxhighlighter table {
width: 100% !important;
}
.syntaxhighlighter table caption {
text-align: left !important;
padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
width: 100% !important;
}
.syntaxhighlighter table td.code .container {
position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
box-sizing: border-box !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
border: none !important;
background: white !important;
padding-left: 1em !important;
overflow: hidden !important;
white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {
text-align: right !important;
padding: 0 0.5em 0 1em !important;
}
.syntaxhighlighter table td.code .line {
padding: 0 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
padding-left: 0em !important;
}
.syntaxhighlighter.show {
display: block !important;
}
.syntaxhighlighter.collapsed table {
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {
padding: 0.1em 0.8em 0em 0.8em !important;
font-size: 1em !important;
position: static !important;
width: auto !important;
height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
display: inline !important;
margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
padding: 0 !important;
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
display: inline !important;
}
.syntaxhighlighter .toolbar {
position: absolute !important;
right: 1px !important;
top: 1px !important;
width: 11px !important;
height: 11px !important;
font-size: 10px !important;
z-index: 10 !important;
display: none; /* enlever copyright */
}
.syntaxhighlighter .toolbar span.title {
display: inline !important;
}
.syntaxhighlighter .toolbar a {
display: block !important;
text-align: center !important;
text-decoration: none !important;
padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {
display: none !important;
}
.syntaxhighlighter.ie {
font-size: .9em !important;
padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
background: none !important;
}
.syntaxhighlighter.printing .line .number {
color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
color: black !important;
}
.syntaxhighlighter.printing .toolbar {
display: none !important;
}
.syntaxhighlighter.printing a {
text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
color: blue !important;
}
.syntaxhighlighter.printing .keyword {
color: #006699 !important;
font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
color: gray !important;
}
.syntaxhighlighter.printing .variable {
color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {
color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {
color: #0066cc !important;
}
.syntaxhighlighter.printing .script {
font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
color: black !important;
}
.syntaxhighlighter {
background-color:#eeeeee;
padding-bottom: 8px;  
}
.syntaxhighlighter .line.alt1 {
background-color:#eeeeee;
}
.syntaxhighlighter .line.alt2 {
background-color:#eeeeee;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
color: black !important;
}
.syntaxhighlighter table caption {
color: black !important;
}
.syntaxhighlighter .gutter {
color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
background-color: #6ce26c !important;
color: white !important;
}
.syntaxhighlighter.printing .line .content {
border: none !important;
}
.syntaxhighlighter.collapsed {
overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
color: blue !important;
background: white !important;
border: 1px solid #6ce26c !important;
}
.syntaxhighlighter.collapsed .toolbar a {
color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
color: red !important;
}
.syntaxhighlighter .toolbar {
color: white !important;
background: #6ce26c !important;
border: none !important;
}
.syntaxhighlighter .toolbar a {
color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
color: blue !important;
}
.syntaxhighlighter .keyword {
color: #006699 !important;
}
.syntaxhighlighter .preprocessor {
color: gray !important;
}
.syntaxhighlighter .variable {
color: #aa7700 !important;
}
.syntaxhighlighter .value {
color: #009900 !important;
}
.syntaxhighlighter .functions {
color: #ff1493 !important;
}
.syntaxhighlighter .constants {
color: #0066cc !important;
}
.syntaxhighlighter .script {
font-weight: bold !important;
color: #006699 !important;
background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
color: gray !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
color: red !important;
}
.syntaxhighlighter .keyword {
font-weight: bold !important;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<!-- DC Syntax Highligher JS -->
<script type="text/javascript" src="https://cdn.dcodes.net/2/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="https://cdn.dcodes.net/2/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<!-- DC Syntax Highligher Brushes -->
<script src="https://cdn.dcodes.net/2/syntaxhighlighter/scripts/shBrushXml.js" type='text/javascript'></script>
<script src="https://cdn.dcodes.net/2/syntaxhighlighter/scripts/shBrushJScript.js" type='text/javascript'></script>
<script src="https://cdn.dcodes.net/2/syntaxhighlighter/scripts/shBrushCss.js" type='text/javascript'></script>
<h1>SYNTAX HIGHLIGHTER</h1>
<!-- DC Syntax Highligher Settings -->
<!-- DC Syntax Highligher Start -->
<pre class="brush: xml">
<!-- code highlighting begins -->
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type='text/javascript' src="style.js"></script>
<style type='text/css'>
/* ADD CSS COMMENTS */
body{border:5px solid black; font-size:13px}
</style> 
<script type='text/javascript'>
//<![CDATA[
//]]>
</script> 
</head>
<body>
<!-- ADD HTML COMMENT--> 
<a href="http://fbgadgets.blogspot.com" style=" border: solid; padding: 10px; display: inline-block; "> LINK 1</a>
</body>
</html>
<!-- code highlighting ends -->
</pre>
<!-- DC Syntax Highligher End -->
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-8216c69d01441f36c0ea791ae2d4469f0f8ff5326f00ae2d00e4bb7d20e24edb.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
SyntaxHighlighter.all();
//# sourceURL=pen.js
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------



EXP:1
OTHERS
https://ejgallego.github.io/CodeMirror-TeX-input/demo/tex-input.html

Getting the code

http://www.kanzlei-luepke.de/lib/administration/codemirror/LICENSE

All of CodeMirror is released under a zlib-style license. To get it, you can download the latest release or the current development snapshot as zip files, or use the darcs version control system to get the repository:

https://codemirror.net/1/htmltest.html

http://www.kanzlei-luepke.de/lib/administration/codemirror/index.htm
http://www.kanzlei-luepke.de/lib/administration/codemirror/htmltest.html
ABOVE CODE WITH FILE LINK
-------------------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
</head>
<body>
<!-- Target -->
<input type="text" value="TextBoardText" id="TextBoxId">
<!-- Trigger -->
<button id="ButtonId" data-clipboard-action="copy" data-clipboard-target="#TextBoxId">
Copy to clipboard
</button>
<script type="text/javascript">//<![CDATA[
var clipboard = new Clipboard('#ButtonId');
//]]></script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
EXP:2
CHAGE HTML CODE TO ESCAPE CODE AND  USE BETWEEN CODE TAGS
-----------------------------------------------------------------------------------------------------------------
<html lang="en">
<!-- https://clipboardjs.com/ -->
<head>
<title>clipboard.js &mdash; Copy to clipboard without Flash</title>
<link rel="stylesheet" href="https://clipboardjs.com/bower_components/primer-css/css/primer.css">
<link rel="stylesheet" href="https://clipboardjs.com/bower_components/highlightjs/styles/github.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900">
<link rel="stylesheet" href="https://clipboardjs.com/assets/styles/main.css">
</head>
<body>
<pre class="snippet"><button class="btn" data-clipboard-snippet=""><img class="clippy" width="13" src="https://clipboardjs.com/assets/images/clippy.svg" alt="Copy to clipboard"></button>
<code>
&lt;!-- HTML CODE CHANGE INTO ESCAPE CODE https://www.freeformatter.com/html-escape.html#ad-output --&gt;
&lt;style&gt;
#FirstMakeInvisibleDivWithCssHavingLiTag{
display:none; /* or use opacity: 0; */
list-style-type:none;  //LI BULLET SHOW NONE//
}
#SecondMakeShowingInvisibleDivButton:hover #FirstMakeInvisibleDivWithCssHavingLiTag{
display:block; /* or use opacity: 100; */
} 
&lt;/style&gt;
&lt;div id=&quot;SecondMakeShowingInvisibleDivButton&quot;&gt;START
&lt;div id=&quot;FirstMakeInvisibleDivWithCssHavingLiTag&quot;&gt;
&lt;li&gt;Coffee&lt;/li&gt;
&lt;li&gt;Tea&lt;/li&gt;
&lt;li&gt;Milk&lt;/li&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<script src="https://clipboardjs.com/bower_components/highlightjs/highlight.pack.min.js"></script>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
<script src="https://clipboardjs.com/assets/scripts/snippets.js"></script>
<script src="https://clipboardjs.com/assets/scripts/tooltips.js"></script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------


0 comments:

Post a Comment

FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets