PDA

View Full Version : Dynamic textfield ?



Yammaski
04-03-2010, 03:12 PM
When typing a name in a textfield, the name has to show up in another part of the page. The name also must appear in the choosen font from a menulist of available fonts. The font has to change when selecting another one.
Is this possible with js ?
I searched the net to find something likely. But this one is very complicated !
http://www.speedgraphics.net/letternator/easy_lettering_pop_up.php
Where do I start to create something like that ?
I only need this part :
http://users.telenet.be/gepo/X_Tests/DynamicTextfield.jpg

jscheuer1
04-03-2010, 04:15 PM
In about the simplest terms:

http://home.comcast.net/~jscheuer1/side/text/

Use your browser's 'view source' to get the code.

Yammaski
04-03-2010, 04:22 PM
Thanks a lot John !

Yammaski
04-03-2010, 04:36 PM
One more question :
Is there a way to embed fonts to it ?
Because I have a few fonts which are not available on every body's pc.

jscheuer1
04-03-2010, 05:47 PM
I'm not all that familiar with font embedding. I think there are at least two ways to go about it, probably more. If the method you choose is transparent, that is if it allows you to specify fonts in your css as you normally would, the existing code will most likely work with that.

If you already have a method for font embedding that you are happy with, what is it? If not, find a method of font embedding that you like and get back to me.

Yammaski
04-03-2010, 06:24 PM
I found css methods with Google : "embedding fonts css"
I don't know another way to do it !

jscheuer1
04-03-2010, 06:52 PM
If that's WEFT, it will only (afaik) work in IE. However, support for it or something like it is coming to all browsers eventually (CSS 3). It works really well in IE though and should be transparent as defined in my previous post.

I can Google what you Googled, but there is no guarantee I will come up with the same method you did. What is it called? What page did it take you to?

If you are also looking at TrueDoc or Bitstream, I don't believe these are supported by any modern browser.

