473,320 Members | 1,831 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Javascript Typewriter Ticker

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
3 6649
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Tony Carnell | last post by:
Hi, I'm trying to source a (preferably free) JavaScript news ticker that does not carry adverts and will take its feed from an external text file or html page. Any advice or links would be...
4
by: dthelwal | last post by:
I'm looking for an applet or script to feed from an RSS page (perhaps RSS 0.91) and turn its <title> and <link> entries (perhaps using <description> as well) into a scrolling news ticker where the...
1
by: David | last post by:
Hi, I have the following asp in my page, but I keep getting the following error Microsoft VBScript runtime error '800a0009' Subscript out of range: 'ticker' Please can you help me ?. Here...
1
by: paulnightingale | last post by:
Hi I've got a ticker tape that is written in Java Script 1.2 which displays text that has to be currently changed in the program code. What I want to do is to find the bit of javascript to get the...
2
by: kevintan | last post by:
Hi all, Not sure whether you guys can help. Looking at both forms in javascript below: <html> <head> <script language="Javascript">
5
by: mark4asp | last post by:
I need a row of tickertape. Each character should appear on screen as if it were being typed, so that the entire row is scrolled left to right. Like a 'teletype' - I think they were called. What...
9
by: Mike | last post by:
I want to create a news/stock/sport ticker for my desktop. I want to have the ability to select my news source, (cnn, msnbc, etcs) sport source(espn, nfl, nba, etc) and my stock source (nasdaq,...
1
by: tgmurray | last post by:
I have created a small page using html and javascript that attempts to create a ticker. I am trying to go from 0 to 9 and then repeat itself. It should go to each new value after 1 second. ...
3
by: rassklass | last post by:
HI all, I have designed a site found at www.pickupnewspapers.co.uk/nottinghamshire/index.html but I cant get the footer to sit stil on the page. It is because of the javascript ticker, everytime...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.