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

nooneatall · 17. Mai 2013

Hallo,

ich möchte gerne einen Vertretungsplan anzeigen lassen. Wenn der Inhalt größer ist, als der verfügbare Platz soll automatisch wie folgt gescrollt werden:
- Seite anzeigen: 3 Sekunden
- langsam nach unten scrollen
- unten 3 Sekunden warten
- wieder oben starten und 3 Sekunden warten...

Bisher habe ich es ohne jegliche Kenntnisse durch die Suchfunktion bis hier geschafft:

<html>
<head>
<script language="JavaScript">

</script>
<title>Seite automatisch scrollen lassen</title>
</head>
<body onload="AutomatischScrollen();">

Hier ist die erste Zeile Ihrer Webseite.
 Hier sind Sie ganz unten angelangt.

</body>
</html>

Die Seite scrollt beim Laden automatisch von oben nach unten. Was fehlt, sind die drei Sekunden zu Beginn, die Wartezeit unten und der Neustart von Beginn der Seite.

Bin für jede Hilfe dankbar. Wenn man das scrollen auch realisieren kann, ohne die *.html zu bearbeiten, ist das noch besser. Ich habe eine css, aus der sich die Ansicht der html speist.

Ich hoffe, meine Angaben sind ausreichen, um Hilfestellungen geben zu können.

Schon vorab herzlichen Dank!

Kasalop · 18. Mai 2013

im prinzip hast du doch schon alle elemente drin... window.setTimeout macht dir ne Verzögerung und scrollBy scrollt deine seite.

eventhandler in html-code ist unschön, das kannst du auch in ein script tag schreiben:

Code:

window.onload = function() {
  // code der ausgeführt wird, wenn das dokument fertig geladen hat
}

Das was dir noch fehlt ist die Abbruchbedingung für das scrollen (deinen neustart). Dafür musst du den aktuell gescrollten wert (scrollTop) vergleichen mit der höhe deines documents (abzüglich der höhe des anzeigebereichs natürlich). wenn das identisch ist, dann eben neustarten (scrollTo(0,0) und rest läuft wie gehabt weiter).

Aber ob das wirklich gut ist stelle ich mal noch für dich in den Raum. Wenn man mal etwas einen Moment lesen will und das scrollt als weg, würde mich als lesenden ganz schön nerven!

Lg Kasalop

nooneatall · 18. Mai 2013

Vielen Dank für die Antwort. Die Höhe des Dokuments ändert sich leider jeden Tag, da immer unterschiedliche Lehrer krank sind. Wie definiere ich denn dann die Höhe?

Am liebsten wäre mir eine automatische Anpassung der Schriftgröße (Verkleinerung) und des Zeilenabstands (jetzt etwa bei 1,5), damit sich der Text verkleinert und der gesamte Inhalt in die Ansicht passt. Das Scrollen nervt die Kollegen schon arg. Sie müssten dann halt näher an den Bildschirm, bräuchten aber nicht mehr warten....

Gibt's da was in der Richtung?

Kasalop · 18. Mai 2013

was? jetzt versteh ich nur noch bahnhof.

nooneatall schrieb:
Vielen Dank für die Antwort. Die Höhe des Dokuments ändert sich leider jeden Tag, da immer unterschiedliche Lehrer krank sind. Wie definiere ich denn dann die Höhe?

na dynamisch... gib dem worin du es anzeigst einfach keine angabe von height, dann passt es sich automatisch seinem inhalt an.

nooneatall schrieb:
Am liebsten wäre mir eine automatische Anpassung der Schriftgröße (Verkleinerung) und des Zeilenabstands (jetzt etwa bei 1,5), damit sich der Text verkleinert und der gesamte Inhalt in die Ansicht passt.

Wieso denn um Himmelswillen das? oO Das ist ja noch krausamer. Mach es so das man es lesen kann und wenns größer wird, als der Anzeige bereich muss eben gescrollt werden.

nooneatall schrieb:
Das Scrollen nervt die Kollegen schon arg.

