{{indexmenu_n>50}}

====== Scroll-Leiste vert./horiz. ======


**Inhalt in einem <div> Container umschlossen von einer vertikalen und horizontalen Scroll-Leiste (verwendet mootools v1.2.x).** \\
Hier ein Beispiel: [[http://www.isabellathiel.de/de.phtml]].

<note>
Ich verwende hier den eigentlich falschen Ausdruck **Scroll-Leiste** anstatt dem deutschen Begriff **Bildlaufleiste**, da in meinen Augen der Wortteil "Bild" irreführend ist. //(KH)//
</note>


Docu: -- \\
Forum: -- \\
Source: [[http://greghoustondesign.com/examples/mootools/scrollbars/|Greg Houston Design: Vertical & Horizontal Scrollbars with Arrows]]

**Autor:** [[http://planmatrix.de|K.Heermann]] //(flip-flop) (24.09.09)//  \\
**CMS-Version:** >= V1.3.x  \\
**Version:** V1.0  //05.05.09// \\


**Bedingung:**  -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] 
  * $phpwcms['allow_cntPHP_rt']   = 1; 
  * [[english/other-enhancements/mootools/mootools-v12x|mootools v1.2.x]]

\\
**Funktionen:** [[http://greghoustondesign.com/examples/mootools/scrollbars/|Greg Houston Design: Vertical & Horizontal Scrollbars with Arrows]]
  * Die Horizontale Scroll-Leiste kann in den Optionen ausgeschaltet werden.
  * Wenn die Größe des Fensters  verändert wird, verschwinden die Scroll-Leisten wenn diese nicht gebraucht werden oder erscheinen wieder wenn notwendig. Die Darstellung der vertikalen und horizontalen Scroll-Leisten ist unabhängig voneinander, so kann eine sichtbar sein und die andere nicht, je nachdem was gefordert ist.
  * Hinzugekommen: Auf, ab, links und rechts "Pfeile". In diesem Beispiel sind die "Pfeile" nur als Kästchen oberhalb und unterhalb des vertikalen Schiebereglers und an der linken und rechten Seite des horizontalen Schiebereglers ausgebildet. Setze deine gewünschten Grafiken ein (CSS). Die Pfeile können in den Optionen ausgeschaltet werden.
  * Weniger HTML Code ist nun erforderlich. Die Scroll-Leisten werden nun durch den Code eingefügt.


----
----

\\
{{:english:other-enhancements:mootools:scroll_bar01_02_03_export.gif|}}
\\

===== HTML/JS Teil in der Vorlage =====

=== Beispiel 01) (hScroll on) ===

**Setzen Sie den Code in den dafür erzeugten Block "Eigene" (Custom-Block) der hier ##{SCROLLBAR1}## genannt wird.**

Setze **{SCROLLBAR1}** an die Stelle in die Vorlage, an der der Container erscheinen soll.
<code html|h scroll bar |h>
<div id="main1">
 <div id="content1">
  <div class="text">
  {SCROLLBAR1}
  </div>
 </div>	
</div>


<script type="text/javascript">

var scr1 = new ScrollBar('main1', 'content1', {
 'arrows': true,
 'hScroll': true
});
		
new Drag('content1', {
 'modifiers': {y: 'height', x: 'width'},
 'limit': { x:[100], y:[50] },			
  onDrag: function(){
   scr1.update();
  }
});

</script>

[PHP]
$GLOBALS['block']['custom_htmlhead']['mootools.js']   = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['scroll_bar.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/tools/scroll_bar.js" type="text/javascript"></script>';
$GLOBALS['block']['css']['scroll_bar'] = 'specific/mootools/scroll_bar.css';
[/PHP]
</code>

\\

=== Beispiel 02) (hScroll off, keine Größenänderung) ===

**Setzen Sie den Code in den dafür erzeugten Block "Eigene" (Custom-Block) der hier ##{SCROLLBAR2}## genannt wird.**

Setze **{SCROLLBAR2}** an die Stelle in die Vorlage, an der der Container erscheinen soll.
<code html|h scroll bar |h>
<div id="main2">
 <div id="content2">
  <div class="text">
  {SCROLLBAR2}
  </div>
 </div>	
</div>

<script type="text/javascript">

var scr2 = new ScrollBar('main2', 'content2', {
 'arrows': true,
 'hScroll': false
});

</script>

[PHP]
$GLOBALS['block']['custom_htmlhead']['mootools.js']   = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['scroll_bar.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/tools/scroll_bar.js" type="text/javascript"></script>';
$GLOBALS['block']['css']['scroll_bar'] = 'specific/mootools/scroll_bar.css';
[/PHP]
</code>

\\
:!: Schalter **'hScroll': false**. Der **Vergrößerungsteil** //(dragging part)// wurde komplett **entfernt** :!: 


\\

===== Files =====

  * Java Script: **template/inc_js/mootools/tools/scroll_bar.js**
  * CSS Datei: **template/inc_css/specific/mootools/scroll_bar.css**
  * Mootools v1.2.x: **template/inc_js/mootools/mootools.js** //(siehe unten)//

\\

=== JavaScript Datei ===

Filename: **scroll_bar.js** \\
Location: **/template/inc_js/mootools/tools/ ** 

<code js|h scroll_bar.js |h>
	var ScrollBar = new Class({

		Implements: [Events, Options],

		options: {
			maxThumbSize: 15,
			wheel: 8,
			arrows: true,
			hScroll: true // horizontal scrollbars
		},

		initialize: function(main, content, options){
			this.setOptions(options);
			
			this.main = $(main);
			this.content = $(content);
			
			if (this.options.arrows == true){
				this.arrowOffset = 30;
			} else {
				this.arrowOffset = 0;
			}
			
			if (this.options.hScroll == true){
				this.hScrollOffset = 15;
			} else {
				this.hScrollOffset = 0;
			}				

			this.vScrollbar = new Element('div', {
					'class': 'vScrollbar'
				}).injectAfter(this.content);

			if (this.options.arrows == true){
				this.arrowUp = new Element('div', {
						'class': 'arrowUp'
					}).injectInside(this.vScrollbar);
			}	

			this.vTrack = new Element('div', {
					'class': 'vTrack'
				}).injectInside(this.vScrollbar);
				
			this.vThumb = new Element('div', {
					'class': 'vThumb'
				}).injectInside(this.vTrack);

			if (this.options.arrows == true){
				this.arrowDown = new Element('div', {
						'class': 'arrowDown'
					}).injectInside(this.vScrollbar);
			}
			
			this.hScrollbar = new Element('div', {
					'class': 'hScrollbar'
				}).injectAfter(this.vScrollbar);

			if (this.options.arrows == true){
				this.arrowLeft = new Element('div', {
						'class': 'arrowLeft'
					}).injectInside(this.hScrollbar);
			}

			this.hTrack = new Element('div', {
					'class': 'hTrack'
				}).injectInside(this.hScrollbar);
				
			this.hThumb = new Element('div', {
					'class': 'hThumb'
				}).injectInside(this.hTrack);
	
			if (this.options.arrows == true){
				this.arrowRight = new Element('div', {
						'class': 'arrowRight'
					}).injectInside(this.hScrollbar);
			}

			this.corner = new Element('div', {
					'class': 'corner'
				}).injectAfter(this.hScrollbar);
			
			this.bound = {
				'vStart': this.vStart.bind(this),
				'hStart': this.hStart.bind(this),
				'end': this.end.bind(this),
				'vDrag': this.vDrag.bind(this),
				'hDrag': this.hDrag.bind(this),
				'wheel': this.wheel.bind(this),
				'vPage': this.vPage.bind(this),
				'hPage': this.hPage.bind(this)
			};

			this.vPosition = {};
			this.hPosition = {};
			this.vMouse = {};
			this.hMouse = {};
			this.update();
			this.attach();
		},

		update: function(){

// Patch: No horizontal movable main container solves a problem with scrolled content
// http://forum.mootools.net/viewtopic.php?id=6711#post-34283  (Forum closed)
//		this.content.setStyle('height', this.main.getStyle('height').toInt() - this.hScrollOffset); //instead of +
//		this.vTrack.setStyle('height', this.content.getStyle('height').toInt() - this.arrowOffset);
 
//		this.content.setStyle('width', this.main.getStyle('width').toInt() - 15); //instead of + 15
// ----- End patch 

// original horizontal mouse movable main container
			this.main.setStyle('height', this.content.offsetHeight + this.hScrollOffset);
			this.vTrack.setStyle('height', this.content.offsetHeight - this.arrowOffset);
			
			this.main.setStyle('width', this.content.offsetWidth + 15);

			this.hTrack.setStyle('width', this.content.offsetWidth - this.arrowOffset);
			
			// Remove and replace vertical scrollbar
			if (this.content.scrollHeight <= this.main.offsetHeight) {
				this.vScrollbar.setStyle('display', 'none');
				if (this.options.hScroll == true){
					this.hTrack.setStyle('width', this.hTrack.offsetWidth + 15);
				}	
				this.content.setStyle('width', this.content.offsetWidth + 15);
			} else {
				this.vScrollbar.setStyle('display', 'block');
			}
			
			if (this.options.hScroll == true){
			
				// Remove and replace horizontal scrollbar
				if (this.content.scrollWidth <= this.main.offsetWidth) {
					this.hScrollbar.setStyle('display', 'none');
					this.vTrack.setStyle('height', this.vTrack.offsetHeight + this.hScrollOffset);
					this.content.setStyle('height', this.content.offsetHeight + this.hScrollOffset);	
				} else {
					this.hScrollbar.setStyle('display', 'block');
				}
			
				// Remove and replace bottom right corner spacer
				if (this.content.scrollHeight <= this.main.offsetHeight || this.content.scrollWidth <= this.main.offsetWidth) {
					this.corner.setStyle('display', 'none');
				} else {
					this.corner.setStyle('display', 'block');
				}
			
				// Horizontal

				this.hContentSize = this.content.offsetWidth;
				this.hContentScrollSize = this.content.scrollWidth;
				this.hTrackSize = this.hTrack.offsetWidth;

				this.hContentRatio = this.hContentSize / this.hContentScrollSize;

				this.hThumbSize = (this.hTrackSize * this.hContentRatio).limit(this.options.maxThumbSize, this.hTrackSize);

				this.hScrollRatio = this.hContentScrollSize / this.hTrackSize;

				this.hThumb.setStyle('width', this.hThumbSize);

				this.hUpdateThumbFromContentScroll();
				this.hUpdateContentFromThumbPosition();

			} else {
					this.hScrollbar.setStyle('display', 'none');
					this.corner.setStyle('display', 'none');
			}
			

			// Vertical
			
			this.vContentSize = this.content.offsetHeight;
			this.vContentScrollSize = this.content.scrollHeight;
			this.vTrackSize = this.vTrack.offsetHeight;

			this.vContentRatio = this.vContentSize / this.vContentScrollSize;

			this.vThumbSize = (this.vTrackSize * this.vContentRatio).limit(this.options.maxThumbSize, this.vTrackSize);

			this.vScrollRatio = this.vContentScrollSize / this.vTrackSize;

			this.vThumb.setStyle('height', this.vThumbSize);

			this.vUpdateThumbFromContentScroll();
			this.vUpdateContentFromThumbPosition();
			
		},

		vUpdateContentFromThumbPosition: function(){
			this.content.scrollTop = this.vPosition.now * this.vScrollRatio;
		},
		
		hUpdateContentFromThumbPosition: function(){
			this.content.scrollLeft = this.hPosition.now * this.hScrollRatio;
		},		

		vUpdateThumbFromContentScroll: function(){
			this.vPosition.now = (this.content.scrollTop / this.vScrollRatio).limit(0, (this.vTrackSize - this.vThumbSize));
			this.vThumb.setStyle('top', this.vPosition.now);
		},
		
		hUpdateThumbFromContentScroll: function(){
			this.hPosition.now = (this.content.scrollLeft / this.hScrollRatio).limit(0, (this.hTrackSize - this.hThumbSize));
			this.hThumb.setStyle('left', this.hPosition.now);
		},		

		attach: function(){
			this.vThumb.addEvent('mousedown', this.bound.vStart);
			if (this.options.wheel) this.content.addEvent('mousewheel', this.bound.wheel);
			this.vTrack.addEvent('mouseup', this.bound.vPage);
			
			this.hThumb.addEvent('mousedown', this.bound.hStart);
			this.hTrack.addEvent('mouseup', this.bound.hPage);
			
			if (this.options.arrows == true){
				this.arrowUp.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollTop -= this.options.wheel;
						this.vUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
			
				this.arrowUp.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowUp.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
						
				this.arrowDown.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollTop += this.options.wheel;
						this.vUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
			
				this.arrowDown.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowDown.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowLeft.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollLeft -= this.options.wheel;
						this.hUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
			
				this.arrowLeft.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowLeft.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowRight.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollLeft += this.options.wheel;
						this.hUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
			
				this.arrowRight.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowRight.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
			}			
						
		},
		
		wheel: function(event){
			this.content.scrollTop -= event.wheel * this.options.wheel;
			this.vUpdateThumbFromContentScroll();
			event.stop();
		},

		vPage: function(event){
			if (event.page.y > this.vThumb.getPosition().y) this.content.scrollTop += this.content.offsetHeight;
			else this.content.scrollTop -= this.content.offsetHeight;
			this.vUpdateThumbFromContentScroll();
			event.stop();
		},
		
		hPage: function(event){
			if (event.page.x > this.hThumb.getPosition().x) this.content.scrollLeft += this.content.offsetWidth;
			else this.content.scrollLeft -= this.content.offsetWidth;
			this.hUpdateThumbFromContentScroll();
			event.stop();
		},		

		vStart: function(event){
			this.vMouse.start = event.page.y;
			this.vPosition.start = this.vThumb.getStyle('top').toInt();
			document.addEvent('mousemove', this.bound.vDrag);
			document.addEvent('mouseup', this.bound.end);
			this.vThumb.addEvent('mouseup', this.bound.end);
			event.stop();
		},
		
		hStart: function(event){
			this.hMouse.start = event.page.x;		
			this.hPosition.start = this.hThumb.getStyle('left').toInt();
			document.addEvent('mousemove', this.bound.hDrag);
			document.addEvent('mouseup', this.bound.end);
			this.hThumb.addEvent('mouseup', this.bound.end);
			event.stop();
		},		

		end: function(event){
			document.removeEvent('mousemove', this.bound.vDrag);
			document.removeEvent('mousemove', this.bound.hDrag);			
			document.removeEvent('mouseup', this.bound.end);
			this.vThumb.removeEvent('mouseup', this.bound.end);
			this.hThumb.removeEvent('mouseup', this.bound.end);			
			event.stop();
		},

		vDrag: function(event){
			this.vMouse.now = event.page.y;
			this.vPosition.now = (this.vPosition.start + (this.vMouse.now - this.vMouse.start)).limit(0, (this.vTrackSize - this.vThumbSize));
			this.vUpdateContentFromThumbPosition();
			this.vUpdateThumbFromContentScroll();
			event.stop();
		},
		
		hDrag: function(event){
			this.hMouse.now = event.page.x;
			this.hPosition.now = (this.hPosition.start + (this.hMouse.now - this.hMouse.start)).limit(0, (this.hTrackSize - this.hThumbSize));
			this.hUpdateContentFromThumbPosition();
			this.hUpdateThumbFromContentScroll();
			event.stop();
		}

	});
</code>


\\

=== CSS Datei ===

Dateiname: **scroll_bar.css** \\
Verzeichnis: **/template/inc_css/specific/mootools/ ** 


<code css|h scroll_bar.css |h>
#main1, #main2 {
		width: 320px; /* 700px; */
		height: 225px;
		border: 1px solid #111;
		background: #ff3300;
}
#main1, #main2 {
		margin: 20px 0 0 20px;
}

#content1, #content2 {
		width: 320px; /* 700px; */
		height: 225px;
		float: left;
		overflow: hidden;
		color: #fff;
}

.text {
		margin: 10px;
}

.vScrollbar {
		float: left;
}

.hScrollbar {
		clear: both;
}

.vTrack {
		height: 300px;
		width: 15px;
		position: relative;
		background: #ddd;
		overflow: hidden;
}

.hTrack {
		float: left;
		height: 15px;
		width:  255px; /*635px; */
		position: relative;
		background: #ddd;
		overflow: hidden;
}

.vThumb, .hThumb {
		position: absolute;
		top: 0;
		left: 0;
		height: 15px;
		width: 15px;
		background: #aaa;
		overflow: hidden;
}

.arrowUp, .arrowDown, .arrowLeft, .arrowRight, .corner {
		height: 15px;
		width: 15px;
		background: #777;
		overflow: hidden;
}

.arrowLeft, .arrowRight, .corner {
		float: left;
}

.corner {
		background: #000;
}
</code>

\\

=== Mootools V1.2.x Setup ===

<note important>
Wenn Sie mootools v1.2.x im FE verwenden, müssen auch alle anderen Komponenten wie SlimBox, Accordion u.s.w. v1.2.x konform erneuert werden -> [[english/other-enhancements/mootools/mootools-v12x|mootools-v12x]].

\\
**Die Skrollleiste verlangt:**  //([[english/other-enhancements/mootools/mootools-v12x#download|vorbereitetes mootools Set]])//  
    * [[http://mootools.net/core|MooTools Core]]
    * [[http://mootools.net/more|MooTools More]]
      * Drag: Drag
</note>