Javascript/Jquery

[ZockerLordLP]

@tombe
Ich bin totaler Jquery neuling wie binde ich das ein
Ich meine nich jsfiddle.net

<script src="http://code.jquery.com/jquery-latest.js"></script>

Kannst du sonst mir deine html Datei schicken wo es läuft? Bei mir geht es einfach nicht

 

[tombe]

Ich habe jetzt doch noch etwas geändert. Es wird nicht ein fest vorgegebener Wert (750) zum Scrollen verwendet, sondern es wird die Höhe des DIVs ermittelt. Wenn du irgendwann am Aufbau etwas ändern solltest, musst du am Code nichts anpassen.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){

var pos = 0;
scroll();

function scroll() {
if (pos < $("#heute")[0].scrollHeight) {
    $("#heute").animate({scrollTop: pos}, 2000, function() {
        pos = pos + $("#heute").height();
    });
} else {
    $("#heute").animate({scrollTop: 0}, 2000, function() {
        pos = 0;
    });
}
setTimeout(scroll, 5000);
}

});

</script>

<div id="heute" style="overflow:auto; height:550px;" >
Zeile 1<br />
Zeile 2<br />
Zeile 3<br />
Zeile 4<br />
Zeile 5<br />
Zeile 6<br />
Zeile 7<br />
Zeile 8<br />
Zeile 9<br />
Zeile 10<br />
Zeile 11<br />
Zeile 12<br />
Zeile 13<br />
Zeile 14<br />
Zeile 15<br />
Zeile 16<br />
Zeile 17<br />
Zeile 18<br />
Zeile 19<br />
Zeile 20<br />
Zeile 21<br />
Zeile 22<br />
Zeile 23<br />
Zeile 24<br />
Zeile 25<br />
Zeile 26<br />
Zeile 27<br />
Zeile 28<br />
Zeile 29<br />
Zeile 30<br />
Zeile 31<br />
Zeile 32<br />
Zeile 33<br />
Zeile 34<br />
Zeile 35<br />
Zeile 36<br />
Zeile 37<br />
Zeile 38<br />
Zeile 39<br />
Zeile 40<br />
Zeile 41<br />
Zeile 42<br />
Zeile 43<br />
Zeile 44<br />
Zeile 45<br />
Zeile 46<br />
Zeile 47<br />
Zeile 48<br />
Zeile 49<br />
Zeile 50<br />
Zeile 51<br />
Zeile 52<br />
Zeile 53<br />
Zeile 54<br />
Zeile 55<br />
Zeile 56<br />
Zeile 57<br />
Zeile 58<br />
Zeile 59<br />
Zeile 60<br />
Zeile 61<br />
Zeile 62<br />
Zeile 63<br />
Zeile 64<br />
Zeile 65<br />
Zeile 66<br />
Zeile 67<br />
Zeile 68<br />
Zeile 69<br />
Zeile 70<br />
Zeile 71<br />
Zeile 72<br />
Zeile 73<br />
Zeile 74<br />
Zeile 75<br />
Zeile 76<br />
Zeile 77<br />
Zeile 78<br />
Zeile 79<br />
Zeile 80<br />
Zeile 81<br />
Zeile 82<br />
Zeile 83<br />
Zeile 84<br />
Zeile 85<br />
Zeile 86<br />
Zeile 87<br />
Zeile 88<br />
Zeile 89<br />
Zeile 90<br />
Zeile 91<br />
Zeile 92<br />
Zeile 93<br />
Zeile 94<br />
Zeile 95<br />
Zeile 96<br />
Zeile 97<br />
Zeile 98<br />
Zeile 99<br />
Zeile 100<br />
</div>

Im Beispiel sind es "nur" 100 Zeilen Text die innerhalb des DIVs angezeigt werden, sollte aber zum Scrollen ausreichen.

Der Scrollvorgang dauert jeweils 2 Sekunden und die Pause dazwischen ist im Moment auf 5 Sekunden eingestellt.

 

[ZockerLordLP]

@tombe Super danke funktioniert

Nur eine Frage habe ich noch.
Ich habe zwei Divs. #heute und #morgen. Und er soll erst wieder nach oben scrollen wenn beide Div am bottom angekommen sind. So lange soll das andere Div warten.

 

