469,290 Members | 1,882 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,290 developers. It's quick & easy.

iterating each letter in string

I have a string. I'd like to take this string
and make each char change until it gets to another
char at the same position of the string.

Example:

Original String: " NEW YORK "
Final String: "SAN FRANSISCO"

I'd like each char to loop through the chars on a timer
and show each char in the alphabet until it gets to the
char in the same position as the beginning char
So the first char in the original string, which is a space,
would loop through and show all chars until it reaches "S"

This is supposed to look like those rollover departure/arrival
signs in an airport when the info changes.

Anyone???

If you can't do this, then can you fill me in on HOW to do it?
Maybe even some pseudocode?
Jul 23 '05 #1
14 12018
Mr.Clean wrote:
This is supposed to look like those rollover departure/arrival
signs in an airport when the info changes.


Done that before, here it is:

function fliptext(oElem, sDest, nTime) {
if (
!oElem
|| "string" != typeof oElem.value
|| "string" != typeof sDest
) return null;
if (!nTime || isNaN(nTime)) nTime = 100;
if (oElem.timer) window.clearTimeout(oElem.timer);
var sCurr = oElem.value;
while (sCurr.length < sDest.length) sCurr += " ";
while (sDest.length < sCurr.length) sDest += " ";
oElem.value = sCurr;
oElem.dest = sDest;
oElem.timer = window.setInterval(function() {
var c1, c2, i, sNew = "",
sCurr = oElem.value, sDest = oElem.dest;
for (i=0; i<sCurr.length; i++) {
c1 = sCurr.charCodeAt(i);
c2 = sDest.charCodeAt(i);
sNew += String.fromCharCode(c2 > c1? ++c1 : c2 < c1? --c1 : c1);
}
oElem.value = sNew;
if (sNew == sDest) {
window.clearTimeout(oElem.timer);
oElem.timer = null;
}
}, nTime);
}
[...]
fliptext(
document.forms['foo'].elements['bar'],
'SAN FRANCISCO',
100
);
[...]

fliptext(
document.forms['foo'].elements['bar'],
' NEW YORK',
100
);
[...]
<form name="foo" [...]>
<input name="bar" style="font-family:monospace;border:0">
[...]

ciao, dhgm
Jul 23 '05 #2
In article <36*************@individual.net>, usereplytoinstead@innoline-
systemtechnik.de says...
Mr.Clean wrote:
This is supposed to look like those rollover departure/arrival
signs in an airport when the info changes.


Done that before, here it is:


How can I limit the chars that it flips through and set the length
of the result/destination string?

"ABCDEFGHIJKLMNOPQRSTUVWXYZ .-"
Jul 23 '05 #3
Mr.Clean wrote:
How can I limit the chars that it flips through
Some changes, quick hacked and mostly untested:

function fliptext(oElem, sDest, nTime) {
var i, c, s, sDispChars = " ABCDEFGHIJKLMNOPQRSTUVWXYZ-.";
if (!oElem || "string" != typeof oElem.value) return null;
if (oElem.timer) window.clearTimeout(oElem.timer);
var sCurr = oElem.value.toUpperCase();
sDest = sDest.toUpperCase();
while (sCurr.length < sDest.length) sCurr += " ";
while (sDest.length < sCurr.length) sDest += " ";
sCurr = sCurr.toUpperCase();
for (i=0, s=""; i<sCurr.length; i++)
s += sDispChars.indexOf(c = sCurr.charAt(i)) > -1? c : " ";
oElem.value = s.toUpperCase();
for (i=0, s=""; i<sDest.length; i++)
s += sDispChars.indexOf(c = sDest.charAt(i)) > -1? c : " ";
oElem.dest = s.toUpperCase();
oElem.timer = window.setInterval(function() {
var c1, c2, i, sNew = "",
sCurr = oElem.value, sDest = oElem.dest;
for (i=0; i<sCurr.length; i++) {
c1 = sDispChars.indexOf(sCurr.charAt(i));
c2 = sDispChars.indexOf(sDest.charAt(i));
sNew += sDispChars.charAt(c2 > c1? ++c1 : c2 < c1? --c1 : c1);
}
oElem.value = sNew;
if (sNew == sDest) {
window.clearTimeout(oElem.timer);
oElem.timer = null;
}
}, nTime);
}
and set the length of the result/destination string?


The lenght used is the maximum of the lengths of the two strings
sDest and sCurr. To get an output with more characters, simply
add some spaces to the second argument, sDest.

