Farbige Scrollbalken

Geschafft! :eek:
Anführungszeichen und eine Zeile in meiner Testdatei haben mir Stunden meiner schwindenden Jugend gekostet. Hier diese Zeile: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Eine Frage habe ich aber noch. Ich habe CSS und die JS Variante getestet, das Ergebnis ist in JS aber auf jeden Fall überzeugender. Ist das bei euch auch so?

Ach, doch noch eine Frage: Kann man für Opera und Netscape die färbigen Scrollbars gängig machen? Habs bei beiden versucht, war aber nix zu machen.

Danke für die Unterstützung :D an alle.
 
Opera 7.50 unterstützt jetzt auch farbige Scrollbalken!
muss in den Einstellungen allerdings erst aktiviert werden!
 
Die ganze Diskussion ist ja schon etwas älter, aber ich habe es geschafft, ein iFrame zu bastelt, das als Scrollbalken Bilder verwendet:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>

<body onload="start()" style="margin:0px;">
<table style="margin:5px 3px 5px 3px;"><tr><td>
<iframe name="klein" id="klein" border="0" src="sortieren.html" height=200 width=400 scrolling="no" style="margin:0px;"></iframe>
</td>
<td style="position:relative;vertical-align:top;">
<div id="ausrichtung" style="position:relative;">
<img src="scrollbar_rauf.png" id="^" style="position:absolute;top:0px;" onmousedown="scrollen(-1)" onmouseout="javascript:clearInterval(sc);" onmouseup="javascript:clearInterval(sc);">
<div id="o" style="height:22px;width:12px;background-image:url(scrollbar.png);position:absolute;top:0px;z-index:10;" onmousedown="javascript:fest(this);"></div>
<img src="scrollbar_runter.png" id="v" style="position:absolute;bottom:0px;" onmousedown="scrollen(1)" onmouseout="javascript:clearInterval(sc);" onmouseup="javascript:clearInterval(sc);" ></td>
</div></tr></table><br><br><br><br>
</body>
<script>
var faktor;
document.onmousemove = Maus;
window.onscroll = mauss;
document.onscroll = mauss;
document.onmouseup = los;

function start(){
        document.getElementById("o").style.top = document.getElementById("^").offsetHeight+"px";
        document.getElementById("ausrichtung").style.height=document.getElementById("klein").offsetHeight+"px";

        klein.window.scrollTo(0,1000000000);

        faktor = scrollposition("klein")/(document.getElementById("klein").offsetHeight-(document.getElementById("v").offsetHeight+document.getElementById("^").offsetHeight+document.getElementById("o").offsetHeight));
        klein.window.scrollTo(0,0);

        klein.document.onmousemove = Maus;
        klein.document.onmouseup = los;
        //brauch' ich, da im IE aus unerfindlichen Gründen das manchmal gelöscht wird;
        setInterval("klein.window.onscroll = scrollen_schieber",100);
}

var sc;
function scrollen(wert){
         sc = setInterval("klein.window.scrollBy(0,"+wert+");",10);
}

function scrollen_schieber(){
         document.getElementById("o").style.top = scrollposition("klein")/faktor + document.getElementById("^").offsetHeight+"px";
}
function scrollposition(frame){
         var klein = window[frame];
         var s=0;
         if (klein.window.pageYOffset){
              s = klein.window.pageYOffset;
         }
         else {
            s = klein.document.body.scrollTop;
         }
         return s;
}