Deine Kollegen nervt, dass sie an einem scrollrad drehen müssen und wollen lieber, dass der bildschirm von alleine scrollt oO Also wenn das schon zu viel Arbeit ist, dann ist Lehrer/in aber eher der falsche Beruf xD (sry fürs offtopic, aber so ein Aufwand ist das doch nun eigentlich nicht...

nooneatall schrieb:
Sie müssten dann halt näher an den Bildschirm, bräuchten aber nicht mehr warten....

jaaa und wenns im Winter mal ne größere Anzahl an Ausfällen gibt, ist die schriftgröße bei 5pt und niemand kanns mehr lesen, egal wie nah man am Bildschirm ist... sry aber das ist doch nicht wirklich gut durchdacht.

nooneatall schrieb:
Gibt's da was in der Richtung?

Machen kann man fast alles. Aber ob es sinnvoll ist?!

PS: mit meinem "vergleichen mit der höhe deines documents" hab ich eigentlich natürlich dynamisch gemacht... window.innerHeight beispielsweise...

nooneatall · 18. Mai 2013

Ich hätte erwähnen sollen, dass den Kollegen keine Maus zum scrollen zur Verfügung steht-der Bildschirm ist über VGA angeschlossen und steht im einem anderen Zimmer...

Gut, das mit der Schriftgröße sehe ich ein.

Wie muss ich denn jetzt die obige Datei genau anpassen, um das gewünschte (Tonic) zu erreichen? Kann mir einer den Code reinbasteln? Das wäre echt nett!

kkapsner · 18. Mai 2013

Wsa auch immer gut funktioniert ist, wenn man die Scrollposition vor dem Scrollen speichert und dann mit der Position danach vergleicht. Wenn sich nichts geändert hat, ist man am Ende des Dokuments.

PS: Dein HTML ist nicht valide - lass' das mal durch einen Validator durchlaufen.
PPS: window.setTimeout sollte man keinen String als Parameter übergeben, sondern eine Funktionsreferenz. Bei dir würde das dann so aussehen:

Code:

window.setTimeout(AutomatischSrollen, 30);

nooneatall · 18. Mai 2013

Sooo... Danke für die Rückme
Bin ein Stückchen weiter...
Die Seite Startet jetzt nach 5 Sekunden. Welche Befehle brauche ich denn, um den Scrollfortschritt zu prüfen und für die Abbruchbedingung? An welche Stelle setze ich das ein?
So weit bin ich jetzt:

<html>
<head>
<script language="JavaScript">

</script>
<title>Seite automatisch scrollen lassen</title>
</head>
<body onload="AutomatischScrollen();">

Hier ist die erste Zeile Ihrer Webseite.
 Hier sind Sie ganz unten angelangt.

</body>
</html>

Bin für weitere Hilfe mehr als dankbar!

Kasalop · 18. Mai 2013

Dein code mag zwar funktionieren. Ergibt aber keinen sinn. weiterhin bitte nutze die code-tags!

Lg Kasalop

nooneatall · 18. Mai 2013

Vielen Dank für die Rückmeldung. Habe gerade copy paste gemacht - habe so die tags vergessen. Sorry.
Ich weiß jetzt, dass es so keinen Sinn macht, wie es besser geht weiß ich leider immer noch nicht. Kannst du mir bitte mal einen konkreten Verbesserungsvorschlag machen? Das wäre echt nett.

Kasalop · 19. Mai 2013

okay. du musst lernen ein konzept zu entwickeln. Das brauchst du immer beim Programmieren:
1. Startup: 5 sekunden warten
2. nun kontinuierlich scrollen bis man ganz unten ist.
3. nach oben springen und wieder mit punkt 2 weitermachen

1. setTimeout(startscrolling, 5000);
2. setInterval(scroll, 1);
3. if(oldScrollposition == newScrollposition) window.scrollTo(0,0);

So nun blicken wir uns das Konzept an und stellen fest, dass die wohl funktioniert, dass wir aber mit Punkt 2 Probleme bekommen, wenn zum scrollen mehr Zeit als eine Sekunde benötigt wird (überlagerung der Aufrufe). Daher lösen wir das ganze nun auf in setTimeout aufrufe:
2.1 function scroll() {
// aktion ausführen zum scrollen.
setTimeout(scroll, 1);
}
Damit kann es nicht mehr zu einer überlagerung kommen, da wir scroll erst erneut aufrufen, wenn das alte abgearbeitet ist.

gesamt haben wir dann:

Code:

window.onload = function() {
  setTimeout(startscrolling, 5000);
}
var oldScrollposition=0, newScrollposition=0;
function startscrolling() {
  oldScrollposition = 0
  newScrollposition = 0;
  window.scrollTo(0,0);
  scroll();
}
function scroll() {
  window.scrollBy(0,1);
  newScrollposition = window.scrollTop;
  if(oldScrollposition == newScrollposition)
    startscrolling();
  else {
    oldScrollposition = newScrollposition;
    setTimeout(scroll, 1);
  }
}

Nun könnte man das noch dahin optimieren, dass wir keine globalen Parameter mehr haben. Entweder eine klasse schreiben, oder eben in nen wrapper packen.

Lg Kasalop

kkapsner · 19. Mai 2013

Naja - man könnte den Code auf jeden Fall dahin optimieren, dass er funktioniert... window.scrollTop gibt es nicht. Die Scrollposition des Fensters bekommt man über window.pageYOffset oder (ältere IEs) document.documentElement.scrollTop

Auch ist ein Pixel pro Millisekunde doch etwas zu schnell zum scrollen... 1000px pro Sekunde - da kann wirklich niemand mehr was lesen. Ich würde ja so alle 40ms um 2 Pixel scrollen - da hat man ~50px/s und könnte auch mit window.setInterval() arbeiten (muss aber nicht...).

Zusätzlich würde ich die alte Scrollposition nicht in einer (semi-)globalen Variablen speichern... man kann ja die Scrollposition direkt vor scrollBy und direkt danach auslesen - dann kann man komplett mit lokalen Variablen arbeiten.

Kasalop · 19. Mai 2013

kkapsner schrieb:
Naja - man könnte den Code auf jeden Fall dahin optimieren, dass er funktioniert... window.scrollTop gibt es nicht. Die Scrollposition des Fensters bekommt man über window.pageYOffset oder (ältere IEs) document.documentElement.scrollTop[/code]

wäre seine Aufgabe gewesen das rauszufinden. Aber so gehts auch ^^

kkapsner schrieb:
Auch ist ein Pixel pro Millisekunde doch etwas zu schnell zum scrollen... 1000px pro Sekunde - da kann wirklich niemand mehr was lesen. Ich würde ja so alle 40ms um 2 Pixel scrollen - da hat man ~50px/s und könnte auch mit window.setInterval() arbeiten (muss aber nicht...).

setInterval hab ich oben ja angesprochen, würde ich hier nicht nehmen.

kkapsner schrieb:
Zusätzlich würde ich die alte Scrollposition nicht in einer (semi-)globalen Variablen speichern... man kann ja die Scrollposition direkt vor scrollBy und direkt danach auslesen - dann kann man komplett mit lokalen Variablen arbeiten.

Doppelte auslesen einer Eigenschaft? Kein sehr schöner Stil. Ne Klasse wäre die bessere Option an der Stelle, wollte ich dem TE aber nicht zumuten.

Lg Kasalop

kkapsner · 19. Mai 2013

Ich lese eine Eigenschaft lieber doppelt aus, als dass ich globale Variablen verwende... außerdem kann ich dann sicher sein, dass ich mit den richtigen Werten arbeite. In einem anderen Fall (also wenn der Benutzer auch ein Eingabegerät für den Rechner hat) könnte ja noch irgendwie anders gescrollt werden und dann wäre es nicht mehr sicher, dass der Wert, den du in der "Klasse" (NB: es gibt in JS keine Klassen) gespeichert hast, auch korrekt ist.
Ich finde das nicht, dass das schlechter Stil ist... aber das ist Ansichtssache.

Sempervivum · 19. Mai 2013

Also ich würde das ganze ganz anders machen: Den gesamten Content in einen div-Container legen und mit jQuery-animate verschieben:

Code:

      $(document).ready(function(){
          var scrollamount = $(document).height() - $(window).height();
          var scrollduration = scrollamount * 10;
          var pauseduration = 3000;
          var docheight = $(document).height();
          jQuery.fn.doScroll = function() {
              $(this).delay(pauseduration)
                  .animate({top: -scrollamount, height: docheight}, scrollduration, 'linear')
                  .delay(pauseduration)
                  .animate({top: 0, height: $(window).height()}, scrollduration, 'linear', $(this).doScroll);

              };
          $('#globdiv').height($(window).height()).doScroll();
      });

HTML:

<div id="globdiv" style="position: absolute; overflow: hidden;">
Hier dein gesamter Content
</div>

(Die Animation mit der Höhe habe ich gemacht, um die hässliche Aktivität der Scrollbar zu unterdrücken.)

Kasalop · 20. Mai 2013

kkapsner schrieb:
Ich lese eine Eigenschaft lieber doppelt aus, als dass ich globale Variablen verwende... außerdem kann ich dann sicher sein, dass ich mit den richtigen Werten arbeite. In einem anderen Fall (also wenn der Benutzer auch ein Eingabegerät für den Rechner hat) könnte ja noch irgendwie anders gescrollt werden und dann wäre es nicht mehr sicher

Das ist für mich aber ein Fall von: richtige Anforderungsanalyse erstellen. (Was nebenbei den Unterschied zwischen einem normalen Fachinformatiker (ein guter wird das natürlich auch können) und einem stduierten Informatiker ist) Womit ich nicht sagen will das du das eine oder andere bist xD Bitte nicht falsch verstehen! Fiel mir grad nur auf, dass das oft ein entscheidender Unterschied ist.
BTT: Könnte man auch lösen durch nutzen von onscroll.

kkapsner schrieb:
(NB: es gibt in JS keine Klassen)

Ja ich weiß. und diese ständige unterscheidung und dieses darauf beharren (was ich früher auch gemacht habe) stört mich aber langsam. Man kann ein prototypebasiertes System nahezu 1-zu-1 in ein klassensystem konvertieren, also wieso darauf zu extrem beharren, dass es in js keine klassen gibt? Wenn ich per function Klassenname() {} eine schablone anlegen und diese per new Klassenname() instanzieren kann und ein Objekt erhalte finde ich das man das durchaus vertreten kann. Klar gibt es sonderfälle die ich beim prototyping machen kann, die bei einem normalen Klassensystem nicht gehen, aber ich kann alles was im einen geht, im anderen nachbilden (Mal abgesehen von Interfaces, oder ich kenne es im prototype system nicht, kA).
Daher gibts ja auch ne Sprache, die Klassen, vererbung, etc unterstützt, welches dann zu js konvertiert werden kann. (Schau dir, falls du es nicht kennst, mal TypeScript an. Bin mir noch nicht ganz sicher wie gut es mir gefällt, aber wirkt erstmal recht nett.)

Ich finde das nicht, dass das schlechter Stil ist... aber das ist Ansichtssache.

okay einigen wir uns auf Ansichtssache. Ist es eh in den meisten Fällen in der Informatik. Für mich gehört sowas in ein Model und das Model wird nicht mit der View vermischt, insofern es geht. Daher würde ich einen alten Wert den ich bereits schonmal ausgelesen habe ins Modell speichern und nicht nochmal auslesen.
Andererseits hab ich das oben natürlich auch nicht ganz sauber umgesetzt allerdings hauptsächlich ums für den TE einfach zu halten.

Lg Kasalop

nooneatall · 20. Mai 2013

Wow, vielen Dank für die Unterstützung! Kann ich bei der jquery-animate Variante statt des contents auch die html-datei als src=... angeben? Wenn ja, wie genau?

Wenn ich jedesmal den Content des Vertretungsplanes in die o.g. Lücke reinkopieren muss, brauche ich auch wieder ein script, dass den Prozess auslöst...

Das war auch mein uraprünglicher Gedanke, aber der link auf eine externe Datei wäre ein Traum!

Sempervivum · 20. Mai 2013

Hallo,
das kannst Du mit PHP-Include machen:

PHP:

<?php include('deine_html_datei.html'); ?>

Dann sollte die includierte Datei aber kein HTML-Grundgerüst haben.

nooneatall · 20. Mai 2013

Die zu integrierende Datei wird vom Vertretungsplanprogramm als html ausgegeben. Deshalb wird sie das entsprechende ungewünschte Gerüst aufweisen. Ist es trotzdem einen Versuch wert?

Sempervivum · 20. Mai 2013

Versuchen kannst Du es ja mal. Besser wäre es jedoch, ein PHP-Script zu schreiben, was die HTML-Datei einliest und die nötigen Erweiterunge hinzufügt. Wäre nicht allzu aufwändig.

Sempervivum · 20. Mai 2013

U. U. kannst Du auch einen iFrame verwenden, wenn Du die Höhe entsprechend dieser Anleitung automatisch einstellst:
html - Make iframe automatically adjust height according to the contents without using scrollbar? - Stack Overflow

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

New member

New member

New member

New member

New member

Super Moderator

New member

New member

New member

New member

Super Moderator

New member

Super Moderator

Banned

New member

New member

Banned

New member

Banned

Banned