ciao, dhgm
Jul 23 '05 #4
Dietmar Meier wrote:
Mr.Clean wrote:
This is supposed to look like those rollover departure/arrival
signs in an airport when the info changes.


Done that before, here it is:

[...]

Hey, liked that. Here's a twist, uses an array to constrain the
letters used.

Have fun

--
Rob

<html><head><title>Tumbler</title>
<style type="text/css">
..let {
width: 2em; height: 2em; text-align: center; color: black;
background-color: #ddddee; border: 1px solid red;
display: block; position: absolute; top: 0px; line-height: 2;
font-weight: bold; font-family: sans-serif;}
</style>
<script type="text/javascript">

var letters = [
'A','B','C','D','E','F','G','H','I','J','K','L','M ','N',
'O','P','Q','R','S','T','U','V','W','X','Y','Z',' ','*',
'A','B','C','D','E','F','G','H','I','J','K','L','M ','N',
'O','P','Q','R','S','T','U','V','W','X','Y','Z',' ','*'];

function tumbleWord(w,d,z,lag) {
var k = 0,
m = 0,
wd = '',
oneDiff = false;
while (document.getElementById(d + k)) {k++}
while (wd.length < k) {
(w.charAt(m))? wd += w.charAt(m) : wd += ' ';
m++;
}
z.timer = window.setInterval(function() {
for (var i=0; i<k; i++) {
var oSlot = document.getElementById(d + i).firstChild;
var oLetter = oSlot.data;
if (oLetter != wd.charAt(i)) {
oSlot.data = nextLetter(oLetter);
oneDiff = true;
}
}
if (oneDiff) {
oneDiff = false;
} else {
window.clearTimeout(z.timer);
z.timer = null;
}
}, lag);
}

function nextLetter(a) {
var j = 0;
while (a != letters[j]) {j++}
return letters[j+1];
}

</script>
</head>
<body>
<form action="">
<select id="choices" onchange="
tumbleWord(this[selectedIndex].value,'in',this,'50');
">
<option value="" selected>Select a destination</option>
<option value=" NEW YORK">New York</option>
<option value="SAN FRANCISCO">San Francisco</option>
<option value=" SYDNEY">Sydney</option>
<option value=" AUSCION">Auscion</option>
<option value=" NUUK">Nuuk</option>
<option value=" REYKJAVIK">Reykjavik</option>
</select>
<input type="reset">
</form>
<br> <br>
<div style="position: relative" id="tt">
<div style="left: 2em" class="let" id="in0"> </div>
<div style="left: 4em" class="let" id="in1"> </div>
<div style="left: 6em" class="let" id="in2"> </div>
<div style="left: 8em" class="let" id="in3"> </div>
<div style="left: 10em" class="let" id="in4"> </div>
<div style="left: 12em" class="let" id="in5"> </div>
<div style="left: 14em" class="let" id="in6"> </div>
<div style="left: 16em" class="let" id="in7"> </div>
<div style="left: 18em" class="let" id="in8"> </div>
<div style="left: 20em" class="let" id="in9"> </div>
<div style="left: 22em" class="let" id="in10"> </div>
<div style="left: 24em" class="let" id="in11"> </div>
<div style="left: 26em" class="let" id="in12"> </div>
</div>
</body>
</html>
Jul 23 '05 #5
In article <4203a216$0$21430$5a62ac22@per-qv1-newsreader-
01.iinet.net.au>, rg***@iinet.net.auau says...
Dietmar Meier wrote:
Mr.Clean wrote:
This is supposed to look like those rollover departure/arrival
signs in an airport when the info changes.


Done that before, here it is:

[...]

Hey, liked that. Here's a twist, uses an array to constrain the
letters used.


I get an object required error on this line:

var oLetter = oSlot.data;
Jul 23 '05 #6
Mr.Clean wrote:
[...]

I get an object required error on this line:

var oLetter = oSlot.data;


Yeah, sorry, didn't test in IE... done that now though.

Replace the above line with:

var t = document.getElementById(d + i);
if (!t.firstChild) {
t.appendChild(document.createTextNode(' '));
}

If the only character in the DIV is a space, IE removes the space
and doesn't create a text node, so the DIV has no children and
the script goes belly up. The above line adds tolerance so don't
need any characters in the output divs to start with.

However, it is still intolerant of characters other than those in
the array, so be careful. If required, add a function before the
timer is called that checks each character in the new destination
is in the letters array. If not, replace it with an "*" or some
other character that is in the array.