Yammaski
04-04-2010, 01:35 PM
Hi,
I've been reading around and I didn't knew it was that complicated.
It seems that there's no real solution that can be used for all browsers simultaneous !?
In the broncode of the link (http://speedgraphics.net/letternator/fonts/) I mentioned before, I can see that they link to their fonts with this function/code :

function show_fonts()
{
url="/letternator/get_font.php?t="+escape(document.f1.text.value);
open(url,'fonts','width=700,height=600,top=150,left='+(screen.width/2-350)+',toolbar=no,location=no,scrollbars=yes');
}

To let it work in the most used browsers, I think I should do it like the following :

/* CSS 3 Font Embed */
@font-face {
font-family: "your FontName"
src: url( "/location_of_font/FontName.eot" ); /* IE */
src: local("real FontName"), url(" /location/of/font/FontFileName.ttf" ) format("truetype"); /* non-IE */
}

/* THEN use like you would any other font */
.yourFontName { font-family: "your FontName", verdana, helvetica, sans-serif;
}
Here (http://www.pieceofsheet.nl/?p=5&cpage=1) I found it, but this page is not working in IE6, IE7 and IE8. It does work in FF 3.6.3 and Chrome 4.1.249.1045. In Safari I don't know.


Method : TTF ànd EOT (http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/)

You can see the fonts I'am using in my static example-page. (http://www.frogstyling.be/Asp/Types.asp)

jscheuer1
04-04-2010, 03:27 PM
Their page doesn't work in IE, so either its advice for IE is wrong, or they haven't followed their own advice correctly.

Here's a page that works in IE:

http://www.spoono.com/html/tutorials/tutorial.php?id=19

Follow their advice for IE, see if you can get it working on a separate page. If so, we can use conditional comments instead of hacks to get the two working together on one page. But first you will have to get each method working separately.

Yammaski
04-05-2010, 04:53 PM
Hi,
I tried Spoono's advice, but for some reason "WEFT" won't work. It starts up and after a while it shuts down. Maybe it's because my Win7 Pro 64 bit-system !?
Anyway ... I did it this way (http://randsco.com/index.php/2009/07/04/p680) and used this converter (http://www.kirsle.net/wizards/ttf2eot.cgi).
My prototype-page (http://www.frogstyling.be/X_Tests/DynamicText.asp)
I hope it works on your site, I added 2 images to compare the fonts.
When the text becomes larger/wider then the box, it will overflow.
Is it possible to resize the text automatically so it will fit in the textbox ?
Textbox may be max 440px wide (max 40 characters can be filled in).

jscheuer1
04-05-2010, 05:32 PM
I think the solution to the text overflow might be, in your stylesheet:


#TextColor {
color: red;
font-family: arial;
width: 400px;
height: 80px;
font-size: 250%;
text-align: center;
border: 1px solid #ccc;
background-position: -4px -4px;
line-height: 70px;
overflow: hidden;
}

because there really isn't a limit to the number of characters. There is a limit to the number of characters visa vis the size of the font. You could give them a choice of font-size, that way they could fit in more letters, but the size would be smaller. If the font-size were small enough, two lines might fit. So you might want to set minimum and maximum font-sizes. A character count could also or instead be used if desired though. The various fonts have different inherent sizes. For Bubble that should probably be set smaller, like maybe 70% of what it currently is in order to match the others. To achieve that, when bubble is the font, you could do:


document.getElementById('BackColor').style.fontSize = '70%';

And for all others:


document.getElementById('BackColor').style.fontSize = '';

or:


document.getElementById('BackColor').style.fontSize = '100%';

The foreground font-size will get multiplied by the background (containing division) font-size. Or if none is specified, be unaffected by it.

Yammaski
04-06-2010, 07:16 AM
Thanks John.
That's a bit complicated to me, isn't it possible like the example (http://www.speedgraphics.net/letternator/easy_lettering_pop_up.php) ? The more letters you add, the smaller the text becomes. So it will always fit.

http://www.frogstyling.be/X_Tests/Text2.jpg

http://www.frogstyling.be/X_Tests/Text1.jpg (The max characters to fill in my textfield is 40, that's less than this one.)


I fixed it now so that you can adjust the fontsize : http://www.frogstyling.be/X_Tests/DynamicText.asp. What do you think about this solution ? :)


PS : In the stylesheet you put : background-position: -4px -4px;. What's the goal for it ? I can't figure it out.

jscheuer1
04-06-2010, 02:33 PM
Try this out:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST_EigenText</title>
<script type="text/javascript">
function kleurhex(color)
{
var hexdata;

switch (color) {
case 'Black':
hexdata='#000000';
break;

case 'Turquoise':
hexdata='#009B97';
break;

case 'Light Red':
hexdata='#CB1703';
break;

case 'Telemagenta':
hexdata='#C02C6E';
break;
}

document.getElementById('TextColor').style.color = hexdata;
}
</script>
<script type="text/javascript">
function changeBG(color) {

element=document.getElementById('BackColor').style;
element.background=color;
}
</script>
<script type="text/javascript">
var stapgrootte = 3;
var dsi=24;
function kleingroot(p) {
if (p == "grow") {
dsi+=stapgrootte;
}
else {
dsi-=stapgrootte;
}
document.getElementById('TextColor').style.fontSize=dsi+"px";
}
function addText(val){
var t = document.getElementById('TextColor').getElementsByTagName('span')[0], ts = t.style;
ts.visibility = 'hidden';
ts.fontSize = '100%';
t.innerHTML = val;
while(t.offsetWidth > t.parentNode.offsetWidth){
ts.fontSize = parseFloat(ts.fontSize) - 0.1 + '%';
}
ts.visibility = 'visible';
}
</script>

<link href="DynaText.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#TextColor span {
white-space: nowrap;
}
#TextColor {
font-size: 250%!important;
height: 72px;
overflow: visible;
}
</style>
</head>
<body>
<form action="#">
<table width="440" border="1">
<tr>
<td colspan="2"><label>Text:
<input name="text" type="text" onkeyup="addText(this.value);" value="Jah ... hier !" size="40" maxlength="40" />
</label></td>
</tr>
<tr>
<td colspan="2">
<label>Font:<select name="font" onchange="document.getElementById('TextColor').style.fontFamily = this.value;">
<option value="arial">Arial</option>
<option value="times new roman">Times New Roman</option>
<option value="Comic Sans MS">Comic Sans</option>
<option value="Cooper">Cooper</option>
<option value="AstronBoy">Astron Boy Italic</option>
<option value="Bubble">Bubble</option>
</select></label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Je tekst <a href="#" onclick='kleingroot("grow")'>GROTER</a> of <a href="#" onclick="kleingroot()">KLEINER</a> ?</td>
</tr>
<tr>
<td width="215">
<label>Color: <select name="color" onchange="kleurhex(this.value);">
<option value="Light Red">Light Red</option>
<option value="Turquoise">Turquoise</option>
<option value="Black">Black</option>
<option value="Telemagenta">Telemagenta</option>
</select></label></td>
<td width="215">ColorBG:
<select name="colorBG" onchange="changeBG(this.value)">
<option value="White">White</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Grey">Grey</option>
</select></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td></tr>
<tr>
<td colspan="2">
<div id="BackColor">
<div id="TextColor"><span>Typ in het bovenste vak je tekst !</span>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center"><p><img src="AstronBoy.JPG" width="402" height="82" alt="" /></p>
<p>Font : Astron Boy</p></td>
</tr>
<tr>
<td colspan="2" align="center"><p><img src="bubble.JPG" width="403" height="83" alt="" /></p>
<p>Font : Bubble</p></td>
</tr>
</table>
</form>
</body>
</html>

The background-position only applies to a background image. Since you've removed that, you may also remove the background-position.

Yammaski
04-06-2010, 03:47 PM
Nice !
One point : when typing all (40) characters and then you choose Bubble, the text flow over the table/frame.
You have to hit the bar or something like that to get it right.
It's like it doesn't "refresh".
http://www.frogstyling.be/X_Tests/DynamicText_Copy.asp

http://www.frogstyling.be/X_Tests/Text1.jpg

http://www.frogstyling.be/X_Tests/Text2.jpg

jscheuer1
04-06-2010, 03:58 PM
You would need to add that code when changing fonts:


function changeFont(val){
var t = document.getElementById('TextColor').getElementsByTagName('span')[0], ts = t.style;
ts.visibility = 'hidden';
ts.fontSize = '100%';
ts.fontFamily = val;
while(t.offsetWidth > t.parentNode.offsetWidth){
ts.fontSize = parseFloat(ts.fontSize) - 0.1 + '%';
}
ts.visibility = 'visible';
}


<label>Font:<select name="font" onchange="changeFont(this.value);">
<option value="arial">Arial</option>
<option value="times new roman">Times New Roman</option>
<option value="Comic Sans MS">Comic Sans</option>
<option value="Cooper">Cooper</option>
<option value="AstronBoy">Astron Boy Italic</option>
<option value="Bubble">Bubble</option>
</select></label>

BTW, We should change to parseFloat from parseInt, as parseInt could cause an endless loop in some cases. I've changed it in my previous post as well.

Yammaski
04-06-2010, 05:26 PM
It's working fine now in IE 7 & 8 and in FF3.6.3.

But when the page loads and you hit "Bubble" :
- in Chrome text flow over, but when hitting a key it becomes ok
- in IE 6 table expands and it doesn't becomes ok
Something with the css "overflow" I guess.

http://www.frogstyling.be/X_Tests/DynamicText_Copy.asp

jscheuer1
04-07-2010, 01:23 PM
Because the downloaded fonts are difficult to duplicate here, and because my IE 6 doesn't appear to allow me to enter text on any web page's text inputs, I'm not sure how to test that here.

However, this may take care of it:


function addText(val){
var t = document.getElementById('TextColor').getElementsByTagName('span')[0], ts = t.style;
ts.visibility = 'hidden';
ts.fontSize = '100%';
t.innerHTML = val + 'h';
t.innerHTML = val + ' ';
while(t.offsetWidth > 436){
ts.fontSize = parseFloat(ts.fontSize) - 0.1 + '%';
}
ts.visibility = 'visible';
}

function changeFont(val){
var t = document.getElementById('TextColor').getElementsByTagName('span')[0], ts = t.style;
ts.visibility = 'hidden';
ts.fontFamily = val;
addText(t.innerHTML);
}

That should do it for Chrome. Perhaps even for IE 6. The two major changes are that we now use 436, the actual style width of the TextColor division, rather than relying on overflow and offsetWidth to make this calculation for us, so if you change the style width of TextColor, you must change this number in the function. The font family change now hands off to the addText function which adds a letter and then removes it regardless of whatever else is happening.

If that all works out - You may want to experiment with using overflow hidden:


#TextColor {
color: red;
font-family: arial;
width: 436px;
font-size: 250%;
text-align: center;
border: 1px solid #ccc;
line-height: 70px;
height: 72px;
overflow: hidden;
}

I'm thinking IE 6 here, that should prevent the table from expanding if it still does so temporarily during font family changes. But it might mess things up in IE 6 or others.

Yammaski
04-08-2010, 07:34 PM
Thanks John, it's working !
It took me half a day to get all the fonts working, but it should be ok now :)

