Automatisch langesam scrollen nach 3 Sekunden - dann Sekunden Pause und oben wieder

sebstruck · 10. Mai 2016

Hallo.
Der Topic ist zwar schon ewig alt, aber wir versuchen gerade genau das zu realisieren, was hier beschrieben wird. Da ich von den ganzen Codes keine Ahnung habe, wollte ich fragen, welche Lösung gefunden wurde und ob Sie das Ergebnis teilen würden.

Unser Vorhaben:
Täglicher Export (html) des Vertretungsplans soll bei Überschreitung des Bildschirms automatisch gescrollt werden. Wenn die Seite unten angekommen ist, soll sie wieder nach oben springen und von vorne beginnen. Da der Export täglich aktualisiert wird, wäre ein Verweis auf eine externe Datei super.

Vielen Dank für die Hilfe und viele Grüße

kkapsner · 12. Mai 2016

Von den Hauptbeteiligten habe ich schon lange keinen mehr hier gesehen. Deswegen wird wahrscheinlich die Lösung hier nicht erscheinen... aber dein Vorhaben ist auch etwas anders, da du nicht 3 Skunden warten willst.
Deswegen kann die "Lösung" auch viel einfacher aussehen:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
body {
	height: 3000px;
	border: 100px dashed red;
}
</style>
</head>
<body>
inhalt
<script type="text/javascript">
(function(){
	var step = 4;
	function scroll(){
		var position = window.pageYOffset;
		window.scrollBy(0, step);
		if (position === window.pageYOffset){
			step *= -1;
		}
		window.setTimeout(scroll, 10);
	}
	scroll();
}());
</script>
</body>
</html>

- das ist aber wahrscheinlich erst der Anfang. Für genauere Informationen müssen wir aber deine Anforderungen besser kennen.

sebstruck schrieb:
Da der Export täglich aktualisiert wird, wäre ein Verweis auf eine externe Datei super.

JS würde ich immer in einer externen Datei speichern. Ist aber vom Vorgehen ziemlich egal, ob man den JS-Code direkt in das HTML oder eine externe Datei schreibt. Hat auf den JS-Code nur minimalen Einfluss (meistens gar keinen).

sebstruck · 12. Mai 2016

kkapsner schrieb:
Von den Hauptbeteiligten habe ich schon lange keinen mehr hier gesehen. Deswegen wird wahrscheinlich die Lösung hier nicht erscheinen... aber dein Vorhaben ist auch etwas anders, da du nicht 3 Skunden warten willst.

das ist aber wahrscheinlich erst der Anfang. Für genauere Informationen müssen wir aber deine Anforderungen besser kennen.

Doch, letztendlich wären 3 Sekunden und dann wieder nach oben springen nicht schlecht und beruhigt das Auge. Ich glaube, wir wollen das gleiche Anzeigeverfahren.

kkapsner schrieb:
JS würde ich immer in einer externen Datei speichern. Ist aber vom Vorgehen ziemlich egal, ob man den JS-Code direkt in das HTML oder eine externe Datei schreibt. Hat auf den JS-Code nur minimalen Einfluss (meistens gar keinen).

Und wo schreibe ich den Pfad zu meiner exportierten html hinein?

Vielen Dank schonmal für die super Hilfe. Hatte schon Sorge, dass der Thread eingeschlafen ist.

kkapsner · 13. Mai 2016

Wenn irgendwo mal 3 Sekunden gewartet werden soll, ist das auch kein Hexenwerk. Man kann ja den initialen Aufruf von scroll auch in ein window.setTimeout() packen. Und beim Richtungswechsel (ich finde das Springen zu unruhig) kann man auch einen verzögerten Aufruf reinpacken:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
body {
	height: 3000px;
	border: 100px dashed red;
}
</style>
</head>
<body>
inhalt
<script type="text/javascript">
(function(){
	var step = 4;
	function scroll(){
		var position = window.pageYOffset;
		window.scrollBy(0, step);
		if (position === window.pageYOffset){
			step *= -1;
			window.setTimeout(scroll, 3000);
		}
		else {
			window.setTimeout(scroll, 10);
		}
	}
	window.setTimeout(scroll, 3000);
}());
</script>
</body>
</html>

