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