Also need to add a line to cancel the timer if already running
just after function declaration:

function tumbleWord(w,d,z,lag) {
if (z.timer) window.clearTimeout(z.timer);

You may want to add support for pre-IE 6 browsers with an
alternative to document.getElementById(). Have a look at the
dynWrite options on this groups FAQ at:

<URL:http://www.jibbering.com/faq>

I don't have an IE before 6, so can't test in that realm.

Here's the fixed tumbleWord():

function tumbleWord(w,d,z,lag) {
if (z.timer) window.clearTimeout(z.timer);
var k = 0,
m = 0,
wd = '',
oneDiff = false;
while (document.getElementById(d + k)) {k++}
while (wd.length < k) {
(w.charAt(m))? wd += w.charAt(m) : wd += ' ';
m++;
}
z.timer = window.setInterval(function() {
for (var i=0; i<k; i++) {
var t = document.getElementById(d + i);
if (!t.firstChild){
t.appendChild(document.createTextNode(' '));
}
var oSlot = document.getElementById(d + i).firstChild;
var oLetter = oSlot.data;
if (oLetter != wd.charAt(i)) {
oSlot.data = nextLetter(oLetter);
oneDiff = true;
}
}
if (oneDiff) {
oneDiff = false;
} else {
window.clearTimeout(z.timer);
z.timer = null;
}
}, lag);
}

--
Rob
Jul 23 '05 #7
In article <4203acb9$0$21429$5a62ac22@per-qv1-newsreader-
01.iinet.net.au>, rg***@iinet.net.auau says...
Mr.Clean wrote:
[...]

I get an object required error on this line:

var oLetter = oSlot.data;


Yeah, sorry, didn't test in IE... done that now though.


Well, DUH...;-)

Anyway, why do you have 2 sets of letters in the array and
how can I add other chars to the array?

I tried adding chars but they did not show up.

Jul 23 '05 #8
Dietmar Meier wrote:
sNew += sDispChars.charAt(c2 > c1? ++c1 : c2 < c1? --c1 : c1);


To make it rotate (I was told that displays at airports do not
roll backwards):

sNew += sDispChars.charAt(c2 == c1? c1 : ++c1 % sDispChars.length);

ciao, dhgm
Jul 23 '05 #9
JRS: In article <MP************************@news-server.austin.rr.com>,
dated Fri, 4 Feb 2005 03:14:28, seen in news:comp.lang.javascript, Mr.
Clean <mr*****@pandg.com> posted :
I have a string. I'd like to take this string
and make each char change until it gets to another
char at the same position of the string.

Example:

Original String: " NEW YORK "
Final String: "SAN FRANSISCO"

I'd like each char to loop through the chars on a timer
and show each char in the alphabet until it gets to the
char in the same position as the beginning char
So the first char in the original string, which is a space,
would loop through and show all chars until it reaches "S"

This is supposed to look like those rollover departure/arrival
signs in an airport when the info changes.

Anyone???

If you can't do this, then can you fill me in on HOW to do it?
Maybe even some pseudocode?


Here is working general code to do it at full speed :-

var S1, S2 : string ; J, P : byte ;
const chars : string = ' ABCDEFGHIJKLMNOPQRSTUVWXYZ' ;
BEGIN ;
S1 := ' NEW YORK ' ;
S2 := 'SAN FRANCISCO' ;
for J := 1 to length(S1) do begin
while S1[J]<>S2[J] do begin
P := Pos(S1[J], chars) ;
if P=Length(chars) then P := 1 else Inc(P) ; // P%=L
S1[J] := chars[P] ; // .. ++P
Writeln(S1) ; // DynWrite
end ;
end ;
END.

You'll have to make it javascript, and turn it round to fit with the
usual sort of setTimeout loop; at each step, do the four central lines.

NEVER fly to/from an airport that spells SF like your example.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.
Jul 23 '05 #10
<SNIP>
You'll have to make it javascript, and turn it round to fit with the
usual sort of setTimeout loop; at each step, do the four central lines.
I already had Delphi code doing it, just didn't know how in javascript.

NEVER fly to/from an airport that spells SF like your example.


My Bad...

E.

Jul 23 '05 #11
Mr.Clean wrote:
<SNIP>
You'll have to make it javascript, and turn it round to fit with the usual sort of setTimeout loop; at each step, do the four central lines. I already had Delphi code doing it, just didn't know how in

