• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 731
  • Last Modified:

Javascript to produce a text animation for email signature

Hi,

I am looking to use Javascript to produce a text animation for use as signatures in HTML based email clients.

The message has multiple lines. Each line scrolls from the left of the screen till the entire line is displayed. Then the second line should be displayed and so on.

Any inputs? I don now know Javascript much, so a ready solution will be appreciated.

Regards
Sridhar
0
sridharj_ap
Asked:
sridharj_ap
  • 2
1 Solution
 
archrajanCommented:
why dont you use the <marquee></marquee> tag
example
<marquee>This line will be scrolling</marquee>
0
 
BatalfCommented:
Is it something like this? I wrote it for another question here at EE. Just change the text

Login : binary<br>
password : ******<br>
Acess is denied<br>

at the bottom to whatever you like. You could also change colors in the css(#myContent) at the top

<html>
    <head>
    <style type="text/css">
    #myContent, #myContent blink{
        width:500px;
        height:200px;
        background:black;
        color: #00FF00;
        font-family:courier;
    }    
    blink{
        display:inline;

    }
    </style>
    <script type="text/javascript">
    var charIndex = -1;
    var stringLength = 0;
    function writeContent(inputText,init){
        if(init){
            inputText = document.getElementById('contentToWrite').innerHTML;
        }
        if(charIndex==-1){
            charIndex = 0;
            stringLength = inputText.length;
        }
        var initString = document.getElementById('myContent').innerHTML;
        initString = initString.replace(/<SPAN.*$/g,"");
       
        var theChar = inputText.charAt(charIndex);
           var nextFourChars = inputText.substr(charIndex,4);
           if(nextFourChars=='<BR>'){
               theChar  = '<BR>';
               charIndex+=3;
           }
        initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
        document.getElementById('myContent').innerHTML = initString;

        charIndex = charIndex/1 +1;
        if(charIndex%2==1){
             document.getElementById('blink').style.display='none';
        }else{
             document.getElementById('blink').style.display='inline';
        }
               
        if(charIndex<=stringLength){
            setTimeout('writeContent("'+inputText+'")',150);
        }else{
            blinkSpan();
        }  
    }
   
    var currentStyle = 'inline';
    function blinkSpan(){
        if(currentStyle=='inline'){
            currentStyle='none';
        }else{
            currentStyle='inline';
        }
        document.getElementById('blink').style.display = currentStyle;
        setTimeout('blinkSpan()',500);
       
    }
    </script>
   
<body onload="writeContent('',true)">
<div id="myContent">
</div>
<div id="contentToWrite" style="display:none">
Login : binary<br>
password : ******<br>
Acess is denied<br>

</div>
</body>
</html>
0
 
sridharj_apAuthor Commented:
Hi,

Archrajan:Using marquee with the slide option has 2 issues: one, it goes from left to right or vice versa - I want the text to stop when the line is completely displayed;two, even using separate marquee tags, the entire message scrolls at once. I want line after line as given by Batalf.

Batalf:This looks fine, except some small modification - Can we remove the blinking cursor after all messages are displayed?

Regards
Sridhar
0
 
BatalfCommented:
Yes, by changing the blinkSpan() function to this:

    function blinkSpan(){
          document.getElementById('blink').style.display = 'none';
    }
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now