Solved

An Moving Letter Script

Posted on 2000-04-23
9
199 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

776 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