Javascript Typewriter Ticker

Discussion in 'Javascript' started by Dan, Mar 12, 2005.

  1. Dan

    Dan Guest

    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
     
    Dan, Mar 12, 2005
    #1
    1. Advertising

  2. Dan

    Evertjan. Guest

    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)
     
    Evertjan., Mar 12, 2005
    #2
    1. Advertising

  3. Dan

    RobB Guest

    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...
     
    RobB, Mar 12, 2005
    #3
  4. Dan

    RobB Guest

    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.
     
    RobB, Mar 12, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?YWU=?=

    best way to do a ticker?

    =?Utf-8?B?YWU=?=, Sep 15, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    455
    Verde
    Sep 15, 2005
  2. Isaac Grover
    Replies:
    7
    Views:
    573
  3. Tony Carnell

    Javascript news ticker required

    Tony Carnell, Sep 27, 2003, in forum: Javascript
    Replies:
    1
    Views:
    277
  4. mistral

    Adjusting typewriter scroller script

    mistral, Mar 23, 2007, in forum: Javascript
    Replies:
    9
    Views:
    284
    -Lost
    Mar 24, 2007
  5. Terry
    Replies:
    6
    Views:
    127
    Gregor Kofler
    Sep 11, 2007
Loading...

Share This Page