sebstruck schrieb:
Und wo schreibe ich den Pfad zu meiner exportierten html hinein?

Das geht anders herum: in der HTML-Datei verlinkst du auf die JS-Datei.

sebstruck · 13. Mai 2016

kkapsner schrieb:
Wenn irgendwo mal 3 Sekunden gewartet werden soll, ist das auch kein Hexenwerk. Man kann ja den initialen Aufruf von scroll auch in ein window.setTimeout() packen. Und beim Richtungswechsel (ich finde das Springen zu unruhig) kann man auch einen verzögerten Aufruf reinpacken:

Code:

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Fenstertitel</title> <style type="text/css"> body { height: 3000px; border: 100px dashed red; } </style> </head> <body> inhalt <script type="text/javascript"> (function(){ var step = 4; function scroll(){ var position = window.pageYOffset; window.scrollBy(0, step); if (position === window.pageYOffset){ step *= -1; window.setTimeout(scroll, 3000); } else { window.setTimeout(scroll, 10); } } window.setTimeout(scroll, 3000); }()); </script> </body> </html>

Das geht anders herum: in der HTML-Datei verlinkst du auf die JS-Datei.

Ok. Haben Sie eine Idee, wie ich das automatisch in den Untis-Export hineinbekomme? Oder muss ich in jede exportierte html reingehen und das einfügen?

Vielen Dank für die Hilfe

kkapsner · 13. Mai 2016

sebstruck schrieb:
Untis-Export

Ich hab' keine Ahung, was das ist.

sebstruck · 14. Mai 2016

kkapsner schrieb:
Ich hab' keine Ahung, was das ist.

Oh, Verzeihung. In den alten Posts geht es um den Vertretungsplan, von daher ging ich davon aus, dass über Untis gesprochen wird. Untis ist ein Programm für Schulen, mit dem man die Stunden- und Vertretungspläne erstellen kann. Aus diesen Programm kann man tagesaktuelle Vertretungspläne auf Monitoren darstellen in Form einer html-Seite. Die ist allerdings starr. Ein Script zum scrollen wäre die Lösung. Danke dafür.

Ich bräuchte nur einen Weg, wie ich den Inhalt der html-Seite vom Export in den Scroll einbinde. Wir exportieren täglich mehrfach die Daten (da sie sich gelegentlich ändern) und generieren eine html-Datei, die immer den gleichen Namen hat. Jedesmal in die exportierte Datei zu gehen und den Quellcode anzupassen, erscheint mir mühsam. Gibt es da einen eleganten Weg?

kkapsner · 14. Mai 2016

Hm... man könnte ev. eine iFrame-Lösung bauen. Also eine äußere Seite, die das JS und ein iFrame enthält. In dem iFrame wird dann der wirkliche Inhalt angezeigt.

sebstruck · 14. Mai 2016

kkapsner schrieb:
Hm... man könnte ev. eine iFrame-Lösung bauen. Also eine äußere Seite, die das JS und ein iFrame enthält. In dem iFrame wird dann der wirkliche Inhalt angezeigt.

Kannst du mir sagen, wie das geht? Es tut mir leid, aber ich hab von html überhaupt keine Ahnung.

Vielen vielen Dank für die Hilfe

paul schmitz · 15. Mai 2016

Schau dir mal im www <frameset> und <frame> an.
Im <frame> muss der Link auf die automatisch generierte Seite sein.
In die Frameset-Seite kommt das JS.

sebstruck · 16. Mai 2016

Ich habe es jetzt hinbekommen und es sieht richtig gut aus:

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="40; URL=scroll.html">
<title>Vertretungsplan</title>
<style type="text/css">
</style>
<script type="text/javascript">
  var framefenster = document.getElementsByTagName("iFrame");
  var auto_resize_timer = window.setInterval("autoresize_frames()", 20);
  function autoresize_frames() {
    for (var i = 0; i < framefenster.length; ++i) {
        if(framefenster[i].contentWindow.document.body){
          var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;
          if(document.all && !window.opera) {
            framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
          }
          framefenster[i].style.height = framefenster_size + 'px';
        }
    }
  }
