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