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