I almost got part of this one program to work. It is of a golf sign with a golf ball moving across and landing in the word Golf into the "o"
When the ball lands in the o the sign of "your online source of golf equipment" appears after ball has landed and grows in size.
right now the ball is what I have but I can not get my sign to appear.
I use 2 external files
I will post all the coding here
here is my main file I worked on
this is my golfpage.htm file
Code:
<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 4
Case Problem 1
</head>
<body onload="moveBall()">
<div id="Golfer" ><img src="golfer.gif" width="40px" alt="" /></div>
<div id="Title">
THE G<div style="display: inline; position: relative; background-color: black;"
><img id="Ball" src="ball.gif" alt="O"
/></div>LF PAGE
</div>
<div id="box"
style="">
<span id="slogan">
Your Online Source of Golf Equipment
</span>
</div>
</body>
</html>
Here is one external file where I made some functions this is the golf.js file
Code:
New Perspectives on JavaScript
Tutorial 4
Case Problem 1
The Golf Page
Name:
Date: 05 december 2010
Function List:
placeIt(id, x, y)
Places the id object at the coordinates (x, y)
showIt(id)
Shows the id object by setting the object visibility to "visible"
getFontSize(id)
Retrieves the font size of the id object
setFontSize(id, fs)
Sets the font size of the id object to fs
changeFontSize(id, dfs)
Changes the font size of the id object by dfs
*/
function showIt(id) {
object=document.getElementById(id);
object.style.visibility="visible";
}
function placeIt(id, x, y) {
// Places the id object at the coordinates (x,y)
object = document.getElementById(id);
object.style.left = x + "px";
object.style.top = y + "px";
}
function getFontSize(id) {
// Returns the font size of the object with the value id
object = document.getElementById(id);
size = parseInt(object.style.fontSize);
return (size);
}
function setFontSize(id, ptsize) {
// Sets the font size of the object with the value id
object = document.getElementById(id);
object.style.fontSize = ptsize + "pt";
}
function changeFontSize(id, dfs) {
// Returns the font size of the object with the value id
fs = getFontSize(id);
setFontSize(id, fs + dfs);
}
Here is the styles.css page
Code:
/*
New Perspectives on JavaScript
Tutorial 4
Case Problem 1
Filename: styles.css
This file contains styles used in the golfpage.htm file
*/
body {font-family:Arial, Helvetica, sans-serif; font-size: 18pt;
color:blue; background-image: url(clouds.jpg)}
#slogan {visibility: hidden; position: relative; top: 50px;
color:black; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold}
What i am not able to get work i think is to call the changeFontSize() function to increase the size of the "sign"
also an if statement to test value of fs variable is less then equal to 20
how do i get my sign to appear on the output?
thanks
made function at the end
in the golf.htm file after the moveBall function ()
Code:
function growText() {
getFontSize("slogan", 25);
if (fs <= 20) {
} else {
changeFontSize("slogan"+1);
getFontSize("slogan", 20);
}
}
but it is still not working, what seems to be situation
i am to make a growText function
so to grow text from 0 to 21 points.
need to call cgetfontSize function as parameter to store value in variable named "fs"
create an if statement that tests value of fs variable is less then or equal to 20
if condition is met call change FontSize() function to increase size of slogan objact by 1
rerun growText function after delay of 20 milliseconds.
so if that is what is need what did i do wrong?
Last edited by worldtraveller; 12-07-2010 at 02:18 PM.
Golf program with Javascript
Reply With Quote
Bookmarks