Entry
How do I move a text in a text field?
Aug 23rd, 2000 08:05
Martin Honnen,
Simply by manipulating the string value of the field where you
repeatedly add to the string or substract part of it.
Various configurations are possible here is a basic example which moves
the text from left to right till it vanishes and then starts with the
full text from the right again (note the style class with the fixed
width font which is necessary for IE where text fields have
proportional fonts by default):
<HTML>
<HEAD>
<STYLE>
.banner {
font-family: Courier New;
}
</STYLE>
<SCRIPT>
var size = 40;
var formRef = 'document.formName.banner';
var spd = 20;
var el, message;
var c = 0;
function moveBanner () {
if (!el) {
el = eval(formRef);
message = el.value;
}
if (c++ == size) {
c = 0;
el.value = message;
}
else
el.value = ' ' + el.value;
setTimeout('moveBanner()', spd);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="moveBanner()">
<FORM NAME="formName">
<INPUT TYPE="text" NAME="banner" SIZE="40" CLASS="banner"
VALUE="Kibology for all.">
</FORM>
</BODY>
</HTML>
The example should work with NN3+ and IE4+ (at least don't have IE3 to
check).
Here is a slightly different example which moves the text in from the
left character by character then to the right till it vanishes to
restart:
<HTML>
<HEAD>
<STYLE>
.banner {
font-family: Courier New;
}
</STYLE>
<SCRIPT>
var size = 40;
var formRef = 'document.formName.banner';
var spd = 20;
var message = 'Kibology for all.';
var l = message.length;
var el, text;
var c = 0;
function moveBanner () {
if (!el) {
el = eval(formRef);
}
if (c <= l)
el.value = message.substring(l - c);
else if (c < size + l)
el.value = ' ' + el.value;
else
c = 0;
c++;
setTimeout('moveBanner()', spd);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="moveBanner()">
<FORM NAME="formName">
<INPUT TYPE="text" NAME="banner" SIZE="40" CLASS="banner"
VALUE="">
</FORM>
</BODY>
</HTML>
