Просмотр исходного текста страницы JavaScript DHTML/GUI Components/Scroll

== Diagonal Scroller (IE)==




   
  <!-- start source code -->
   
    <source lang="html4strict">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Qiksearch Diagonal Scroller</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#808080; font-weight:bold}
</style>
<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.ru/javascripts/qiksearch_diagonal_scroller.htm
//*********************************************
//* Qiksearch Diagonal Scroller               *
//* This script when you move your mouse over *
//* displays a diagonally scrolling text      *
//* (c) Premshree Pillai,                     *
//* http://www.qiksearch.ru                  *
//* E-mail : premshree@hotmail.ru            *
//* Use the script freely as long as this     *
//* message is intact                         *
//*********************************************
window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer" 
 && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer" 
 && bVer < 4);
 var scroll_height = 150; //The scroll height
 var time_length =50; //Scroll speed
 var begin_pos = 20; //Start position of scroll hint
 var i;
 var j;
 
if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="document.all";
 styleSwitch=".style";
 }
}
//SCROLL
function Scroll(layerName){
if (NS4 || IE4) {
 if (NS4 || IE4) { 
 if(i<(begin_pos+scroll_height)){
 eval(layerRef+"[""+layerName+""]"+
 styleSwitch+".visibility="visible"");
 eval(layerRef+"[""+layerName+""]"+
 styleSwitch+".left=""+i+""");
 eval(layerRef+"[""+layerName+""]"+
 styleSwitch+".top=""+i+""");
 i++;
 j++;
 if(i==j){
 setTimeout("Scroll(""+layerName+"")",time_length);}
 }
 }
 }
}
//STOP SCROLLING
function StopScroll(layerName)
{
i=begin_pos+scroll_height;
  eval(layerRef+"[""+layerName+""]"+
  styleSwitch+".left=""+i+""");
  hideLayer(layerName);
}
function reset()
{ 
i=begin_pos;
j=i;
}
// HIDE HINT
function hideLayer(layerName){
 if (NS4 || IE4) {
 eval(layerRef+"[""+layerName+""]"+
 styleSwitch+".visibility="hidden"");
 }
 }
</script>
<!--END REQUIRED-->
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Qiksearch Diagonal Scroller</span>
<br>
<!--BEGIN REQUIRED-->
<a href="#" class="link" onmouseover="javascript:reset();Scroll("prem_hint");" onmouseout="javascript:StopScroll("prem_hint");">Move your mouse over</a>
</center>
<div id="prem_hint" style="position:relative; visibility:hidden" class="prem_hint">
<font color="#FF0000"><b>This is a diagonally scrolling hint!</b></font>
</div>
<!--END REQUIRED-->
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This script is a simple modification of <a href="link_hint_scroller.htm" class="link">Link Hint Scroller</a>. The only difference here is that the hint will scroll diagonally.<br><br>
When you move your mouse over the above link a hint or something about the link
will appear below the link in a diagonally scrolling fashion. When you move your mouseout the scrolling will stop.
<br><br>To use this  Javascript,view the source of this document. Firstly you must copy the script
and place it in the head section. Then you must copy the &lt;DIV&gt; section and place it wherever you want it in the body. All the required section are marked by the comments &lt;!--BEGIN REQUIRED--&GT; and &lt;!--END REQUIRED--&gt;
<br><br>
<font face="courier">scroll_height</font> : Scroll height variable (150 here)<br>
<font face="courier">time_length</font> : Speed of scroll (50 here, meaning after 50 milliseconds the hint will change position by 1 pixel i.e a speed of 20 pixels/second)<br>
<font face="courier">begin_pos</font> : Beginning position of hint (20 here)
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.ru" class="link">&#169 Premshree Pillai</a></center>
</body>
</html>
           
         
  </source>
    
   


==Image slideshow 4==

<A href="http://www.wbex.ru/Code/JavaScriptDownload/image-slideshow-4.zip">image-slideshow-4.zip( 44 k)</a>

1. 
<A href="/Code/JavaScript/GUI-Components/TextScrollwhenclicking.htm">Text Scroll when clicking</a>
2. 
<A href="/Code/JavaScript/GUI-Components/TextScrollwhenmouseover.htm">Text Scroll when mouse over</a>
3. 
<A href="/Code/JavaScript/GUI-Components/Scrollimageandmimicacompass.htm">Scroll image and mimic a compass</a>
<A href="/Code/JavaScript/GUI-Components/Scrollimageandmimicacompass.htm"></a>
4. 
<A href="/Code/JavaScript/GUI-Components/Scrolltextwithcustomscollbar.htm">Scroll text with custom scoll bar</a>
5. 
<A href="/Code/JavaScript/GUI-Components/Scolltextwithflashscrollbar.htm">Scoll text with flash scroll bar</a>
6. 
<A href="/Code/JavaScript/GUI-Components/Slidetab.htm">Slide tab</a>
7. 
<A href="/Code/JavaScript/GUI-Components/VerticalscrollIE.htm">Vertical scroll (IE)</a>
8. 
<A href="/Code/JavaScript/GUI-Components/DiagonalScrollerIE.htm"> Diagonal Scroller (IE)</a>
9. 
<A href="/Code/JavaScript/GUI-Components/Textscroll.htm">Text scroll</a>
10. 
<A href="/Code/JavaScript/GUI-Components/jScrollPanelibrary.htm">jScrollPane library</a>
<A href="/Code/JavaScript/GUI-Components/jScrollPanelibrary.htm"></a>

==jScrollPane library==

<A href="http://www.wbex.ru/Code/JavaScriptDownload/jScrollPane.zip">jScrollPane.zip( 64 k)</a>

1. 
<A href="/Code/JavaScript/GUI-Components/TextScrollwhenclicking.htm">Text Scroll when clicking</a>
2. 
<A href="/Code/JavaScript/GUI-Components/TextScrollwhenmouseover.htm">Text Scroll when mouse over</a>
3. 
<A href="/Code/JavaScript/GUI-Components/Scrollimageandmimicacompass.htm">Scroll image and mimic a compass</a>
<A href="/Code/JavaScript/GUI-Components/Scrollimageandmimicacompass.htm"></a>
4. 
<A href="/Code/JavaScript/GUI-Components/Scrolltextwithcustomscollbar.htm">Scroll text with custom scoll bar</a>
5. 
<A href="/Code/JavaScript/GUI-Components/Scolltextwithflashscrollbar.htm">Scoll text with flash scroll bar</a>
6. 
<A href="/Code/JavaScript/GUI-Components/Slidetab.htm">Slide tab</a>
7. 
<A href="/Code/JavaScript/GUI-Components/VerticalscrollIE.htm">Vertical scroll (IE)</a>
8. 
<A href="/Code/JavaScript/GUI-Components/DiagonalScrollerIE.htm"> Diagonal Scroller (IE)</a>
9. 
<A href="/Code/JavaScript/GUI-Components/Textscroll.htm">Text scroll</a>
10. 
<A href="/Code/JavaScript/GUI-Components/Imageslideshow4.htm">Image slideshow 4</a>
<A href="/Code/JavaScript/GUI-Components/Imageslideshow4.htm"></a>

==Scoll text with flash scroll bar==




   
  <!-- start source code -->
   
    <source lang="html4strict">
 
 <html>
<head>
  <title>youngpup.net: ypSimpleScroll demo</title>
  <script language="javascript">
/* =======================================================
 * ypSimpleScroll
 * 3/11/2001
 * 
// dhtml scrolling panel featuring scrolling in any
// direction, smooth frame-dropping animation, and a
// few other goodies.
//
// 3/25/2001
// added scrolling in any direction and initTop, initLeft
// constructor parameters - with only 1k...
//
// 3/30/2001
// fixed bug that occured when if you called scrollTo( )
// and the new position was the same as the current
// position. that was stupid.
//
// 4/02/2001
// small bug fix - on some browsers, on slow connections
// the script would not run at all. to be sure the doc
// is done loading before .load() is called, the author
// must now call the .load() method in the onload handler
// for the page.
//
// 8/22/2001
// if you tried to scroll before page was loaded it threw
// an error. this should be fixed now.
// 
//
 * http://www.youngpup.net/
//
// =======================================================
// ypSimpleScroll(  id, left, top, width, height, speed, 
//          contentWidth, initScrollLeft, 
//          initScrollTop  )
//
// last three parameters are optional.
 * ======================================================= */

// basic methods.
ypSimpleScroll.prototype.scrollNorth = function() { this.startScroll(90) }
ypSimpleScroll.prototype.scrollSouth = function() { this.startScroll(270)  }
ypSimpleScroll.prototype.scrollWest  = function() { this.startScroll(180) }
ypSimpleScroll.prototype.scrollEast  = function() { this.startScroll(0)   }

