JavaScript DHTML/GUI Components/Scroll

Материал из Web эксперт
Перейти к: навигация, поиск

Diagonal Scroller (IE)

   <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>

<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>

</head> <body bgcolor="#FFFFFF">

Qiksearch Diagonal Scroller

<a href="#" class="link" onmouseover="javascript:reset();Scroll("prem_hint");" onmouseout="javascript:StopScroll("prem_hint");">Move your mouse over</a>

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.

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.

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 <DIV> section and place it wherever you want it in the body. All the required section are marked by the comments <!--BEGIN REQUIRED--&GT; and <!--END REQUIRED-->

scroll_height : Scroll height variable (150 here)
time_length : 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)
begin_pos : Beginning position of hint (20 here)


<a href="mailto:premshree@hotmail.ru" class="link">&#169 Premshree Pillai</a>

</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

   <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">
 
 </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()">

   <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>

Use the wheel below to control the scrollbox.
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.

     Okay I know the graphics are ugly, but it"s the best I could come up with quickly.

Anyway, I never said I was a designer :)

Point is, this demo uses an instance of <a href="http://www.youngpup.net/components/ypRing" target="_blank">ypRing</a> to control the scrolling.

You could do something nicer, I"m sure.

But"s it"s just an example of how you can make different things control ypSimpleScroll, not just little pixel triangles.

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>.

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.

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.

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.

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.

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.

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.

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.

</body> </html>


 </source>
   
  


Scroll image and mimic a compass

   <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>

 mouseover or mousedown on the compass points to pan the map.

<img src="compass.gif" usemap="#compass" width="279" height="285" border="0">
     <img id="map" src="img_mapbig.jpg" width="736" height="500" />
<img src="panningX.gif" width="20" height="20" />
<img src="panningX.gif" width="20" height="20" />
<img src="panningX.gif" width="20" height="20" />
<img src="panningX.gif" width="20" height="20" />
<img src="panningX.gif" width="20" height="20" />
<img src="panningX.gif" width="20" height="20" />
<img src="panningX.gif" width="20" height="20" />
<img src="panningX.gif" width="20" height="20" />

</body> </html>


 </source>
   
  

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


Scroll text with custom scoll bar

   <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>
 
 <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()">

   <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>
   

<a href="#" onmousedown="test.scrollTo(0, 0, 1000);" onclick="return false;" >&#149;</a>

<a href="#" onmousedown="test.scrollTo(0, Math.round(test.scrollH / 5), 1000);" onclick="return false;" >&#149;</a>

<a href="#" onmousedown="test.scrollTo(0, Math.round(test.scrollH / 5 * 2), 1000);" onclick="return false;" >&#149;</a>

<a href="#" onmousedown="test.scrollTo(0, Math.round(test.scrollH / 5 * 3), 1000);" onclick="return false;" >&#149;</a>

<a href="#" onmousedown="test.scrollTo(0, Math.round(test.scrollH / 5 * 4), 1000);" onclick="return false;" >&#149;</a>

<a href="#" onmousedown="test.scrollTo(0, test.scrollH, 1000);" onclick="return false;" >&#149;</a>

<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>
     okay, this one"s a bit different...

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.

Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events

okay, this one"s a bit different...

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.

Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events

okay, this one"s a bit different...

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.

Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events

okay, this one"s a bit different...

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.

Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events

okay, this one"s a bit different...

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.

Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events

okay, this one"s a bit different...

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.

Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events

okay, this one"s a bit different...

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.

Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events

okay, this one"s a bit different...

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.

Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events

okay, this one"s a bit different...

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.

Handy for situations when you want the scroll object to be able to scroll at different speeds in response to different events

</body> </html>


 </source>
   
  


Text scroll

   <source lang="html4strict">

Text scrolling example


<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("
") } this.number=KScounter++ this.width=width this.height=height this.speed=speed this.text=text+"
"+text; KS[this.number]=this

} KScrolling.prototype.print=function(){

 if(isMSIE || isMozilla || isOpera5){
return ("
")
 }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>

<script> document.write(S.print()) </script>

<script> if(isNC4){

 onload=function(){S.scroll()}

}else{

 S.scroll();

} </script>

</html>


 </source>
   
  


Text Scroll when clicking

   <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">
 
 </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>
 
    <- mousedown over these links to activate the scroller.

this here is a bunch of content.

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.

before it was just fake content in here. actually, it was the word "content" repeated over and over.

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.

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.

"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...

</body> </html>


 </source>
   
  


Text Scroll when mouse over

   <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">
 
 </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>
     <- mouseover these links to activate the scroller.

this here is a bunch of content.

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.

before it was just fake content in here. actually, it was the word "content" repeated over and over.

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.

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.

"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...

</body> </html>


 </source>
   
  


Vertical scroll (IE)

   <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>

<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>

</head> <body bgcolor="#FFFFFF">

Qiksearch Vertical Scroller

<a href="#" class="link" onmouseover="javascript:reset();Scroll("prem_hint");" onmouseout="javascript:StopScroll("prem_hint");">Move your mouse over</a>

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.

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.

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 <DIV> section and place it wherever you want it in the body. All the required section are marked by the comments <!--BEGIN REQUIRED--&GT; and <!--END REQUIRED-->

scroll_height : Scroll height variable (150 here)
time_length : 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)
begin_pos : Beginning position of hint (20 here)


<a href="mailto:premshree@hotmail.ru" class="link">&#169 Premshree Pillai</a>

</body> </html>


 </source>