Can you take a look at the "preview fonts (http://www.speedgraphics.net/letternator/easy_lettering_pop_up.php)" :
http://www.frogstyling.be/Knipsel.jpg

If you have an idea how this is done ... can you give me a hint so that I know how to start with it ;)

jscheuer1
04-09-2010, 06:33 AM
The pop up and its communication with the main page - it gets the text from the main page as a javascript generated query string, and sends the font selection back to the main page as a javascript variable - is all pretty straightforward javascript. However, on the page in the pop up, it appears that they are using PHP to generate the many images, each in a specific font, each with the text as sent from the main page, each with a javascript onclick event that will close the pop up while sending the font choice back to the main page. I have a rough idea of how this is done in PHP, even less of a one as to how, if at all it (the image generation part), can be done in asp.

Each generated image is about 5k. Your fonts on your main page are all I imagine at least about 8k. If you are already downloading the fonts to the user, it makes little sense to send them generated images as well. The page you are trying to use as a guide however appears not to send any fonts to the user, just these generated images from fronts that are stored on and that remain on the server. It's a bit more economical byte wise, unless the user changes the text and previews the fonts two or more times. At that point it would require downloads totaling 10, 15, or more k per font.

If you are committed to downloading the fonts to the user, you would probably be better off not popping up another page which might require the fonts to be downloaded again.

