Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Moving text .... 2

Status
Not open for further replies.
0211

0211

Technical User
Oct 14, 2003
35
US
Hello everyone:
I found this code for a text that moves across the screen very slowly. How do I use it more than once? I have a few lines I want(well boss wants) to make them do this. Can anyone help? Thanks again. Here is the code: (Also, what else do I need to change beside the neonbasecolor and neontextcolor?)

<script language=&quot;JavaScript1.2&quot;>
message=&quot;Increase Your Profit!&quot;
var neonbasecolor=&quot;Black&quot;
var neontextcolor=&quot;Green&quot;
var flashspeed=115 //in milliseconds

///Don't change anything below this line/////

var n=0
if (document.all){
document.write('<font color=&quot;'+neonbasecolor+'&quot;>')
for (m=0;m<message.length;m++)
document.write('<span id=&quot;neonlight&quot;>'+message.charAt(m)+'</span>')
document.write('</font>')

//cache reference to neonlight array
var tempref=document.all.neonlight
}
else
document.write(message)

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
tempref[n].style.color=neontextcolor

if (n<tempref.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout(&quot;beginneon()&quot;,1000)
return
}
}

function beginneon(){
if (document.all)
flashing=setInterval(&quot;neon()&quot;,flashspeed)
}
beginneon()
</script>
 
Sort by date Sort by votes
does this work?
message=&quot;Increase Your Profit!<BR>NextLine<BR>NextLine&quot;


Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
No, it doesn't. It treats it as one line and <br> also shows up on the page!!
 
Upvote 0 Downvote
then how about \n instead of <BR>? but <br> must work, do a view source and see if < has changed to &gt;

ie does <br> looke lie &gt;BR&lt; in the view source?

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Thanks \n works but it still put the texts in the same line. I want to be able to put the text in different part of the page not in one line. Thanks again...
 
Upvote 0 Downvote
At the moment your code only deals with one <span> tag. All your message will be encapsulated within the tag. This is why it all appears on one line.

What you would ideally want is an array of objects that can be looped through to provide multiple spans, each with their own properties.

Did you want to be able to specify frequency, scroll speed, colour, location etc independantly for each message? or use random speeds and positioning?

Just a few things to think about.

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
 
Upvote 0 Downvote
I am new to JS. Yes, I want to be able to put different phrases in different places on the page. I really don't know which one. I guess the same speed and color is fine. Can you give me some help? Thanks
 
Upvote 0 Downvote
Sure, here ya go:
Code: 
<html>
<head>
<script>

/* This object definition encapsulates information about a message

 strDispMsg       -  The message to be displayed
 strDispColour    -  The #RRGGBB colour of the message
 intSpeed         -  Speed increment, 1 is slow, 30 is unreadably fast
 intVertPosition  -  Vertical position of the message (pixels from top)
 boolLtoR         -  Scrolling direction, true for left to right.

*/
function scrollMessage(strDispMsg, strDispColour, intSpeed, intVertPosition, boolLtoR){
 this.dispMsg = strDispMsg;
 this.dispColour = strDispColour;
 this.speed = intSpeed;
 this.vertPosition = intVertPosition;
 this.lToR = boolLtoR;
}

// Here we set up an array of message objects with their Text, colour, speed, 
// position and direction attributes.
// Add as many messages as you need / want.
var MessageArray = new Array(new scrollMessage('Message 1', '#660000', 5, 50, true), 
                             new scrollMessage('Message 2', '#006600', 8, 150, false),
							 new scrollMessage('Message 3', '#000066', 12, 350, true));
var scrollDistance;

// This one sets everything up. Called from the body's onload event
function initMessages(){
 // set the scrolling distance to the width of the page
 scrollDistance = document.body.offsetWidth;
 
 // loop through the array
 for(var i = 0; i < MessageArray.length; i++){
  // get the current message object
  var currMsg = MessageArray[i];
  // create a div tag
  var msgNode = document.createElement(&quot;DIV&quot;);
  // set the attributes of the div from the message object
  msgNode.innerText = currMsg.dispMsg;
  msgNode.id = 'MsgDiv_' + i;
  msgNode.style.color = currMsg.dispColour;
  msgNode.style.top = currMsg.vertPosition;
  msgNode.style.position = &quot;absolute&quot;;
  msgNode.style.width = 200;
  if(currMsg.lToR){
   msgNode.style.left = -200;
  }
  else{
   msgNode.style.left = scrollDistance;
  }
  // add the div into the body of the document
  document.body.appendChild(msgNode);
 }
 // start the scrolling function
 startScrolling();
}

// This one moves each div according to it's speed factor
function startScrolling(){
 // loop through the array
 for(var i = 0; i < MessageArray.length; i++){
  // get the current message
  var currMsg = MessageArray[i];
  //get the current DIV
  var currDiv = document.getElementById('MsgDiv_' + i);
  // see if we're going left to right
  if(currMsg.lToR){
   // increment the left position
   currDiv.style.left = parseInt(currDiv.style.left) + currMsg.speed;
   if(parseInt(currDiv.style.left) > scrollDistance){
    currDiv.style.left = -200;
   }
  }
  else {
   // otherwise decrement it
   currDiv.style.left = parseInt(currDiv.style.left) - currMsg.speed;
  if(parseInt(currDiv.style.left) < -200){
    currDiv.style.left = scrollDistance;
   }
  } 
 }
 // call this function again in a little while.
 var x = setTimeout(&quot;startScrolling()&quot;, 50);
}

</script>
</head>

<body onload=&quot;initMessages()&quot; >

</body>
</html>

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
 
Upvote 0 Downvote
Thank you so much for your help. This is great....
 
Upvote 0 Downvote
dt,

Thanks for taking the time to comment this code
so well!

I've been studying creating and using objects and this
made the picture complete with the use of the object
and it's properties.

Gosh, with a little work this could be a whole menu
system..

Thanks.

2b||!2b
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
341
Samthyr
Samthyr
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
waubain
  • Locked
  • Question
Send array data to text file on click of button 1
Replies
2
Views
265
waubain
waubain
waubain
  • Locked
  • Question
Find max value of element in array located in text file 1
Replies
2
Views
294
waubain
waubain
Pudsters
  • Locked
  • Question
Populate text box based on other textbox 1
Replies
2
Views
375
Pudsters
Pudsters

Part and Inventory Search

Sponsor

Back
Top