Scrollbar 2 : ScrollBar « GUI Components « JavaScript DHTML






Scrollbar 2

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jsScrollbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.Container {
  position: absolute;
  top: 50px; left: 100px;
  width: 400px;
  height: 200px;
  background: #FFF url(images/container_background.gif) no-repeat;
}
#Scroller-1 { 
  position: absolute; 
  overflow: hidden;
  width: 400px;
  height: 200px;
}
#Scroller-1 p {
  margin: 0; padding: 10px 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-indent: 20px;
  color: #6F6048;
}
.Scroller-Container {
  position: absolute;
  top: 0px; left: 0px;
}
#Scrollbar-Container {
  position: absolute;
  top: 40px; left: 60px;
}
.Scrollbar-Up {
  cursor: pointer;
  position: absolute;
}
.Scrollbar-Track {
  width: 20px; height: 161px;
  position: absolute;
  top: 36px; left: 4px;
  background: transparent url(scrollImages/scrollbar_track.gif) no-repeat center center;
}
.Scrollbar-Handle {
  position: absolute;
  width: 20px; height: 22px;
}
.Scrollbar-Down {
  cursor: pointer;
  position: absolute;
  top: 187px;
}
</style>
<script type="text/javascript">
//Written by Nathan Faubion: http://n-son.com
//Use this or edit how you want, just give me
//some credit!

