By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,033 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

Display automatic scrolling marquee; give options to start, stop and reset marquee

praclarush
P: 27
Ok, I'm new to JavaScript and I'm taking a class for it the assignment in it I'm supposed to create edit a pre-made page to display a marquee that automatically scrolls for the user, as well as give an option to start, stop and reset the marquee.
Now I have most of this done already, what I'm having problems with is that when i start the marquee it moves to the right, but i need to have it move from the bottom, upwards. heres my code (I'm not expecting this to be done for me i just need someone to point out what I'm doing wrong.

HTML Code
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <!-- 
  4.    New Perspectives on JavaScript
  5.    Tutorial 4
  6.    Case Problem 2
  7.  
  8.    The Chamberlain Civic Center
  9.    Author: 
  10.    Date:   10/21/07
  11.  
  12.    Filename:         ccc.htm
  13.    Supporting files: back.jpg, ccc.gif, ccc.js, styles.css
  14. -->
  15. <title>This Month at the Chamberlain Civic Center by Nathan Bremmer</title>
  16. <link href="styles.css" rel="stylesheet" type="text/css" />
  17. <script type="text/javascript" src="ccc.js"></script>
  18. <script type="text/javascript">
  19.  
  20. function Marquee() {
  21. // not required to know (removed)
  22. } //end Marquee()
  23.  
  24. function Stop() {
  25. //removed
  26. }
  27.  
  28.   function moveIt(id) {
  29.     var y = yCoord(id);
  30.     if(y < -100) { 
  31.       placeIt(id, 5, 750);
  32.     } else if(y >= -100) {
  33.       shiftIt(id, 5, 0);
  34.     }
  35.   } //end moveIt()
  36.  
  37. function reload() {
  38.     document.location = this.location;
  39. }
  40. </script>
  41. </head>
  42.  
  43. <body>
  44. <form id="marquee_buttons" action="">
  45.  
  46. <div id="panel">
  47.    <p>
  48.       <img src="ccc.gif" alt="The Chamberlain Civic Center" />
  49.    </p>
  50.    <h2>
  51.       Events This Month
  52.    </h2>
  53.    <p>To order tickets: Call the box office at (971) 555-9191<br />
  54.    Or click <a href="#">here</a> to order online.
  55.    </p>
  56. </div>
  57.  
  58. <div id="BOX">
  59.  
  60.    <div id="Text1" style="position: absolute; left: 0px; top:5px">
  61.      Coming Soon to the CCC
  62.    </div>
  63.  
  64.    <div id="Text2" style="position: absolute; left: 0px; top: 50px">
  65.      <b>October 2nd, 8 p.m.<br />
  66.      Falstaff</b><hr />
  67.      Enjoy the music of Verdi's <i>Falstaff</i>, as presented by the 
  68.      popular Rockie Mountain Opera Company. Seating is limited.<br /><br />
  69.      Tickets:  Box ($55), Main Floor ($45), Balcony ($35)
  70.    </div>
  71.  
  72.    <div id="Text3" style="position: absolute; left: 0px; top: 200px">
  73.      <b>October 7th, 8 p.m.<br />
  74.      Taiwan Acrobats</b><hr />
  75.      The Taiwan Acrobats return to the Carson Civic Center for another 
  76.      evening of fun and excitment.<br /><br />
  77.      Tickets:  Box ($40), Main Floor ($35), Balcony ($30)
  78.    </div>
  79.  
  80.    <div id="Text4" style="position: absolute; left: 0px; top: 350px">
  81.      <b>October 14th, 8 &amp; 10 p.m.<br />
  82.      Roy Taylor</b><hr />
  83.      Enjoy of the blues sound of the legendary "Slow Train" Taylor. 
  84.      Two performances at 8 and 10 p.m.<br /><br />
  85.      Tickets:  Box ($40), Main Floor ($35), Balcony ($30)
  86.    </div>
  87.  
  88.    <div id="Text5" style="position: absolute; left: 0px; top: 500px">
  89.      <b>October 21st, 8 p.m.<br />
  90.      Celtic Dancers</b><hr />
  91.      Enjoy an evening of Celtic music and dance, as presented by the
  92.      Oban Dance Company of Scotland.<br /><br />
  93.      Tickets:  Box ($30), Main Floor ($25), Balcony ($20)
  94.    </div>
  95.  
  96.    <div id="Text6" style="position: absolute; left: 0px; top: 650px">
  97.      <b>October 28th, 8 p.m.<br />
  98.      An Evening with Ike</b><hr />
  99.      David Lee presents <i>An Evening with Ike</i>, his acclaimed one-man
  100.      show of the life and times of Dwight Eisenhower.<br /><br />
  101.      Tickets:  Box ($35), Main Floor ($30), Balcony ($25)
  102.    </div>
  103. </div>
  104.  
  105. <div id="form_buttons">
  106.       <input type="button" value="Scroll Marquee" onClick="Marquee()"/>
  107.       <input type="button" value="Stop  Marquee"  onClick="Stop()"/>
  108.       <input type="button" value="Reset" onClick="reload()"/>
  109. </div>
  110.  
  111. </form>
  112. </body>
  113.  
  114. </html>
  115.  
