Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- COURTESY OF http://www.bl0g.co.uk/vertical-scrolling-text-news-ticker-in-javascript-dhtml.html
- <style type="text/css">
- body {
- color: #333333;
- xbackground-color: #000000;
- text-align:left;
- font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
- }
- #scrollBox {
- /* The box displaying the scrolling content */
- position: absolute;
- top: 5%;
- left: 5%;
- width: 90%;
- height: 90%;
- border: 0px solid #aaaaaa;
- overflow: hidden;
- }
- #scrollTxt {
- /* the box that actually contains our content */
- font: normal 12px sans-serif;
- position: relative;
- top: 10%;
- }
- </style>
- </head>
- <body>
- <div id="scrollBox" class="scrollBox">
- <div id="scrollTxt" class="scrollTxt">
- <h1>Header</h1>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae
- enim eu mauris rhoncus malesuada. Suspendisse et tellus diam, et ullamcorper
- nisl. In nec nibh dolor, et auctor nibh. Duis pretium faucibus bibendum.
- Suspendisse eget leo in eros faucibus consequat a id nisl. Quisque cursus
- lacinia consectetur. Nam mattis sagittis diam, ac posuere risus porttitor
- sed.
- <h2>Header 2:</h2>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae
- enim eu mauris rhoncus malesuada. Suspendisse et tellus diam, et ullamcorper
- nisl. In nec nibh dolor, et auctor nibh. Duis pretium faucibus bibendum.
- Suspendisse eget leo in eros faucibus consequat a id nisl. Quisque cursus
- lacinia consectetur. Nam mattis sagittis diam, ac posuere risus porttitor sed.
- <p>Paragraf:</p>
- Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
- inceptos himenaeos. Phasellus tincidunt eros at risus consectetur feugiat.
- Etiam id erat vel lectus pharetra posuere. Maecenas rhoncus est vel lectus
- posuere dictum.
- </div>
- </div>
- </body>
- <script type="text/javascript">
- var scrollSpeed =1; // number of pixels to change every frame
- var scrollDepth = 700; // height of your display box
- var scrollHeight=0; // this will hold the height of your content
- var scrollDelay=10; // delay between movements.
- //document.getElementById('scrollBox').style.height
- var scrollPos=scrollDepth; // current scroll position
- var scrollMov=scrollSpeed; // for stop&start of scroll
- function doScroll() {
- if(scrollHeight==0) { getHeight(); }
- scrollPos-=scrollMov;
- if(scrollPos< (0-scrollHeight)) { scrollPos=scrollDepth; }
- document.getElementById('scrollTxt').style.top=scrollPos+'px';
- setTimeout('doScroll();', scrollDelay);
- }
- function getHeight() {
- scrollHeight=document.getElementById('scrollTxt').offsetHeight;
- }
- function scrMove() { scrollMov=scrollSpeed; }
- function scrStop() { scrollMov=0; }
- doScroll();
- //var t=setTimeout("window.location.href=window.location.href",20000); // A quick way to test new html is by timing out a reload. Saved me countless station reboots.
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement