home *** CD-ROM | disk | FTP | other *** search
/ .net 2000 August / NET74.ISO / pc / Software / JavaScript / scroll.txt < prev    next >
Encoding:
Text File  |  1999-11-05  |  6.0 KB  |  148 lines
  1. <HTML>
  2. <HEAD>
  3. <title>Cross-browser DHTML Script - PageScroll</title>
  4. <style>
  5. body{background-color:#FFFFFF}
  6. A{color:Navy; text-decoration:none}
  7. A:hover{color:red}
  8. A:visited:{color:#808080}
  9. TD{font-family:arial,helvetica; font-size:10pt}
  10. </style>
  11. <script language="JavaScript1.2">
  12. /********************************************************************************
  13. This script is made by and copyrighted to Thomas Brattli at www.bratta.com
  14. Visit for more great scripts. 
  15. This may be used freely as long as this msg is intact!
  16. ********************************************************************************
  17. Browsercheck:*/
  18. ie=document.all?1:0
  19. n=document.layers?1:0
  20.  
  21. /*********************************************************************************
  22. These are the variables you have to set:
  23. *********************************************************************************/
  24.  
  25. //The speed of the timeout between each scroll.
  26. timSpeed=50
  27.  
  28. //The height of the container (change this when it scrolls to much or to little)
  29. contHeight=100
  30.  
  31. /*********************************************************************************
  32. This is the object constructor function, which applies 
  33. methods and properties to the Cross-browser layer object
  34. *********************************************************************************/
  35. function makeScrollObj(obj,nest){
  36.     nest=(!nest) ? '':'document.'+nest+'.'                                        
  37.     this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')                            
  38.     this.scrollHeight=n?this.css.document.height:eval('document.all.'+obj+'.offsetHeight')                            
  39.     this.top=b_gettop                                        
  40.     return this
  41. }
  42. //Getting the top for the top method
  43. function b_gettop(){
  44.     var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
  45.     return gleft;
  46. }
  47. //Variables
  48. var scrollTim;
  49. var active=0;
  50. /*********************************************************************************
  51. The scroll function. Checks what way to scroll and checks if the
  52. layer is not already on top or bottom.
  53. *********************************************************************************/
  54. function scroll(speed){
  55.     clearTimeout(scrollTim)
  56.     way=speed>0?1:0
  57.     if((!way && oScroll[active].top()>-oScroll[active].scrollHeight+contHeight) || (oScroll[active].top()<0 && way)){
  58.         oScroll[active].css.top=oScroll[active].top()+speed
  59.         scrollTim=setTimeout("scroll("+speed+")",timSpeed)
  60.     }
  61. }
  62. //Clears the timeout so the scroll stops, this is called onmouseout.
  63. function noScroll(){
  64.     clearTimeout(scrollTim)
  65. }
  66. /*********************************************************************************
  67. Changes the active layer. Hides the one that's visible and
  68. shows the "new" one. Also set's the new layers top to
  69. 0 so it starts at top.
  70. *********************************************************************************/
  71. function changeActive(num){
  72.     oScroll[active].css.visibility='hidden'
  73.     active=num
  74.     oScroll[active].css.top=0
  75.     oScroll[active].css.visibility='visible'
  76. }
  77. /*********************************************************************************
  78. Initilizes the page, makes a oScroll Array and calls the object constructor.
  79. Here you can add as many scrollObjects as you want
  80. *********************************************************************************/
  81. function scrollInit(){
  82.     oScroll=new Array()
  83.     oScroll[0]=new    makeScrollObj('divScroll1','divCont')
  84.     oScroll[1]=new    makeScrollObj('divScroll2','divCont')
  85.     oScroll[2]=new    makeScrollObj('divScroll3','divCont')
  86.     oScroll[3]=new    makeScrollObj('divScroll4','divCont')
  87.     oScroll[0].css.visibility='visible'
  88. }
  89. /*********************************************************************************
  90. Executes the scrollInit function on pageload.
  91. *********************************************************************************/
  92. onload=scrollInit;
  93. //-->
  94. </script>
  95. <style>
  96. #divControl{position:absolute; width:250; font-family:arial; left:100; top:130; font-size:10pt; }
  97. #divCont{position:absolute; top:200; left:100; clip:rect(0,250,150,0); height:150; width:250}
  98. .clScroll{position:absolute; top:0; font-size:10pt; left:0; font-family:arial; visibility:hidden}
  99. </style>
  100. </head>
  101. <body>
  102. <div id="divControl">
  103.     <a href="#" onclick="changeActive(0)">Page 1</a>
  104.     <a href="#" onclick="changeActive(1)">Page 2</a>
  105.     <a href="#" onclick="changeActive(2)">Page 3</a>
  106.     <a href="#" onclick="changeActive(3)">Page 4</a>
  107.     <br><br>
  108.     <a href="#" onmouseover="scroll(5)" onmouseout="noScroll()">up</a>
  109.     <a href="#" onmouseover="scroll(-5)" onmouseout="noScroll()">down</a>
  110. </div>
  111. <div id="divCont">
  112.     <div id="divScroll1" class="clScroll">
  113.         This is "page" 1, here you place some content.
  114.         You should place more content then this
  115.         or it won't scroll..blablablabl<br>
  116.         <br>text text dummy texttext text dummy texttext text dummy text<br>
  117.         <br>text text dummy text text text dummy text text text dummy text <br>
  118.     </div>
  119.     
  120.     <div id="divScroll2" class="clScroll">
  121.         This is "page" 2...........
  122.         <br>text textdummy texttext text dummy texttext text dummy text<br>
  123.         <br>text text dummy text text text dummy text text text dummy text <br>
  124.         text text dummy texttext text dummy texttext text dummy text<br>
  125.         <br>text text dummy text text text dummy text text text dummy text <br>
  126.         <br>text textdummy texttext text dummy texttext text dummy text<br>
  127.         <br>text text dummy text text text dummy text text text dummy text <br>
  128.         text text dummy texttext text dummy texttext text dummy text<br>
  129.         <br>text text dummy text text text dummy text text text dummy text <br>
  130.     </div>
  131.  
  132.     <div id="divScroll3" class="clScroll">
  133.         This is "page" 3...........(can't scroll this one, to little content)
  134.         <br>
  135.     </div>
  136.  
  137.     <div id="divScroll4" class="clScroll">
  138.         Page 4 
  139.         text text dummy texttext text dummy texttext text dummy text<br>
  140.         <br>ext text dummy texttext text dummy texttext text dummy text<br>
  141.         <br>text text dummy texttext text dummy texttext text dummy text<br>
  142.         <br>text text dummy texttext text dummy texttext text dummy text<br>
  143.         <br>text text dummy texttext text dummy texttext text dummy text<br>
  144.     </div>
  145. </div>
  146. </body>
  147. </html>
  148.