</script>
<script type="text/javascript">
(function(){
	var step = 2;
	function scroll(){
		var position = window.pageYOffset;
		window.scrollBy(0, step);
		if (position === window.pageYOffset){
			step *= -1;
			window.setTimeout(scroll, 3000);
		}
		else {
			window.setTimeout(scroll, 10);
		}
	}
	window.setTimeout(scroll, 3000);
}());
</script>
</head>
<body>

Weiß jemand, wie ich das scrolling noch langsamer hinbekomme? Bei mir schaltet es sich immer aus, wenn ich die var=step kleiner als 2 setze.

kkapsner · 16. Mai 2016

@paul: Diese beiden HTML-Tags sind in HTML5 nicht mehr enthalten also nicht zukunftssicher: HTML: 11. Obsolete features
Deswegen hab' ich auch iFrame geschrieben...

@sebstruck: Wenn du die 10ms erhöhst, wird die Scrollgeschwindigkeit auch kleiner:

Code:

(function(){
	var step = 2;
	function scroll(){
		var position = window.pageYOffset;
		window.scrollBy(0, step);
		if (position === window.pageYOffset){
			step *= -1;
			window.setTimeout(scroll, 3000);
		}
		else {
			window.setTimeout(scroll, 20);
		}
	}
	window.setTimeout(scroll, 3000);
}());

nooneatall · 08. Okt. 2016

Hallo,
ich klinke mich nach langer Zeit mal wieder ein. Wir wollen jetzt auch auf Untis Vertretungsplanung umsteigen. Wie genau wird die in Untis erstellte Datei eingebunden? Im obigen Beispiel heißt die verlinkte Stunden/ Vertretungsplandatei scroll.html, oder?

Gibt es eine Seite der Schule, in der ich mir die Konzeption der Seite einmal ansehen kann? Gerne als perönliche Nachricht!

Besten Dank im Voraus!

nooneatall · 18. Dez. 2016

Hallo,
ich versuche nochmal mein Glück.
Ich habe mit den obigen Codes einiges versucht - bin aber immer wieder gescheitert...
Vielleicht kann mir ja doch jemand helfen...
Wie lautet der der Gesamt-Code der Datei, in der die UNtis-Datei zum scrollen verlinkt ist?

Besten Dank für die Rückmeldung...

kkapsner · 18. Dez. 2016

nooneatall schrieb:
Ich habe mit den obigen Codes einiges versucht - bin aber immer wieder gescheitert...

Zeig' doch mal, was du hast.

nooneatall · 28. Feb. 2017

Ich habe zwei unterschiedliche Varianten:
diese hier scrollt nicht:

HTML:

<html>
<head>
<title>Vertretungsplan heute</title>
<script type="text/javascript">
var sprungweite=1 //normales Scrollen=1 Umblaettern: Je nach Monitorgroesse, z.B. 700
var verzoegerung=25 //Scrollgeschwindigkeit, z.B. 50, hoeher=langsamer
var verzoegerung_am_anfang=4000 //Verzoegerung am Anfang
var verzoegerung_am_ende=4000 //Verzoegerung nach dem Anzeigen der letzten Zeile
var neuladen_nach=30 //nach wie vielen Durchgaengen wird die Datei neu geladen
var currentpos=0, alt=1, curpos1=0, curpos2=-1, i=1 //nicht aendern
function wait_on_top() {
if (currentpos == 0) window.setTimeout("scrollwindow()", verzoegerung_am_anfang)
}

function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+sprungweite
else
currentpos=window.pageYOffset+sprungweite
window.scroll(0,currentpos)
window.setTimeout("scrollwindow()", verzoegerung)
}
else window.setTimeout("jump_top()", verzoegerung_am_ende)
}
function jump_top() {
currentpos=0
if (i == neuladen_nach) {
i=1
self.location.reload()
}
else {
i++
window.scroll(0,currentpos)
wait_on_top()
}
}
function startit() {
window.scroll(0,0)  //fuer Firefox nach relaod
wait_on_top()
}
</script>
</head>
<body onload="startit()">
<center><center><font size=6><b>Vertretungsplan heute</b></font><br>
<iframe src="LZ_heute.htm" width="100%" height="95%" frameborder="0" name="frame" id="frame"></iframe>
</center>
</body>
</html>

