Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 598
  • Last Modified:

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

0
Powergirl13
Asked:
Powergirl13
  • 4
  • 4
1 Solution
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now