how to edit and preview song chords using jquery - javascript

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>

Related

How to copy HTML code from the browser using javascript

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>

How to style the element which loads after computation of result in javascript?

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;
}

Image is not capturing correctly in dropdown icon using html2canvas

I m having following code to convert image using html2canvas. It is working fine but the select tag icon (down arrow) is not coming when capture the image
<!DOCTYPE html>
<html>
<head>
<title>html2canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.icon-diamond:before {
content: "\e943";
}
</style>
</head>
<body>
<div id="target">
<div style="position:relative;" class="noteclasscontainer" >
<span style="font-size: 60px;" class="glyphicon">
<span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span>
</span>
</div>
<div style="position:relative;" class="noteclasscontainer">
<select>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
<button onclick="takeScreenShot()">to image</button>
<script>
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
</script>
</body>
</html>
Image is capturing correctly but only the select icon is not coming properly.how to fix this issue ?
This is part of browsers default CSS, everything is not accessible to html2canvas, and it should not be (possible leak of privacy info on some OS).
Maybe this exact one could be tweaked for chrome, since chrome does expose some of its shadow selectors, but I don't even know if it is in the list, and anyway, since non-standards these selectors could change at any time in the future, and here is how it looks like on my FF :
So the best for you, is to create the dropdown entirely from scratch. This way all UAs will show the same, and html2canvas will be able to "snapshot" it.

How to add color to text in my div with code

Hi I have my divs with code and I want to add style css for coloring my code inside my div
how to coloring this code in c#
<div style="background-color:orange;">
private void BindDummyRow()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("");
dummy.Rows.Add();
gv.DataSource = dummy;
gv.DataBind();
}
</div>
how to coloring this code in css
<div style="background-color:orange;">
<style>
.panel {
border: 3px solid #3B98EE;
}
</style>
</div>
how to coloring this code in sql
<div style="background-color:orange;">
Select * from table
</div>
how to coloring this code in javascript
<div style="background-color:orange;">
$(function () {
code();
});
</div>
how to coloring this code in html
<div style="background-color:orange;">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form id="form1" runat="server">
</form>
</body>
</html>
</div>
Etc.
Thanks!
You wouldn't want to try accomplishing this through styles alone. What you want is a script to help you with syntax highlighting, such as highlight.js, perhaps (https://highlightjs.org/)
From the usage site, you can do something like this:
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<pre><code class="html">
This is an example
</code></pre>
If you'd like to highlight static content rather than anything dynamically, there are tools online to help you with that, such as http://tohtml.com/

Galleria jquery plugin

Here is the home page for the popular jquery-plugin galleria. I need to insert the download link to the right bottom corner for the active image. Now there is available statistic like (3/10), which indicates the current number from list.
Maybe someone already did this. What is the fastest way?
UPD: using the gearsdigital's idea I wrote the code:
var gallery = Galleria.get(0);
gallery.bind(Galleria.IMAGE, function(e) {
imgHandle = e.imageTarget;
console.log(imgHandle);
console.log(imgHandle.attr('href'));
//$('.galleria-counter').append('Download');
});
The first log line shows up something like:
<img width="584" height="438" src="http://....jpg" style="display: block; position: relative; left: 0px; top: -4px; opacity: 1;">
But how to get the src location, I see the error that attr function isn't available.
your getting the imgHandle from a DOMEvent, not a jquery object.
As attr is part of the jQuery object you need to transfer the dom object to a jquery object.
gallery.bind(Galleria.IMAGE, function(e) {
imgHandle = $(e.imageTarget); //Wrap it here
alert(imghandle.attr('href'))
//$('.galleria-counter').append('Download');
});
I would try to get the current Source-Attribute from the current image and append this as link.
//Untested. This is just a suggestion :)
currentImageSource = $('.galleria-image img').attr('src');
$('.galleria-counter').append('Download');
But a link like this will open the image separatly and not download ordinary. If you want a "real" Download you have to put this image in an zip archive.
$('.galleria-counter').append('Download');
This will produce something like that: http://www.example.com/galleria/img/mygreatimage.jpg.zip
Works for me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
currentImageSource = $('.container img').attr('src');
$('.placeholder').append('Download');
});
</script>
</head>
<body>
<div class="container">
<h2>Get img src</h2>
<img src="http://www.duba.at/wp-content/uploads/2007/08/bild_0570000.jpg" witdh="200" height="220"/>
</div>
<div class="placeholder">
<h2>Append Here</h2>
</div>
</body>
</html>

Categories

Resources