Om nog een paar regeltjes script en die extra addText2(this.value); uit te sparen, kan je er ook een mini-loopje voor de twee div'jes van maken:
[JS]function addText(val){
for (i=1; i<3; i++){
var t = document.getElementById('Text'+i+'').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';
}
}[/JS]
met:
HTML:
<label>YOUR TEXT
<input id="text" name="text" type="text" onkeyup="addText(this.value);"
value="Typ here your text" size="40" maxlength="40" />
</label>
en:
HTML:
<div id="Text1">
<div id="TextColor"><span>text</span></div>
</div>
<div id="Text2">
<div id="TextColor2"><span>text</span></div>
</div>
Met vriendelijke groet,
CSShunter
PS-1
Als dit voor publiek gebruik is, heb je kans dat mensen (zoals ik
) uit gewoonte na het invullen van een invulvakje automatisch op Enter rammen: net als bij zoekvakjes enz.
In dit geval werkt dat niet: hier reset de tekst en ben je 'm kwijt!
Misschien moet hier nog iets op verzonnen worden?
PS-2
Aan de andere kant: als een bezoeker de tekst uit eigen beweging wil resetten en daarvoor op de refresh-knop van de browser klikt, is de reset maar half. Dan blijft de ingetikte tekst staan, en is de browser-adresregel overvol geraakt met de oude variabelen (zie
screenshotje). - Met een "reset"-knopje eronder, dat gewoon naar dezelfde pagina linkt, ben je daar in ieder geval van af.
PS-3
Het inbakken van eigen lettertypes is altijd heel lastig. Bij mij onder WinXPpro werkt de cursieve Arial niet in Firefox3.0 en FF3.5, en de andere fonts ook niet. Die worden op een of andere manier niet gevonden, en vallen dan terug op een gewone Times New Roman (mijn default-lettertype in FF).
De
.eot'tjes in Internet Explorer7 en IE8, Opera, Chrome en Safari doen het daarentegen wel volgens plan: daar komen de fantasie-types er prachtig uit.
PS-4:
Het inladen van al die lettertypes vraagt met name voor IE vrij veel tijd (als de cache leeg is
), waarin er nog helemaal niets van de pagina te zien is. Misschien valt er nog iets te bedenken om een lettertype pas in te laden op het moment dat het geselecteerd wordt? Iets javascripterigs? Of misschien stiekem vast een stelletje downloaden bij de voorafgaande pagina('s)?
