0

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

3
Contributors
8
Replies
9
Views
8 Years
Discussion Span
Last Post by c9921
1

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

0

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!

1

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=='') ? '&nbsp;' : 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

0

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?

1

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

0

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.

0

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, '&nbsp;');//replace all single whitespace characters with non-breaking spaces.
			el_2.innerHTML = (t==='') ? '&nbsp;' : 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

Edited by Airshow: n/a

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.