// start scrolling in an arbitrary direction, with an optional arbitrary speed.
// if no speed is provided, the default speed from the constructor parameter is used.
ypSimpleScroll.prototype.startScroll = function(deg, speed) {
  if (this.loaded)
  {
    if (this.aniTimer) window.clearTimeout(this.aniTimer)
    this.overrideScrollAngle(deg)
    this.speed    = speed ? speed : this.origSpeed
    this.lastTime = (new Date()).getTime() - this.y.minRes
    this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
  }
}
// kills pending calls to .scroll(), resets speed
ypSimpleScroll.prototype.endScroll = function() {
  if (this.loaded)
  {
    window.clearTimeout(this.aniTimer)
    this.aniTimer = 0;
    this.speed = this.origSpeed
  }
}
// override the current angle from startScroll() with a new angle
// this method should not be used with scrollTo() because it will
// override the angle created by the first two params to scrollTo().
ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
  if (this.loaded)
  {
    deg = deg % 360
    if (deg % 90 == 0) {
      var cos = deg == 0  ? 1 : deg == 180 ? -1 : 0
      var sin = deg == 90 ? -1 : deg == 270 ? 1 : 0
    } else {
      var angle = deg * Math.PI / 180
      var cos   = Math.cos(angle)
      var sin   = Math.sin(angle)
      sin = -sin
    }
    this.fx = cos / (Math.abs(cos) + Math.abs(sin))
    this.fy = sin / (Math.abs(cos) + Math.abs(sin))
    this.stopH = deg == 90 || deg == 270 ? this.scrollLeft : deg < 90 || deg > 270 ? this.scrollW : 0
    this.stopV = deg == 0 || deg == 180 ? this.scrollTop : deg < 180 ? 0 : this.scrollH
  }
}
// override the speed for the current scroll.
// should not be used with scrollTo, unless you want to 
// override the speed computed from the aniLen param of scrollTo()
ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
  if (this.loaded) this.speed = speed
}
// scroll to an arbitrary position in two dimensions over in
// an arbitrary lenth of time.
ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
  if (this.loaded)
  {
    if (stopH != this.scrollLeft || stopV != this.scrollTop) {
      if (this.aniTimer) window.clearTimeout(this.aniTimer)
      this.lastTime = (new Date()).getTime()
      var dx = Math.abs(stopH - this.scrollLeft)
      var dy = Math.abs(stopV - this.scrollTop)
      var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
      this.fx = (stopH - this.scrollLeft) / (dx + dy)
      this.fy = (stopV - this.scrollTop) / (dx + dy)
      this.stopH = stopH
      this.stopV = stopV
      this.speed = d / aniLen * 1000
      window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
    }
  }
}
// jump to an arbitrary position in two dimensions.
ypSimpleScroll.prototype.jumpTo = function(nx, ny) { 
  if (this.loaded)
  {
    nx = Math.min(Math.max(nx, 0), this.scrollW)
    ny = Math.min(Math.max(ny, 0), this.scrollH)
    this.scrollLeft = nx
    this.scrollTop = ny
    if (this.y.ns4)this.content.moveTo(-nx, -ny)
    else {
      this.content.style.left = -nx + "px"
      this.content.style.top = -ny + "px"
    }
  }
}

// =========================================================================
// =============================== private =================================
// =========================================================================
ypSimpleScroll.minRes = 10
ypSimpleScroll.ie  = document.all ? 1 : 0
ypSimpleScroll.ns4 = document.layers ? 1 : 0
ypSimpleScroll.dom = document.getElementById ? 1 : 0
ypSimpleScroll.mac = navigator.platform == "MacPPC"
ypSimpleScroll.mo5 = document.getElementById && !document.all ? 1 : 0
// recursively calls itself to animate
ypSimpleScroll.prototype.scroll = function() {
  this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
  var nt = (new Date()).getTime()
  var d = Math.round((nt - this.lastTime) / 1000 * this.speed)
  if (d > 0)
  {
    var nx = d * this.fx + this.scrollLeft
    var ny = d * this.fy + this.scrollTop
    var xOut = (nx >= this.scrollLeft && nx >= this.stopH) || (nx <= this.scrollLeft && nx <= this.stopH)
    var yOut = (ny >= this.scrollTop && ny >= this.stopV)  || (ny <= this.scrollTop && ny <= this.stopV)
    //window.status = nx + " " + this.fx + " " + this.scrollLeft + " " + this.stopH + " | " + ny + " " + this.fy + " " + this.scrollTop + " " + this.stopV + " : " + d
    if (nt - this.lastTime != 0 &&
      ((this.fx == 0 && this.fy == 0) ||
       (this.fy == 0 && xOut) ||
       (this.fx == 0 && yOut) ||
       (this.fx != 0 && this.fy != 0 && xOut && yOut)))
    {
      this.jumpTo(this.stopH, this.stopV)
      this.endScroll()
    }
    else {
      this.jumpTo(nx, ny)
      this.lastTime = nt
    }
  }
}
// constructor
function ypSimpleScroll(id, left, top, width, height, speed, contentWidth, initLeft, initTop)
{
  var y = this.y = ypSimpleScroll
  if (!initLeft)     initLeft     = 0
  if (!initTop)      initTop      = 0
  if (!contentWidth) contentWidth = width
  // fix for netscape4 first-page bug.
  if (document.layers && !y.ns4) history.go(0)
  if (y.ie || y.ns4 || y.dom) {
    this.loaded    = false
    this.id      = id
    this.origSpeed  = speed
    this.aniTimer  = false
    this.op      = ""
    this.lastTime  = 0
    this.clipH    = height
    this.clipW    = width
    this.scrollTop  = initTop
    this.scrollLeft  = initLeft
    // global reference to this object
    this.gRef = "ypSimpleScroll_"+id
    eval(this.gRef+"=this")
    var d = document
    d.write("<style type="text/css">")
    d.write("#" + this.id + "Container { left:" + left + "px; top:" + top + "px; width:" + width + "px; height:" + height + "px; clip:rect(0 " + width + " " + height + " 0); overflow:hidden; }")
    d.write("#" + this.id + "Container, #" + this.id + "Content { position:absolute; }")
    d.write("#" + this.id + "Content { left:" + (-initLeft) + "px; top:" + (-initTop) + "px; width:" + contentWidth + "px; }")
    d.write("</style>")
  }
}
// once the nceesary objects are present in the DOM, this gathers some info about them.
ypSimpleScroll.prototype.load = function() {
  var d, lyrId1, lyrId2
  d = document
  lyrId1 = this.id + "Container"
  lyrId2 = this.id + "Content"
  this.container  = this.y.dom ? d.getElementById(lyrId1) : this.y.ie ? d.all[lyrId1] : d.layers[lyrId1]
  this.content  = obj2 = this.y.ns4 ? this.container.layers[lyrId2] : this.y.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
  this.docH    = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH)
  this.docW    = Math.max(this.y.ns4 ? this.content.document.width  : this.content.offsetWidth,  this.clipW)
  this.scrollH  = this.docH - this.clipH
  this.scrollW  = this.docW - this.clipW
  this.loaded    = true
  this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0)
  this.scrollTop  = Math.max(Math.min(this.scrollTop, this.scrollH),0)
  this.jumpTo(this.scrollLeft, this.scrollTop)
}
  </script>
  <script language="javascript">
    var test = new ypSimpleScroll("myScroll", 20, 125, 150, 250, 100)
    function dial_DoFSCommand(command, args) { 
      if (test.loaded && command == "jumpToPercent" ) { 
        test.jumpTo(0, Math.round((test.docH-test.clipH) / 100 * args))        
      } 
    }
  </script>
  <script language="vbscript">
  <!-- 
    Sub dial_FSCommand(ByVal command, ByVal args)
      call dial_DoFSCommand(command, args)
    end sub
  //-->
  </script>
  <style type="text/css">
    /* just basic text formatting - nothing special 
    @import "/_common/demo.css";*/
    
    #dialDiv {
      text-align:center;
      position:absolute;
      width:15px;
      left:170px;
      top:125px;
    }
  </style>
</head>
<body style="background-color:white;" onload="test.load()">
  <div id="dialDiv">
    <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
     codebase="http://download.macromedia.ru/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
     WIDTH=125 HEIGHT=250 ID=dial>
     <PARAM NAME=movie VALUE="dial.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED name="dial" src="dial.swf" quality=high bgcolor=#FFFFFF  WIDTH=125 HEIGHT=250 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.ru/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" swLiveConnect="true"></EMBED>
    </OBJECT>
  </div>
  <p>
    <b>Use the wheel below to control the scrollbox.</b><br />If you don"t see a wheel, or the wheel doesn"t seem to do anything, it means either you haven"t got the <a href="http://www.macromedia.ru/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank" title="what are you waiting for? go get it!">flash 5</a> player - or you"re using Mozilla, which doesn"t support flash/javascript communication yet. sorry.
  </p>
  <div id="myScrollContainer">
    <div id="myScrollContent">
      Okay I know the graphics are ugly, but it"s the best I could come up with quickly.<br /><br />
      Anyway, I never said I was a designer :)<br /><br />
      Point is, this demo uses an instance of <a href="http://www.youngpup.net/components/ypRing" target="_blank">ypRing</a> to control the scrolling.<br /><br />
      You could do something nicer, I"m sure.<br /><br />
      But"s it"s just an example of how you can make different things control ypSimpleScroll, not just little pixel triangles.<br /><br />
      Actually this stupid idea sparked a really interesting discussion between me and <a href="http://www.jesterworld.net/" target="_blank">brandon</a>, and I"m going to be diving into a much cooler scroll box idea based on it. I"m pretty excited about it. You can check out the progress <a href="http://www.youngpup.net/experiments/three.oh_news_scroller/" target="_blank">here</a>.<br /><br />
      Now, just so this thing scrolls a bit more, I"m just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I"m just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I"m just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I"m just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I"m just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I"m just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I"m just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
    </div>
  </div>
</body>
</html>

           
         
  </source>
    
   


==Scroll image and mimic a compass==




   
  <!-- start source code -->
   
    <source lang="html4strict">
 
 <html>
<head>
  <title>youngpup.net: ypSimpleScroll demo</title>
  <script language="javascript">
/* =======================================================
 * ypSimpleScroll
 * 3/11/2001
 * 
// dhtml scrolling panel featuring scrolling in any
// direction, smooth frame-dropping animation, and a
// few other goodies.
//
// 3/25/2001
// added scrolling in any direction and initTop, initLeft
// constructor parameters - with only 1k...
//
// 3/30/2001
// fixed bug that occured when if you called scrollTo( )
// and the new position was the same as the current
// position. that was stupid.
//
// 4/02/2001
// small bug fix - on some browsers, on slow connections
// the script would not run at all. to be sure the doc
// is done loading before .load() is called, the author
// must now call the .load() method in the onload handler
// for the page.
//
// 8/22/2001
// if you tried to scroll before page was loaded it threw
// an error. this should be fixed now.
// 
//
 * http://www.youngpup.net/
//
// =======================================================
// ypSimpleScroll(  id, left, top, width, height, speed, 
//          contentWidth, initScrollLeft, 
//          initScrollTop  )
//
// last three parameters are optional.
 * ======================================================= */

// basic methods.
ypSimpleScroll.prototype.scrollNorth = function() { this.startScroll(90) }
ypSimpleScroll.prototype.scrollSouth = function() { this.startScroll(270)  }
ypSimpleScroll.prototype.scrollWest  = function() { this.startScroll(180) }
ypSimpleScroll.prototype.scrollEast  = function() { this.startScroll(0)   }

