ScrollBar 4 : ScrollBar « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » ScrollBar 
ScrollBar 4
 
<!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">
.Scroller-Container {
  position: absolute;
  top: 0px; left: 0px;
}
.Scrollbar-Up {
  position: absolute;
  width: 10px; height: 10px;
  background-color: #CCC;
  font-size: 0px;
}
.Scrollbar-Track {
  width: 10px; height: 160px;
  position: absolute;
  top: 20px;
  background-color: #EEE;
}
.Scrollbar-Handle {
  position: absolute;
  width: 10px; height: 30px;
  background-color: #CCC;
}
.Scrollbar-Down {
  position: absolute;
  top: 190px;
  width: 10px; height: 10px;
  background-color: #CCC;
  font-size: 0px;
}
#Scrollbar-Container {
  position: absolute;
  top: 50px; left: 460px;
}

#Container {
  position: absolute;
  top: 50px; left: 50px;
  width: 400px;
  height: 200px;
  background-color: #EEE;
}
#News, #About, #Extra 
  position: absolute;
  top: 10px; 
  overflow: hidden;
  width: 400px;
  height: 180px;
  display: none;
}
#News {display: block;}
{
  margin: 0; padding: 0px 20px 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-indent: 20px;
  color: #777;
}
#Navigation {
  position: absolute; 
  top: 30px;
  left: 75px;
}
#Navigation a {
  margin: 5px 2px 0 0;
  padding: 0 5px;
  height: 20px;
  background-color: #E4E4E4;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #AAA;
  text-decoration: none;
  display: block;
  float: left;
  letter-spacing: 1px;
}
#Navigation a:hover {
  margin-top: 0px;
  height: 25px;
}
#Navigation a.current {
  margin-top: 0px;
  height: 25px;
  background-color: #EEE;
  color: #777;
}
</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 > 0x = 0;
    if (y < this.viewableHeight - this.totalHeight
      y = this.viewableHeight - this.totalHeight;
    if (y > 0y = 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.scrollTimerwindow.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 (wthis.viewableWidth  = w;
    if (hthis.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.autothis._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.addEventListenero.addEventListener(t, f, false);
    else if (o.attachEvento.attachEvent('on'+ t, f);
    else o['on'+ t= f;
  };
  this._removeEvent = function (o, t, f) {
    if (o.removeEventListenero.removeEventListener(t, f, false);
    else if (o.detachEvento.detachEvent('on'+ t, f);
    else o['on'+ tnull;
  };
  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._disabledreturn false;
    
    e = e ? e : event;
    if (!e.targete.target = e.srcElement;
    
    if (e.target.className.indexOf("Scrollbar-Up"> -1self._scrollUp(e);
    else if (e.target.className.indexOf("Scrollbar-Down"> -1self._scrollDown(e);
    else if (e.target.className.indexOf("Scrollbar-Track"> -1self._scrollTrack(e);
    else if (e.target.className.indexOf("Scrollbar-Handle"> -1self._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._grabPointtop = "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 >= 120dir = -1;
    if (e.wheelDelta <= -120dir = 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._selectFuncdocument.onselectstart = self._selectFunc;
    else document.onselectstart = function () { return true};
    
    if (self._scrollTimerwindow.clearInterval(self._scrollTimer);
    self.eventHandler (self._tempTarget, "mouseup");
  };
  this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
  this._scrollDown = function (e) {this._startScroll(0this._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 < 0y = 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("News")400180);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, true, scrollbarEvent);
}

function scrollbarEvent (o, type) {
  if (type == "mousedown") {
    if (o.className == "Scrollbar-Track"o.style.backgroundColor = "#E3E3E3";
    else o.style.backgroundColor = "#BBB";
  else {
    if (o.className == "Scrollbar-Track"o.style.backgroundColor = "#EEE";
    else o.style.backgroundColor = "#CCC";
  }
}

function swapIt(o) {
  o.blur();
  if (o.className == "current"return false;
  
  var list = document.getElementById("Navigation").getElementsByTagName("a");
  for (var i = 0; i < list.length; i++) {
    if (list[i].className == "current") {
      list[i].className = "";
      document.getElementById(list[i].title).y = -scroller._y;
    }
    if (list[i].title == o.titleo.className = "current";
  }
  
  list = document.getElementById("Container").childNodes;
  for (var i = 0; i < list.length; i++) {
    if (list[i].tagName == "DIV"list[i].style.display = "none";
  }
  
  var top = document.getElementById(o.title);
  top.style.display = "block";
  scrollbar.swapContent(top);
  if (top.yscrollbar.scrollTo(0, top.y);
  
  return false;
}
</script>
</head>
<body>
<div id="Navigation">
  <a href="#" onclick="return swapIt(this)" title="News" class="current">news</a>
  <a href="#" onclick="return swapIt(this)" title="About">about</a>
  <a href="#" onclick="return swapIt(this)" title="Extra">extra</a>
</div>
<div id="Container">
  <div id="News">
    <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 id="About">
    <div class="Scroller-Container">
      <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>
    </div>
  </div>
  <div id="Extra">
    <div class="Scroller-Container">
      <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>
    </div>
  </div>
</div>
<div id="Scrollbar-Container">
  <div class="Scrollbar-Up"></div>
  <div class="Scrollbar-Down"></div>
  <div class="Scrollbar-Track">
    <div class="Scrollbar-Handle"></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 2
7. ScrollBar 3
8. ScrollBar 5
9. ScrollBar 6
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.