473,218 Members | 1,826 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,218 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 6644
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...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.