Javascript Typewriter Ticker

**Evertjan.** · Jul 23 '05, 06:25 PM

Re: Javascript Typewriter Ticker

Dan wrote on 12 mrt 2005 in comp.lang.javas cript:
[color=blue]
> Does anyone know of a good Javascript typewriter ticker that allows
> you to insert HTML into the ticker. I have found lots but when HTML is
> inserted, the ticker pauses at the point it reaches the HTML as well
> as applying the formatting. I need one whose character timer ignores
> characters in tags. I need to apply font color and weight styling to
> different words.
>[/color]

This is not that easy.

I suppose you want to innerHTML:

text = 'Hello <span style="color:re d;">world</span>!'

as:

H
He
Hel
Hell
Hello
Hello
Hello <span style="color:re d;">w</span>
Hello <span style="color:re d;">wo</span>
Hello <span style="color:re d;">wor</span>
Hello <span style="color:re d;">worl</span>
Hello <span style="color:re d;">world</span>
Hello <span style="color:re d;">world</span>!

If also other HTML is inserted,
you will need a parser the size of the jscript engine, I suppose.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

**RobB** · Jul 23 '05, 06:25 PM

Re: Javascript Typewriter Ticker

Dan wrote:[color=blue]
> Hi
>
> Does anyone know of a good Javascript typewriter ticker that allows
> you to insert HTML into the ticker. I have found lots but when HTML[/color]
is[color=blue]
> inserted, the ticker pauses at the point it reaches the HTML as well
> as applying the formatting. I need one whose character timer ignores
> characters in tags. I need to apply font color and weight styling to
> different words.
>
> Please see www.launchpr.co.uk for how the ticker currently looks in
> Flash - it needs to be replaced with HTML/JavaScript which produces
> the same effect.
>
> Thanks in advance
>
> Dan[/color]

Better agenda:

#:=( DHTML ----------> Flash #:=)

It's easy to write this; the problem isn't passing the tags whole into
the 'stream' (easy to do with a RegExp or while loop), but - as
everyone who has attempted this seems to discover - replacing innerHTML
repeatedly in mozilla/gecko browsers causes an unacceptable flicker. IE
is smooth as silk. googled for some alternatives and they all exhibit
the same degree of suckage. Couldn't work around it, or find a bugzilla
track. Still playing around tho...

**RobB** · Jul 23 '05, 06:25 PM

Re: Javascript Typewriter Ticker

Dan wrote:[color=blue]
> Hi
>
> Does anyone know of a good Javascript typewriter ticker that allows
> you to insert HTML into the ticker. I have found lots but when HTML[/color]
is[color=blue]
> inserted, the ticker pauses at the point it reaches the HTML as well
> as applying the formatting. I need one whose character timer ignores
> characters in tags. I need to apply font color and weight styling to
> different words.
>
> Please see www.launchpr.co.uk for how the ticker currently looks in
> Flash - it needs to be replaced with HTML/JavaScript which produces
> the same effect.
>
> Thanks in advance
>
> Dan[/color]

OK, try this:

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

body {
margin: 40px;
}
#typeSource {
display: none;
}
#typeWindow {
width: 635px;
font: bold 11px arial, tahoma, sans-serif;
color: #666;
border-top: 3px #eee solid;
border-bottom: 3px #eee solid;
}
..logoblk {
color: #000;
}
..logored {
color: #b00;
}
..cursorChar {
text-decoration: underline;
font-weight: bold;
color: #000;
}

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

window.onload = function()
{
var startDelay = 2;
setTimeout(
'initTypewriter ("typeSource ", 40);',
startDelay * 1000);
}

</script>
<script type="text/javascript" src="typewriter .js">
</script>
</head>
<body>
<div id="typeWindow" >&nbsp;</div>
<div id="typeSource" >
2005 so far...<br>
Ford appoints
<span class="logoblk" >LAUNCH</span><span class="logored" >PR</span>
for 6 month campaign to launch the all-new Ford Focus. Tesco hires
<span class="logoblk" >LAUNCH</span><span class="logored" >PR</span>
for Race<br>for Life and Computers for Schools campaigns, following
a hugely successful 2004 together.
<span class="logoblk" >LAUNCH</span><span class="logored" >PR</span>
gets in the<br>Irish spirit for Jameson Irish Whiskey.
Universal Pictures Video and The Sugar Bureau re-appoint agency for
2005<br>lifesty le campaigns.
<span class="logoblk" >LAUNCH</span><span class="logored" >PR</span>
supports official DEC Tsunami Earthquake appeal by donating agency time
to<br>fundraisi ng campaign.
</div>
</body>
</html>

[typewriter.js]

var sourceObj = null;
var typeWindow = null;
var message = '';
var typedPortion = '';
var cursorChar = '';
var cursorHTML = '<span class="cursorCh ar">@</span>';
var workHTML = '';

function initTypewriter( sourceId, newSpeed)
{
sourceObj = document.getEle mentById(source Id);
typeWindow = document.getEle mentById('typeW indow');
typeWindow.inne rHTML = '';
message = sourceObj.inner HTML;
msgLength = message.length;
HTMLstr = '';
workChar = '';
count = 0;
speed = newSpeed;
typing = setInterval('ty peText();', speed);
}

function typeText()
{
if (count == msgLength)
{
clearInterval(t yping);
return;
}
else if (count == 0)
typedPortion = '';
else
typedPortion = message.substri ng(0, count)
cursorChar = message.charAt( count);
if (/</.test(cursorCha r))
{
var tag = message.substri ng(count).match (/<\/?[^>]+>/);
if (tag)
{
typedPortion += tag[0];
count += tag[0].length;
}
}
else
{
workHTML = '';
workHTML += typedPortion;
if (count != msgLength - 1)
workHTML += cursorHTML.repl ace(/@/, cursorChar);
typeWindow.inne rHTML = workHTML;
count++;
}
}

Thanks to Peter Bailey (http://www.peterbailey.net) for his code, which
I lifted and sifted. Needs some work, but seems to be on the right
track. Shop it around to some different browsers if you get the chance.

Javascript Typewriter Ticker

Javascript Typewriter Ticker

Comment

Comment

Comment