Solved

An Moving Letter Script

Posted on 2000-04-23
9
200 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
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
age from date of birth 4 51
How to print dynamic Google map and directions? 1 23
html Uncheck Checkbox 2 25
Javascript 2 20
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

808 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