Diese hier scrollt einfach los. Finde keine Möglichkeit, irgendwelche Warteparameter zum Funktionieren zu bringen. Mein Ziel ist nach wie vor, den zu landenden Fensterhinhalt am Anfang 3 Sekunden anzuzeigen und erst dann zu scrollen (wenn der Inhalt größer ist, als das zur Verfügung stehende Fenster). Und wenn sie runter gescrollt hat, soll sie 3 Sekunden warten, nach oben springen, 3 Sekunden warten, wieder nach untern scrollen...

HTML:

<html>
<head>
<title>Vertretungsplan heute</title>
<script language="JavaScript">
var timer_id;
function scroll_iframe(frm,inc,dir) {
if (timer_id)
clearTimeout(timer_id);
if (window.frames[frm]) {
if (dir == "v")
window.frames[frm].scrollBy(0, inc);
else
window.frames[frm].scrollBy(inc, 0)
timer_id = setTimeout("scroll_iframe('" + frm + "'," + inc + ",'" + dir + "')", 20);
}
}
</script>
</head><body onLoad="scroll_iframe('frame', 1, 'v'); return true">
<center><center><font size=6><b>Vertretungsplan heute</b></font><br>
<iframe src="LZ_heute.htm" width="100%" height="95%" frameborder="0" name="frame" id="frame"></iframe>
</center>
</body>
</html>

so wie diese hier:
(das habe sich seinerzeit mal hinbekommen, konnte es bislang leider nicht auf den iframe-Inhalt übertragen...)

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=iso-8859-1" />
<meta http-equiv="cache-control"content="no-cache" />
<meta http-equiv="content-language" content="de" />
<meta http-equiv="expires" content="0" />
<meta name="description" content="Vertretungsplan" />
<link href="svplan11.css" type="text/css" rel="stylesheet"/>
<title>Vertretungsplan für  Dienstag, den  20.12.2016</title>
       <script type="text/javascript">
var sprungweite=1 //normales Scrollen=1 Umblaettern: Je nach Monitorgroesse, z.B. 700
var verzoegerung=25 //Scrollgeschwindigkeit, z.B. 50, hoeher=langsamer
var verzoegerung_am_anfang=3000 //Verzoegerung am Anfang
var verzoegerung_am_ende=3000 //Verzoegerung nach dem Anzeigen der letzten Zeile
var neuladen_nach=30 //nach wie vielen Durchgaengen wird die Datei neu geladen
var currentpos=0, alt=1, curpos1=0, curpos2=-1, i=1 //nicht aendern
function wait_on_top() {
if (currentpos == 0) window.setTimeout("scrollwindow()", verzoegerung_am_anfang)
}

function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+sprungweite
else
currentpos=window.pageYOffset+sprungweite
window.scroll(0,currentpos)
window.setTimeout("scrollwindow()", verzoegerung)
}
else window.setTimeout("jump_top()", verzoegerung_am_ende)
}
function jump_top() {
currentpos=0
if (i == neuladen_nach) {
i=1
self.location.reload()
}
else {
i++
window.scroll(0,currentpos)
wait_on_top()
}
}
function startit() {
window.scroll(0,0)  //fuer Firefox nach relaod
wait_on_top()
}
</script>
</head>
<body onload="startit()">

Ich hoffe, ich habe alles verständlich angegeben. Ich freue mich über Rückmeldungen! Schon jetzt vielen Dank vorab!

kkapsner · 27. Aug. 2017

nooneatall schrieb:
<body onLoad="scroll_iframe('frame', 1, 'v'); return true">

Hier musst du das window.setTimeout() einbauen.

Automatisch langesam scrollen nach 3 Sekunden - dann Sekunden Pause und oben wieder

sebstruck

New member

kkapsner

Super Moderator

sebstruck

New member

kkapsner

Super Moderator

sebstruck

New member

kkapsner

Super Moderator

sebstruck

New member

kkapsner

Super Moderator

sebstruck

New member

paul schmitz

New member

sebstruck

New member

kkapsner

Super Moderator

nooneatall

New member

nooneatall

New member

kkapsner

Super Moderator

nooneatall

New member

kkapsner

Super Moderator