<HTML>
<HEAD>
<style type="text/css">
.marquee {
position:absolute;
font-family:verdana;
font-size:10px;
width:190px;
top:100px;
color:#00FF00;
}
body {
background-color:#004400;
}
</style>
<script langauge="javascript">
var marqueeText = new Array();
marqueeText[0] = "Thank you for visiting slayeroffice.com.";
marqueeText[1] = "This is v1 of the Vertical Scrolling Marquee.";
marqueeText[2] = "These text strings are part of a javascript array.";
marqueeText[3] = "They are dynamically set into the two scrolling DIVs' innerHTML."
marqueeText[4] = "Based on the number of characters in the DIV, it approximates the height in pixels.";
marqueeText[5] = "When one reaches negative itsHeight+100, the second DIV begins its accent.";
marqueeText[6] ="When one reaches negative itsHeight, it goes back to the bottom and starts the process over.";
marqueeText[7] = "Mousing over the objects will pause the scrolling, while mousing out starts it again.";
marqueeText[8] = "Thats how its works - here comes the next div.";
var currentMarquee = 1;
var divHeight = 0;
var nextScroll;
var clearMe;
var mInterval;
var marquee_paused = false;
function marquee_initMarquee() {
mHTML = "";
for(i=0;i<marqueeText.length;i++)mHTML+= marqueeText[i] + "<p>";
document.getElementById("marquee1").innerHTML = mHTML;
document.getElementById("marquee2").innerHTML = mHTML;
divHeight = returnDivHeight();
// adjust these to suit your repeat
document.all?adjustScroll = 100:adjustScroll = 175;
nextScroll = 0 - (divHeight)+adjustScroll;
clearMe = 0 - divHeight;
mInterval = setInterval("marquee_beginScroll()",50);
}
function marquee_beginScroll() {
if(!marquee_paused) {
cur = "marquee" + currentMarquee;
curTop = parseInt(document.getElementById(cur).style.top);
curTop-=1;
if(curTop<=nextScroll) {
cur=="marquee1"?cur2 = "marquee2":cur2 = "marquee1";
curTop2 = parseInt(document.getElementById(cur2).style.top);
curTop2-=1;
document.getElementById(cur2).style.top = curTop2;
}
document.getElementById(cur).style.top = curTop;
if(curTop<=clearMe) {
document.getElementById(cur).style.top = 100;
currentMarquee==1?currentMarquee=2:currentMarquee=1;
}
}
}
function returnDivHeight() {
// assumes a max of 30 characters on one line at font-size:10px
// <p> height at 35px, and total line height of 15px;
lineLength = new Array();
totalLength = 0;
for(i=0;i<marqueeText.length;i++) lineLength[lineLength.length] = marqueeText[i].length;
for(i=0;i<lineLength.length;i++)totalLength+=(lineLength[i]+35);
return Math.floor((totalLength/30)*15)+20;
}
</script>
</HEAD>
<BODY onload="marquee_initMarquee();">
<div id="marquee1" class="marquee" style="top:100px" onMouseOver="marquee_paused=true;" onMouseOut="marquee_paused=false;"></div>
<div id="marquee2" class="marquee" style="top:100px;"onMouseOver="marquee_paused=true;" onMouseOut="marquee_paused=false;"></div>
</BODY>
</HTML>
|
Vertical Scrolling Marquee v1.0 last revision: 02.03.2003 steve@slayeroffice.com http://www.slayeroffice.com |