I want to try to create a section on my website, where someone can type a word into a text box, this will then be displayed on the same page, under the box, in a font that is chosen by the user by selecting a text box next to the font name?
Can anyone help, you can sort of see an example of this on fonts.com
I look forward to your replies
Something like this maybe ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#f1 p { margin:0; }
#styledTxt { width:300px; margin:12px 0; padding:10px; border:1px solid #999; line-height:20px; }
</style>
<script>
var TEXTBOX = function(){//Namespace wrapper
//Private members
var fonts=[], el_1, el_2, font = 'arial';
var go = function(ips){
var i;
for(i=0; i<ips.length; i++){
if(ips[i].name=="font" && ips[i].checked){
el_2.style.fontFamily = font = ips[i].value;
}
}
if(el_1 && el_2){
txt = document.createTextNode(el_1.value);
oldTxt = el_2.firstChild;
if(oldTxt) el_2.replaceChild(txt, oldTxt);
else el_2.appendChild(txt);
}
};
//Privileged public members
return {
go : function(){ go(fonts); },
init : function(){
el_1 = document.getElementById('txt');
el_2 = document.getElementById('styledTxt');
el_1.onblur = function(){ go(ips) };
ips = document.getElementsByTagName('input');
for(i=0; i<ips.length; i++){
if(ips[i].name=="font"){
ips[i].onclick = function(){ go(fonts); };
fonts.push(ips[i]);
}
}
go(fonts);
}
};
}();
onload = function(){
TEXTBOX.init();
}
</script>
</head>
<body>
<form id="f1" name="f1">
<input name="txt" value="Hello World!">
<p><input type="radio" id="font1" name="font" value="arial" checked="checked"><label for="font1">Arial</label></p>
<p><input type="radio" id="font2" name="font" value="times"><label for="font2">Times</label></p>
<p><input type="radio" id="font3" name="font" value="verdana"><label for="font3">Verdana</label></p>
</form>
<div id="styledTxt"></div>
</body>
</html>Airshow
Something like this maybe ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Airshow :: Untitled</title> <style type="text/css"> #f1 p { margin:0; } #styledTxt { width:300px; margin:12px 0; padding:10px; border:1px solid #999; line-height:20px; } </style> <script> var TEXTBOX = function(){//Namespace wrapper //Private members var fonts=[], el_1, el_2, font = 'arial'; var go = function(ips){ var i; for(i=0; i<ips.length; i++){ if(ips[i].name=="font" && ips[i].checked){ el_2.style.fontFamily = font = ips[i].value; } } if(el_1 && el_2){ txt = document.createTextNode(el_1.value); oldTxt = el_2.firstChild; if(oldTxt) el_2.replaceChild(txt, oldTxt); else el_2.appendChild(txt); } }; //Privileged public members return { go : function(){ go(fonts); }, init : function(){ el_1 = document.getElementById('txt'); el_2 = document.getElementById('styledTxt'); el_1.onblur = function(){ go(ips) }; ips = document.getElementsByTagName('input'); for(i=0; i<ips.length; i++){ if(ips[i].name=="font"){ ips[i].onclick = function(){ go(fonts); }; fonts.push(ips[i]); } } go(fonts); } }; }(); onload = function(){ TEXTBOX.init(); } </script> </head> <body> <form id="f1" name="f1"> <input name="txt" value="Hello World!"> <p><input type="radio" id="font1" name="font" value="arial" checked="checked"><label for="font1">Arial</label></p> <p><input type="radio" id="font2" name="font" value="times"><label for="font2">Times</label></p> <p><input type="radio" id="font3" name="font" value="verdana"><label for="font3">Verdana</label></p> </form> <div id="styledTxt"></div> </body> </html>Airshow
Hi Airshow,
Thanks for the reply, and it is looking like it is going in the right direction, but please don't laugh, as I am not that great at this, but when I tried your code, is there meant to be a button next to the text box to submit your entered word?
At the moment it just says 'hello world' and I cant get the second text box to do anything?
It is probably me!
Landroverthing,
(I'd like a tidy Series I swb 88 myself but that's another story)
My fault. I wrote that in a hurry and had only tested in IE and not FF, which I expect you are using (or Opera). Try this version, which I have tested in IE, FF and Opera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#f1 p { margin:0; }
#styledTxt { width:300px; margin:12px 0; padding:10px; border:1px solid #999; line-height:25px; }
</style>
<script>
var TEXTBOX = function(){//Namespace wrapper
//Private members
var fonts=[], el_1, el_2;
var go = function(){
var i;
for(i=0; i<fonts.length; i++){
if(fonts[i].name=="font" && fonts[i].checked){
el_2.style.fontFamily = fonts[i].value;
}
}
if(el_1 && el_2){
el_2.innerHTML = (el_1.value=='') ? ' ' : el_1.value;
}
};
//Privileged (public) members
return {
init : function(){
el_1 = document.getElementById('txt');
el_2 = document.getElementById('styledTxt');
el_1.onblur = function(){ go() };
var ips = document.getElementsByTagName('input');
for(i=0; i<ips.length; i++){
if(ips[i].name=="font"){
ips[i].onclick = function(){ go(); };
fonts.push(ips[i]);
}
}
go();
}
};
}();
onload = function(){
TEXTBOX.init();
}
</script>
</head>
<body>
<form id="f1" name="f1">
<input id="txt" value="Hello World!">
<p><input type="radio" id="font1" name="font" value="arial" checked="checked"><label for="font1" style="font-family:arial;">Arial</label></p>
<p><input type="radio" id="font2" name="font" value="times"><label for="font2" style="font-family:times;">Times</label></p>
<p><input type="radio" id="font3" name="font" value="verdana"><label for="font3" style="font-family:verdana;">Verdana</label></p>
</form>
<div id="styledTxt"></div>
</body>
</html>I have also tidied up the code and now show each font option in its own font face.
You could have a "Go" button but the event handlers already in place should do the job. You should see a change in the "styledTxt" box when the "txt" input field loses focus and/or when any of the radio buttons is clicked to change font.
If you look at the TEXTBOX.init method, you will see that handlers are attached to el_1.onblur and each of the radio buttons' onclick events. In each case, the go() method is called. This is what makes it work. I developed with a "Go" button but deleted it when I attached the other event handlers and found they provided adequate control.
Airshow
YOU ARE A GENIUS!
That is bordering on perfect, the only glitch at the moment though and hence I said about the button, is that your instinct as a user is to type something in the textbox, then press the return key, which automatically repopulates the box with Hello World
So is that an easy fix?
Landroverthing,
Agreed it would better like that, and it's very easy to program.
In TEXTBOX.init, you need to add yet another event handler to call go() . Insert the following immediately above the line that reads go() :
document.f1.onsubmit = function(){
go();
return false;
}Note how this function returns false , otherwise the form would submit, the page would refresh and the effect you seek would be lost. Try commenting out return false and see what happens.
Airshow
Thanks Airshow,
That is perfect! give yourself a huge pat on the back!
Sadly I don't have anything as classic as a series 1, just an E reg 90 with a TD5 lump running veg oil, at least I'm helping the planet!
If there is anything I can do in return, just ask!
Don't know if you are married etc, but if you fancy visiting my wife's website at www.camelandyak.co.uk, I can send you a gift at trade price, maybe a xmas present for your mum!
Thank you so so much.
Landroverthing,
Here's a version with a character count. It also includes whitespace to non-breaking space conversion such that the styled version matches the original text even when the user has entered multiple spaces. Without the character count this aspect wasn't really an issue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#f1 p { margin:0; }
#styledTxt { width:300px; margin:12px 0 2px 0; padding:10px; border:1px solid #999; line-height:25px; }
#txtLength { font-size:9pt; }
</style>
<script>
var TEXTBOX = function(){//Namespace wrapper
//Private members
var fonts=[], el_1, el_2, el_3;
var go = function(){
var i;
for(i=0; i<fonts.length; i++){
if(fonts[i].name=="font" && fonts[i].checked){
el_2.style.fontFamily = fonts[i].value;
}
}
if(el_1 && el_2){
var pattern = /\s/g;//RegExp for single whitespace (global)
var t = el_1.value.replace(pattern, ' ');//replace all single whitespace characters with non-breaking spaces.
el_2.innerHTML = (t==='') ? ' ' : t;
if(el_3){ el_3.innerHTML = el_1.value.length + ' characters (including spaces)'; }
}
};
//Privileged (public) members
return {
init : function(){
var i;
el_1 = document.getElementById('txt');
el_2 = document.getElementById('styledTxt');
el_3 = document.getElementById('txtLength');
el_1.onblur = function(){ go(); };
var ips = document.getElementsByTagName('input');
for(i=0; i<ips.length; i++){
if(ips[i].name=="font"){
ips[i].onclick = function(){ go(); };
fonts.push(ips[i]);
}
}
document.f1.onsubmit = function(){
go();
return false;
};
go();
}
};
}();
onload = function(){ TEXTBOX.init(); };
</script>
</head>
<body>
<form id="f1" name="f1">
<input id="txt" value="Hello World!">
<p><input type="radio" id="font1" name="font" value="arial" checked="checked"><label for="font1" style="font-family:arial;">Arial</label></p>
<p><input type="radio" id="font2" name="font" value="courier"><label for="font2" style="font-family:courier;">Courier</label></p>
<p><input type="radio" id="font3" name="font" value="times"><label for="font3" style="font-family:times;">Times</label></p>
<p><input type="radio" id="font4" name="font" value="verdana"><label for="font4" style="font-family:verdana;">Verdana</label></p>
</form>
<div id="styledTxt"></div>
<div id="txtLength"></div>
</body>
</html>Airshow
Air show I see you are really good with custom code how would I write a code to show what a user types into a validation text field on one of my forms as a magnified or larger version above the text box? To give you an example I have a validation text box that is partially blocked by an image(on purpose) but users can still click inside and start typing , but bc of the image they cant see what is being typed into the box to make sure its correct. So I need a solution to have whats being typed show up magnified or in a pop up bubble but only when they are inside the box typing.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.