Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 207
  • Last Modified:

An Moving Letter Script

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
jmtt13
Asked:
jmtt13
  • 5
  • 4
1 Solution
 
CJ_SCommented:
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
 
CJ_SCommented:
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
 
jmtt13Author Commented:
Adjusted points from 100 to 101
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jmtt13Author Commented:
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
 
CJ_SCommented:
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
 
jmtt13Author Commented:
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
 
CJ_SCommented:
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
 
jmtt13Author Commented:
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
 
jmtt13Author Commented:
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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