automatisches scrollen?

autoexec

Grünschnabel
Hallo,

ist es möglich den Inhalt eines Divcontainers automatisch von unten nach oben scrollen zu lassen?
D.h. ich habe eine feste Größe von 960x540. Dort ist ein weiterer Div drin der Überschriften von einem RSS-Feed enthält.
Sobald dort mehr Nachrichten sind als 540 hoch soll es anfangen von unten nach oben durch zu laufen.
Ist sowas theoretisch möglich und wenn ja wie?

*edit:
Im Prinzip wäre so etwas schon perfekt: http://www.doktormolle.de/temp/ticker6.htm
nur ich brauche nicht mehrere News sondern nur den einen Divcontainer wo der Content schon drin steht. Und es sollte erst anfangen zu laufen wenn dort mehr Text drin ist als zu sehen.

Gruß
autoexec
 
Zuletzt bearbeitet:
Zumindest mit jquery relativ einfach zu lösen.

Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
var c = 2;

$("#add").click(function() {

	$("#content").html($("#content").html() + c + ". " + "xxxxxxx YYYYYYY vvvvvvv WWWWWWW ggggggg HHHHHHH<br>");
	c++;
	$("#top").scrollTop($('#content').height());


});

});

</script>
HTML:
<div id="top" style="width: 200px; height: 150px; border: solid 1px; overflow: scroll;">
	<div id="content" style="background-color: #c0c0c0;">1. Start<br /></div>
</div>
<div id="add">ADD</div>

Immer wenn man auf ADD klickt, wird weiterer Text in den Containter "content" eingetragen und ans Ende gescrollt.
 
test.jpg
also so soll es ungefähr aussehen. Da ist jetzt darunter noch mehr Text. Wenn dies der Fall sein sollte, dann soll der Text anfangen in Pfeilrichtung zu laufen und ständig so durchlaufen. Wenn dort weniger Text ist. z.B. nur die ersten beiden Zeilen, dann soll es still stehen und sich nicht bewegen.
 
sorry, die div habe ich schon. Jedoch der Inhalt der im div ausgegeben wird, dafür bin ich nicht zuständig. Ich hole es mir sozusagen extern per RSS-Feed. Davon übernehme ich auch nur die Überschriften. Jetzt sind z.B. nur zwei Überschriften drin. Aber es kann mal sein das dort 15 sind. D.h. es werden nicht alle 15 angezeigt. Die größe ist fest ich kann an der nichts ändern. Ich soll nur die funktion einbauen das es anfängt zu scrollen wenn dort mehr Inhalt als "Sichtfläche" ist. Ich hoffe nun habe ich mich besser ausgedrückt.

LG
autoexec
 
So, damit sollte es jetzt wirklich gehen:

HTML:
<div style="width: 100px; height: 100px; border: 1px solid; position: absolute; overflow: hidden;">
	<div id="content" style="position: absolute; left: 0; bottom: 0;"></div>
</div>

Wenn jetzt in den inneren DIV etwas eingetragen wird, steht es zuerst untem an Rand des äußeren Containers. Mit jeder weiteren Zeile rutscht es dann nach oben.
 
Danke für die Versuche mir zu helfen. Ich denke das ist der falsche Ansatz.
Ich habe diese Beispielseite hier: https://10.48.0.221/vscherstner/bubo/test.php
Wenn man mit firebug guckt, sieht man dass dort mehr content ist als angezeigt wird. Und dort soll halt von unten nach oben gescrollt werden immer und immer wieder. Sprich wenn er einmal durch ist soll das oberste wieder unten raus kommen. Deshalb habe ich ja auch im Javascript Forum gefragt.
 
Mal sehen wie dir das hier gefällt:

Javascript:
var pos = -1;
var m = window.setInterval("move()", 1000);
function move(){
	if (pos == -1) {
		pos = parseInt(document.getElementById("content").style.top);
	} else if (Math.abs(pos) >= (document.getElementById("content").offsetHeight - parseInt(document.getElementById("top").style.height))) {
		pos = 0;
	} else {
		pos = pos - 10;
	}
	document.getElementById("content").style.top = pos;
}
HTML:
<div id="top" style="width: 100px; height: 200px; border: 1px solid; overflow:hidden; position: absolute; top: 5px; left: 5px;">
	<div id="content" style="position: relative; top: 0px;">
		AAA<br />
		BBB<br />
		CCC<br />
		DDD<br />
		EEE<br />
		FFF<br />
		GGG<br />
		HHH<br />
		III<br />
		JJJ<br />
		KKK<br />
		LLL<br />
		MMM<br />
		OOO<br />
		PPP<br />
		QQQ<br />
		RRR<br />
		SSS<br />
		TTT<br />
		UUU<br />
		VVV<br />
		WWW<br />
		XXX<br />
		YYY<br />
		ZZZ<br />
	</div>
</div>

Ändere mal den Inhalt vom Container "content" auf

HTML:
AAA<br />
BBB<br />

und schau was dann passiert.
 
Zuletzt bearbeitet:
Dann versuche es mit der jQuery-Version.

Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});

var pos = -1;
var m = window.setInterval("move()", 1000);

function move(){
speed = 1000;
	if ($("#content").height() <= $("#top").height()) {
		pos = 0;
		speed = 0;
		$("#content").css("top", pos);
        $("#content").css("display", "block");
		window.clearInterval(m);
    } else if (Math.abs(pos) >= $("#content").height() || pos <= ($("#content").height() * -1) || pos == -1) {
        pos = $("#top").height();
        $("#content").css("top", pos);
        $("#content").css("display", "block");
        speed = 0;
    } else {
        pos = pos - 10;
    }
    $("#content").animate({top : pos}, speed);
}
</script>
 
Zuletzt bearbeitet:
Okay, also wenn viel Inhalt ist springt er dann ganz nach unten und fängt an hoch zu scrollen. Das ist schon mal nicht schlecht. Ich habe gestern noch ein schönes script gefunden und es etwas angepasst. Es funktioniert schon fast so wie ich es gerne hätte.
Ich danke für die Versuche mir hier zu helfen.
 

Neue Beiträge

Zurück