home *** CD-ROM | disk | FTP | other *** search
/ PC User 2005 May / CD / PCU0505CD.iso / software / full / coffecup / files / html2005.exe / %MAINDIR% / Javascript / verticalscroll.xml < prev    next >
Encoding:
Text File  |  2005-02-16  |  5.1 KB  |  144 lines
  1. <ccResource>
  2.   <ccTitle>
  3. Vertical Scrollbar
  4.   </ccTitle>
  5.   <ccCategory>
  6. Browser
  7.   </ccCategory>
  8.   <ccDescription>
  9. This is an awesome vertical scroller that supports rich HTML
  10.   </ccDescription>
  11.   <ccInstructions>
  12. The code goes only inside the BODY tags.  You can change the items below to suit your needs.
  13.   </ccInstructions>
  14.   <ccHeadContent>
  15.   
  16.   </ccHeadContent>
  17.   <ccBodyContent>
  18. <script language="javascript">
  19.  
  20. //ENTER CONTENT TO SCROLL BELOW.
  21. var content='<p>Visit <a href="http://www.coffeecup.com">CoffeeCup</a> for JavaScript tutorials and over 400 <font color="#FF0000">free</font> scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';
  22.  
  23. var boxheight=150;        // BACKGROUND BOX HEIGHT IN PIXELS.
  24. var boxwidth=150;         // BACKGROUND BOX WIDTH IN PIXELS.
  25. var boxcolor="#FFF6e9";   // BACKGROUND BOX COLOR.
  26. var speed=50;             // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
  27. var pixelstep=2;          // PIXELS "STEPS" PER REPITITION.
  28. var godown=false;         // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE
  29.  
  30. // DO NOT EDIT BEYOND THIS POINT
  31.  
  32. var outer,inner,elementheight,ref,refX,refY;
  33. var w3c=(document.getElementById)?true:false;
  34. var ns4=(document.layers)?true:false;
  35. var ie4=(document.all && !w3c)?true:false;
  36. var ie5=(document.all && w3c)?true:false;
  37. var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
  38. var txt='';
  39. if(ns4){
  40. txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
  41. txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width='+boxwidth+' height='+boxheight+'></ilayer>';
  42. txt+='</td></tr></table>'
  43. txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width='+boxwidth+' height='+boxheight+'>';
  44. txt+='<layer  name="inner"  width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
  45. txt+='</layer>';
  46. }else{
  47. txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';" ></div>';
  48. txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
  49. txt+='<div id="inner"  style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
  50. txt+='</div>';
  51. }
  52. document.write(txt);
  53.  
  54. function getElHeight(el){
  55. if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top;
  56. else if(ie4||ie5)return (el.style.height)? el.style.height : el.clientHeight;
  57. else return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
  58. }
  59.  
  60. function getPageLeft(el){
  61. var x;
  62. if(ns4)return el.pageX;
  63. if(ie4||w3c){
  64. x = 0;
  65. while(el.offsetParent!=null){
  66. x+=el.offsetLeft;
  67. el=el.offsetParent;
  68. }
  69. x+=el.offsetLeft;
  70. return x;
  71. }}
  72.  
  73. function getPageTop(el){
  74. var y;
  75. if(ns4)return el.pageY;
  76. if(ie4||w3c){
  77. y=0;
  78. while(el.offsetParent!=null){
  79. y+=el.offsetTop;
  80. el=el.offsetParent;
  81. }
  82. y+=el.offsetTop;
  83. return y;
  84. }}
  85.  
  86. function scrollbox(){
  87. if(ns4){
  88. inner.top+=(godown)? pixelstep: -pixelstep;
  89. if(godown){
  90. if(inner.top>boxheight)inner.top=-elementheight;
  91. }else{
  92. if(inner.top<2-elementheight)inner.top=boxheight+2;
  93. }}else{
  94. inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
  95. if(godown){
  96. if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
  97. }else{
  98. if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
  99. }}}
  100.  
  101. window.onresize=function(){
  102. if(ns4)setTimeout('history.go(0)', 400);
  103. else{
  104. outer.style.left=getPageLeft(ref)+'px';
  105. outer.style.top=getPageTop(ref)+'px';
  106. }}
  107.  
  108. window.onload=function(){
  109. outer=(ns4)?document.layers['outer']:(ie4)?document.all['outer']:document.getElementById('outer');
  110. inner=(ns4)?outer.document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner');
  111. ref=(ns4)?document.layers['ref']:(ie4)?document.all['ref']:document.getElementById('ref');
  112. elementheight=getElHeight(inner);
  113. if(ns4){
  114. outer.moveTo(getPageLeft(ref),getPageTop(ref));
  115. outer.clip.width=boxwidth;
  116. outer.clip.height=boxheight;
  117. inner.top=(godown)? -elementheight : boxheight-2;
  118. inner.clip.width=boxwidth-4;
  119. inner.clip.height=elementheight;
  120. outer.visibility="show";
  121. inner.visibility="show";
  122. }else{
  123. outer.style.left=getPageLeft(ref)+'px';
  124. outer.style.top=getPageTop(ref)+'px';
  125. inner.style.top=((godown)? -elementheight : boxheight)+'px';
  126. inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
  127. outer.style.visibility="visible";
  128. }
  129. setInterval('scrollbox()',speed);
  130. }
  131. </script>
  132.  
  133.   </ccBodyContent>
  134.   <ccElementContent>
  135.   
  136.    <ccElementName></ccElementName>
  137.    <ccElementAction></ccElementAction>
  138.    
  139.   </ccElementContent>
  140.   <ccExtraData>
  141.  
  142.   </ccExtraData>
  143. </ccResource>
  144.