JavaScript, IE, Firefox: How do I get a vertical marquee box to scroll?

I am having difficulty getting my Marquee to scroll vertically using a start and stop button. Any help to get the start and stop buttons to work properly would be greatly appreciated.
<title>This Month at the My Spot</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="ccc.js" type="text/javascript"></script>
<script type="text/javascript">
function Marquee(){
	t1=setTimeout("moveIt('Text1'), 130");
	}
 function moveIt(id);
	var y=yCoord();
	if (y < -100) {
 		placeIt(5,750);
	} else {
	if (y >= -100){
		shiftIt();
	}
</script>
</head>
 
<body>
 
<div id="panel">
   <p>
      <img src="ccc.gif" alt="My Spot" />
   </p>
   <h2>
      Events This Month
   </h2>
   <p>To order tickets: Call the box office at (765) 555-9191<br />
   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 My Spot
   </div>
 
   <div id="Text2" style="position: absolute; left: 0px; top: 50px">
     <b>October 2nd, 8 p.m.<br />
     Falstaff</b><hr />
     Enjoy the music of Verdi's <i>Falstaff</i>, as presented by the 
     popular Rockie Mountain Opera Company. Seating is limited.<br /><br />
      
   </div>
 
   <div id="Text3" style="position: absolute; left: 0px; top: 200px">
     <b>October 7th, 8 p.m.<br />
      Acrobats</b><hr />
     The Acrobats return to the My Spot for another 
     evening of fun and excitment.<br /><br />
      
   </div>
 
   <div id="Text4" style="position: absolute; left: 0px; top: 350px">
     <b>October 14th, 8 &#38; 10 p.m.<br />
     Roy Taylor</b><hr />
     Enjoy of the blues sound of the Gentle crew. 
     Two performances at 8 and 10 p.m.<br /><br />
      
   </div>
 
   <div id="Text5" style="position: absolute; left: 0px; top: 500px">
     <b>October 21st, 8 p.m.<br />
     Celtic Dancers</b><hr />
     Enjoy an evening of Celtic music and dance, as presented by the
     My Spot Band.<br /><br />
     
   </div>
 
   <div id="Text6" style="position: absolute; left: 0px; top: 650px">
     <b>October 28th, 8 p.m.<br />
     An Evening with Mike</b><hr />
     My Spot presents <i>An Evening with Mike</i>, his acclaimed one-man
     show of the life and times of Dwight Eisenhower.<br /><br />
      
   </div>
</div>
 
<div id="form_buttons">
<form id="marquee_buttons" action="">
      <input type="button" value="Scroll Marquee" onClick="Marquee()" />
      <input type="button" value="Stop  Marquee" onClick="Stop()" />
      <input type="button" value="Reset" onClick="reload()" />
</form>
</div>
</body>
 
</html>

Open in new window

Powergirl13Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

quincydudeCommented:
something like below ( cannot see your stop() code so i made that too)
var toStop = false;
 
function Stop(){
        toStop = true;
        }
 
function Marquee(){
        toStop = false;
        t1=setTimeout("moveIt('Text1'), 130");
        }
 
function moveIt(id)
{
        var y=yCoord();
        if (y < -100) {
                placeIt(5,750);
        } else if (y >= -100){
                shiftIt();
        }
 
        if(!toStop)
          var timer = setTimeout("moveIt('Text1'), 130");
 
}

Open in new window

0
Powergirl13Author Commented:
I cannot seem to get that code to work. It came up with an error on line 21, but I do not see that there is any thing that would cause an error.
0
quincydudeCommented:
oops, something wrong with settimeout
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Powergirl13Author Commented:
would there be wrong coding somewhere else in my code, because it is still not working.
0
quincydudeCommented:
probably, but without the complete code i cannot figure it out.
0
Powergirl13Author Commented:
I have included my code from my js file if that might help.
function xCoord(id) {
	object=document.getElementById(id);
	xc=parseInt(object.style.left);
	return xc;
}
 
function yCoord(id) {
	object=document.getElementById(id);
	yc=parseInt(object.style.top);
	return yc;
}
 
function placeIt(id, x, y) {
	object=document.getElementById(id);
	object.style.left=x + "px";
	object.style.top=y + "px";
}
 
function shiftIt(id, dx, dy) {
	object=document.getElementById(id);
	object.style.left=xCoord(id)+dx+"px";
	object.style.top=yCoord(id)+dy+"px";
}

Open in new window

0
quincydudeCommented:
You are missing some parameters calling functions,
the below piece of code can work but not as you expected, please put in your own values in the parameters. If there's any other problem feel free to ask.
<title>This Month at the My Spot</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="ccc.js" type="text/javascript"></script>
<script type="text/javascript">
var toStop = false;
 
function Stop(){
        toStop = true;
        }
 
function Marquee(){
        toStop = false;
        t1=setTimeout("moveIt('Text1')", 130);
        }
 
function moveIt(id)
{
        var timer;
        var y=yCoord('Text1');
        if (y < -100) {
                placeIt('Text1',5,750);
        } else if (y >= -100){
                shiftIt('Text1',5,y);
        }
 
        if(!toStop)
          timer = setTimeout("moveIt('Text1')", 130);
 
}
 
function xCoord(id) {
        object=document.getElementById(id);
        xc=parseInt(object.style.left);
        return xc;
}
 
function yCoord(id) {
        object=document.getElementById(id);
        yc=parseInt(object.style.top);
        return yc;
}
 
function placeIt(id, x, y) {
        object=document.getElementById(id);
        object.style.left=x + "px";
        object.style.top=y + "px";
}
 
function shiftIt(id, dx, dy) {
        object=document.getElementById(id);
        object.style.left=xCoord(id)+dx+"px";
        object.style.top=yCoord(id)+dy+"px";
}
</script>
</head>
 
<body>
 
<div id="panel">
   <p>
      <img src="ccc.gif" alt="My Spot" />
   </p>
   <h2>
      Events This Month
   </h2>
   <p>To order tickets: Call the box office at (765) 555-9191<br />
   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 My Spot
   </div>
 
   <div id="Text2" style="position: absolute; left: 0px; top: 50px">
     <b>October 2nd, 8 p.m.<br />
     Falstaff</b><hr />
     Enjoy the music of Verdi's <i>Falstaff</i>, as presented by the 
     popular Rockie Mountain Opera Company. Seating is limited.<br /><br />
      
   </div>
 
   <div id="Text3" style="position: absolute; left: 0px; top: 200px">
     <b>October 7th, 8 p.m.<br />
      Acrobats</b><hr />
     The Acrobats return to the My Spot for another 
     evening of fun and excitment.<br /><br />
      
   </div>
 
   <div id="Text4" style="position: absolute; left: 0px; top: 350px">
     <b>October 14th, 8 &#38; 10 p.m.<br />
     Roy Taylor</b><hr />
     Enjoy of the blues sound of the Gentle crew. 
     Two performances at 8 and 10 p.m.<br /><br />
      
   </div>
 
   <div id="Text5" style="position: absolute; left: 0px; top: 500px">
     <b>October 21st, 8 p.m.<br />
     Celtic Dancers</b><hr />
     Enjoy an evening of Celtic music and dance, as presented by the
     My Spot Band.<br /><br />
     
   </div>
 
   <div id="Text6" style="position: absolute; left: 0px; top: 650px">
     <b>October 28th, 8 p.m.<br />
     An Evening with Mike</b><hr />
     My Spot presents <i>An Evening with Mike</i>, his acclaimed one-man
     show of the life and times of Dwight Eisenhower.<br /><br />
      
   </div>
</div>
 
<div id="form_buttons">
<form id="marquee_buttons" action="">
      <input type="button" value="Scroll Marquee" onClick="Marquee()" />
      <input type="button" value="Stop  Marquee" onClick="Stop()" />
      <input type="button" value="Reset" onClick="reload()" />
</form>
</div>
</body>
 
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Powergirl13Author Commented:
Thank You for helping me out here!  Sorry it took so long to accept this solution, but I haven't been online.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.