Velocity Reviews - Javascript Typewriter Ticker

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)

- Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)

- - Javascript Typewriter Ticker (http://www.velocityreviews.com/forums/t916913-javascript-typewriter-ticker.html)

Javascript Typewriter Ticker

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 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.

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

Re: Javascript Typewriter Ticker

Dan wrote on 12 mrt 2005 in comp.lang.javascript:

> 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.
>

This is not that easy.

I suppose you want to innerHTML:

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

as:

H
He
Hel
Hell
Hello
Hello
Hello <span style="color:red;">w</span>
Hello <span style="color:red;">wo</span>
Hello <span style="color:red;">wor</span>
Hello <span style="color:red;">worl</span>
Hello <span style="color:red;">world</span>
Hello <span style="color:red;">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)

Re: Javascript Typewriter Ticker

Dan wrote:
> 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
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.
>
> 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

OK, try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/str****ict.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>lifestyle campaigns.
<span class="logoblk">LAUNCH</span><span class="logored">PR</span>
supports official DEC Tsunami Earthquake appeal by donating agency time
to<br>fundraising campaign.
</div>
</body>
</html>

[typewriter.js]

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

function initTypewriter(sourceId, newSpeed)
{
sourceObj = document.getElementById(sourceId);
typeWindow = document.getElementById('typeWindow');
typeWindow.innerHTML = '';
message = sourceObj.innerHTML;
msgLength = message.length;
HTMLstr = '';
workChar = '';
count = 0;
speed = newSpeed;
typing = setInterval('typeText();', speed);
}

function typeText()
{
if (count == msgLength)
{
clearInterval(typing);
return;
}
else if (count == 0)
typedPortion = '';
else
typedPortion = message.substring(0, count)
cursorChar = message.charAt(count);
if (/</.test(cursorChar))
{
var tag = message.substring(count).match(/<\/?[^>]+>/);
if (tag)
{
typedPortion += tag[0];
count += tag[0].length;
}
}
else
{
workHTML = '';
workHTML += typedPortion;
if (count != msgLength - 1)
workHTML += cursorHTML.replace(/@/, cursorChar);
typeWindow.innerHTML = 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.