JavaScript Code:
Expand|Select|Wrap|Line Numbers
  1. /* 
  2.    New Perspectives on JavaScript
  3.    Tutorial 4
  4.    Case Problem 2
  5.  
  6.    The Chamberlain Civic Center
  7.    Name:
  8.    Date: 10/21/07
  9.  
  10.    Function List:
  11.    placeIt(id, x, y)
  12.       Places the id object at the page coordinates (x,y)
  13.  
  14.    shiftIt(id, dx, dy)
  15.       Shifts the id object dx pixels to the left and dy pixels down
  16.  
  17.    yCoord(id)
  18.       Returns the y-coordinate of the id object
  19. */
  20. // removed code
  21. function shiftIt(id, dx, dy) {
  22.   var object = document.getElementById(id);
  23.   object.style.left = xCoord(id) + dx + "px";
  24.   object.style.top = yCoord(id) + dy + "px";
  25. } //end shiftIT
  26.  
  27.  
any help will be greatly appreciated,

Praclarush
Oct 21 '07 #1
Share this Question
Share on Google+
8 Replies


acoder
Expert Mod 15k+
P: 16,027
Welcome to TSDN!

You will need to edit the moveIt function. Look at what the shiftIt function does. Use the correct parameters.

PS. how much of this have you done? I might have to remove some of this code if not all of this is the original code.
Oct 22 '07 #2

praclarush
P: 27
Welcome to TSDN!

You will need to edit the moveIt function. Look at what the shiftIt function does. Use the correct parameters.

PS. how much of this have you done? I might have to remove some of this code if not all of this is the original code.

the code that I have done is all of the JS file and all of the code in the script tags in the html the rest is the original code that came with the assignment

thinks,
praclarush
Oct 22 '07 #3

acoder
Expert Mod 15k+
P: 16,027
the code that I have done is all of the JS file and all of the code in the script tags in the html the rest is the original code that came with the assignment
I've removed the code that is not required to explain the problem.

This is to avoid copying. Read the guidelines on homework and coursework assignments.
Oct 22 '07 #4

praclarush
P: 27
Sorry about that must not have read that, anyways thinks for the help that salved that problem, now I’m having issues with stopping the method, I’m using this

Expand|Select|Wrap|Line Numbers
  1. function Stop() {
  2.  
  3.     clearInterval(t1);
  4.     clearInterval(t2);
  5.     clearInterval(t3);
  6.     clearInterval(t4);
  7.     clearInterval(t5);
  8.     clearInterval(t6);
  9. }
to clear the setInterval method in the marquee function but it keeps saying that t1,t2,…, is not defined is this because its not in this function even though its in the marquee function above it, were their all set to

var t1 = 130;

I think i might be doing it wrong but i havan't a clue, the other websites i use keep using window.clearInterval, but that dosen't seem to work the marquee needs to stop on a onClick command, in a form input

thanks for the help,
Praclarush
Oct 22 '07 #5

praclarush
P: 27
I figured it out, thank you for all your help,

sorry for any problems I gave you.
Praclarush
Oct 23 '07 #6

acoder
Expert Mod 15k+
P: 16,027
...to clear the setInterval method in the marquee function but it keeps saying that t1,t2,, is not defined
In case anyone has the same problem, this is because these variables need to be declared globally outside the Marquee() function.
Oct 23 '07 #7

acoder
Expert Mod 15k+
P: 16,027
I figured it out, thank you for all your help,

sorry for any problems I gave you.
Praclarush
Glad to see that you managed to solve the problem yourself. No need to apologise for the 'problems'. There's only a problem if you expect someone else to do your homework for you.
Oct 23 '07 #8

P: 3
@acoder
Has anyone got this to work? I am still getting errors.
Aug 15 '09 #9

Post your reply

Sign in to post your reply or Sign up for a free account.