Scrollbare Bildleiste mit js

Deutsches Forum
1

Hallo liebe Leute,

ich würde gerne eine Bildleiste im Footer meines Shops erstellen.

Leider bekomm ich nicht das erwünschte Ergebniss.

Hier der Link, wo ihr euch das Desaster ansehen könnt:
http://feelgoodseats.de/

das problem ist, dass die leiste nach unten und oben gescrollt wird, nicht aber nach links bzw rechts.

code css:

#container1 {width:979px; height:100px; margin:auto; background-color:#465902;}
 button#left, button#right {height:100px; width:25px; float:left; padding:0;}
 button#left {float:left;}
 button#right {float:right;}
 #scrolldiv {float:left; width:900px; height:100%; background-color:#465902; overflow:auto;}
 #scrolldiv p {width:800px;}

code footer:

<div id="container1">
<button id="left" onmouseover="left();" onmouseout="stop();">&lt</button>
<button id="right" onmouseover="right();" onmouseout="stop();">&gt</button>
      <div id="scrolldiv">
			<img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_1.jpg" alt="meditationskissen yogakissen" />
			<img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_2.jpg" alt="meditationskissen yogakissen" />
			<img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_3.jpg" alt="meditationskissen yogakissen" />
			<img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_4.jpg" alt="meditationskissen yogakissen" />
			<img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_5.jpg" alt="meditationskissen yogakissen" />
		  <img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_6.jpg" alt="meditationskissen yogakissen" />
		  <img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_7.jpg" alt="meditationskissen yogakissen" />
		  <img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_8.jpg" alt="meditationskissen yogakissen" />
		  <img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_9.jpg" alt="meditationskissen yogakissen" />
		  <img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_10.jpg" alt="meditationskissen yogakissen" />
		  <img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_11.jpg" alt="meditationskissen yogakissen" />
		  <img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_12.jpg" alt="meditationskissen yogakissen" />
		  <img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_13.jpg" alt="meditationskissen yogakissen" />
		  <img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_14.jpg" alt="meditationskissen yogakissen" />
		  <img src="http://feelgoodseats.de/out/theme_feelgood/img/bildleiste/meditationskissen_15.jpg" alt="meditationskissen yogakissen" />
		  </div>
		  </div>

code header (js):

<script type="text/javascript">
<!--
 function right() {
  var myScrollDiv = document.getElementById("scrolldiv");
  myScrollDiv.scrollLeft += 10;
  myScrollDiv.scr = window.setTimeout("right()", 10);
 }

 function left() {
  var myScrollDiv = document.getElementById("scrolldiv");
  myScrollDiv.scrollLeft -= 10;
  myScrollDiv.scr = window.setTimeout("left()", 10);
 }

 function stop() {
  var myScrollDiv = document.getElementById("scrolldiv");
  window.clearTimeout(myScrollDiv.scr);
 }
//-->
</script>

[B]Für jede Hilfe bin ich sehr dankbar![/B]

Viele Grüße
Marcel

2

Ein Blick in den Quelltext bringt sofort einen größeren Fehler.
Am Ende der Seite kommt dieser HTML-Output:


</body> </html> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <table align=center width="960">
....

Das ist natürlich ein grober Fehler…

Deine Umsetzung ist in zeiten von Ajax-Frameworks auch nicht mehr ganz zeitgemäß.
Schau doch mal, ob du das nicht besser mit JQuery machen kannst.

3

Hi Marcel,

Deine Umsetzung sieht für mich syntaktisch korrekt aus, den Umbruch der scrollbaren Elemente kannst Du dadurch verhindern, in dem Du dem inneren DIV eine Breite von sagen wir mal grob 2000 Pixeln gibst.

Dem äußeren DIV musst Du ein overflow:hidden; mitgeben und dieses auf die tatsächliche Größe anpassen, wenn Du das gemacht hast, sollte das Ganze so funktionieren. Kannst Dich auch gerne meines Sliders auf meiner Startseite bedienen oder Du wartest noch ab, bis ich das Ding so umgebaut hab, dasses ne Endlosschleife ergibt :slight_smile:

Allerbeste Grüße vom Chris

4

Ich hab`s Dir mal gerichtet:

http://help.malercenter.de/feel_goog_seats.html

Musst noch ein wenig anpassen.

5

Wow! Great!

Vielen dank!!! an die meisten…

sprachlos

6

Bitteschön. Gute Nacht.

PS: Morgen lösche ich die Seite wieder.

7

Alles kopiert? Kann ich löschen?