?
Solved

Javascript to produce a text animation for email signature

Posted on 2005-04-05
4
Medium Priority
?
718 Views
Last Modified: 2013-11-19
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
Comment
Question by:sridharj_ap
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 25

Expert Comment

by:archrajan
ID: 13707016
why dont you use the <marquee></marquee> tag
example
<marquee>This line will be scrolling</marquee>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13707028
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
 
LVL 1

Author Comment

by:sridharj_ap
ID: 13707125
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
 
LVL 32

Accepted Solution

by:
Batalf earned 500 total points
ID: 13707159
Yes, by changing the blinkSpan() function to this:

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

Featured Post

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question