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

x
?
Solved

JavaScript Code Animation Problems

Posted on 2009-03-30
2
Medium Priority
?
503 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
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

[Webinar] Cloud Security

In this webinar you will learn:

-Why existing firewall and DMZ architectures are not suited for securing cloud applications
-How to make your enterprise “Cloud Ready”, and fix your aging DMZ architecture
-How to transform your enterprise and become a Cloud Enabler

Question has a verified solution.

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

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 first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

972 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