• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Elegante JS-Scrollbalken vertikal

J

jump.blueberry

New member
Hallo liebe Gemeinde,

ich bin grad ein bisschen am Grübeln, wie ich eine Website verschönern kann.

Ich habe also eine querformatige "Leiste", in der Produkte angezeigt werden.
Diese hat zur Zeit einen gewöhnlichen Scrollbalken.
Der sieht mir aber irgendwie zu hässlich aus.
Nun hätte ich ihn gerne durch eine Javascriptvariante ersetzt.
Bei vertikalen Scrollbalken können eh die wenigsten Leute ohne klicken scrollen also ist es egal, wenn die normale Scrollfunktion verloren geht.
Ein Pfeil links und ein Pfeil rechts würden genügen.
Aber Standardkonform sollte es schon sein.

Hier mein bisheriger Code... falls das irgendwas nützt.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll</title>
<style type="text/css">
/*Produkte*/
div.produkteouter{width: 960px; overflow-y:hidden; overflow-x:scroll; height:250px; clip:rect(0px 0px 200px 0px);}
div.produkteinner{ height:220px; width:3000px }
div.produkt{float:left; border:1px solid #ab0d26; margin-right:10px; height:220px; padding:5px; width:220px}
</style>
</head>
<body>
<div class="produkteouter">
  <div class="produkteinner">
    <div class="produkt">Produkt1</div>
    <div class="produkt">Produkt2</div>
    <div class="produkt">Produkt3</div>
    <div class="produkt">Produkt4</div>
    <div class="produkt">Produkt5</div>
    <div class="produkt">Produkt6</div>
  </div>
</div>
</body>
</html>
Habt Ihr außerdem eine Idee, wie ich die Breite von "produkteinner" variabler bekomme? Am liebsten wäre es mir, dass ich gar keinen Wert angebe und die Zeile einfach so lange ist, wie es Inhalt gibt.
Ich habe es schon mit display:table-row bzw. table-cell versucht, aber leider bleibt dann die Breite von .produkt nicht erhalten.

Diese Variante funktioniert leider nicht DHTMLCentral.com - Free Dynamic HTML Scripts - SideScrollMenu Demo, weil der nobr-tag bzw. whitespace:nowrap nicht bei floatenden Objekten funktioniert.
 
So, nun habe ich ein Script geschrieben, das genau das tun sollte, was ich möchte...
Die Betonung liegt auf "sollte".

Aus unerfindlichen Gründen scrollt das ganze nur nach rechts und nicht nach links.

Hier mal die komplette datei:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
/*Produkte*/
div.produkteouter{width: 960px; overflow-y:hidden; overflow-x:scroll; height:260px; position:absolute; border:1px solid #ff0000}
div.produkteinner{ height:220px; position:absolute; left:-200px}
div.produkt{float:left; border:1px solid #ab0d26; margin-right:10px; height:240px; padding:5px; width:220px; overflow-y: scroll;overflow-x:hidden}
</style>

<script type="text/javascript">

/*window.onload=function(){
var outer= document.getElementById('outer');
var inner= document.getElementById('inner');
outer.style.overflowX='hidden'
outer.style.width=outer.offsetWidth+30+'px';
var linksbild=document.createElement("img");
linksbild.src="bilder/pfeillinks.gif";
linksbild.class="pfeil";
outer.appendChild(linksbild);
}*/
var scroller;

function leftscroll(){
var newLeft=document.getElementById('inner').offsetLeft+1;
document.getElementById('inner').style.left=newLeft+'px';
}
function rightscroll(){
	/*if(document.getElementById('inner').offsetLeft<=2){
		if(document.getElementById('inner').offsetLeft>=-1540){*/
			var newLeft=document.getElementById('inner').offsetLeft-1;
			document.getElementById('inner').style.left=newLeft+'px';
		/*}
	}*/
}
function scrollme(richtung){
	if(richtung=='left'){
	scroller=window.setInterval("leftscroll()", 5);
	}
	
	if(richtung=='right'){
	scroller=window.setInterval("rightscroll()", 5);
	}
}

function scrollstop(){
window.clearInterval(scroller);
}
</script>

</head>

<body>
<input name="testfeld" type="text" id="testfeld" />
<a href="#" onmousedown="scrollme('left')" onmouseup="scrollstop()"><--links</a>
<a href="#" onmousedown="scrollme('right')" onmouseup="scrollstop()">rechts--></a>
<div class="produkteouter" id="outer">

  <div class="produkteinner" id="inner" style="width:2500px" >
    <div class="produkt">
<!--1-->
<h1>produkt 1 </h1>

</div>
        <div class="produkt">
<!--2-->
<h1>produkt 2 </h1>

</div>
        <div class="produkt">
<!--3-->
<h1>produkt 3 </h1>

</div>
        <div class="produkt">
<!--4-->
<h1>produkt4</h1>

</div>
        <div class="produkt">
<!--5-->
<h1>Produkt5</h1>

</div><div class="produkt">
<!--6-->

<h1>Produkt 6</h1>

</div><div class="produkt">
<!--9-->
<h1>Produkt7</h1>

<span class="fliesstext">Neuer Eintrag... </span>
</div><div class="produkt">
<!--10-->
<h1>Testspiel</h1>

<span class="fliesstext">lbaldfj asdfjalsf</span>
</div><div class="produkt">
<!--11-->
<h1>sfa</h1>

<span class="fliesstext">adfsdf</span>
</div><div class="produkt">
<!--12-->
<h1>sfa</h1>

<span class="fliesstext">adfsdf</span>

</div>
  </div>
</div>

</body>
</html>

Das seltsame ist, dass ich mir einbilde, es hätte vorhin noch funktioniert.
Was aber der Unterschied zu "vorhin" ist, weiß ich auch nicht, also bilde ich es mir wohl wirklich nur ein.

Kann mir jemand helfen???

P.S. ich war wohl bei der Fragestellung etwas verwirrt...
1. hab ich ja viel schon so selbst hingebracht und
2. bin ich mir nicht sicher ob "vertikal" das richtige Wort ist.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben