Vote count:
0
So Im creating a vertically scrolling marquee, which uses javascript to alter the the top position of the text. A function runs at timed intervals creating the illusion of several groups of text moving vertically within the marquee from bottom to top and back again. Everything is working fine Except the groups of text insist of been bunched together at the top of the marquee. Can anybody offer advice ???
window.onload = defineMarquee;
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
var topPos= 20;
/* defineMarquee()
Initializes the contents of the marquee, determines the
top style positions of each marquee item, and sets the
onclick event handlers for the document
*/
function defineMarquee() {
var topValue;
var allElems = document.getElementsByTagName("*");
for(var i = 0; i < allElems.length; i++){
if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
}
//Extract the "top" CSS class from marqueeTxt
for(var i = 0; i < marqueeTxt.length; i++){
if(marqueeTxt[i].getComputedStyle) {
topValue = marqueeTxt[i].getPropertyValue("top")
marqueeTxt[i].style.top = topValue +"px";
}
else if (marqueeTxt[i].currentStyle) {
topValue = marqueeTxt[i].currentStyle("top");
marqueeTxt[i].style.top = topValue +"px";
}
}
document.getElementById("startMarquee").onclick = startMarquee;
document.getElementById("stopMarquee").onclick = stopMarquee;
}
/* startMarquee()
Starts the marquee in motion
*/
function startMarquee() {
if(marqueeOff == true) {
timeID = setInterval("moveText()", 50);
marqueeOff = false;
}
}
/* stopMarquee()
Stops the Marquee
*/
function stopMarquee() {
clearInterval(timeID);
marqueeOff = true;
}
/* moveText ()
move the text within the marquee in a vertical direction
*/
function moveText() {
for(var i = 0; i < marqueeTxt.length; i++) {
if(marqueeTxt[i].getComputedStyle) {
topPos = parseInt(marqueeTxt.getPropertyValue("top"));
}
else if(marqueeTxt[i].currentStyle) {
topPos = parseInt(marqueeTxt.currentStyle("top"));
}
if(topPos < -110) {
topPos = 700;
} else { topPos -= 1;
}
marqueeTxt[i].style.top = topPos + "px";
}
}
* {margin: 0px; padding: 0px}
body {font-size: 15px; font-family: Arial, Helvetica, sans-serif}
#pageContent {position: absolute; top: 0px; left: 30px; width: 800px}
#links {display: block; width: 100%; margin-bottom: 20px;
border-bottom: 1px solid rgb(0,153, 102); float: left}
#links {list-style-type: none}
#links li {display: block; float: left; text-align: center; width: 19%}
#links li a {display: block; width: 100%; text-decoration: none; color: black;
background-color: white}
#links li a:hover {color: white; background-color: rgb(0,153,102)}
#leftCol {clear: left; float: left}
h1 {font-size: 24px; letter-spacing: 5px; color: rgb(0, 153,102)}
#main {float: left; width: 450px; margin-left: 10px;
padding-left: 10px; border-left: 1px solid rgb(0,153,102);
padding-bottom: 15px}
#main img {float: right; margin: 0px 0px 10px 10px}
#main p {margin-bottom: 10px}
address {width: 100%; clear: left; font-style: normal; font-size: 12px;
border-top: 1px solid black; text-align: center;
padding-bottom: 15px}
.marquee {position: absolute; top: 0px; left: 0px;
width: 280px; height: 300px;
background-color: rgb(0, 153, 102); color:white;
border: 5px inset white;
padding:0px; overflow:hidden; position:relative}
#marqueeTxt1 {font-size: 1.4em; letter-spacing: 0.15em; border-bottom: 1px solid white}
input {width: 120px; margin: 5px; font-size: 0.9em}
#marqueeButtons {width: 280px; text-align: center}
#marqueeTxt1 {position: absolute; top: 40px; left: 20px}
#marqueeTxt2 {position: absolute; top: 90px; left: 20px}
#marqueeTxt3 {position: absolute; top: 170px; left: 20px}
#marqueeTxt4 {position: absolute; top: 250px; left: 20px}
#marqueeTxt5 {position: absolute; top: 330px; left: 20px}
#marqueeTxt6 {position: absolute; top: 410px; left: 20px}
#marqueeTxt7 {position: absolute; top: 490px; left: 20px}
#marqueeTxt8 {position: absolute; top: 570px; left: 20px}
#marqueeTxt9 {position: absolute; top: 640px; left: 20px}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://ift.tt/mOIMeg">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 3
BYSO Web Page
Author: Gavin Macken
Date: 28 Feb `15
Filename: byso.htm
Supporting files: bstyles.css, byso.jpg, bysologo.jpg, marquee.js
-->
<title>Boise Youth Symphony Orchestra</title>
<link href="bstyles.css" rel="stylesheet" type="text/css" />
<script type = "text/javascript" src = "marquee.js"></script>
</head>
<body>
<form id="marqueeForm" action="">
<div id="pageContent">
<div id="head"><img src="bysologo.jpg" alt="Boise Youth Symphony Orchestra" /></div>
<ul id="links">
<li><a href="#">Home Page</a></li>
<li><a href="#">About BYSO</a></li>
<li><a href="#">Our Director</a></li>
<li><a href="#">Join BYSO</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="leftCol">
<div class="marquee">
<div id="marqueeTxt1" class="marqueeTxt">
Schedule of Events
</div>
<div id="marqueeTxt2" class="marqueeTxt">
Holiday Concert<br />
December 14, 7:30 PM<br />
Boise Civic Center
</div>
<div id="marqueeTxt3" class="marqueeTxt">
Christmas Concert<br />
Dec. 16, 7 PM<br />
Our Savior Episcopal Church
</div>
<div id="marqueeTxt4" class="marqueeTxt">
Spring Concert<br />
Feb. 27, 7 PM<br />
Boise Civic Center
</div>
<div id="marqueeTxt5" class="marqueeTxt">
Easter Fanfare<br />
March 14, 9 PM<br />
Our Savior Episcopal Church
</div>
<div id="marqueeTxt6" class="marqueeTxt">
High School MusicFest<br />
May 2, 3 PM<br />
Boise Central High School
</div>
<div id="marqueeTxt7" class="marqueeTxt">
Summer Concert<br />
June 15, 7:30 PM<br />
Frontier Concert Hall
</div>
<div id="marqueeTxt8" class="marqueeTxt">
Fourth Fest<br />
July 4, 4 PM<br />
Canyon View Park
</div>
<div id="marqueeTxt9" class="marqueeTxt">
Frontier Days<br />
August 9, 1 PM<br />
Boise Concert Hall
</div>
</div>
<div id="marqueeButtons">
<input type="button" id="startMarquee" value="Start Marquee" />
<input type="button" id="stopMarquee" value="Pause Marquee" />
</div>
</div>
<div id="main">
<h1>Boise Youth Symphony Orchestra</h1>
<img src="byso.jpg" alt="" />
<p>The Boise Youth Symphony Orchestra has delighted audiences worldwide with
beautiful music while offering the highest quality musical training to over
1,000 teens throughout Idaho for the past 30 years. BYSO
has established an outstanding reputation for its high quality sound, its
series of commissioned works, and collaborations with prominent musical groups
such as the Idaho and Boise Symphony Orchestras, the Montana Chamber
Orchestra, the Boise Adult Choir and the Western Symphony Orchestra.
Last year the group was invited to serve as the U.S. representative to
the 7th Annual World Festival of youth orchestras in Poznan, Poland.</p>
<p>Leading this success for the past decade has been Boise Symphony artistic
director Denise Young. In a concert review by John Aehl, music critic for
the <i>Boise Times</i>, Roger Adler writes, "It is a pleasure to report that
the orchestra is playing better than ever."</p>
</div>
<address>
BYSO · 300 Mountain Lane · Boise, Idaho 83702 · (208) 555 - 9114
</address>
</div>
</form>
</body>
</html>
asked 1 min ago
Horizontal scrolling Marquee, My text insists on bunching together when function is acxtivated
Aucun commentaire:
Enregistrer un commentaire