sridharj_ap
asked on
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
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
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,ini t){
if(init){
inputText = document.getElementById('c ontentToWr ite').inne rHTML;
}
if(charIndex==-1){
charIndex = 0;
stringLength = inputText.length;
}
var initString = document.getElementById('m yContent') .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('m yContent') .innerHTML = initString;
charIndex = charIndex/1 +1;
if(charIndex%2==1){
document.getElementById('b link').sty le.display ='none';
}else{
document.getElementById('b link').sty le.display ='inline';
}
if(charIndex<=stringLength ){
setTimeout('writeContent(" '+inputTex t+'")',150 );
}else{
blinkSpan();
}
}
var currentStyle = 'inline';
function blinkSpan(){
if(currentStyle=='inline') {
currentStyle='none';
}else{
currentStyle='inline';
}
document.getElementById('b link').sty le.display = currentStyle;
setTimeout('blinkSpan()',5 00);
}
</script>
<body onload="writeContent('',tr ue)">
<div id="myContent">
</div>
<div id="contentToWrite" style="display:none">
Login : binary<br>
password : ******<br>
Acess is denied<br>
</div>
</body>
</html>
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,ini
if(init){
inputText = document.getElementById('c
}
if(charIndex==-1){
charIndex = 0;
stringLength = inputText.length;
}
var initString = document.getElementById('m
initString = initString.replace(/<SPAN.
var theChar = inputText.charAt(charIndex
var nextFourChars = inputText.substr(charIndex
if(nextFourChars=='<BR>'){
theChar = '<BR>';
charIndex+=3;
}
initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
document.getElementById('m
charIndex = charIndex/1 +1;
if(charIndex%2==1){
document.getElementById('b
}else{
document.getElementById('b
}
if(charIndex<=stringLength
setTimeout('writeContent("
}else{
blinkSpan();
}
}
var currentStyle = 'inline';
function blinkSpan(){
if(currentStyle=='inline')
currentStyle='none';
}else{
currentStyle='inline';
}
document.getElementById('b
setTimeout('blinkSpan()',5
}
</script>
<body onload="writeContent('',tr
<div id="myContent">
</div>
<div id="contentToWrite" style="display:none">
Login : binary<br>
password : ******<br>
Acess is denied<br>
</div>
</body>
</html>
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
example
<marquee>This line will be scrolling</marquee>