I want to copy the HTML code by clicking on the button using javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#data {
background: #eee;
width: 300px;
padding: 13px;
text-align: center;
font-family: arial;
}
</style>
</head>
<body>
<button type="button" onclick="copyToClipboard('data')">Copy </button>
<textarea id="data" name="data">
<p>I Want to copy this html code1.</p>
<p>I Want to copy this html code2.</p>
</textarea>
<script src="doc/jquery.min.js"></script>
<script src="doc/clipboard.min.js"></script>
<script>
window.copyToClipboard = function(elementId) {
var aux = document.getElementById(elementId);
aux.select();
document.execCommand("copy");
}
</script>
</body>
</html>
I try this code, but it shows the code only, and I want it to show the preview of the HTML code.like this
So how can I copy HTML code from the browser by clicking on the button?
A textarea is a text only element.
It won't parse the HTML in its value.
What you might want to look into is a WYSIWYG editor that supports html export of its contents.
I have used TinyMCE (self-hosted, there is a paid option as well) in the past tho there are definitely other options. I have no affiliation with TinyMCE.
Edit:
After clarifying, here is a sample of the code:
<button onclick="fun_name();">get outerHTML</button>
<div id="idDiv">
<div id="data">
<p>I Want to copy this html code1.</p>
<p>I Want to copy this html code2.</p>
</div>
</div>
<script>
function copyToClipboard(text) {
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
function fun_name() {
var elem = document.getElementById("idDiv").outerHTML;
copyToClipboard(elem)
}
</script>
Related
I have one requirement of edit and preview the songs chords. Like in this example https://songbase.life/admin/example . Actually this built in react js but i want to implement same in jquery or javascript
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="InputTEXT">
<textarea id="editText" class="form-control" rows="5"></textarea>
</div>
<div id="preview">
//Preview here
</div>
</body>
</html>
Once you open the link on the left side user is typing and preview is on right side...
$(document).ready(function(){
$('#editText').keyup(function(){
$('#editText).val();
$('#preview').html($('#editText).val());
})
})
I want to set the chords positing like mentioned in the above example.
Note :- i want songs text to be formatted in preview same way in the above example link
Copying over the text from the source to the destination is rather simple as #Swati mentioned, but formatting it will be significantly more difficult. It looks like the example provided uses Markdown for the baseline formatting and expands upon it for use with music.
Writing the tool to transform your text from pure text to Markdown from scratch is a bit overkill, so I would recommend using something like Marked to get you started. From there, you should be able to extend the tool for use in music as they do in the example using the marked.use() functionality.
Building in the entirety of this functionality is going to require significant effort, but to get you started I've added an example of how to use Marked below.
$(document).ready(function(){
$source.keyup(transformText)
})
const $source = $('#editText')
const $dest = $('#preview')
function transformText() {
const markdown = marked($source.val());
$dest.html(markdown)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="InputTEXT">
<textarea id="editText" class="form-control" rows="5"></textarea>
</div>
<div id="preview">
//Preview here
</div>
</body>
</html>
Edit
I didn't have anything better going on tonight, so here's an example of how to manually replace chords. This does not cover stanzas, lines, or links, but it's the best I can do to get you started on the solution.
The basic flow is as follows:
Wait for the textfield to change, then trigger the transformation
Use Marked to handle the basic Markdown functionality
Look for chord word combinations with the format [chord]word
Fill in template and replace each instance of [chord]word with the template
Set the output to our new markdown
The CSS comes straight from the example website and requires a bit of knowledge regarding data attributes and pseudo-elements.
$(document).ready(function(){
$source.keyup(transformText)
transformText()
})
const $source = $('#editText')
const $dest = $('#preview')
function transformText() {
let markdown = marked($source.val());
markdown = replaceChordWords(markdown)
$dest.html(markdown)
}
function replaceChordWords (input) {
let markdown = input
const chordWordRegex = /\[(.*?)\]\w+/g
markdown = markdown.replaceAll(chordWordRegex, (input) => {
const chordRegex = /\[(.*?)\]/
const inputSplit = input.split(chordRegex).filter(x => x !== '')
return `<span class="chord-word">
<span class="chord" data-uncopyable-text="${inputSplit[0]}"></span>
${inputSplit[1]}
</span>`
})
return markdown
}
.chord-word {
display: inline-block;
padding-top: 17px;
height: 17px;
position: relative;
}
.chord {
color: #1f45ff;
white-space: pre;
position: absolute;
bottom: 17px;
font-weight: normal;
font-style: normal;
white-space: wrap;
}
[data-uncopyable-text]::after {
content: attr(data-uncopyable-text);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="InputTEXT">
<textarea id="editText" class="form-control" rows="5">
You can enter [C]chords in [Am]the ex[F]act place you want them [G]with squ[E7]are b[C]rackets like this.
</textarea>
</div>
<div id="preview">
//Preview here
</div>
</body>
</html>
I have created a simple addition program using HTML, CSS and Javascript.
HTML code is as follows:
<head>
<title>Input Output</title>
<link rel="stylesheet" type="text/css" href="io.css">
<body>
<h1>Sum App</h1>
<div class="container">
<script type="text/javascript" src="io.js"></script>
First Number <input type="text" id="numOne">
Second Number <input type="text" id="numTwo">
<button type="button" class="btn" onclick="submitBut()">Submit</button>
<p id="result"></p>
<div class="screen" id="screen1"></div>
</div >
The Javascript code is as follows:
function submitBut(){
var numOne= document.getElementById("numOne").value;
var numTwo= document.getElementById("numTwo").value;
var sum=parseInt(numOne)+parseInt(numTwo);
var element= document.createElement("p");
document.getElementById("result").innerHTML = sum;
}
I want to now style the result which as per the code seats in between paragraph tags with id "result".
What are the ways using which this is possible?
I tried using a standard style sheet format as below:
#result {
font-size: 45-px;
background-color= Yellow;
}
However, it is not working at all. Kindly let me know possible fixes.
Regards,
The problem is with the CSS you have written for this code. It's Invalid.
Change it like the following and it will work fine:
#result {
font-size: 45px;
background-color: yellow;
}
Overview: I have an editable div section. Below the div, there is a button which creates a span element, inserts the text "tag" in the span element and finally appends the span element in that editable div
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
#sample-div
{
border-style: solid;
border-width: 1px;
border-color: black;
height:100px;
overflow: auto;
}
</style>
<script type="text/javascript">
function addTags()
{
var tag = document.createElement("span");
tag.className = "tag"
tag.innerHTML = "tag";
$('#sample-div').append(tag);
}
</script>
</head>
<body>
<div id="sample-div" contenteditable="true"></div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
</body>
</html>
Observation: I click on the button, the span element is added to the div as expected
<div id="sample-div" contenteditable="true">
<span class="tag">tag</span>
</div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
However, after I start typing inside the div, I noticed the following:
<div id="sample-div" contenteditable="true">
<span class="tag">tag this is a continuation</span>
</div>
My expectation was:
<div id="sample-div" contenteditable="true">
<span class="tag">tag</span> this is a continuation
</div>
So, my question is why the text "this is a continuation" also getting appended inside the span element? How do I achieve the one stated under my expectation?
The easiest solution would be to set the contentEditable attribute of your span to be false:
function addTags() {
var tag = document.createElement("span");
tag.className = "tag"
tag.innerHTML = "tag";
tag.contentEditable = false;
$('#sample-div').append(tag);
}
Side note: since you are using jQuery you don't need to manually create the tag:
function addTags() {
var tag = '<span class="tag" contenteditable="false">tag</span>'
$('#sample-div').append(tag);
}
I have to upload ePub files on my webpage using iFrame. Now I want to add the functionality of highlighting user selected text inside that iFrame containing the ePub. I am currently using Rangy Library for text highlighting, and it works for the text outside of the iFrame but not for the text inside it.
Here is the code for highlighting:
<!DOCTYPE html>
<head>
<style>
.highlight {
background-color: lightgreen;
}
</style>
<script type="text/javascript" src="../lib/rangy-core.js"></script>
<script type="text/javascript" src="../lib/rangy-classapplier.js"></script>
<script type="text/javascript" src="../lib/rangy-highlighter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-textrange.js"></script>
<script type="text/javascript">
var highlighter;
window.onload = function() {
rangy.init();
highlighter = rangy.createHighlighter();
highlighter.addClassApplier(rangy.createClassApplier("highlight", {
ignoreWhiteSpace: true,
tagNames: []
}));
function highlight() {
highlighter.highlightSelection('highlight');
// var iframe = $("iframe")[0];
var selTxt = rangy.getSelection(myFrame);
console.log('selTxt: '+selTxt);
highlighter.highlightRanges('highlight', selTxt._ranges);
}
document.getElementById('highlight').addEventListener('click', highlight);}
</script>
</head>
<body>
<button id="highlight">Highlight</button>
<div>select to highlight </div>
<div>line to be highlighted</div>
<div>line to be highlighted one </div>
<p>Another <b>paragraph</b></p>
<iframe src="iframe.html" width=500 height=500 name="myFrame"></iframe>
</body>
</html>
This is the iframe code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>This is iframe </h1>
<p>Select content to highlight</p>
<p>Select text to highlight</p>
</body>
</html>
This code works but only highlights the text outside of the iframe,I need it to highlight text inside the iframe.
This is inside my CSS:
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
This is in my HTML:
16:10
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.
Any help is much appreciated.
Pure CSS Answer
Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:
a:target:after{
content: " Test";
background-color: #ccffcc;
}
What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
</body>
</html>
Answer using JavaScript
You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>
"showText" must receive an id parameter to be used with the call to "document.getElementById"
Try this, just 1 link that will display the text below after click:
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
I'm just using style display to hide/show the element. Hope it helps.
just change your css like this:
div.show {
display:block;
color: #66CCFF;
}
Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>