SHARE
TWEET

Vertical scrolling text javascript

a guest May 21st, 2012 291 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. COURTESY OF http://www.bl0g.co.uk/vertical-scrolling-text-news-ticker-in-javascript-dhtml.html
  2.  
  3. <style type="text/css">
  4.         body {
  5.         color: #333333;
  6.         xbackground-color: #000000;
  7.         text-align:left;
  8.         font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  9.         }
  10.        
  11.   #scrollBox {
  12.    /* The box displaying the scrolling content */
  13.    position: absolute;
  14.    top: 5%;
  15.    left: 5%;
  16.    width: 90%;
  17.    height: 90%;
  18.    border: 0px solid #aaaaaa;
  19.    overflow: hidden;
  20.  }
  21.   #scrollTxt {
  22.   /* the box that actually contains our content */
  23.    font: normal 12px sans-serif;
  24.    position: relative;
  25.    top: 10%;
  26.   }
  27. </style>
  28. </head>
  29. <body>
  30.  
  31. <div id="scrollBox" class="scrollBox">
  32. <div id="scrollTxt" class="scrollTxt">
  33. <h1>Header</h1>
  34. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae
  35. enim eu mauris rhoncus malesuada. Suspendisse et tellus diam, et ullamcorper
  36. nisl. In nec nibh dolor, et auctor nibh. Duis pretium faucibus bibendum.
  37. Suspendisse eget leo in eros faucibus consequat a id nisl. Quisque cursus
  38. lacinia consectetur. Nam mattis sagittis diam, ac posuere risus porttitor
  39. sed.
  40. <h2>Header 2:</h2>
  41. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae
  42. enim eu mauris rhoncus malesuada. Suspendisse et tellus diam, et ullamcorper
  43. nisl. In nec nibh dolor, et auctor nibh. Duis pretium faucibus bibendum.
  44. Suspendisse eget leo in eros faucibus consequat a id nisl. Quisque cursus
  45. lacinia consectetur. Nam mattis sagittis diam, ac posuere risus porttitor sed.
  46. <p>Paragraf:</p>
  47. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
  48. inceptos himenaeos. Phasellus tincidunt eros at risus consectetur feugiat.
  49. Etiam id erat vel lectus pharetra posuere. Maecenas rhoncus est vel lectus
  50. posuere dictum.
  51. </div>
  52. </div>
  53. </body>
  54.  
  55. <script type="text/javascript">
  56.  var scrollSpeed =1;   // number of pixels to change every frame
  57.  var scrollDepth = 700; // height of your display box
  58.  var scrollHeight=0;   // this will hold the height of your content
  59.  var scrollDelay=10;  // delay between movements.
  60. //document.getElementById('scrollBox').style.height
  61.  
  62.  var scrollPos=scrollDepth; // current scroll position
  63.  var scrollMov=scrollSpeed; // for stop&start of scroll
  64.  
  65. function doScroll() {
  66.  if(scrollHeight==0) { getHeight(); }
  67.   scrollPos-=scrollMov;
  68.   if(scrollPos< (0-scrollHeight)) { scrollPos=scrollDepth; }
  69.  document.getElementById('scrollTxt').style.top=scrollPos+'px';
  70.  setTimeout('doScroll();', scrollDelay);
  71. }
  72.  
  73. function getHeight() {
  74.  scrollHeight=document.getElementById('scrollTxt').offsetHeight;
  75. }
  76.  
  77. function scrMove() { scrollMov=scrollSpeed; }
  78. function scrStop() { scrollMov=0; }
  79. doScroll();
  80.  
  81. //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.
  82. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top