Scrollbalken "verschönern"

[harald_muc]

Hallo! Bin nagelneu hier und habe eine riesige Bitte. Ich möchte genau wie hier in vielen Nachrichten erklärt, aber für mich nicht nachvollziehbar, einen sehr schlanken Scrollbar auf meine Seite einbauen.

Bin inzwischen auch bei jScrollPane angekommen und habe auch schon die folg. "Zutaten" runtergeladen: jquery-1.2.6.min.js, jquery.mousewheel.min.js, jquery.em.js, jScrollPane.js und jScrollPane.css. Damit möchte ich erst einmal lokal auf dem PC arbeiten.

Könnte mir bitte jemand genau erklären, wie ich vorgehen muss, um eine so schöne Rollleiste zu erstellen wie die auf der hier erwähnten Seite http://jesusourcaptain.org/testcms/spor ... boardenone. ?

Bitte berücksichtigt, dass ich Anfänger bin und wirklich wissen muss, an welcher Stelle welches Stück Code kopiert werden soll. Danke vielmals.

Grüße, Harald

[nockenfell]

Hallo Harald

Willkommen im Forum!

Als erstes lade die jScrollpane von hier herunter:
http://www.kelvinluck.com/assets/jquery ... lPane.html

Auf dieser Seite findest du auch einige Demos. Nutze zuerst eine solche Demo um eine jScrollPane für deine Seite einzurichten. Wenn du von der Demo aus gehst, kannst du etwas ändern und danach probieren obs immer noch funktioniert. Das ist einfacher als ein direkter Einbau.

Mal Grundsätzliches dazu:

Folgenden Code habe ich beim mir im Einsatz:

Code: Select all

 <__script__ type="text/javascript" src="/template/js/jquery-1.3.2.min.js"></__script>
 <__script__ type="text/javascript" src="/template/js/jquery.mousewheel.js"></__script> 
 <__script__ type="text/javascript" src="/template/js/jScrollPane-1.2.3.min.js"></__script>

 <__script__ type="text/javascript">			
 $(function()	
 {
	 $('#contentscroll').jScrollPane({showArrows:true, dragMaxHeight:50});
 });
			
 </__script>

Das CSS

Code: Select all

a.jScrollArrowUp {
	
}
a.jScrollArrowUp:hover {
	
}

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #ccc;
}
.jScrollPaneDrag {
	position: absolute;
	background: #999999;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background: url(../js/images/jscrollpane/basic_arrow_up.gif) repeat-x 0 0;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}


a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background: url(../js/images/jscrollpane/basic_arrow_down.gif) repeat-x 0 0;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
	/*background-color: #f00;*/
}

Im Template habe ich folgenden groben Aufbau:

Code: Select all

 <div id="contentscroll">
  <div id="content"></div>
</div>

Das div "contentscroll" enthält die Scrollbar