// start scrolling in an arbitrary direction, with an optional arbitrary speed.
// if no speed is provided, the default speed from the constructor parameter is used.
ypSimpleScroll.prototype.startScroll = function(deg, speed) {
  if (this.loaded)
  {
    if (this.aniTimer) window.clearTimeout(this.aniTimer)
    this.overrideScrollAngle(deg)
    this.speed    = speed ? speed : this.origSpeed
    this.lastTime = (new Date()).getTime() - this.y.minRes
    this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
  }
}
// kills pending calls to .scroll(), resets speed
ypSimpleScroll.prototype.endScroll = function() {
  if (this.loaded)
  {
    window.clearTimeout(this.aniTimer)
    this.aniTimer = 0;
    this.speed = this.origSpeed
  }
}
// override the current angle from startScroll() with a new angle
// this method should not be used with scrollTo() because it will
// override the angle created by the first two params to scrollTo().
ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
  if (this.loaded)
  {
    deg = deg % 360
    if (deg % 90 == 0) {
      var cos = deg == 0  ? 1 : deg == 180 ? -1 : 0
      var sin = deg == 90 ? -1 : deg == 270 ? 1 : 0
    } else {
      var angle = deg * Math.PI / 180
      var cos   = Math.cos(angle)
      var sin   = Math.sin(angle)
      sin = -sin
    }
    this.fx = cos / (Math.abs(cos) + Math.abs(sin))
    this.fy = sin / (Math.abs(cos) + Math.abs(sin))
    this.stopH = deg == 90 || deg == 270 ? this.scrollLeft : deg < 90 || deg > 270 ? this.scrollW : 0
    this.stopV = deg == 0 || deg == 180 ? this.scrollTop : deg < 180 ? 0 : this.scrollH
  }
}
// override the speed for the current scroll.
// should not be used with scrollTo, unless you want to 
// override the speed computed from the aniLen param of scrollTo()
ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
  if (this.loaded) this.speed = speed
}
// scroll to an arbitrary position in two dimensions over in
// an arbitrary lenth of time.
ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
  if (this.loaded)
  {
    if (stopH != this.scrollLeft || stopV != this.scrollTop) {
      if (this.aniTimer) window.clearTimeout(this.aniTimer)
      this.lastTime = (new Date()).getTime()
      var dx = Math.abs(stopH - this.scrollLeft)
      var dy = Math.abs(stopV - this.scrollTop)
      var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
      this.fx = (stopH - this.scrollLeft) / (dx + dy)
      this.fy = (stopV - this.scrollTop) / (dx + dy)
      this.stopH = stopH
      this.stopV = stopV
      this.speed = d / aniLen * 1000
      window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
    }
  }
}
// jump to an arbitrary position in two dimensions.
ypSimpleScroll.prototype.jumpTo = function(nx, ny) { 
  if (this.loaded)
  {
    nx = Math.min(Math.max(nx, 0), this.scrollW)
    ny = Math.min(Math.max(ny, 0), this.scrollH)
    this.scrollLeft = nx
    this.scrollTop = ny
    if (this.y.ns4)this.content.moveTo(-nx, -ny)
    else {
      this.content.style.left = -nx + "px"
      this.content.style.top = -ny + "px"
    }
  }
}

// =========================================================================
// =============================== private =================================
// =========================================================================
ypSimpleScroll.minRes = 10
ypSimpleScroll.ie  = document.all ? 1 : 0
ypSimpleScroll.ns4 = document.layers ? 1 : 0
ypSimpleScroll.dom = document.getElementById ? 1 : 0
ypSimpleScroll.mac = navigator.platform == "MacPPC"
ypSimpleScroll.mo5 = document.getElementById && !document.all ? 1 : 0
// recursively calls itself to animate
ypSimpleScroll.prototype.scroll = function() {
  this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
  var nt = (new Date()).getTime()
  var d = Math.round((nt - this.lastTime) / 1000 * this.speed)
  if (d > 0)
  {
    var nx = d * this.fx + this.scrollLeft
    var ny = d * this.fy + this.scrollTop
    var xOut = (nx >= this.scrollLeft && nx >= this.stopH) || (nx <= this.scrollLeft && nx <= this.stopH)
    var yOut = (ny >= this.scrollTop && ny >= this.stopV)  || (ny <= this.scrollTop && ny <= this.stopV)
    //window.status = nx + " " + this.fx + " " + this.scrollLeft + " " + this.stopH + " | " + ny + " " + this.fy + " " + this.scrollTop + " " + this.stopV + " : " + d
    if (nt - this.lastTime != 0 &&
      ((this.fx == 0 && this.fy == 0) ||
       (this.fy == 0 && xOut) ||
       (this.fx == 0 && yOut) ||
       (this.fx != 0 && this.fy != 0 && xOut && yOut)))
    {
      this.jumpTo(this.stopH, this.stopV)
      this.endScroll()
    }
    else {
      this.jumpTo(nx, ny)
      this.lastTime = nt
    }
  }
}
// constructor
function ypSimpleScroll(id, left, top, width, height, speed, contentWidth, initLeft, initTop)
{
  var y = this.y = ypSimpleScroll
  if (!initLeft)     initLeft     = 0
  if (!initTop)      initTop      = 0
  if (!contentWidth) contentWidth = width
  // fix for netscape4 first-page bug.
  if (document.layers && !y.ns4) history.go(0)
  if (y.ie || y.ns4 || y.dom) {
    this.loaded    = false
    this.id      = id
    this.origSpeed  = speed
    this.aniTimer  = false
    this.op      = ""
    this.lastTime  = 0
    this.clipH    = height
    this.clipW    = width
    this.scrollTop  = initTop
    this.scrollLeft  = initLeft
    // global reference to this object
    this.gRef = "ypSimpleScroll_"+id
    eval(this.gRef+"=this")
    var d = document
    d.write("<style type="text/css">")
    d.write("#" + this.id + "Container { left:" + left + "px; top:" + top + "px; width:" + width + "px; height:" + height + "px; clip:rect(0 " + width + " " + height + " 0); overflow:hidden; }")
    d.write("#" + this.id + "Container, #" + this.id + "Content { position:absolute; }")
    d.write("#" + this.id + "Content { left:" + (-initLeft) + "px; top:" + (-initTop) + "px; width:" + contentWidth + "px; }")
    d.write("</style>")
  }
}
// once the nceesary objects are present in the DOM, this gathers some info about them.
ypSimpleScroll.prototype.load = function() {
  var d, lyrId1, lyrId2
  d = document
  lyrId1 = this.id + "Container"
  lyrId2 = this.id + "Content"
  this.container  = this.y.dom ? d.getElementById(lyrId1) : this.y.ie ? d.all[lyrId1] : d.layers[lyrId1]
  this.content  = obj2 = this.y.ns4 ? this.container.layers[lyrId2] : this.y.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
  this.docH    = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH)
  this.docW    = Math.max(this.y.ns4 ? this.content.document.width  : this.content.offsetWidth,  this.clipW)
  this.scrollH  = this.docH - this.clipH
  this.scrollW  = this.docW - this.clipW
  this.loaded    = true
  this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0)
  this.scrollTop  = Math.max(Math.min(this.scrollTop, this.scrollH),0)
  this.jumpTo(this.scrollLeft, this.scrollTop)
}
  </script>
  <script language="javascript">
    var test  = new ypSimpleScroll("myScroll", 20, 50, 250, 250, 30, 736, 200, 50)
    window.onload = function() {
      test.load()
      var ts = document.layers ? document.layers["triggers"] : document.all ? document.all.triggers : document.getElementById("triggers")
      ts = document.layers ? ts.layers : document.all ? ts.all.tags("DIV") : ts.getElementsByTagName("DIV")
      for (var i = 0; i < ts.length; i++) {
        if (document.layers) ts[i].captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
        ts[i].onmouseover = function() { test.startScroll(this.id.substring(7, this.id.length)) }
        ts[i].onmousedown = function() { test.overrideScrollSpeed(300); return false; }
        ts[i].onmouseup   = function() { test.overrideScrollSpeed(100) }
        ts[i].onmouseout  = function() { test.endScroll() }
      }
    }
  </script>
  <style type="text/css">
    /* just basic text formatting - nothing special */
    @import "/_common/demo.css";
    #mask { position:absolute; top:40px; left:15px; z-index:2; }
    #myScrollContainer { z-index:1; }
    #triggers { position:absolute; left:15px; top:40px; z-index:3; }
    #triggers div { position:absolute; width:20px; height:20px; clip:rect(0 20 20 0); }
    #trigger90  { left:130px; top:4px;   }
    #trigger45  { left:217px; top:44px;  }
    #trigger0   { left:259px; top:128px; }
    #trigger315 { left:222px; top:216px; }
    #trigger270 { left:130px; top:256px; }
    #trigger225 { left:43px;  top:218px; }
    #trigger180 { left:6px;   top:128px; }
    #trigger135 { left:38px;  top:47px;  }
  </style>
</head>
<body>
  <b>mouseover</b> or <b>mousedown</b> on the compass points to pan the map.<br /><br />
  <div id="mask"><img src="compass.gif" usemap="#compass" width="279" height="285" border="0"></div>
  <div id="myScrollContainer">
    <div id="myScrollContent">
      <img id="map" src="img_mapbig.jpg" width="736" height="500" />
    </div>
  </div>
  <div id="triggers">
    <div id="trigger90"><img src="panningX.gif" width="20" height="20" /></div>
    <div id="trigger45"><img src="panningX.gif" width="20" height="20" /></div>
    <div id="trigger0"><img src="panningX.gif" width="20" height="20" /></div>
    <div id="trigger315"><img src="panningX.gif" width="20" height="20" /></div>
    <div id="trigger270"><img src="panningX.gif" width="20" height="20" /></div>
    <div id="trigger225"><img src="panningX.gif" width="20" height="20" /></div>
    <div id="trigger180"><img src="panningX.gif" width="20" height="20" /></div>
    <div id="trigger135"><img src="panningX.gif" width="20" height="20" /></div>
  </div>
</body>
</html>

           
         
  </source>
    
   
<A href="http://www.wbex.ru/Code/JavaScriptDownload/panning.zip">panning.zip( 171 k)</a>


==Scroll text with custom scoll bar==




   
  <!-- start source code -->
   
    <source lang="html4strict">
 
<html>
<head>
  <script language="javascript">
