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

x
?
Solved

JavaScript Code Animation Problems

Posted on 2009-03-30
2
Medium Priority
?
502 Views
Last Modified: 2012-05-06
I am having issues with a homework problem. I am being asked to move a golf ball using javascript. So far I have been unsuccessful. Here is my code; any suggestions?

Thank you so much for your help.





<title>The Golf Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="golf.js" type="text/javascript"></script>
<script type="text/javascript">


var x = new Array(-395, -389, -383, -377, -371, -365, -359, -353, -346,
-340, -334, -328, -322, -316, -310, -304, -297, -291, -285, -279, -273,
-267, -261, -255, -248, -242, -236, -230, -224, -218, -212, -206, -199,
-193, -187, -181, -175, -169, -163, -157, -150, -144, -138, -132, -126,
-120, -114, -108, -101, -95, -93, -91, -88, -86, -83, -81, -78, -76, -73,
-71, -69, -66, -64, -61, -59, -56, -54, -51, -49, -47, -44, -42, -39, -37,
-34, -32, -29, -27, -24, -22, -20, -17, -15, -12, -10, -7, -5, -2, 0);

var y = new Array(-300, -300, -300, -299, -298, -297, -296, -294, -292,
-290, -288, -285, -282, -279, -276, -272, -268, -264, -260, -255, -250,
-245, -240, -234, -228, -222, -216, -209, -202, -195, -188, -180, -172,
-164, -156, -147, -138, -129, -120, -110, -100, -90, -80, -69, -58, -47,
-36, -24, -12, 0, -5, -10, -14, -18, -22, -25, -29, -32, -34, -37, -39,
-41, -43, -45, -46, -47, -48, -48, -48, -48, -48, -48, -47, -46, -45, -43,
-42, -40, -37, -35, -32, -29, -26, -23, -19, -15, -11, -6, 0);

var index = 0;
var l     = x.length;

// alert(l); - used for debugging  
function moveBall(){
       if(index <= l-1 ){
           placeIt("ballDOMID",x[index], y[index]);
            index++; // increase it to point to next location
          setTimeout("moveBall()", 5); // wait 5 milisec, and move again
      }
            else{
                  setFontSize("slogan",0);
                  showIt("slogan");
                  growText();
      }
}
function growText(){

      var fs = getFontSize("slogan");
     
      if(fs <= 20){
            changeFontSize("slogan",1)
          setTimeout("growText()", 20); // wait 20 milisec, and move again
      }

}
</script></head>

<body onload="moveBall();">

<div id="Golfer" ><img src="golfer.gif" width="40px" alt="" /></div>
<div id="Title">
THE G<span id="Ball"><img src="ball.gif" alt="O" /></span>LF PAGE
</div>

<div id="box"
style="">
<span id="slogan">
Your Online Source of Golf Equipment
</span>
</div>

</body>
</html>




function placeIt(id, x, y) {
   object=document.getElementById(id);
   object.style.left=x+"px";
   object.style.top=y+"px";
}

function showIt(id) {
   object=document.getElementById(id);
   object.style.visibility="visible";
}


function getFontSize(id) {
var object= document.getElementById(id);
return parseInt(object.style.fontSize);
}

function setFontSize(id,fs){
      object = document.getElementById(id);
      document.getElementById(id).style.fontSize=fs+"pt";
}
function changeFontSize(id, dfs){
var fs= getFontSize(id) ;
setFontSize(id,fs)=fs+dfs;
}
0
Comment
Question by:afreeland
[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
2 Comments
 
LVL 12

Accepted Solution

by:
alien109 earned 2000 total points
ID: 24024970
I think you are supplying the wrong element ID in your moveBall function when calling placeIt.

placeIt("ballDOMID",x[index], y[index]);

should be:

placeIt("Ball",x[index], y[index]);

and

function changeFontSize(id, dfs){
var fs= getFontSize(id) ;
setFontSize(id,fs)=fs+dfs;
}

should probably be:

function changeFontSize(id, dfs){
var fs= getFontSize(id) ;
setFontSize(id,fs + dfs);
}


Make sure that the ball div's position property is set to absolute via css. And your values are all negative which would place it off the screen (unless you are doing something in the css file which would keep it on screen).
0
 

Author Closing Comment

by:afreeland
ID: 31564626
Thank you SO much! You are a life saver! I really appreciate your help!
0

Featured Post

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!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

730 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