You could use a javascript generated pop up division. This would also have the advantage of not being potentially blocked by the viewer's pop up blocker, which it will be if the user's pop up blocking settings are too high. This will also happen to the pop up on the page you are using as a guide. Most folks' pop up blocking settings aren't that strict. But many are.

If you are only popping up a division, you can use the existing fonts that the user has already downloaded. The details of how this would be done would vary depending upon how you choose to pop up the division. You could select an existing script like ColorBox:

http://colorpowered.com/colorbox/

using its inline capability. There are probably at least several other scripts that can do that sort of thing. Or you could write something from scratch. It would need a way to set the text in each of many child divisions, not unlike what you are currently doing with the ColorText division. This would be done before it was popped up. If any of these were clicked, it could set the font select box to the name of the font that was clicked, and set the text display in the main ColorText division to that font.

But since you are already able to show the user his/her text in their selected font, I wonder if this is really necessary. You could have a separate page for font browsing with images like those on your demo page. These would not show the text that the user has in each font, your main page already shows the user their text in the desired font. It would just show the available fonts, to aid in font selection.

Yammaski
04-09-2010, 04:15 PM
But since you are already able to show the user his/her text in their selected font, I wonder if this is really necessary.
That's what I thought too.
But I had a better idea ... let the customer compare ...
see testpage (http://www.frogstyling.be/X_Tests/DynamicText2.asp)
I just copied the codes and changed a few names. I hope it won't give any problems !? The page passed the W3C html & css3 validator, so I guess it will be ok.

jscheuer1
04-09-2010, 06:51 PM
Nothing really wrong with the code. Things could be consolidated a bit though.

One thing I notice is that, except for IE, it appears that the fonts are only downloading when needed. This causes a slight delay when changing fonts if the font chosen hasn't been viewed already, but makes the page load much faster.

Another thing, since they are presumably comparing the same text in two different fonts, why not have just one text input that changes both ColorText areas, and (as you now have it) a font1 and a font2 select? Perhaps when they make their final choice they can even specify which font (1 or 2) that they want. Radio buttons would be good for that, and the selected output ColorText could get a bold border or something to indicate the active one.

Yammaski
04-11-2010, 07:00 PM
Much better with just one input textfield :)
I also set the background choice to one color.

I detected a little-big issue : when typing text, on the ± 26th character the second text stops showing the input.
testpage (http://www.frogstyling.be/X_Tests/DynamicText3.asp)

How can I let the fonts already load on a previous page or only load the font when it's needed (to save time) ?



Radio buttons would be good for that, and the selected output ColorText could get a bold border or something to indicate the active one
Also a very good idea that I'am going to work out.

Yammaski
04-14-2010, 02:50 PM
I detected a little-big issue : when typing text, on the ± 26th character the second text stops showing the input.

Finely I found it, I forgot this in the css :

#TextColor span {
white-space: nowrap;
}


Now the preload of the types ...