/* =======================================================
 * ypSimpleScroll
 * 3/11/2001
 * 
// dhtml scrolling panel featuring scrolling in any
// direction, smooth frame-dropping animation, and a
// few other goodies.
//
// 3/25/2001
// added scrolling in any direction and initTop, initLeft
// constructor parameters - with only 1k...
//
// 3/30/2001
// fixed bug that occured when if you called scrollTo( )
// and the new position was the same as the current
// position. that was stupid.
//
// 4/02/2001
// small bug fix - on some browsers, on slow connections
// the script would not run at all. to be sure the doc
// is done loading before .load() is called, the author
// must now call the .load() method in the onload handler
// for the page.
//
// 8/22/2001
// if you tried to scroll before page was loaded it threw
// an error. this should be fixed now.
// 
//
 * http://www.youngpup.net/
//
// =======================================================
// ypSimpleScroll(  id, left, top, width, height, speed, 
//          contentWidth, initScrollLeft, 
//          initScrollTop  )
//
// last three parameters are optional.
 * ======================================================= */

// basic methods.
ypSimpleScroll.prototype.scrollNorth = function() { this.startScroll(90) }
ypSimpleScroll.prototype.scrollSouth = function() { this.startScroll(270)  }
ypSimpleScroll.prototype.scrollWest  = function() { this.startScroll(180) }
ypSimpleScroll.prototype.scrollEast  = function() { this.startScroll(0)   }

// start scrolling in an arbitrary direction, with an optional arbitrary speed.
// if no speed is provided, the default speed from the constructor parameter is used.
ypSimpleScroll.prototype.startScroll = function(deg, speed) {
  if (this.loaded)
  {
    if (this.aniTimer) window.clearTimeout(this.aniTimer)
    this.overrideScrollAngle(deg)
    this.speed    = speed ? speed : this.origSpeed
    this.lastTime = (new Date()).getTime() - this.y.minRes
    this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
  }
}
// kills pending calls to .scroll(), resets speed
ypSimpleScroll.prototype.endScroll = function() {
  if (this.loaded)
  {
    window.clearTimeout(this.aniTimer)
    this.aniTimer = 0;
    this.speed = this.origSpeed
  }
}
// override the current angle from startScroll() with a new angle
// this method should not be used with scrollTo() because it will
// override the angle created by the first two params to scrollTo().
ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
  if (this.loaded)
  {
    deg = deg % 360
    if (deg % 90 == 0) {
      var cos = deg == 0  ? 1 : deg == 180 ? -1 : 0
      var sin = deg == 90 ? -1 : deg == 270 ? 1 : 0
    } else {
      var angle = deg * Math.PI / 180
      var cos   = Math.cos(angle)
      var sin   = Math.sin(angle)
      sin = -sin
    }
    this.fx = cos / (Math.abs(cos) + Math.abs(sin))
    this.fy = sin / (Math.abs(cos) + Math.abs(sin))
    this.stopH = deg == 90 || deg == 270 ? this.scrollLeft : deg < 90 || deg > 270 ? this.scrollW : 0
    this.stopV = deg == 0 || deg == 180 ? this.scrollTop : deg < 180 ? 0 : this.scrollH
  }
}
// override the speed for the current scroll.
// should not be used with scrollTo, unless you want to 
// override the speed computed from the aniLen param of scrollTo()
ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
  if (this.loaded) this.speed = speed
}
// scroll to an arbitrary position in two dimensions over in
// an arbitrary lenth of time.
ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
  if (this.loaded)
  {
    if (stopH != this.scrollLeft || stopV != this.scrollTop) {
      if (this.aniTimer) window.clearTimeout(this.aniTimer)
      this.lastTime = (new Date()).getTime()
      var dx = Math.abs(stopH - this.scrollLeft)
      var dy = Math.abs(stopV - this.scrollTop)
      var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
      this.fx = (stopH - this.scrollLeft) / (dx + dy)
      this.fy = (stopV - this.scrollTop) / (dx + dy)
      this.stopH = stopH
      this.stopV = stopV
      this.speed = d / aniLen * 1000
      window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
    }
  }
}
// jump to an arbitrary position in two dimensions.
ypSimpleScroll.prototype.jumpTo = function(nx, ny) { 
  if (this.loaded)
  {
    nx = Math.min(Math.max(nx, 0), this.scrollW)
    ny = Math.min(Math.max(ny, 0), this.scrollH)
    this.scrollLeft = nx
    this.scrollTop = ny
    if (this.y.ns4)this.content.moveTo(-nx, -ny)
    else {
      this.content.style.left = -nx + "px"
      this.content.style.top = -ny + "px"
    }
  }
}

// =========================================================================
// =============================== private =================================
// =========================================================================
ypSimpleScroll.minRes = 10
ypSimpleScroll.ie  = document.all ? 1 : 0
ypSimpleScroll.ns4 = document.layers ? 1 : 0
ypSimpleScroll.dom = document.getElementById ? 1 : 0
ypSimpleScroll.mac = navigator.platform == "MacPPC"
ypSimpleScroll.mo5 = document.getElementById && !document.all ? 1 : 0
// recursively calls itself to animate
ypSimpleScroll.prototype.scroll = function() {
  this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
  var nt = (new Date()).getTime()
  var d = Math.round((nt - this.lastTime) / 1000 * this.speed)
  if (d > 0)
  {
    var nx = d * this.fx + this.scrollLeft
    var ny = d * this.fy + this.scrollTop
    var xOut = (nx >= this.scrollLeft && nx >= this.stopH) || (nx <= this.scrollLeft && nx <= this.stopH)
    var yOut = (ny >= this.scrollTop && ny >= this.stopV)  || (ny <= this.scrollTop && ny <= this.stopV)
    //window.status = nx + " " + this.fx + " " + this.scrollLeft + " " + this.stopH + " | " + ny + " " + this.fy + " " + this.scrollTop + " " + this.stopV + " : " + d
    if (nt - this.lastTime != 0 &&
      ((this.fx == 0 && this.fy == 0) ||
       (this.fy == 0 && xOut) ||
       (this.fx == 0 && yOut) ||
       (this.fx != 0 && this.fy != 0 && xOut && yOut)))
    {
      this.jumpTo(this.stopH, this.stopV)
      this.endScroll()
    }
    else {
      this.jumpTo(nx, ny)
      this.lastTime = nt
    }
  }
}
// constructor
function ypSimpleScroll(id, left, top, width, height, speed, contentWidth, initLeft, initTop)
{
  var y = this.y = ypSimpleScroll
  if (!initLeft)     initLeft     = 0
  if (!initTop)      initTop      = 0
  if (!contentWidth) contentWidth = width
  // fix for netscape4 first-page bug.
  if (document.layers && !y.ns4) history.go(0)
  if (y.ie || y.ns4 || y.dom) {
    this.loaded    = false
    this.id      = id
    this.origSpeed  = speed
    this.aniTimer  = false
    this.op      = ""
    this.lastTime  = 0
    this.clipH    = height
    this.clipW    = width
    this.scrollTop  = initTop
    this.scrollLeft  = initLeft
    // global reference to this object
    this.gRef = "ypSimpleScroll_"+id
    eval(this.gRef+"=this")
    var d = document
    d.write("<style type="text/css">")
    d.write("#" + this.id + "Container { left:" + left + "px; top:" + top + "px; width:" + width + "px; height:" + height + "px; clip:rect(0 " + width + " " + height + " 0); overflow:hidden; }")
    d.write("#" + this.id + "Container, #" + this.id + "Content { position:absolute; }")
    d.write("#" + this.id + "Content { left:" + (-initLeft) + "px; top:" + (-initTop) + "px; width:" + contentWidth + "px; }")
    d.write("</style>")
  }
}
// once the nceesary objects are present in the DOM, this gathers some info about them.
ypSimpleScroll.prototype.load = function() {
  var d, lyrId1, lyrId2
  d = document
  lyrId1 = this.id + "Container"
  lyrId2 = this.id + "Content"
  this.container  = this.y.dom ? d.getElementById(lyrId1) : this.y.ie ? d.all[lyrId1] : d.layers[lyrId1]
  this.content  = obj2 = this.y.ns4 ? this.container.layers[lyrId2] : this.y.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
  this.docH    = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH)
  this.docW    = Math.max(this.y.ns4 ? this.content.document.width  : this.content.offsetWidth,  this.clipW)
  this.scrollH  = this.docH - this.clipH
  this.scrollW  = this.docW - this.clipW
  this.loaded    = true
  this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0)
  this.scrollTop  = Math.max(Math.min(this.scrollTop, this.scrollH),0)
  this.jumpTo(this.scrollLeft, this.scrollTop)
}
  </script>
  <script language="javascript">
    var test = new ypSimpleScroll("myScroll", 20, 50, 150, 250, 100)
  </script>
  <!-- text formatting only. nothing important. -->
  <style type="text/css">
    /* just basic text formatting - nothing special */
    @import "/_common/demo.css";
    #buttons {
      text-align:center;
      position:absolute;
      width:15px;
      left:185px;
      top:60px;
    }
    #buttons a {
      font-family:arial, sans-serif;
      font-size:15px;
      font-weight:bold;
      color:gray;
      text-decoration:none;
    }
    #buttons a:hover {
      color:black;
    }
  </style>
