Solved

An Moving Letter Script

Posted on 2000-04-23
9
204 Views
Last Modified: 2012-06-21
Hello, I'm running the following script on my page:

<html>
<head>
<title>An Image Slideshow</title>
<script language="JavaScript">
<!-- hide
var moving;
var waol = 0;
var letters = new Array("n_of","e_of","w_of");
function moveIt(wl)
{
      window.document.all(wl).style.top = parseInt(window.document.all(wl).style.top) + 5;
      if (parseInt(window.document.all(wl).style.top) > 60)
      {
            clearInterval(moving);
            waol++;
            moving = setInterval("moveIt(letters[waol]);",1);
      }
}
moving = setInterval("moveIt('n_of');",1);
// show -->
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="n_of" style="position:absolute;top:-50px;left:25px;font-weight:bold;font-size:50px;">N</div>
<div id="n_of" style="position:absolute;top:-50px;left:55px;font-weight:bold;font-size:50px;">E</div>
<div id="n_of" style="position:absolute;top:-50px;left:85px;font-weight:bold;font-size:50px;">W</div>
</body>
</html>

It's a little longer with more letters, but this example gives you the basic idea.  I'm trying to get letters to drop down from the top of the page to form the word "new" in the middle.  I'm having script errors with the line:
moving = setInterval("moveIt(letters[waol]);",1);
I think it's because a variable (i.e., letters[waol]) can't be in a "setInterval" function.  Could anyone help me with this?  Thanks in advance!
0
Comment
Question by:jmtt13
[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
  • 5
  • 4
9 Comments
 
LVL 22

Expert Comment

by:CJ_S
ID: 2742114
Ok,
1) You use the id n_of 3 times, change it to n_of, e_of and w_of.
2) Check if the count has gone OVER the count of letters you got. You just increment and increment, but you only have 3 letters here.

number 1 was the most important one though
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2742118
The problem you are refering to though is that you increment waol, but then...there are no more characters in it. So

you should change it to

waol++;
if(waol<letters.length)
   moving = setInterval("moveIt(letters[waol]);",1);
0
 

Author Comment

by:jmtt13
ID: 2742123
Adjusted points from 100 to 101
0
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 

Author Comment

by:jmtt13
ID: 2742124
I don't understand what you mean by "changing the id".  Could you show me an example script with this?  Sorry if that seems stupid.

As for the eternal loop, I just cut that part out when I edited the script because this is a whole lot longer in the full version (not just three letters).  My problem is that it never even gets the first letter to float down.
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2742141
Well, you have got this:

<div id="n_of" style="position:absolute;top:-50px;left:25px;font-weight:bold;font-size:50px;">N</div>
<div id="n_of" style="position:absolute;top:-50px;left:55px;font-weight:bold;font-size:50px;">E</div>
<div id="n_of" style="position:absolute;top:-50px;left:85px;font-weight:bold;font-size:50px;">W</div>

as you can see all 3 of 'em have the same name, n_of. While the script has three.

Change it to:

<div id="n_of" style="position:absolute;top:-50px;left:25px;font-weight:bold;font-size:50px;">N</div>
<div id="e_of" style="position:absolute;top:-50px;left:55px;font-weight:bold;font-size:50px;">E</div>
<div id="w_of" style="position:absolute;top:-50px;left:85px;font-weight:bold;font-size:50px;">W</div>

and it works perfectly.
0
 

Author Comment

by:jmtt13
ID: 2742222
OK, that's another error in this script.  I'll fix that.  But the problem remains -- I can't even get the first letter to float down.  This means that the problem is with this line:

moving = setInterval("moveIt(letters[waol]);",1);

Because if I edit it to say:

moving = setInterval("moveIt('n_of');",1);

The first letter floats down fine.  Then, of course, it doesn't work for the rest.  Any ideas on this?  Thanks.
0
 
LVL 22

Accepted Solution

by:
CJ_S earned 101 total points
ID: 2742227
I used the following script with IE 4

<html>
<head>
<title>An Image Slideshow</title>
<script language="JavaScript">
<!-- hide
var moving;
var waol = 0;
var letters = new Array("n_of","e_of","w_of");
function moveIt(wl)
{
window.document.all(wl).style.top = parseInt(window.document.all(wl).style.top) + 5;
if (parseInt(window.document.all(wl).style.top) > 60)
{
clearInterval(moving);
waol++
if(waol<letters.length)
   moving = setInterval("moveIt(letters[waol]);",1);
}
}
moving = setInterval("moveIt('n_of');",1);
// show -->
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="n_of" style="position:absolute;top:-50px;left:25px;font-weight:bold;font-size:50px;">N</div>
<div id="e_of" style="position:absolute;top:-50px;left:55px;font-weight:bold;font-size:50px;">E</div>
<div id="w_of" style="position:absolute;top:-50px;left:85px;font-weight:bold;font-size:50px;">W</div>
</body>
</html>


and it worked perfectly.....do you use IE or NS?
0
 

Author Comment

by:jmtt13
ID: 2742315
I use IE 5 and that script you provided works perfectly!  The only problem is that I modified my first script to match it exactly and I still get an error.  I don't know what the problem here might be, but I guess it doesn't really matter.  Thanks a lot for your help.
0
 

Author Comment

by:jmtt13
ID: 2742357
Just to tie things off here, here's the complete script for you to try.  I think it turned out pretty nice.  Just make sure that you use IE 5:

<html>
<head>
<title>New and Improved</title>
<script language="JavaScript">
<!-- hide
var moving;
var waol = 0;
var letters = new Array("n","e","w","a","n2","d","i","m","p","r","o","v","e2","d2");
function moveIt(wl)
{
      window.document.all(wl).style.top = parseInt(window.document.all(wl).style.top) + 25;
      if (parseInt(window.document.all(wl).style.top) > 60)
      {
            clearInterval(moving);
            waol++;
            if (waol < 14)
            {moving = setInterval("moveIt(letters[waol]);",1);}
            else
            {fadeOut();}
      }
}
function fadeOut()
{
      for (loop=0; loop<14; loop++)
      {
            window.document.all(letters[loop]).filters.blendTrans.apply();
            window.document.all(letters[loop]).style.visibility = "hidden";
            window.document.all(letters[loop]).filters.blendTrans.play();
      }
}
moving = setInterval("moveIt('n');",1);
// show -->
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="n" style="position:absolute;top:-60px;left:25px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">N</div>
<div id="e" style="position:absolute;top:-60px;left:55px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">e</div>
<div id="w" style="position:absolute;top:-60px;left:75px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">w</div>
<div id="a" style="position:absolute;top:-60px;left:120px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">a</div>
<div id="n2" style="position:absolute;top:-60px;left:142px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">n</div>
<div id="d" style="position:absolute;top:-60px;left:168px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">d</div>
<div id="i" style="position:absolute;top:-60px;left:208px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">I</div>
<div id="m" style="position:absolute;top:-60px;left:223px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">m</div>
<div id="p" style="position:absolute;top:-60px;left:259px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">p</div>
<div id="r" style="position:absolute;top:-60px;left:282px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">r</div>
<div id="o" style="position:absolute;top:-60px;left:302px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">o</div>
<div id="v" style="position:absolute;top:-60px;left:322px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">v</div>
<div id="e2" style="position:absolute;top:-60px;left:342px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">e</div>
<div id="d2" style="position:absolute;top:-60px;left:362px;font-weight:bold;font-size:50px;filter:blendTrans(duration=5);">d</div>
</body>
</html>
0

Featured Post

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

717 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