Maximilian
Mitglied
Hey Leute,
bräuchte mal dringend euren Rat ;-)) Irgendwie bin ich Unfähig, einen Code einer Scrollbar bei mir in einem HTML-Doc. einzufügen ;((
Hier der Link: Control.ScrollBar : Pure JavaScript/CSS scroll bars for Prototype
Ich habe bereits ein simples HTML-Doc. geschrieben, den CSS, HTML und JS Code eingefügt, doch es funktioniert nicht...
Ich weiß nicht ob ihr meinen Code brauchen könnt, ich hau ihn einfach mal hier rein ;-))
So ich hoffe ihr könnt mir helfen, ich weiß auch nicht wieso es nicht klappt...
LG
Maximilian
bräuchte mal dringend euren Rat ;-)) Irgendwie bin ich Unfähig, einen Code einer Scrollbar bei mir in einem HTML-Doc. einzufügen ;((
Hier der Link: Control.ScrollBar : Pure JavaScript/CSS scroll bars for Prototype
Ich habe bereits ein simples HTML-Doc. geschrieben, den CSS, HTML und JS Code eingefügt, doch es funktioniert nicht...
Ich weiß nicht ob ihr meinen Code brauchen könnt, ich hau ihn einfach mal hier rein ;-))
HTML:
<html>
<head>
<style type="text/css">
#scrollbar_container {
position:relative;
width:500px;
background-color:silver;
}
#scrollbar_track {
position:absolute;
top:0;
rightright:0;
height:100%;
width:10px;
background-color:transparent;
cursor:move;
}
#scrollbar_handle {
width:10px;
background-color:#5c92e7;
cursor:move;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
opacity:0.9;
-moz-opacity:0.9;
}
#scrollbar_content {
font-family:Arial, sans-serif;
font-size:15px;
background-color:yellow;
overflow:hidden;
width:485px;
height:250px;
}
</style>
</head>
<body>
<div id="scrollbar_container">
<div id="scrollbar_track"><div id="scrollbar_handle"></div></div>
<div id="scrollbar_content">
Am 28. Spieltag der Fußball-Bundesliga kommt es zum fränkisch-bayerischen Derby zwischen dem 1. FC Nürnberg und dem FC Bayern München. Der Rekordmeister kann nach dem gestrigen Ausrutscher von Meister Dortmund gegen Stuttgart (4:4) mit einem Auswärtserfolg den Rückstand auf den Spitzenreiter auf drei Zähler verkürzen. Die Hausherren dagegen möchten ihre Durststrecke von sieben sieglosen Spielen gegen den Rivalen von der Isar beenden und sich mit einem Heimerfolg im Mittelfeld festsetzen. Zweimal Abstiegskampf pur: Gelingt dem Hamburger SV der Befreiungsschlag beim seit 17 Spielgen sieglosen Tabellenschlusslicht 1. FC Kaiserslautern? Mit einem Auswärtssieg könnten die Hanseaten vom Relegationsplatz auf einen Nichtabstiegsplatz klettern. Die Pfälzer stehen unter noch stärkerem unter Druck: Der FCK muss gewinnen, um noch eine reelle Chance zu haben, die Klasse zu halten. im zweiten Abstiegskrimi empfängt der 1. FC Köln (Rang 14) den Tabellennachbarn FC Augsburg (Rang 15). Auch diese beiden Teams brauchen dringend einen Erfolg im Kampf um den Klassenerhalt. In den Duellen Leverkusen gegen Freiburg und Werder Bremen gegen den 1. FSV Mainz 05 geht für die Gastgeber um die Qualifikation für die Europa League, während die Gäste Punkte im Abstiegskampf benötigen.
</div>
</div>
<script type="text/javascript">
var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
$('scroll_down_50').observe('click',function(event){
scrollbar.scrollBy(-50);
event.stop();
});
$('scroll_up_50').observe('click',function(event){
scrollbar.scrollBy(50);
event.stop();
});
$('scroll_top').observe('click',function(event){
scrollbar.scrollTo('top');
event.stop();
});
$('scroll_bottom').observe('click',function(event){
//to animate a scroll operation you can pass true
//or a callback that will be called when scrolling is complete
scrollbar.scrollTo('bottom',function(){
if(typeof(console) != "undefined")
console.log('Finished scrolling to bottom.');
});
event.stop();
});
$('scroll_second').observe('click',function(event){
//you can pass a number or element to scroll to
//if you pass an element, it will be centered, unless it is
//near the bottom of the container
scrollbar.scrollTo($('second_subhead'));
event.stop();
});
$('scroll_third').observe('click',function(event){
//passing true will animate the scroll
scrollbar.scrollTo($('third_subhead'),true);
event.stop();
});
$('scroll_insert').observe('click',function(event){
$('scrollbar_content').insert('<p><b>Inserted: ' + $('repeat').innerHTML + '</b></p>');
//you only need to call this if ajax or dom operations modify the layout
//this is automatically called when the window resizes
scrollbar.recalculateLayout();
event.stop();
});
</script>
</body>
</html>So ich hoffe ihr könnt mir helfen, ich weiß auch nicht wieso es nicht klappt...
LG
Maximilian