</head>
<body link=gray alink=gray vlink=gray onload="test.load()">
  <div id="buttons">
    <a  href="#" 
      onmouseover="test.scrollNorth()" 
      onmousedown="test.overrideScrollSpeed(350); return false;" 
      onmousemove="return false;"
      onmouseout="test.endScroll()" 
      onmouseup="test.overrideScrollSpeed(100);"
      onclick="return false;"
      >-</a>
    <br /><br />
    <a  href="#"
      onmousedown="test.scrollTo(0, 0, 1000);"
      onclick="return false;"
      >&#149;</a>
    <br /><br />
    <a  href="#"
      onmousedown="test.scrollTo(0, Math.round(test.scrollH / 5), 1000);"
      onclick="return false;"
      >&#149;</a>
    <br /><br />
    <a  href="#"
      onmousedown="test.scrollTo(0, Math.round(test.scrollH / 5 * 2), 1000);"
      onclick="return false;"
      >&#149;</a>
    <br /><br />
    <a  href="#"
      onmousedown="test.scrollTo(0, Math.round(test.scrollH / 5 * 3), 1000);"
      onclick="return false;"
      >&#149;</a>
    <br /><br />
    <a  href="#"
      onmousedown="test.scrollTo(0, Math.round(test.scrollH / 5 * 4), 1000);"
      onclick="return false;"
      >&#149;</a>
    <br /><br />
    <a  href="#"
      onmousedown="test.scrollTo(0, test.scrollH, 1000);"
      onclick="return false;"
      >&#149;</a>
    <br /><br />
    <a  href="#" 
      onmouseover="test.scrollSouth();" 
      onmousedown="test.overrideScrollSpeed(350); return false;" 
      onmousemove="return false;"
      onmouseout="test.endScroll()" 
      onmouseup="test.overrideScrollSpeed(100); return false;"
      onclick="return false;"
      >+</a><br>
    
  </div>
  <div id="myScrollContainer">
    <div id="myScrollContent">
      okay, this one"s a bit different...
      <p>see, you can use the optional second argument of the .startScroll( ) method to pass a new speed to the scroll object. That way, you can override the default scroll speed.</p>
      <p>Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events</p>
      <p>okay, this one"s a bit different...</p>
      <p>see, you can use the optional second argument of the .startScroll( ) method to pass a new speed to the scroll object. That way, you can override the default scroll speed.</p>
      <p>Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events</p>
      <p>okay, this one"s a bit different...</p>
      <p>see, you can use the optional second argument of the .startScroll( ) method to pass a new speed to the scroll object. That way, you can override the default scroll speed.</p>
      <p>Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events</p>
      <p>okay, this one"s a bit different...</p>
      <p>see, you can use the optional second argument of the .startScroll( ) method to pass a new speed to the scroll object. That way, you can override the default scroll speed.</p>
      <p>Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events</p>
      <p>okay, this one"s a bit different...</p>
      <p>see, you can use the optional second argument of the .startScroll( ) method to pass a new speed to the scroll object. That way, you can override the default scroll speed.</p>
      <p>Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events</p>
      <p>okay, this one"s a bit different...</p>
      <p>see, you can use the optional second argument of the .startScroll( ) method to pass a new speed to the scroll object. That way, you can override the default scroll speed.</p>
      <p>Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events</p>
      <p>okay, this one"s a bit different...</p>
      <p>see, you can use the optional second argument of the .startScroll( ) method to pass a new speed to the scroll object. That way, you can override the default scroll speed.</p>
      <p>Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events</p>
      <p>okay, this one"s a bit different...</p>
      <p>see, you can use the optional second argument of the .startScroll( ) method to pass a new speed to the scroll object. That way, you can override the default scroll speed.</p>
      <p>Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events</p>
      <p>okay, this one"s a bit different...</p>
      <p>see, you can use the optional second argument of the .startScroll( ) method to pass a new speed to the scroll object. That way, you can override the default scroll speed.</p>
      <p>Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events</p>
    </div>
  </div>
</body>
</html>

           
         
  </source>
    
   


==Text scroll==



   
  <!-- start source code -->
   
    <source lang="html4strict">
 
<h1>Text scrolling example</h1>
<!--
Example for KLayers project
http://www.kruglov.ru/klayers/
(c) Kruglov S.A. 2002
-->
<!-- klayers.js -->
<script>
/************************************************\
| KLayers 2.97                                   |
| DHTML Library for Internet Explorer 4.* - 6.*, |
| Netscape 4.* - 7.*, Mozilla, Opera 5.* - 7.*   |
| Copyright by Kruglov S. A. (kruglov.ru) 2003   |
\************************************************/
/***  See for description and latest version  ***\
\***  http://www.kruglov.ru/klayers/          ***/
function initKLayers(){
  isDOM=document.getElementById?true:false
  isOpera=isOpera5=window.opera && isDOM
  isOpera6=isOpera && window.print
  isOpera7=isOpera && document.readyState
  isMSIE=isIE=document.all && document.all.item && !isOpera
  isStrict=document.rupatMode=="CSS1Compat"
  isNN=isNC=navigator.appName=="Netscape"
  isNN4=isNC4=isNN && !isDOM
  isMozilla=isNN6=isNN && isDOM
  if(!isDOM && !isNC && !isMSIE && !isOpera){
    KLayers=false
    return false
  }
  pageLeft=0
  pageTop=0
  KL_imgCount=0
  KL_imgArray=new Array()
  KL_imageRef="document.images[\""
  KL_imagePostfix="\"]"
  KL_styleSwitch=".style"
  KL_layerPostfix="\"]"
  if(isNN4){
    KL_layerRef="document.layers[\""
    KL_styleSwitch=""
  }
  if(isMSIE){
    KL_layerRef="document.all[\""
  }
  if(isDOM){
    KL_layerRef="document.getElementById(\""
    KL_layerPostfix="\")"
  }
  KLayers=true
  return true
}
initKLayers()
// document and window functions:
function KL_getBody(w){
  if(!w) w=window
  if(isStrict){
    return w.document.documentElement
  }else{
    return w.document.body
  }
}
function getWindowLeft(w){
  if(!w) w=window
  if(isMSIE || isOpera7) return w.screenLeft
  if(isNN || isOpera) return w.screenX
}
function getWindowTop(w){
  if(!w) w=window
  if(isMSIE || isOpera7) return w.screenTop
  if(isNN || isOpera) return w.screenY
}
function getWindowWidth(w){
  if(!w) w=window
  if(isMSIE) return KL_getBody(w).clientWidth
  if(isNN || isOpera) return w.innerWidth
}
function getWindowHeight(w){
  if(!w) w=window
  if(isMSIE) return KL_getBody(w).clientHeight
  if(isNN || isOpera) return w.innerHeight
}
function getDocumentWidth(w){
  if(!w) w=window
  if(isMSIE || isOpera7) return KL_getBody(w).scrollWidth
  if(isNN) return w.document.width
  if(isOpera) return w.document.body.style.pixelWidth
}
function getDocumentHeight(w){
  if(!w) w=window
  if(isMSIE || isOpera7) return KL_getBody(w).scrollHeight
  if(isNN) return w.document.height
  if(isOpera) return w.document.body.style.pixelHeight
}
function getScrollX(w){
  if(!w) w=window
  if(isMSIE || isOpera7) return KL_getBody(w).scrollLeft
  if(isNN || isOpera) return w.pageXOffset
}
function getScrollY(w){
  if(!w) w=window
  if(isMSIE || isOpera7) return KL_getBody(w).scrollTop
  if(isNN || isOpera) return w.pageYOffset
}
function preloadImage(imageFile){
  KL_imgArray[KL_imgCount]=new Image()
  KL_imgArray[KL_imgCount++].src=imageFile
}
var KL_LAYER=0
var KL_IMAGE=1
function KL_findObject(what,where,type){
  var i,j,l,s
  var len=eval(where+".length")
  for(j=0;j<len;j++){
    s=where+"["+j+"].document.layers"
    if(type==KL_LAYER){
      l=s+"[\""+what+"\"]"
    }
    if(type==KL_IMAGE){
      i=where+"["+j+"].document.images"
      l=i+"[\""+what+"\"]"
    }
    if(eval(l)) return l
    l=KL_findObject(what,s,type)
    if(l!="null") return l
  }
  return "null"
}
function KL_getObjectPath(name,parent,type){
  var l=((parent && isNN4)?(parent+"."):(""))+((type==KL_LAYER)?KL_layerRef:KL_imageRef)+name+((type==KL_LAYER)?KL_layerPostfix:KL_imagePostfix)
  if(eval(l))return l
  if(!isNN4){
    return l
  }else{
    return KL_findObject(name,"document.layers",type)
  }
}
function layer(name){
  return new KLayer(name,null)
}
function layerFrom(name,parent){
  if(parent.indexOf("document.")<0) parent=layer(parent).path
  return new KLayer(name,parent)
}
function image(name){
  return new KImage(name,null)
}
function imageFrom(name,parent){
  if(parent.indexOf("document.")<0) parent=layer(parent).path
  return new KImage(name,parent)
}
// class "KLayer":
function KLayer(name,parent){
  this.path=KL_getObjectPath(name,parent,KL_LAYER)
  this.object=eval(this.path)
  if(!this.object)return
  this.style=this.css=eval(this.path+KL_styleSwitch)
}
KLP=KLayer.prototype
KLP.isExist=KLP.exists=function(){
  return (this.object)?true:false
}
function KL_getPageOffset(o){ 
  var KL_left=0
  var KL_top=0
  do{
    KL_left+=o.offsetLeft
    KL_top+=o.offsetTop
  }while(o=o.offsetParent)
  return [KL_left, KL_top]
}
KLP.getLeft=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOpera) return o.offsetLeft-pageLeft
  if(isNN4) return o.x-pageLeft
}
KLP.getTop=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOpera) return o.offsetTop-pageTop
  if(isNN4) return o.y-pageTop
}
KLP.getAbsoluteLeft=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOpera) return KL_getPageOffset(o)[0]-pageLeft
  if(isNN4) return o.pageX-pageLeft
}
KLP.getAbsoluteTop=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOpera) return KL_getPageOffset(o)[1]-pageTop
  if(isNN4) return o.pageY-pageTop
}
KLP.getWidth=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOpera7) return o.offsetWidth
  if(isOpera) return this.css.pixelWidth
  if(isNN4) return o.document.width
}
KLP.getHeight=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOpera7) return o.offsetHeight
  if(isOpera) return this.css.pixelHeight
  if(isNN4) return o.document.height
}
KLP.getZIndex=function(){ //deprecated
  return this.css.zIndex
}
KLP.setLeft=KLP.moveX=function(x){
  x+=pageLeft
  if(isOpera){
    this.css.pixelLeft=x
  }else if(isNN4){
    this.object.x=x
  }else{
    this.css.left=x+"px"
  }
}
KLP.setTop=KLP.moveY=function(y){
  y+=pageTop
  if(isOpera){
    this.css.pixelTop=y
  }else if(isNN4){
    this.object.y=y
  }else{
    this.css.top=y+"px"
  }
}
KLP.moveTo=KLP.move=function(x,y){
  this.setLeft(x)
  this.setTop(y)
}
KLP.moveBy=function(x,y){
  this.moveTo(this.getLeft()+x,this.getTop()+y)
}
KLP.setZIndex=KLP.moveZ=function(z){ //deprecated
  this.css.zIndex=z
}
KLP.setVisibility=function(v){
  this.css.visibility=(v)?(isNN4?"show":"visible"):(isNN4?"hide":"hidden")
}
KLP.show=function(){
  this.setVisibility(true)
}
KLP.hide=function(){
  this.setVisibility(false)
}
KLP.isVisible=KLP.getVisibility=function(){
  return (this.css.visibility.toLowerCase().charAt(0)=="h")?false:true
}
KLP.setBgColor=function(c){
  if(isMSIE || isMozilla || isOpera7){
    this.css.backgroundColor=c
  }else if(isOpera){
    this.css.background=c
  }else if(isNN4){
    this.css.bgColor=c
  }
}
KLP.setBgImage=function(url){
  if(isMSIE || isMozilla || isOpera6){
    this.css.backgroundImage="url("+url+")"
  }else if(isNN4){
    this.css.background.src=url
  }
}
KLP.setClip=KLP.clip=function(top,right,bottom,left){
  if(isMSIE || isMozilla || isOpera7){
    this.css.clip="rect("+top+"px "+right+"px "+bottom+"px "+left+"px)"
  }else if(isNN4){
    var c=this.css.clip
    c.top=top
    c.right=right
    c.bottom=bottom
    c.left=left
  }
}
KLP.scrollTo=KLP.scroll=function(windowLeft,windowTop,windowWidth,windowHeight,scrollX,scrollY){
  if(scrollX>this.getWidth()-windowWidth) scrollX=this.getWidth()-windowWidth
  if(scrollY>this.getHeight()-windowHeight) scrollY=this.getHeight()-windowHeight
  if(scrollX<0)scrollX=0
  if(scrollY<0)scrollY=0
  var top=0
  var right=windowWidth
  var bottom=windowHeight
  var left=0
  left=left+scrollX
  right=right+scrollX
  top=top+scrollY
  bottom=bottom+scrollY
  this.moveTo(windowLeft-scrollX,windowTop-scrollY)
  this.setClip(top,right,bottom,left)
}
KLP.scrollBy=KLP.scrollByOffset=function(windowLeft,windowTop,windowWidth,windowHeight,scrollX,scrollY){
  var X=-parseInt(this.css.left)+windowLeft+scrollX
  var Y=-parseInt(this.css.top)+windowTop+scrollY
  this.scroll(windowLeft,windowTop,windowWidth,windowHeight,X,Y)
}
KLP.scrollByPercentage=function(windowLeft,windowTop,windowWidth,windowHeight,scrollX,scrollY){
  var X=(this.getWidth()-windowWidth)*scrollX/100
  var Y=(this.getHeight()-windowHeight)*scrollY/100
  this.scroll(windowLeft,windowTop,windowWidth,windowHeight,X,Y)
}
KLP.write=function(str){
  var o=this.object
  if(isNN4){
    var d=o.document
    d.open()
    d.write(str)
    d.close()
  }else{
    o.innerHTML=str
  }
}
KLP.add=function(str){
  var o=this.object
  if(isNN4){
    o.document.write(str)
  }else{
    o.innerHTML+=str
  }
}
// class "KImage":
KIP=KImage.prototype
function KImage(name){
  this.path=KL_getObjectPath(name,false,KL_IMAGE)
  this.object=eval(this.path)
}
KIP.isExist=KIP.exists=function(){
  return (this.object)?true:false
}
KIP.getSrc=KIP.src=function(){
  return this.object.src
}
KIP.setSrc=KIP.load=function(url){
  this.object.src=url
}
</script>
<script>
var KS=[]
var KScounter=0
function KScrolling(text,width,height,speed){
  if(text.length && text.join){
    text=text.join("<br>")
  }
  this.number=KScounter++
  this.width=width
  this.height=height
  this.speed=speed
  this.text=text+"<br>"+text;
  KS[this.number]=this
}
KScrolling.prototype.print=function(){
  if(isMSIE || isMozilla || isOpera5){
    return ("<div id="KSborder"+this.number+"" style="width: "+this.width+"px;height: "+this.height+"px;overflow: hidden"><div id="KStext"+this.number+"" style="position: relative; top: 0px; left: 0px; visibility: hidden">"+this.text+"</div></div>")
  }else if(isNC4){
  
    return "<ilayer name="KSNN"+this.number+"" visibility="hide"><spacer type=block width="+this.width+" height="+this.height+"></ilayer>\n"+
    "<layer name="KStext"+this.number+"" clip="0 0 "+this.width+" "+this.height+"" top=0 left=0 visibility="hide">"+this.text+"</layer>"
  
  }else{
    return (this.text)
    this.badBrowser=true
  }
}
KScrolling.prototype.scroll=function(){
  if(this.badBrowser) return
  if(!this.layer) {
    this.layer=layer("KStext"+this.number)
    if(isNC4){
      var l=layer("KSNN"+this.number)
      this.layer.move(this.left=l.getAbsoluteLeft(),this.top=l.getAbsoluteTop())
    }
    this.layer.show()
    this.offset=0
  }else{
    this.offset=(this.offset+1)%(this.layer.getHeight()/2)
    if(isNC4){
      this.layer.scroll(this.left,this.top,this.width,this.height,0,this.offset)
    }else if(!this.badBrowser){
      this.layer.moveY(-this.offset)
    }
  }
  setTimeout("KS["+this.number+"].scroll()",this.speed)
}
</script>
<script>
S=new KScrolling("Cross browser scrolling example",60,60,32)
</script>
<table cellspacing=0 cellpadding=2 border=2 width=1 height=1>
<tr><td>
<script>
document.write(S.print())
</script>
</td></tr>
</table>
<script>
if(isNC4){
  onload=function(){S.scroll()}
}else{
  S.scroll();
}
</script>

