help with java

[Dinthug]

Yeah, so uh, I suck at javascript and I can't figure out what I am doing wrong. All the assignment is asking is to have Text1 through Text6 marquee across a section of a page. Can anyone tell me what I'm doing wrong?

two images, one is 128X128 (back.jpg) other is 322X134 (ccc.gif)...don't really need them for the assignment though.
Most of the code is already provided, theres only a few things I worked on. I added the functions to the .js file, and the functions in the .htm file. At the bottom of the .htm file, I added the onClick event to the buttons. That's about everything I've done... I didn't need the xCoord() function in the .js file according to the tutorial, but I was getting an error so I decided to put it in... still not clearing up the errors though when I try using those buttons...

Most of the functions were already provided through other tutorials in the book. I have a feeling I didn't make the functions in the ccc.htm file correctly


heres a list of what I am suposed to do

1. create placeIt()
- places object at a specified coordinate given the objects id, and values for x and y coordinate (measured in pixels)

2. create shiftIt()
- to shift an object a specified distance given the objects id and distance to be shifted in the x and y direction

3. create yCoord()
- to return the numeric value of an objects top coordinate given the objects id


- go to ccc.htm and create an embedded script

4. create function moveIt()
- purpose of moveIt() is to move object vertically within the marquee. Should have single parameter named "id" that indicates the id value of the object to be moved. Should be written as follows:
- use the yCoord() function from the ccc.js file to retrieve the current y-coordinate of the id object. Store the value in a variable named "y"
- if the value of y is less than -100, use the placeIt() function from the ccc.js file to place the id object at the page coordinate (5, 750). This has the effect of dropping the id back down to the beginning of the marquee
- if the value of y is greater than or equal to -100, use the shiftIt() function from the ccc.js file to move the id object up 5 pixels. This has the effect of moving the object back up the marquee.

5. create Marquee() above moveIt()
-used to start the marquee text moving all six text objects. The Marquee() function should do the following:
- run the moveIt() function every 130 milliseconds with the id of the parameter set to "Text1". This has the effect of continuously moving the text contained in the Text1 object. Store the time id for this command in a variable named "t1"
- do the same thing for Text2 through Text6 and store the values in t2 through t6

6. Below Marquee(), create Stop()
- should halt the marquee text by clearing the time interval commands for the ids t1 through t6

7. locate button labeled Scroll Marquee and add onclick event handler to run the Marquee() function

8. locate button labeled Stop Marquee and add onclick event handler to run the Stop() function

9. Locate button labeled Reset and add the onclick event handler to reload the current page when the button is clicked


Marquee should now scroll vertically from bottom to top, the stop button should stop the movement, and the reset button should return the text to its original position


heres the code
-----------------------------------------------------------------------------------------------------------------------------------------------------
ccc.htm
------------------------------------------------------------------------------------------------------------------------------------------------------
Code refused to post, posted it on another forum

http://www.bambuu.com/forums/index.php?topic=1278.0

-------------------------------------------------------------------------
ccc.js
----------------------------------------------------------------------------------

/*
New Perspectives on JavaScript
Tutorial 4
Case Problem 2

The Chamberlain Civic Center
Name:
Date:

Function List:
placeIt(id, x, y)
Places the id object at the page coordinates (x,y)

shiftIt(id, dx, dy)
Shifts the id object dx pixels to the left and dy pixels down

yCoord(id)
Returns the y-coordinate of the id object
*/

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


function shiftIt(id, dx, dy){
object = document.getElementById(id);
object.style.left = xCoord(id) + dx + "px";
object.style.top = yCoord(id) + dy + "px";
}//end shiftIt()


function yCoord(id){
object = document.getElementById(id);
yc = parseInt(object.style.top);
return yc;
}//end yCoord()

function xCoord(id){
object = document.getElementById(id);
xc = parseInt(object.style.top);
return xc;
}//end xCoord()

-------------------------------------------------------
styles.css
----------------------------------------------------------

/*
New Perspectives on JavaScript
Tutorial 4
Case Problem 2
Filename: styles.css

This file contains styles used in the ccc.htm file
*/

body {background-image: url("back.jpg")}

#panel {width: 300px}
#panel img {border-bottom: 1px solid red}
#panel h2 {font-family: Arial, Helvetica, sans-serif; color:blue}

#BOX {background-color:blue; color:white; width:350px; height: 260px;
font-family: Arial, Helvetica, sans-serif; font-size:10pt;
border: 5px inset white; padding:0px;
overflow:hidden; position:absolute; top:10px; left:350px}

#Text1, #Text2, #Text3, #Text4, #Text5, #Text6 {padding: 5px}

#Text1 {color:yellow; text-align:center; font-size:16pt; width: 350px}

#form_buttons {position: absolute; top: 290px; left: 350px;
width: 350px; text-align: center}


*/

[Dinthug]

anyone?

[Zippygoose]

The reason you were getting errors is because you were passing 2 values into your shiftIt function from your moveIt function. ShiftIt takes 3 values: id, dx and dy. Your stop function isn't doing anything other than assigning a new set of variables (t1-t6) to 0. It is important to realize that variables declared (that means you wrote var in front of them) within methods are only accessible within the scope of that method.