var maus = new Array (0,0);
var aktive=null;
var pos=new Array(0,0);
var scroll = new Array(0,0);
function bewegen(){
         if (aktive){
            if (maus[1]-pos[1]>document.getElementById("^").offsetHeight){
               if (maus[1]-pos[1]<document.getElementById("klein").offsetHeight-document.getElementById("v").offsetHeight - document.getElementById("o").offsetHeight){
                  //aktive.style.top=maus[1]-pos[1]+"px";
                  klein.window.scrollTo(0,faktor*(maus[1]-pos[1]-document.getElementById("^").offsetHeight));
               }
               else {
                  //aktive.style.top=document.getElementById("klein").offsetHeight-document.getElementById("v").offsetHeight - document.getElementById("o").offsetHeight+"px";
                  klein.window.scrollTo(0,faktor*(document.getElementById("klein").offsetHeight-document.getElementById("v").offsetHeight - document.getElementById("o").offsetHeight - (document.getElementById("^").offsetHeight)));
               }
            }
            else {
                 //aktive.style.top=document.getElementById("^").offsetHeight+"px";
                 klein.window.scrollTo(0,0);
            }
         }
}
function fest(objekt){
         aktive=objekt
         pos[0]=maus[0]-(aktive.style.left.substring(0,aktive.style.left.length-2));
         pos[1]=maus[1]-(aktive.style.top.substring(0,aktive.style.top.length-2));
         aktive.style.cursor='s-resize';
}
function los(){
         if (aktive){
            aktive.style.cursor='default';
            aktive=null;
         }
}
function Maus(Ereignis){
         var plus = new Array(0,0);
         if (!Ereignis){
            Ereignis = window.event;
            if (!Ereignis){
               Ereignis = klein.window.event;
               plus = xy_koord(document.getElementById("klein"));
            }
         }
         if (Ereignis.clientX){
            maus = new Array(Ereignis.clientX+plus[0], (Ereignis.clientY+plus[1]));
         }
         bewegen();
}

function mauss(Ereignis){
         if (window.pageXOffset){
              scroll[0] = window.pageXOffset;
              scroll[1] = window.pageYOffset;
         }
         else {
            scroll[0] = document.body.scrollLeft;
            scroll[1] = document.body.scrollTop;
         }
         bewegen();
}

function xy_koord(node){
         var ort=new Array(node.offsetLeft, node.offsetTop);
         var Eltern = node.offsetParent;
         while (Eltern) {
               ort[0] += Eltern.offsetLeft;
               ort[1] += Eltern.offsetTop;
               Eltern=Eltern.offsetParent;
         }
         return ort;
}
</script>

</html>

Ist zwar noch nicht perfekt, aber ein Anfang
 
Hallo zusammen,
ich bin ein absoluter newbe in JavaScript und arbeite der zeit an an einem Fotoalbum für einen Freund in Typo3. Die extension verwendet mootools welches ich auch zur Vermeidung von Konfliken verwenden.

auf der webseite http://www.solutoire.com/experiments/scrollbar/index.html gibt es eine schöne lösung für scrollbars in DIV elementen diese Funktioniert auch super. allein bzw. wenn ich in meinem Template nur text einfüge. Lasse ich allerdings den Div externalthumbs dynamisch füllen streikt die scroolbar!

Hier das script


Code:
function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
				var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
				var slider = new Slider(scrollbar, handle, {	
					steps: steps,
					mode: (horizontal?'horizontal':'vertical'),
					onChange: function(step){
						// Scrolls the content element in x or y direction.
						var x = (horizontal?step:0);
						var y = (horizontal?0:step);
						content.scrollTo(x,y);
					}
				}).set(0);
				if( !(ignoreMouse) ){
					// Scroll the content element when the mousewheel is used within the 
					// content or the scrollbar element.
					$$(content, scrollbar).addEvent('mousewheel', function(e){	
						e = new Event(e).stop();
						var step = slider.step - e.wheel * 30;	
						slider.set(step);					
					});
				}
				// Stops the handle dragging process when the mouse leaves the document body.
				$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
			}
						
			window.addEvent('domready', function(){				
				// -- first example, vertical scrollbar --
				makeScrollbar( $('externalthumbs'), $('scrollbar1'), $('handle1') );
				// -- second example, horizontal scrollbar --
				makeScrollbar( $('content2'), $('scrollbar2'), $('handle2'), true );
				// -- third example, horizontal and vertical scrollbars
				makeScrollbar( $('content3'), $('scrollbar3'), $('handle3'), false );
				makeScrollbar( $('content3'), $('scrollbar4'), $('handle4'), true, true );	
			});

Hier mein scoolbar mit text ... geht super http://www.gunnarfuss.de/cm/index.php?id=31

mit bild geht nicht

hat jemand eine idee?

lg milla
 
Zurück
Oben