</html>
           
         
  </source>
    
   


==Text Scroll when clicking==




   
  <!-- start source code -->
   
    <source lang="html4strict">
 
<html>
<head>
  <title>youngpup.net: ypSimpleScroll demo</title>
  <script language="javascript">
/* =======================================================
 * ypSimpleScroll
 * 3/11/2001
 * 
// dhtml scrolling panel featuring scrolling in any
// direction, smooth frame-dropping animation, and a
// few other goodies.
//
// 3/25/2001
// added scrolling in any direction and initTop, initLeft
// constructor parameters - with only 1k...
//
// 3/30/2001
// fixed bug that occured when if you called scrollTo( )
// and the new position was the same as the current
// position. that was stupid.
//
// 4/02/2001
// small bug fix - on some browsers, on slow connections
// the script would not run at all. to be sure the doc
// is done loading before .load() is called, the author
// must now call the .load() method in the onload handler
// for the page.
//
// 8/22/2001
// if you tried to scroll before page was loaded it threw
// an error. this should be fixed now.
// 
//
 * http://www.youngpup.net/
//
// =======================================================
// ypSimpleScroll(  id, left, top, width, height, speed, 
//          contentWidth, initScrollLeft, 
//          initScrollTop  )
//
// last three parameters are optional.
 * ======================================================= */

// basic methods.
ypSimpleScroll.prototype.scrollNorth = function() { this.startScroll(90) }
ypSimpleScroll.prototype.scrollSouth = function() { this.startScroll(270)  }
ypSimpleScroll.prototype.scrollWest  = function() { this.startScroll(180) }
ypSimpleScroll.prototype.scrollEast  = function() { this.startScroll(0)   }

// start scrolling in an arbitrary direction, with an optional arbitrary speed.
// if no speed is provided, the default speed from the constructor parameter is used.
ypSimpleScroll.prototype.startScroll = function(deg, speed) {
  if (this.loaded)
  {
    if (this.aniTimer) window.clearTimeout(this.aniTimer)
    this.overrideScrollAngle(deg)
    this.speed    = speed ? speed : this.origSpeed
    this.lastTime = (new Date()).getTime() - this.y.minRes
    this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
  }
}
// kills pending calls to .scroll(), resets speed
ypSimpleScroll.prototype.endScroll = function() {
  if (this.loaded)
  {
    window.clearTimeout(this.aniTimer)
    this.aniTimer = 0;
    this.speed = this.origSpeed
  }
}
// override the current angle from startScroll() with a new angle
// this method should not be used with scrollTo() because it will
// override the angle created by the first two params to scrollTo().
ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
  if (this.loaded)
  {
    deg = deg % 360
    if (deg % 90 == 0) {
      var cos = deg == 0  ? 1 : deg == 180 ? -1 : 0
      var sin = deg == 90 ? -1 : deg == 270 ? 1 : 0
    } else {
      var angle = deg * Math.PI / 180
      var cos   = Math.cos(angle)
      var sin   = Math.sin(angle)
      sin = -sin
    }
    this.fx = cos / (Math.abs(cos) + Math.abs(sin))
    this.fy = sin / (Math.abs(cos) + Math.abs(sin))
    this.stopH = deg == 90 || deg == 270 ? this.scrollLeft : deg < 90 || deg > 270 ? this.scrollW : 0
    this.stopV = deg == 0 || deg == 180 ? this.scrollTop : deg < 180 ? 0 : this.scrollH
  }
}
// override the speed for the current scroll.
// should not be used with scrollTo, unless you want to 
// override the speed computed from the aniLen param of scrollTo()
ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
  if (this.loaded) this.speed = speed
}
// scroll to an arbitrary position in two dimensions over in
// an arbitrary lenth of time.
ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
  if (this.loaded)
  {
    if (stopH != this.scrollLeft || stopV != this.scrollTop) {
      if (this.aniTimer) window.clearTimeout(this.aniTimer)
      this.lastTime = (new Date()).getTime()
      var dx = Math.abs(stopH - this.scrollLeft)
      var dy = Math.abs(stopV - this.scrollTop)
      var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
      this.fx = (stopH - this.scrollLeft) / (dx + dy)
      this.fy = (stopV - this.scrollTop) / (dx + dy)
      this.stopH = stopH
      this.stopV = stopV
      this.speed = d / aniLen * 1000
      window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
    }
  }
}
// jump to an arbitrary position in two dimensions.
ypSimpleScroll.prototype.jumpTo = function(nx, ny) { 
  if (this.loaded)
  {
    nx = Math.min(Math.max(nx, 0), this.scrollW)
    ny = Math.min(Math.max(ny, 0), this.scrollH)
    this.scrollLeft = nx
    this.scrollTop = ny
    if (this.y.ns4)this.content.moveTo(-nx, -ny)
    else {
      this.content.style.left = -nx + "px"
      this.content.style.top = -ny + "px"
    }
  }
}