javascript.
NEVER fly to/from an airport that spells SF like your example.

My Bad...

E.

From the outskirts of San Fransisco \:=O comes yet another. Watch for

google-wrap-crap.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>|-| flipboard |-|</title>
<style type="text/css">

body {
background: #000;
}

#flipboard {
width: 544px;
height: 32px;
margin: 120px auto;
border: 6px #fff outset;
}
..slot {
float: left;
width: 32px;
height: 32px;
font: 24px "arial black";
text-align: center;
background:
url(http://www.grsites.com/textures/metal_b/metal_b002.jpg) silver;
}
select {
font: normal 10px arial, sans-serif;
color: #fff;
background: #888;
}

</style>
<script type="text/javascript">

String.prototype.nextLetter = function()
{
var ab = 'abcdefghijklmnopqrstuvwxyza',
idx, c, s = '';
for (var i = 0, l = this.length; i < l; ++i)
{
c = this.charAt(i);
s +=
((idx = ab.indexOf(c)) != -1) ?
ab.charAt(idx + 1) :
((idx = ab.indexOf(c.toLowerCase())) != -1) ?
ab.charAt(idx + 1).toUpperCase() : c;
}
return s;
}

function FlipBoard(board_id, delay)
{
var obj = this;
var x = 0, slot;
this.board = document.getElementById(board_id);
this.slots = this.board.getElementsByTagName('div');
this.delay = delay;
this.spos = 0;
this.cpos = 0;
this.running = false;
while (slot = this.slots.item(x++))
while (!slot.hasChildNodes())
slot.appendChild(document.createTextNode('\u0020') );

this.flip = function(new_str)
{
if (this.running)
return;
this.running = true;
this.board.style.borderStyle = 'ridge';
this.spos = 0;
this.cpos = 0;
this.start =
Math.ceil(this.slots.length * .5) -
Math.ceil(new_str.length * .5);
this.timer =
setInterval(
function()
{
var c = obj.slots.item(obj.spos);
if (c)
{
var nc = new_str.charAt(obj.cpos);
if (obj.spos < obj.start)
{
c.firstChild.nodeValue = ' ';
obj.spos++;
return;
}
if (nc == '' || nc == ' ')
{
c.firstChild.nodeValue = ' ';
obj.spos++;
obj.cpos++;
return;
}
var l = c.firstChild.nodeValue;
var isLow = (nc == nc.toLowerCase());
if (l == ' ')
{
var ll = 'A';
c.firstChild.nodeValue =
ll[isLow ? 'toLowerCase' : 'toUpperCase']();
return;
}
if (l != nc)
{
c.firstChild.nodeValue =
l[isLow ? 'toLowerCase' : 'toUpperCase']().nextLetter();
return;
}
else
{
obj.spos++;
obj.cpos++;
return;
}
}
else
{
clearInterval(obj.timer);
obj.board.style.borderStyle = 'outset';
obj.running = false;
}
}, this.delay);
}
}

onload = function()
{
x = new FlipBoard('flipboard', 40)
}

</script>
</head>
<body>
<select size="6"
onchange="x.flip(this.value);this.selectedIndex=-1">
<option value="SAN FRANCISCO">SAN FRANCISCO</option>
<option value="NEW ORLEANS">NEW ORLEANS</option>
<option value="MINNEAPOLIS">MINNEAPOLIS</option>
<option value="Honolulu">Honolulu</option>
<option value="KUALA LUMPUR">KUALA LUMPUR</option>
<option value="West Palm Beach">West Palm Beach</option>
</select>
</form>
<div id="flipboard">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot">B</div>
<div class="slot">A</div>
<div class="slot">L</div>
<div class="slot">T</div>
<div class="slot">I</div>
<div class="slot">M</div>
<div class="slot">O</div>
<div class="slot">R</div>
<div class="slot">E</div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
</body>
</html>

Jul 23 '05 #12
Mr.Clean wrote:
In article <4203acb9$0$21429$5a62ac22@per-qv1-newsreader-
01.iinet.net.au>, rg***@iinet.net.auau says...
Mr.Clean wrote:
[...]
I get an object required error on this line:

var oLetter = oSlot.data;


Yeah, sorry, didn't test in IE... done that now though.

Well, DUH...;-)

Anyway, why do you have 2 sets of letters in the array and
how can I add other chars to the array?

I tried adding chars but they did not show up.


