Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

An Moving Letter Script

Posted on 2000-04-23
9
Medium Priority
?
205 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
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!

 

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 404 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

This article discusses how to create an extensible mechanism for linked drop downs.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…

715 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