// =========================================================================
// =============================== private =================================
// =========================================================================
ypSimpleScroll.minRes = 10
ypSimpleScroll.ie  = document.all ? 1 : 0
ypSimpleScroll.ns4 = document.layers ? 1 : 0
ypSimpleScroll.dom = document.getElementById ? 1 : 0
ypSimpleScroll.mac = navigator.platform == "MacPPC"
ypSimpleScroll.mo5 = document.getElementById && !document.all ? 1 : 0
// recursively calls itself to animate
ypSimpleScroll.prototype.scroll = function() {
  this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
  var nt = (new Date()).getTime()
  var d = Math.round((nt - this.lastTime) / 1000 * this.speed)
  if (d > 0)
  {
    var nx = d * this.fx + this.scrollLeft
    var ny = d * this.fy + this.scrollTop
    var xOut = (nx >= this.scrollLeft && nx >= this.stopH) || (nx <= this.scrollLeft && nx <= this.stopH)
    var yOut = (ny >= this.scrollTop && ny >= this.stopV)  || (ny <= this.scrollTop && ny <= this.stopV)
    //window.status = nx + " " + this.fx + " " + this.scrollLeft + " " + this.stopH + " | " + ny + " " + this.fy + " " + this.scrollTop + " " + this.stopV + " : " + d
    if (nt - this.lastTime != 0 &&
      ((this.fx == 0 && this.fy == 0) ||
       (this.fy == 0 && xOut) ||
       (this.fx == 0 && yOut) ||
       (this.fx != 0 && this.fy != 0 && xOut && yOut)))
    {
      this.jumpTo(this.stopH, this.stopV)
      this.endScroll()
    }
    else {
      this.jumpTo(nx, ny)
      this.lastTime = nt
    }
  }
}
// constructor
function ypSimpleScroll(id, left, top, width, height, speed, contentWidth, initLeft, initTop)
{
  var y = this.y = ypSimpleScroll
  if (!initLeft)     initLeft     = 0
  if (!initTop)      initTop      = 0
  if (!contentWidth) contentWidth = width
  // fix for netscape4 first-page bug.
  if (document.layers && !y.ns4) history.go(0)
  if (y.ie || y.ns4 || y.dom) {
    this.loaded    = false
    this.id      = id
    this.origSpeed  = speed
    this.aniTimer  = false
    this.op      = ""
    this.lastTime  = 0
    this.clipH    = height
    this.clipW    = width
    this.scrollTop  = initTop
    this.scrollLeft  = initLeft
    // global reference to this object
    this.gRef = "ypSimpleScroll_"+id
    eval(this.gRef+"=this")
    var d = document
    d.write("<style type="text/css">")
    d.write("#" + this.id + "Container { left:" + left + "px; top:" + top + "px; width:" + width + "px; height:" + height + "px; clip:rect(0 " + width + " " + height + " 0); overflow:hidden; }")
    d.write("#" + this.id + "Container, #" + this.id + "Content { position:absolute; }")
    d.write("#" + this.id + "Content { left:" + (-initLeft) + "px; top:" + (-initTop) + "px; width:" + contentWidth + "px; }")
    d.write("</style>")
  }
}
// once the nceesary objects are present in the DOM, this gathers some info about them.
ypSimpleScroll.prototype.load = function() {
  var d, lyrId1, lyrId2
  d = document
  lyrId1 = this.id + "Container"
  lyrId2 = this.id + "Content"
  this.container  = this.y.dom ? d.getElementById(lyrId1) : this.y.ie ? d.all[lyrId1] : d.layers[lyrId1]
  this.content  = obj2 = this.y.ns4 ? this.container.layers[lyrId2] : this.y.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
  this.docH    = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH)
  this.docW    = Math.max(this.y.ns4 ? this.content.document.width  : this.content.offsetWidth,  this.clipW)
  this.scrollH  = this.docH - this.clipH
  this.scrollW  = this.docW - this.clipW
  this.loaded    = true
  this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0)
  this.scrollTop  = Math.max(Math.min(this.scrollTop, this.scrollH),0)
  this.jumpTo(this.scrollLeft, this.scrollTop)
}
  </script>
  <script language="javascript">
    var test = new ypSimpleScroll("myScroll", 20, 50, 150, 250, 100)
  </script>
  <style type="text/css">
  <!--
    /* just basic text formatting - nothing special */
    @import "/_common/demo.css";
  -->
  </style>
</head>
<body onload="test.load()">
  <a id="down" href="#" 
    onmousedown="test.scrollSouth(); return false;" 
    onmousemove="return false;"
    onmouseout="test.endScroll();"
    onmouseup="test.endScroll();" 
    onclick="return false;"
    >down</a> 
  <a href="#" 
    onmousedown="test.scrollNorth(); return false;" 
    onmousemove="return false;"
    onmouseout="test.endScroll();"
    onmouseup="test.endScroll();" 
    onclick="return false;"
    >up</a>
  
  &nbsp;&nbsp;&nbsp;&lt;- <b>mousedown</b> over these links to activate the scroller.
  <div id="myScrollContainer">
    <div id="myScrollContent">
      <p>this here is a bunch of content.</p>
      <p>the reason i"ve taken the time to write actual content is because <a href="http://www.jesterworld.net/" target="_blank">brandon</a> bitched that there wasn"t any.</p>
      <p>before it was just fake content in here. actually, it was the word "content" repeated over and over.</p>
      <p>i guess he"s got a point, tho. on some OS"s it was hard to tell anything was happening when it was the same word over and over.</p>
      <p>speaking of different OS"s, mac and win9x users will be happy to note that ypSimpleScroll uses the same nifty frame-dropping animation algorithm that most other yp-components use. this means that all users, regardless of their platform or processor speed, will see the scroll box move at the same speed.</p>
      <p>"smoothness" is definately compromised on some crappy systems (win 9x), but atleast the user won"t be sitting around for an hour waiting for the damned thing to scroll...</p>
    </div>
  </div>
</body>
</html>

           
         
  </source>
    
   


==Text Scroll when mouse over==




   
  <!-- start source code -->
   
    <source lang="html4strict">
 
<html>
<head>
  <title>youngpup.net: ypSimpleScroll demo</title>
  <script language="javascript">
/* =======================================================
 * ypSimpleScroll
 * 3/11/2001
 * 
// dhtml scrolling panel featuring scrolling in any
// direction, smooth frame-dropping animation, and a
// few other goodies.
//
// 3/25/2001
// added scrolling in any direction and initTop, initLeft
// constructor parameters - with only 1k...
//
// 3/30/2001
// fixed bug that occured when if you called scrollTo( )
// and the new position was the same as the current
// position. that was stupid.
//
// 4/02/2001
// small bug fix - on some browsers, on slow connections
// the script would not run at all. to be sure the doc
// is done loading before .load() is called, the author
// must now call the .load() method in the onload handler
// for the page.
//
// 8/22/2001
// if you tried to scroll before page was loaded it threw
// an error. this should be fixed now.
// 
//
 * http://www.youngpup.net/
//
// =======================================================
// ypSimpleScroll(  id, left, top, width, height, speed, 
//          contentWidth, initScrollLeft, 
//          initScrollTop  )
//
// last three parameters are optional.
 * ======================================================= */

// basic methods.
ypSimpleScroll.prototype.scrollNorth = function() { this.startScroll(90) }
ypSimpleScroll.prototype.scrollSouth = function() { this.startScroll(270)  }
ypSimpleScroll.prototype.scrollWest  = function() { this.startScroll(180) }
ypSimpleScroll.prototype.scrollEast  = function() { this.startScroll(0)   }

// start scrolling in an arbitrary direction, with an optional arbitrary speed.
// if no speed is provided, the default speed from the constructor parameter is used.
ypSimpleScroll.prototype.startScroll = function(deg, speed) {
  if (this.loaded)
  {
    if (this.aniTimer) window.clearTimeout(this.aniTimer)
    this.overrideScrollAngle(deg)
    this.speed    = speed ? speed : this.origSpeed
    this.lastTime = (new Date()).getTime() - this.y.minRes
    this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
  }
}
// kills pending calls to .scroll(), resets speed
ypSimpleScroll.prototype.endScroll = function() {
  if (this.loaded)
  {
    window.clearTimeout(this.aniTimer)
    this.aniTimer = 0;
    this.speed = this.origSpeed
  }
}
// override the current angle from startScroll() with a new angle
// this method should not be used with scrollTo() because it will
// override the angle created by the first two params to scrollTo().
ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
  if (this.loaded)
  {
    deg = deg % 360
    if (deg % 90 == 0) {
      var cos = deg == 0  ? 1 : deg == 180 ? -1 : 0
      var sin = deg == 90 ? -1 : deg == 270 ? 1 : 0
    } else {
      var angle = deg * Math.PI / 180
      var cos   = Math.cos(angle)
      var sin   = Math.sin(angle)
      sin = -sin
    }
    this.fx = cos / (Math.abs(cos) + Math.abs(sin))
    this.fy = sin / (Math.abs(cos) + Math.abs(sin))
    this.stopH = deg == 90 || deg == 270 ? this.scrollLeft : deg < 90 || deg > 270 ? this.scrollW : 0
    this.stopV = deg == 0 || deg == 180 ? this.scrollTop : deg < 180 ? 0 : this.scrollH
  }
}
// override the speed for the current scroll.
// should not be used with scrollTo, unless you want to 
// override the speed computed from the aniLen param of scrollTo()
ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
  if (this.loaded) this.speed = speed
}
// scroll to an arbitrary position in two dimensions over in
// an arbitrary lenth of time.
ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
  if (this.loaded)
  {
    if (stopH != this.scrollLeft || stopV != this.scrollTop) {
      if (this.aniTimer) window.clearTimeout(this.aniTimer)
      this.lastTime = (new Date()).getTime()
      var dx = Math.abs(stopH - this.scrollLeft)
      var dy = Math.abs(stopV - this.scrollTop)
      var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
      this.fx = (stopH - this.scrollLeft) / (dx + dy)
      this.fy = (stopV - this.scrollTop) / (dx + dy)
      this.stopH = stopH
      this.stopV = stopV
      this.speed = d / aniLen * 1000
      window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
    }
  }
}
// jump to an arbitrary position in two dimensions.
ypSimpleScroll.prototype.jumpTo = function(nx, ny) { 
  if (this.loaded)
  {
    nx = Math.min(Math.max(nx, 0), this.scrollW)
    ny = Math.min(Math.max(ny, 0), this.scrollH)
    this.scrollLeft = nx
    this.scrollTop = ny
    if (this.y.ns4)this.content.moveTo(-nx, -ny)
    else {
      this.content.style.left = -nx + "px"
      this.content.style.top = -ny + "px"
    }
  }
}