The nextLetter function looks for the first instance of a letter,
then gets the next one. I could have:

- worked out which way to tumble, but that requires 2 lookups per
letter change
- skipped back to the beginning of the array if the end is
reached (perhaps a better solution)
- made two sets of the same characters, so wherever the array
found the current character, the destination character was
always further along

Here is a new nextLetter that lets you have just one set of
letters:

function nextLetter(a) {
var j = 0;
while (a != letters[j]) {j++}
return (j == letters.length-1)? letters[0] : letters[j+1];
}

If the character matches the last in the array, it skips to the
first element.

So now your array can be:

var letters = [
'*','A','B','C','D','E','F','G','H','I','J','K','L ','M',
'N','O','P','Q','R','S','T','U','V','W','X','Y','Z ',' '
];

There is a reason why the asterisk is first...

The following checks that the letters in the destination are in
the array. If they aren't, it replaces the letter with the first
in the array.

function checkLetter(b) {
for (var i=0, len=letters.length; i<len; i++) {
if (letters[i] == b) return b;
}
return letters[0];
}

And change this line:

(w.charAt(m))? wd += w.charAt(m) : wd += ' ';

to this:

(w.charAt(m))? wd += checkLetter(w.charAt(m)) : wd += ' ';

Test in IE and Firefox, full script below.

--
Rob

<script type="text/javascript">

var letters = [
'*','A','B','C','D','E','F','G','H','I','J','K','L ','M',
'N','O','P','Q','R','S','T','U','V','W','X','Y','Z ',' '
];

function tumbleWord(w,d,z,lag) {
if (z.timer) window.clearTimeout(z.timer);
var k = 0,
m = 0,
wd = '',
oneDiff = false;
while (document.getElementById(d + k)) {k++}
while (wd.length < k) {
(w.charAt(m))? wd += checkLetter(w.charAt(m)) : wd += ' ';
m++;
}
z.timer = window.setInterval(function() {
for (var i=0; i<k; i++) {
var t = document.getElementById(d + i);
if (!t.firstChild)
t.appendChild(document.createTextNode(' '));
oSlot = t.firstChild;
var oLetter = oSlot.data;
if (oLetter != wd.charAt(i)) {
oSlot.data = nextLetter(oLetter);
oneDiff = true;
}
}
if (oneDiff) {
oneDiff = false;
} else {
window.clearTimeout(z.timer);
z.timer = null;
}
}, lag);
}

function nextLetter(a) {
var j = 0;
while (a != letters[j]) {j++}
return (j == letters.length-1)? letters[0] : letters[j+1];
}

function checkLetter(b) {
for (var i=0, len=letters.length; i<len; i++) {
if (letters[i] == b) return b;
}
return letters[0];
}
</script>
Jul 23 '05 #13
JRS: In article <1107546516.6b2299708d66ee7bc8352b59c1b8e037@teran ews>,
dated Fri, 4 Feb 2005 13:48:36, seen in news:comp.lang.javascript, Mr.
Clean <mrclean@p&g.com> posted :
<SNIP>
You'll have to make it javascript, and turn it round to fit with the
usual sort of setTimeout loop; at each step, do the four central lines.

I already had Delphi code doing it, just didn't know how in javascript.


That was not written in Delphi ...

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/&c., FAQqy topics & links;
<URL:http://www.merlyn.demon.co.uk/clpb-faq.txt> RAH Prins : c.l.p.b mFAQ;
<URL:ftp://garbo.uwasa.fi/pc/link/tsfaqp.zip> Timo Salmi's Turbo Pascal FAQ.
Jul 23 '05 #14
In article <IS**************@merlyn.demon.co.uk>,
sp**@merlyn.demon.co.uk says...
JRS: In article <1107546516.6b2299708d66ee7bc8352b59c1b8e037@teran ews>,
dated Fri, 4 Feb 2005 13:48:36, seen in news:comp.lang.javascript, Mr.
Clean <mrclean@p&g.com> posted :
<SNIP>
You'll have to make it javascript, and turn it round to fit with the
usual sort of setTimeout loop; at each step, do the four central lines.

I already had Delphi code doing it, just didn't know how in javascript.


That was not written in Delphi ...

Close enough...<bg>
Jul 23 '05 #15

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Dan | last post: by
12 posts views Thread by Alan J. Flavell | last post: by
7 posts views Thread by Micheal Artindale | last post: by
9 posts views Thread by Ulterior | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.