function jsScroller (o, w, h) {
  var self = this;
  var list = o.getElementsByTagName("div");
  for (var i = 0; i < list.length; i++) {
    if (list[i].className.indexOf("Scroller-Container") > -1) {
      o = list[i];
    }
  }
  
  //Private methods
  this._setPos = function (x, y) {
    if (x < this.viewableWidth - this.totalWidth) 
      x = this.viewableWidth - this.totalWidth;
    if (x > 0) x = 0;
    if (y < this.viewableHeight - this.totalHeight) 
      y = this.viewableHeight - this.totalHeight;
    if (y > 0) y = 0;
    this._x = x;
    this._y = y;
    with (o.style) {
      left = this._x +"px";
      top  = this._y +"px";
    }
  };
  
  //Public Methods
  this.reset = function () {
    this.content = o;
    this.totalHeight = o.offsetHeight;
    this.totalWidth   = o.offsetWidth;
    this._x = 0;
    this._y = 0;
    with (o.style) {
      left = "0px";
      top  = "0px";
    }
  };
  this.scrollBy = function (x, y) {
    this._setPos(this._x + x, this._y + y);
  };
  this.scrollTo = function (x, y) {
    this._setPos(-x, -y);
  };
  this.stopScroll = function () {
    if (this.scrollTimer) window.clearInterval(this.scrollTimer);
  };
  this.startScroll = function (x, y) {
    this.stopScroll();
    this.scrollTimer = window.setInterval(
      function(){ self.scrollBy(x, y); }, 40
    );
  };
  this.swapContent = function (c, w, h) {
    o = c;
    var list = o.getElementsByTagName("div");
    for (var i = 0; i < list.length; i++) {
      if (list[i].className.indexOf("Scroller-Container") > -1) {
        o = list[i];
      }
    }
    if (w) this.viewableWidth  = w;
    if (h) this.viewableHeight = h;
    this.reset();
  };
  
  //variables
  this.content = o;
  this.viewableWidth  = w;
  this.viewableHeight = h;
  this.totalWidth   = o.offsetWidth;
  this.totalHeight = o.offsetHeight;
  this.scrollTimer = null;
  this.reset();
};
</script>
<script type="text/javascript">
//Written by Nathan Faubion: http://n-son.com
//Use this or edit how you want, just give me
//some credit!
function jsScrollbar (o, s, a, ev) {
  var self = this;
  
  this.reset = function () {
    //Arguments that were passed
    this._parent = o;
    this._src    = s;
    this.auto    = a ? a : false;
    this.eventHandler = ev ? ev : function () {};
    //Component Objects
    this._up   = this._findComponent("Scrollbar-Up", this._parent);
    this._down = this._findComponent("Scrollbar-Down", this._parent);
    this._yTrack  = this._findComponent("Scrollbar-Track", this._parent);
    this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
    //Height and position properties
    this._trackTop = findOffsetTop(this._yTrack);
    this._trackHeight  = this._yTrack.offsetHeight;
    this._handleHeight = this._yHandle.offsetHeight;
    this._x = 0;
    this._y = 0;
    //Misc. variables
    this._scrollDist  = 5;
    this._scrollTimer = null;
    this._selectFunc  = null;
    this._grabPoint   = null;
    this._tempTarget  = null;
    this._tempDistX   = 0;
    this._tempDistY   = 0;
    this._disabled    = false;
    this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
    
    this._yHandle.ondragstart  = function () {return false;};
    this._yHandle.onmousedown = function () {return false;};
    this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
    this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
    this._addEvent(this._parent, "mousedown", this._scrollbarClick);
    
    this._src.reset();
    with (this._yHandle.style) {
      top  = "0px";
      left = "0px";
    }
    this._moveContent();
    
    if (this._src.totalHeight < this._src.viewableHeight) {
      this._disabled = true;
      this._yHandle.style.visibility = "hidden";
      if (this.auto) this._parent.style.visibility = "hidden";
    } else {
      this._disabled = false;
      this._yHandle.style.visibility = "visible";
      this._parent.style.visibility  = "visible";
    }
  };
  this._addEvent = function (o, t, f) {
    if (o.addEventListener) o.addEventListener(t, f, false);
    else if (o.attachEvent) o.attachEvent('on'+ t, f);
    else o['on'+ t] = f;
  };
  this._removeEvent = function (o, t, f) {
    if (o.removeEventListener) o.removeEventListener(t, f, false);
    else if (o.detachEvent) o.detachEvent('on'+ t, f);
    else o['on'+ t] = null;
  };
  this._findComponent = function (c, o) {
    var kids = o.childNodes;
    for (var i = 0; i < kids.length; i++) {
      if (kids[i].className && kids[i].className == c) {
        return kids[i];
      }
    }
  };
  //Thank you, Quirksmode
  function findOffsetTop (o) {
    var t = 0;
    if (o.offsetParent) {
      while (o.offsetParent) {
        t += o.offsetTop;
        o  = o.offsetParent;
      }
    }
    return t;
  };
  this._scrollbarClick = function (e) {
    if (self._disabled) return false;
    
    e = e ? e : event;
    if (!e.target) e.target = e.srcElement;
    
    if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
    else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
    else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
    else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
    
    self._tempTarget = e.target;
    self._selectFunc = document.onselectstart;
    document.onselectstart = function () {return false;};
    
    self.eventHandler(e.target, "mousedown");
    self._addEvent(document, "mouseup", self._stopScroll, false);
    
    return false;
  };
  this._scrollbarDrag = function (e) {
    e = e ? e : event;
    var t = parseInt(self._yHandle.style.top);
    var v = e.clientY + document.body.scrollTop - self._trackTop;
    with (self._yHandle.style) {
      if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
        top = self._trackHeight - self._handleHeight +"px";
      else if (v <= self._grabPoint) top = "0px";
      else top = v - self._grabPoint +"px";
      self._y = parseInt(top);
    }
    
    self._moveContent();
  };
  this._scrollbarWheel = function (e) {
    e = e ? e : event;
    var dir = 0;
    if (e.wheelDelta >= 120) dir = -1;
    if (e.wheelDelta <= -120) dir = 1;
    
    self.scrollBy(0, dir * 20);
    e.returnValue = false;
  };
  this._startScroll = function (x, y) {
    this._tempDistX = x;
    this._tempDistY = y;
    this._scrollTimer = window.setInterval(function () {
      self.scrollBy(self._tempDistX, self._tempDistY); 
    }, 40);
  };
  this._stopScroll = function () {
    self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
    self._removeEvent(document, "mouseup", self._stopScroll, false);
    
    if (self._selectFunc) document.onselectstart = self._selectFunc;
    else document.onselectstart = function () { return true; };
    
    if (self._scrollTimer) window.clearInterval(self._scrollTimer);
    self.eventHandler (self._tempTarget, "mouseup");
  };
  this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
  this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
  this._scrollTrack = function (e) {
    var curY = e.clientY + document.body.scrollTop;
    this._scroll(0, curY - this._trackTop - this._handleHeight/2);
  };
  this._scrollHandle = function (e) {
    var curY = e.clientY + document.body.scrollTop;
    this._grabPoint = curY - findOffsetTop(this._yHandle);
    this._addEvent(document, "mousemove", this._scrollbarDrag, false);
  };
  this._scroll = function (x, y) {
    if (y > this._trackHeight - this._handleHeight) 
      y = this._trackHeight - this._handleHeight;
    if (y < 0) y = 0;
    
    this._yHandle.style.top = y +"px";
    this._y = y;
    
    this._moveContent();
  };
  this._moveContent = function () {
    this._src.scrollTo(0, Math.round(this._y * this._ratio));
  };
  
  this.scrollBy = function (x, y) {
    this._scroll(0, (-this._src._y + y)/this._ratio);
  };
  this.scrollTo = function (x, y) {
    this._scroll(0, y/this._ratio);
  };
  this.swapContent = function (o, w, h) {
    this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
    this._src.swapContent(o, w, h);
    this.reset();
  };
  
  this.reset();
};
</script>
<script type="text/javascript">
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
</script>
</head>
<body>
<div id="Scrollbar-Container">
    <img src="scrollImages/up_arrow.gif" class="Scrollbar-Up" />
    <img src="scrollImages/down_arrow.gif" class="Scrollbar-Down" />
    <div class="Scrollbar-Track">
      <img src="scrollImages/scrollbar_handle.gif" class="Scrollbar-Handle" />
    </div>
  </div>
<div class="Container">
  
  <div id="Scroller-1">
   <div class="Scroller-Container">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
    </div>
  </div>
</div>
</body>
</html>

   
     
  








Related examples in the same category

1.Custom scroll bar 2
2.Custom Scroll bar 1
3.Custom Scrollbar
4.ScrollBar with background image
5.Scroll bar 1
6.ScrollBar 3
7.ScrollBar 4
8.ScrollBar 5
9.ScrollBar 6