If you wanted a global set of variables to manipulate accross multiple functions you would declare them outside of your methods (this isn't really a best practice however).

Your reset function needed to call the placeIt function, placing all of your objects back to their original positions.

Also, you need to recursively call your Marquee function in order to get the marquee to scroll indefinitely. Your stop method should call the native JS function called "clearTimeout" which passes in the ID of the recursive function call (as noted in the solution below).

I couldn't get the y > -100 to work because that doesn't make any sense if the text is scrolling from top to bottom (which was my assumption).When text is moved down the page it's y-axis actually increases. I changed it to if(y > 750), this makes the text readjust itself when it reaches the bottom of a standard browser window. If you wanted to be fancy you could figure out the size of your current window with some of JavaScript's native functionality and then set your text adjust to that value, I'm busy doing laundry though so I don't really have the time to implement that :-P.

The most difficult part of this is the recursive function call, it's very important to understand why and how that works.

Here is the code for the working marquee scroller with a start, stop and reset. I also moved the buttons out of the way of the text to make it look a little nicer:

<html> <head> <title>This Month at the Chamberlain Civic Center</title> <link href=\"styles.css\" rel=\"stylesheet\" type=\"text/css\" /> <script type=\"text/javascript\" src= \"ccc.js\"> </script> </head> <script>

function Marquee(){
var t1 = 130;
var t2 = 130;
var t3 = 130;
var t4 = 130;
var t5 = 130;
var t6 = 130;

setTimeout("moveIt('Text1')", t1);
setTimeout("moveIt('Text2')", t2);
setTimeout("moveIt('Text3')", t3);
setTimeout("moveIt('Text4')", t4);
setTimeout("moveIt('Text5')", t5);
setTimeout("moveIt('Text6')", t6);
ID = setTimeout('Marquee()', 0);

}//end Marquee()

function Stop()
{
	clearTimeout(ID);
}	

function reload(){
placeIt('Text1', 5, 5);
placeIt('Text2', 5, 50);
placeIt('Text3', 5, 200);
placeIt('Text4', 5, 350);
placeIt('Text5', 5, 500);
placeIt('Text6', 5, 650);
}//end Stop()

function moveIt(id){
var y = yCoord(id);
if(y > 750){
placeIt(id, 5, 0);
}
else{
shiftIt(id, 0, 5);
}
}//end moveIt()


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


function shiftIt(id, dx, dy){
object = document.getElementById(id);
object.style.left = xCoord(id) + dx + "px";
object.style.top = yCoord(id) + dy + "px";
}//end shiftIt()


function yCoord(id){
object = document.getElementById(id);
yc = parseInt(object.style.top);
return yc;
}//end yCoord()

function xCoord(id){
object = document.getElementById(id);
xc = parseInt(object.style.left);
return xc;
}//end xCoord()

</script> <body> <form id=\"marquee_buttons\" action=\"\"> <div id=\"panel\"> <h2>
Events This Month
</h2> <p>To order tickets: Call the box office at (971) 555-9191
Or click <a href=\"#\">here</a> to order online.
</p> </div> <div id=\"BOX\"> <div id=\"Text1\" style=\"position: absolute; left: 0px; top:5px\">
Coming Soon to the CCC
</div> <div id=\"Text2\" style=\"position: absolute; left: 0px; top: 50px\"> <b>October 2nd, 8 p.m.
Falstaff</b><hr />
Enjoy the music of Verdi's <i>Falstaff</i>, as presented by the
popular Rockie Mountain Opera Company. Seating is limited.
Tickets: Box ($55), Main Floor ($45), Balcony ($35)
</div> <div id=\"Text3\" style=\"position: absolute; left: 0px; top: 200px\"> <b>October 7th, 8 p.m.
Taiwan Acrobats</b><hr />
The Taiwan Acrobats return to the Carson Civic Center for another
evening of fun and excitment.
Tickets: Box ($40), Main Floor ($35), Balcony ($30)
</div> <div id=\"Text4\" style=\"position: absolute; left: 0px; top: 350px\"> <b>October 14th, 8 & 10 p.m.
Roy Taylor</b><hr />
Enjoy of the blues sound of the legendary "Slow Train" Taylor.
Two performances at 8 and 10 p.m.
Tickets: Box ($40), Main Floor ($35), Balcony ($30)
</div> <div id=\"Text5\" style=\"position: absolute; left: 0px; top: 500px\"> <b>October 21st, 8 p.m.
Celtic Dancers</b><hr />
Enjoy an evening of Celtic music and dance, as presented by the
Oban Dance Company of Scotland.
Tickets: Box ($30), Main Floor ($25), Balcony ($20)
</div> <div id=\"Text6\" style=\"position: absolute; left: 0px; top: 650px\"> <b>October 28th, 8 p.m.
An Evening with Ike</b><hr />
David Lee presents <i>An Evening with Ike</i>, his acclaimed one-man
show of the life and times of Dwight Eisenhower.
Tickets: Box ($35), Main Floor ($30), Balcony ($25)
</div> </div> <div id=\"form_buttons\" style=\"position: absolute; left: 400px; top: 5px\"> <input type=\"button\" value=\"Scroll Marquee\" onClick=\"Marquee()\"/> <input type=\"button\" value=\"Stop Marquee\" onClick=\"Stop()\"/> <input type=\"button\" value=\"Reset\" onClick=\"reload()\"/> </div> </form> </body> </html>

Also in the future you can put HTML code into your post by using the [ HTML ] vB tag.

I hope this helps and I know I gave you all of the answers but it is also very important to understand all of this code and why it is needed!

Edit: I forgot to add that your X-axis was shifting as well due to the fact that your xCoord method was calling xc = parseInt(object.style.top) instead of object.style.left

[Dinthug]

thanks a lot I see what I was doing wrong now, I was kinda close but I am just starting with javascript/java programming so I'm not that great at it yet. Really appreciate you taking some time to help a newbie, thanks again

[Dinthug]

the only thing is that the book seems to make it sound like reload() is a built in function that would reload the entire page, not just the Marquee() function. I think what I should do is use the placeIt() function to set the coords that you have in the reload() function, then use reload() to reload the page? Maybe use the placeIt function in the body tag onLoad?

Going to fool around with it a little bit and see if I run into any other problems

[Zippygoose]

Yep, that would work as well.