[tombe]

Wie sehen die 2 DIVs aus, sind die gleich groß bzw. haben sie die gleiche Höhe und ist nur der Inhalt unterschiedlich lang?

 

[ZockerLordLP]

@tombe
Nur der Inhalt ist unterschiedlich lang. Die Divs sind sonst gleich, gleiche höhe und gleich groß nur die Scroll-Distance ist unterschiedlich.

Habe auch schon was gebastelt, funktioniert aber nicht ;( Die sind nicht Syncron

$(document).ready(function(){
start();
var pos = 0;
var pos2 = 0;
var bottomh=0;
var bottomm=0;

scroll();
scroll2();

function scroll() {
if (pos < $("#heute")[0].scrollHeight) {
    $("#heute").animate({scrollTop: pos}, 1500, function() {
        pos = pos + $("#heute").height();
		bottomh=0;
				$('#heute').load('load/loadh1.php');
				$('#morgen').load('load/loadm1.php');
    });
} else {
	bottomh=1;
	if(bottomh==1 && bottomm==1){
		$("#heute").animate({scrollTop: 0},1500, function() {
				$('#heute').load('load/loadh1.php');
				$('#morgen').load('load/loadm1.php');
			pos = 0;
			
		});
	}
}
setTimeout(scroll, 10000);
}

function scroll2() {
if (pos2 < $("#morgen")[0].scrollHeight) {
    $("#morgen").animate({scrollTop: pos2}, 1500, function() {
        pos2 = pos2 + $("#morgen").height();
		bottomm=0;
				$('#heute').load('load/loadh1.php');
				$('#morgen').load('load/loadm1.php');
    });
} else {
	bottomm=1;
	if(bottomh==1 && bottomm==1){
		$("#morgen").animate({scrollTop: 0},1500, function() {
					$('#heute').load('load/loadh1.php');
					$('#morgen').load('load/loadm1.php');
			pos2 = 0;
			
		});
	}
}
setTimeout(scroll2, 10000);
}


});

	function start(){
		$('#heute').load('load/loadh1.php');
		$('#morgen').load('load/loadm1.php');
	}

Wie mache ich es denn am besten, sodass es immer Syncron ist?

 

[tombe]

Ich habe jetzt zwar mein Beispiel entsprechend angepasst, aber da die notwendige Veränderung am Code so gering ist, kannst du es sicher selber auf deinen Code übertragen.

$(document).ready(function(){

var pos = 0;
// In max wird gespeichert welcher DIV mehr Inhalt enthält und entsprechend lange gescrollt
var max = 0;
if ($("#heute")[0].scrollHeight > $("#morgen")[0].scrollHeight) {
	max = $("#heute")[0].scrollHeight;
} else {
	max = $("#morgen")[0].scrollHeight;
}

scroll();

function scroll() {
if (pos < max) {
// dadurch das hier beide IDs angegeben sind, werden beide gleichzeitig angesprochen
    $("#heute, #morgen").animate({scrollTop: pos}, 2000, function() {
        pos = pos + ($("#heute").height() / 2);
    });
} else {
    $("#heute, #morgen").animate({scrollTop: 0}, 2000, function() {
        pos = 0;
    });
}
setTimeout(scroll, 5000);
}

});

Synchron ist es damit und es wird in beiden DIVs auch immer gleich weit um "eine Seite" gescrollt. Aber ich muss zugeben das ich selber nicht kapiere warum ich $("#heute"].height() durch zwei teilen muss (Zeile 9).

Irgendwie macht es den Eindruck als ob bei jedem Durchlauf die Höhe beider Container addiert wird und dieser Wert dann zum Scrollen verwendet wird. Da aber beide gleich hoch sind, spielt das keine Rolle.

 

[ZockerLordLP]

@tombe
Danke erstmal. Er scrollt aber nicht nach unten sondern nur nach oben, wenn ich den scrollbalken manuell nach unten ziehe ;( Komischerweise funktioniert es auf jsfiddle.net.

EDIT:// Funktioniert! Das Problem lag darin, dass erst die Höhe ermittelt wird und dann der Inhalt per Ajax eingelesen wird

EDIT2:// Wieso dauert es 20 Sekunden wenn ich nur 10.000 eingestellt habe?