I am trying to make a simple code for work to help some coworkers out. Basically I want them to be able to enter in 2 inputs and have a html code output. For example:
input 1= corn
input 2 = delicious
output = <font color="#987654" face="Helvetica, Arial, sans-serif">corn</font>delicious
The current output is simply adding the html styling to the first input. Any advice would be greatly appreciated. Cheers!
<head>
<title></title>
<style>
#prod_name { height: 30px; width:700px; }
#prod_desc { height: 30px; width:700px; padding-top:15px; }
</style>
</head>
<body>
Title: <input id="prod_name"><br />
Description: <input id="prod_desc"><br />
<button id="convert">Convert to HTML</button>
<hr>
<div id="result"></div>
<script>
function convert_it() {
var proname = document.getElementById('prod_name').value;
var descname = document.getElementById('prod_desc').value;
var html = '<font color="#987654" face="Helvetica, Arial, sans-serif">' + proname + '</font> ' + descname;
document.getElementById('result').innerHTML = html;
}
document.getElementById('convert').addEventListener('click', convert_it);
</script>
</body>
Is this what you're looking for?
http://jsfiddle.net/gratiafide/s6vq9tmo/
This literally outputs the HTML string:
<font color="#987654" face="Helvetica, Arial, sans-serif">corn</font> delicious
Here's the JS:
function convert_it() {
var proname = document.getElementById('prod_name').value;
var descname = document.getElementById('prod_desc').value;
var html = '<font color="#987654" face="Helvetica, Arial, sans-serif">' + proname + '</font> ' + descname;
document.getElementById('result').innerText = html;
}
document.getElementById('convert').addEventListener('click', convert_it);
Basically you need to use .innerText instead of .innerHTML
Related
I have been working on this code for a variable font I created, where the goal would be that each letter that is typed increases in font-weight so the text slowly gets more and more unreadable. Is it possible to do that while the text is being typed, because right now it just weirdly adds the same letter in the input one where it does what it should progressively, and the other just normally?
Thank you in advance for any help!
<html>
<body>
<div class="myInput" id="testarea" contentEditable="true"> insert text </div>
<style>
#import {
https: //static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2}
#font-face {
font-family:wf_2acfb8a9fc2d407896ec287713383a8d;
src: url("https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2") format("woff2");
font-weight: 101 900
}
div {
font-family: 'wf_2acfb8a9fc2d407896ec287713383a8d', sans-serif;
font-weight: 101;
font-size: 100px;
}
</style>
<script>
let initWeight = 100;
document.getElementById("testarea").onkeypress = function(event) {
myFunction(event.key)
};
function myFunction(letter) {
innerHTML = '<span style="font-weight:' + initWeight + '">' + letter + '</span>'
document.getElementById("testarea").innerHTML += innerHTML
initWeight += 10;
}
</script>
</body>
</html>
You are almost on the right track just just added semi colons ins span style style="font-weight:'+initWeight+';
As far as the size not increasing I created a alert on event listener just to show that it does indeed work. However visual differential may not be enought for the eye to notice.
I have created an example with my own bit of creativity where besides font-eight we are randomising font-size to trick the eye a bit more.
<html>
<body>
<div class="myInput" id="testarea" contentEditable="true"> insert text </div>
<style>
#import {
https: //static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2}
#font-face {
font-family:wf_2acfb8a9fc2d407896ec287713383a8d;
src: url("https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2") format("woff2");
font-weight: 101 900
}
div {
font-family: 'wf_2acfb8a9fc2d407896ec287713383a8d', sans-serif;
font-weight: 101;
font-size: 100px;
}
</style>
<script>
let initWeight = 100;
document.getElementById("testarea").onkeypress = function(event) {
alert(initWeight);
myFunction(event.key);
};
function myFunction(letter) {
innerHTML = '<span style="font-weight:'+initWeight+';">' + letter + '</span>'
document.getElementById("testarea").innerHTML += innerHTML
initWeight += 10;
}
</script>
</body>
</html>
FINAL EXAMPLE
<html>
<body>
<div class="myInput" id="testarea" contentEditable="true"> insert text </div>
<div class="myInput" id="showarea"></div>
<style>
#import {
https: //static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2}
#font-face {
font-family:wf_2acfb8a9fc2d407896ec287713383a8d;
src: url("https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2") format("woff2");
font-weight: 101 900
}
div {
font-family: 'wf_2acfb8a9fc2d407896ec287713383a8d', sans-serif;
font-weight: 101;
font-size: 100px;
}
</style>
<script>
let initWeight = 100;
document.getElementById("testarea").onkeypress = function(event) {
myFunction(event.key);
};
function myFunction(letter) {
let size = Math.floor(Math.random() * (100 - 50)) + 15;
innerHTML = '<span style="font-weight:'+initWeight+'; font-Size:' +size+ 'pt;">' + letter + '</span>'
document.getElementById("showarea").innerHTML += innerHTML;
initWeight += 10;
}
</script>
</body>
</html>
I've been working on this code for a variable font I designed, where with every letter typed the font-weight gets heavier.
It works alright if I have an output, but is it possible to have the font-weight change directly with every letter typed in the input testarea field?
<html>
<body>
<div class="myInput" id="testarea" contentEditable="true"> insert text </div>
<style>
#import {
https: //static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2}
#font-face {
font-family:wf_2acfb8a9fc2d407896ec287713383a8d;
src: url("https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2") format("woff2");
font-weight: 101 900
}
div {
font-family: 'wf_2acfb8a9fc2d407896ec287713383a8d', sans-serif;
font-weight: 101;
font-size: 100px;
}
</style>
<script>
let initWeight = 100;
document.getElementById("testarea").onkeypress = function(event) {
myFunction(event.key)
};
function myFunction(letter) {
innerHTML = '<span style="font-weight:' + initWeight + '">' + letter + '</span>'
document.getElementById("testarea").innerHTML += innerHTML
initWeight += 10;
}
</script>
</body>
</html>
This was my earlier code where the output was changed:
<html>
<style>
#import {
https: //static.wixstatic.com/ufonts/5bda5f_04476cfbcbfe4a349a33e0080a539b44/woff2/file.woff2}
#font-face {
font-family:wf_04476cfbcbfe4a349a33e0080;
src: url("https://static.wixstatic.com/ufonts/5bda5f_04476cfbcbfe4a349a33e0080a539b44/woff2/file.woff2") format("woff2");
font-weight: 101 900
}
div {
font-family: 'wf_04476cfbcbfe4a349a33e0080', sans-serif;
font-weight: 101;
font-size: 100px;
}
</style>
<body>
<div class="myInput" id="testarea" contentEditable="true"> insert text </div>
<div id="result" contentEditable="true"></div>
<script>
let initWeight = 100;
document.getElementById("testarea").onkeypress = function(event) {
myFunction(event.key)
};
function myFunction(letter) {
const letterHTML = '<span style="font-weight:' + initWeight + '">' + letter + '</span>'
document.getElementById("result").innerHTML += letterHTML
initWeight += 10;
}
</script>
</body>
</html>
I'm not entirely sure, but I think you're looking for something like this (?)
HTML
<h4>Type here</h4>
<div class="myInput" id="testarea" contentEditable="true"></div>
<span></span>
JavaScript
const inputDiv = document.getElementById('testarea');
const span = document.querySelector('span');
let weight = 0;
inputDiv.onkeydown = function(e) {
weight += 100;
this.style.fontWeight = weight;
span.textContent = weight;
}
The span tag is for testing purposes.
Check out this JSFiddle
Technology: Asp.Net 4.5 WebForms
I am using the following javascript function to color text in a code block. It actually works if I halt the code with an alert immediately after the function. But the regex rendering doesn't stick. How can I get the results to render after function is completed? Below is a small sample.
CSS
<style type="text/css">
.blue
{
color: blue;
}
.demo
{
background-color: gainsboro;
width: 300px;
height: 100px;
padding: 5px;
}
</style>
JavaScript
<script type="text/javascript">
function Prettyfy() {
var keys = ["Dim", "As", "String"]
for (var i = 0; i < keys.length; i++) {
var value = keys[i];
var str = document.getElementById("demo").innerHTML;
var regexExpression = "(?!(?:[^<]+>|[^>]+<\\/a>))\\b(" + value + ")\\b";
var regex = new RegExp(regexExpression, "ig");
document.getElementById("demo").innerHTML = str.replace(regex, '<span class="blue">' + value + '</span>');
}
alert(document.getElementById("demo").innerHTML);
}
</script>
HTML
<body>
<form id="form1" runat="server"> <pre id="demo" class="demo">
<code>
dim motor as string
dim reducer as string
</code>
</pre>
<br />
<button onclick="Prettyfy()">Prettyfy Code</button>
</form>
</body>
The problem is very likely to be that your form is causing the page to be repainted by default. Add a "type" attribute to your <button>:
<button type=button onclick="Prettyfy()">
(It's not clear why there's a form at all.)
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Letter Shadows from User Input
The user inputs their name and it is printed out vertically twice. The second column is supposed to be like a shadow. I am trying to crunch the letters in the second column (id=letters2) or limit the space between them. Does anyone know how to do this. Also, please view the code in MZFirefox because the rotation effect only works in that browser.
<html>
<head>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
function animate() {
var txt = document.getElementById("words").value;
var area = txt;
var splittxt = txt.split("");
document.getElementById("letters").innerHTML = "";
document.getElementById("letters2").innerHTML = "";
var i;
for (i = 0; i < splittxt.length; i++) {
document.getElementById("letters").innerHTML = document.getElementById("letters").innerHTML + splittxt[i] + "<br>";
document.getElementById("letters2").innerHTML = document.getElementById("letters2").innerHTML + splittxt[i] + "<br>";
}
//displays how many symbols are in text box and what is in text box
document.getElementById("num").innerHTML= txt.length;
document.getElementById("msg").innerHTML = txt;
r.clear();
// Make our pink rectangle
ellipse = r.ellipse(40, 15, 30, 5).attr({"fill": "#969696", "stroke": "none"});
ellipse.glow({width:10});
}
</script>
<style type="text/css">
#letters
{
background-color:yellow;
width:25px;
float:left;
}
#letters2
{
letter-spacing:0px;
display:block;
-moz-transform: rotate(80deg);
margin-left:90px;
margin-top:80px;
width:25px;
color:#DEDEDE;
}
</style>
</head>
<body>
Text: <input type="text" id="words" value="" />
<input type="button" value="Animate" onclick="animate()" />
<div id='msg'></div>
<div id='num'></div>
<div id='letters'></div>
<div id="letters2"></div>
<div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;">
</div>
<div id="elps" style="margin-left:100px;"/>
<script type="text/javascript"> //all your javascript goes here
var r = new Raphael("draw-here-raphael");
</script>
</body>
</html>
Live Long and Prosper.
You can used the CSS line-height property to change the spacing between the letters.
Here is a jsfiddle I made earlier:
jsfiddle.net/c7uDm
Goal: User types name into user input field, selects Animate button, and name is printed vertically with each letter containing a drop shadow of each letter. The Javascript library Raphael may be desirable.
Problem: So far what I have is the name being printed vertically twice side by side. Obviously the second column should be the letters as drop shadows, but I don't know how to change the style of them to look like shadows.
My manager gave me one hint: "I had to create a 2nd text line placed underneath the text...and I used the .blur() method on it. If I have to give you another hint I'll be hinting you to the door."
I'm in some real trouble here. If anyone has suggestions, solutions, anything it would be very much appreciated.
<html>
<head>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
function animate() {
var txt = document.getElementById("words").value;
var area = txt;
var splittxt = txt.split("");
document.getElementById("letters").innerHTML = "";
document.getElementById("letters2").innerHTML = "";
var i;
for (i = 0; i < splittxt.length; i++) {
document.getElementById("letters").innerHTML = document.getElementById("letters").innerHTML + splittxt[i] + "<br>";
document.getElementById("letters2").innerHTML = document.getElementById("letters2").innerHTML + splittxt[i] + "<br>";
}
//displays how many symbols are in text box and what is in text box
document.getElementById("num").innerHTML= txt.length;
document.getElementById("msg").innerHTML = txt;
r.clear();
// Make our pink rectangle
ellipse = r.ellipse(40, 15, 30, 5).attr({"fill": "#969696", "stroke": "none"});
ellipse.glow({width:10});
}
</script>
<style type="text/css">
#letters
{
background-color:yellow;
width:25px;
float:left;
}
#letters2
{
letter-spacing:0px;
display:block;
-moz-transform: rotate(80deg);
margin-left:90px;
margin-top:80px;
width:25px;
color:#DEDEDE;
}
</style>
</head>
<body>
Text: <input type="text" id="words" value="" />
<input type="button" value="Animate" onclick="animate()" />
<div id='msg'></div>
<div id='num'></div>
<div id='letters'></div>
<div id="letters2"></div>
<div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;">
</div>
<div id="elps" style="margin-left:100px;"/>
<script type="text/javascript"> //all your javascript goes here
var r = new Raphael("draw-here-raphael");
</script>
</body>
</html>
Live Long and Prosper.
Do you really need raphael? What I did was simply print out your words onto an element and get the shadow with css's text-shadow. To get the vertical text I added a </br> after each letter.
Take a look at the fiddle: http://jsfiddle.net/joplomacedo/wVGbF/
Here's the code in case you can't see the fiddle:
HTML
Text: <input type="text" id="words" value="" />
<input id="animateBtn" type="button" value="Animate" />
<div class="print"></div>
CSS
.print {
font: 44px/0.8em "Lobster", cursive;
color: gold;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
JS
var join = Array.prototype.join;
$('#animateBtn').on('click', function() {
var txt = $('#words').val(),
spaced_txt = join.call(txt, "</br>");
$('.print').html(spaced_txt);
});
Here is also the text output function with Raphael:
function draw_text() {
var txt = document.getElementById("words").value;
var posy = txt.length*10;
r.clear();
var attr = {font: "50px Helvetica", opacity: 0.5};
var text = r.text(40, 40+posy, txt).attr(attr).attr({fill: "#0f0"}); // underlayer or "shadow"
text.attr({transform: "r270"}); // rotate 270 degrees
var text2 = r.text(43, 43+posy, txt).attr(attr).attr({fill: "#aa0"}); // text above
text2.attr({transform: "r270"}); // rotate 270 degrees
r.safari();
}
var r = new Raphael("draw-here-raphael");
The full script, based on this example, is here.