ScrollBar with background image : ScrollBar : GUI Components : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
PHP


JavaScript DHTML  »  GUI Components   » [  ScrollBar  ]   
 



ScrollBar with background image


<html>
<head>
<title>DynAPI Examples - ScrollBar</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
  dynapi.library.setPath('./dynapisrc/');
  dynapi.library.include('dynapi.api');
  dynapi.library.include('ScrollBar');
  dynapi.library.include('ButtonFlatStyle'); // (optional)
  dynapi.library.include('ButtonImageStyle'); // (optional)
</script>
<script language="Javascript">

  //Styles.addStyle('ScrollBarButton',ButtonFlatStyle);

  vbar=new ScrollBar('vert',100,100,200,0,50)
  vbar.setSmallChange(1);
  vbar.setLargeChange(10);
  vbar.onscroll=function(e){
    status=vbar.getValue()
  }

  hbar=new ScrollBar('horz',150,100,100,1,50)
  hbar.setSmallChange(1);
  hbar.setLargeChange(5);
  //hbar.setLocalStyleAttribute('backColor','#C0C0C0');
  //hbar.btnUp.setStyle('ButtonFlat');
  hbar.onscroll=function(e){
    status=hbar.getValue();
  }

  dynapi.document.addChild(hbar)
  dynapi.document.addChild(vbar)

  var s = ButtonImageStyle();
  s.setStyleAttribute('imageOff',dynapi.functions.getImage('./dynapiexamples/images/btn_sbar_off.gif',16,16));
  s.setStyleAttribute('imageOn',dynapi.functions.getImage('./dynapiexamples/images/btn_sbar_on.gif',16,16));
  Styles.addStyle('GreenButton',s);

  var xbar = new ScrollBar('vert',120,100,200,0,150)
  xbar.setLocalStyleAttribute('imageTrack',dynapi.functions.getImage('./dynapiexamples/images/sbarbg.gif',16,16));
  xbar.btnUp.setStyle('GreenButton');
  xbar.btnDown.setStyle('GreenButton');
  xbar.knob.setLocalStyleAttribute('backColor','#269A01');
  xbar.knob.setLocalStyleAttribute('borderColor','green');
  xbar.knob.setLocalStyleAttribute('lightColor','#53CE0F');
  xbar.setSmallChange(1);
  xbar.setLargeChange(10);
  xbar.onscroll=function(e){
    status=xbar.getValue()
  }

  dynapi.document.addChild(xbar)

</script>
</head>
<body bgcolor="#ffffff">
<a href="#" onclick="hbar.setSize(null,hbar.h+10)">Adjust Vert-bar Height</a>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>

           
       
Download: dynapi.zip   ( 791  K )  
Related examples in the same category
1.  Custom scroll bar 2Has Download File
2.  Custom Scroll bar 1
3.  Custom Scrollbar
























Home| Contact Us
Copyright 2003 - 07 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.