// =========================================================================
// =============================== private =================================
// =========================================================================
ypSimpleScroll.minRes = 10
ypSimpleScroll.ie  = document.all ? 1 : 0
ypSimpleScroll.ns4 = document.layers ? 1 : 0
ypSimpleScroll.dom = document.getElementById ? 1 : 0
ypSimpleScroll.mac = navigator.platform == "MacPPC"
ypSimpleScroll.mo5 = document.getElementById && !document.all ? 1 : 0
// recursively calls itself to animate
ypSimpleScroll.prototype.scroll = function() {
  this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
  var nt = (new Date()).getTime()
  var d = Math.round((nt - this.lastTime) / 1000 * this.speed)
  if (d > 0)
  {
    var nx = d * this.fx + this.scrollLeft
    var ny = d * this.fy + this.scrollTop
    var xOut = (nx >= this.scrollLeft && nx >= this.stopH) || (nx <= this.scrollLeft && nx <= this.stopH)
    var yOut = (ny >= this.scrollTop && ny >= this.stopV)  || (ny <= this.scrollTop && ny <= this.stopV)
    //window.status = nx + " " + this.fx + " " + this.scrollLeft + " " + this.stopH + " | " + ny + " " + this.fy + " " + this.scrollTop + " " + this.stopV + " : " + d
    if (nt - this.lastTime != 0 &&
      ((this.fx == 0 && this.fy == 0) ||
       (this.fy == 0 && xOut) ||
       (this.fx == 0 && yOut) ||
       (this.fx != 0 && this.fy != 0 && xOut && yOut)))
    {
      this.jumpTo(this.stopH, this.stopV)
      this.endScroll()
    }
    else {
      this.jumpTo(nx, ny)
      this.lastTime = nt
    }
  }
}
// constructor
function ypSimpleScroll(id, left, top, width, height, speed, contentWidth, initLeft, initTop)
{
  var y = this.y = ypSimpleScroll
  if (!initLeft)     initLeft     = 0
  if (!initTop)      initTop      = 0
  if (!contentWidth) contentWidth = width
  // fix for netscape4 first-page bug.
  if (document.layers && !y.ns4) history.go(0)
  if (y.ie || y.ns4 || y.dom) {
    this.loaded    = false
    this.id      = id
    this.origSpeed  = speed
    this.aniTimer  = false
    this.op      = ""
    this.lastTime  = 0
    this.clipH    = height
    this.clipW    = width
    this.scrollTop  = initTop
    this.scrollLeft  = initLeft
    // global reference to this object
    this.gRef = "ypSimpleScroll_"+id
    eval(this.gRef+"=this")
    var d = document
    d.write("<style type="text/css">")
    d.write("#" + this.id + "Container { left:" + left + "px; top:" + top + "px; width:" + width + "px; height:" + height + "px; clip:rect(0 " + width + " " + height + " 0); overflow:hidden; }")
    d.write("#" + this.id + "Container, #" + this.id + "Content { position:absolute; }")
    d.write("#" + this.id + "Content { left:" + (-initLeft) + "px; top:" + (-initTop) + "px; width:" + contentWidth + "px; }")
    d.write("</style>")
  }
}
// once the nceesary objects are present in the DOM, this gathers some info about them.
ypSimpleScroll.prototype.load = function() {
  var d, lyrId1, lyrId2
  d = document
  lyrId1 = this.id + "Container"
  lyrId2 = this.id + "Content"
  this.container  = this.y.dom ? d.getElementById(lyrId1) : this.y.ie ? d.all[lyrId1] : d.layers[lyrId1]
  this.content  = obj2 = this.y.ns4 ? this.container.layers[lyrId2] : this.y.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
  this.docH    = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH)
  this.docW    = Math.max(this.y.ns4 ? this.content.document.width  : this.content.offsetWidth,  this.clipW)
  this.scrollH  = this.docH - this.clipH
  this.scrollW  = this.docW - this.clipW
  this.loaded    = true
  this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0)
  this.scrollTop  = Math.max(Math.min(this.scrollTop, this.scrollH),0)
  this.jumpTo(this.scrollLeft, this.scrollTop)
}
  </script>
  <script language="javascript">
    var test  = new ypSimpleScroll("myScroll", 20, 50, 150, 250, 40, 200)
  </script>
  <style type="text/css">
  <!--
    /* just basic text formatting - nothing special */
    @import "/_common/demo.css";
  -->
  </style>
</head>
<body onload="test.load()">
  <a href="#" onmouseover="test.scrollNorth()" onmouseout="test.endScroll()">up</a>
  <a href="#" onmouseover="test.scrollSouth()" onmouseout="test.endScroll()">down</a>
  <a href="#" onmouseover="test.scrollWest()" onmouseout="test.endScroll()">left</a>
  <a href="#" onmouseover="test.scrollEast()" onmouseout="test.endScroll()">right</a>
  &nbsp;&nbsp;&nbsp; &lt;- <b>mouseover</b> these links to activate the scroller.<br />
  <div id="myScrollContainer">
    <div id="myScrollContent">
      <!-- this nested table is only necessary if you"re using horizontal scrolling, and are targeting navigator 4 -->
      <table width="200" cellpadding="0" cellspacing="0" border="0">
      <tr><td>
        <p>this here is a bunch of content.</p>
        <p>the reason i"ve taken the time to write actual content is because <a href="http://www.jesterworld.net/" target="_blank">brandon</a> bitched that there wasn"t any.</p>
        <p>before it was just fake content in here. actually, it was the word "content" repeated over and over.</p>
        <p>i guess he"s got a point, tho. on some OS"s it was hard to tell anything was happening when it was the same word over and over.</p>
        <p>speaking of different OS"s, mac and win9x users will be happy to note that ypSimpleScroll uses the same nifty frame-dropping animation algorithm that most other yp-components use. this means that all users, regardless of their platform or processor speed, will see the scroll box move at the same speed.</p>
        <p>"smoothness" is definately compromised on some crappy systems (mac netscape, win95), but atleast the user won"t be sitting around for an hour waiting for the damned thing to scroll...</p>
      </td></tr>
      </table>
    </div>
  </div>
</body>
</html>

           
         
  </source>
    
   


==Vertical scroll (IE)==




   
  <!-- start source code -->
   
    <source lang="html4strict">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Qiksearch Vertical Scroller</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#808080; font-weight:bold}
</style>
<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.ru/javascripts/qiksearch_vertical_scroller.htm
//*********************************************
//* Qiksearch Vertical Scroller               *
//* This script when you move your mouse over *
//* displays a vertical scrolling hint        *
//* (c) Premshree Pillai,                     *
//* http://www.qiksearch.ru                  *
//* E-mail : premshree@hotmail.ru            *
//* Use the script freely as long as this     *
//* message is intact                         *
//*********************************************
window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer" 
 && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer" 
 && bVer < 4);
 var scroll_height = 150; //The scroll height
 var time_length =50; //Scroll speed
 var begin_pos = 20; //Start position of scroll hint
 var i;
 var j;
 
if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="document.all";
 styleSwitch=".style";
 }
}
//SCROLL
function Scroll(layerName){
if (NS4 || IE4) {
 if (NS4 || IE4) { 
 if(i<(begin_pos+scroll_height)){
 eval(layerRef+"[""+layerName+""]"+
 styleSwitch+".visibility="visible"");
 eval(layerRef+"[""+layerName+""]"+
 styleSwitch+".top=""+i+""");
 i++;
 j++;
 if(i==j){
 setTimeout("Scroll(""+layerName+"")",time_length);}
 }
 }
 }
}
//STOP SCROLLING
function StopScroll(layerName)
{
i=begin_pos+scroll_height;
  eval(layerRef+"[""+layerName+""]"+
  styleSwitch+".top=""+i+""");
  hideLayer(layerName);
}
function reset()
{ 
i=begin_pos;
j=i;
}
// HIDE HINT
function hideLayer(layerName){
 if (NS4 || IE4) {
 eval(layerRef+"[""+layerName+""]"+
 styleSwitch+".visibility="hidden"");
 }
 }
</script>
<!--END REQUIRED-->
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Qiksearch Vertical Scroller</span>
<br>
<!--BEGIN REQUIRED-->
<a href="#" class="link" onmouseover="javascript:reset();Scroll("prem_hint");" onmouseout="javascript:StopScroll("prem_hint");">Move your mouse over</a>
</center>
<div id="prem_hint" style="position:relative; left:50; visibility:hidden" class="prem_hint">
<font color="#FF0000"><b>Vertical Scrolling!</b></font>
</div>
<!--END REQUIRED-->
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This script is a simple modification of <a href="link_hint_scroller.htm" class="link">Link Hint Scroller</a>. The only difference here is that the hint will scroll vertically.<br><br>
When you move your mouse over the above link a hint or something about the link
will appear below the link in a vertically scrolling fashion. When you move your mouseout the scrolling will stop.
<br><br>To use this  Javascript,view the source of this document. Firstly you must copy the script
and place it in the head section. Then you must copy the &lt;DIV&gt; section and place it wherever you want it in the body. All the required section are marked by the comments &lt;!--BEGIN REQUIRED--&GT; and &lt;!--END REQUIRED--&gt;
<br><br>
<font face="courier">scroll_height</font> : Scroll height variable (150 here)<br>
<font face="courier">time_length</font> : Speed of scroll (50 here, meaning after 50 milliseconds the hint will change position by 1 pixel i.e a speed of 20 pixels/second)<br>
<font face="courier">begin_pos</font> : Beginning position of hint (20 here)
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.ru" class="link">&#169 Premshree Pillai</a></center>
</body>
</html>
           
         
  </source>