By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,776 Members | 1,506 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,776 IT Pros & Developers. It's quick & easy.

Javascript Typewriter Ticker

P: n/a
Dan
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
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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)

Jul 23 '05 #2

P: n/a
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


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

Jul 23 '05 #3

P: n/a
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">&amp;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.

Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.