Delphi-PRAXiS
Seite 1 von 3  1 23      

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   Html-Seite automatisch scrollen (JavaScript) (https://www.delphipraxis.net/140202-html-seite-automatisch-scrollen-javascript.html)

Woyzeck 13. Sep 2009 15:27


Html-Seite automatisch scrollen (JavaScript)
 
Hallo zusammen,

ich habe eine HTML-Seite und möchte, dass diese langsam nach unten scrollt und wenn sie den unteren Rand der Seite erreicht hat, wieder nach oben springt und erneut nach unten scrollt.

Zitat:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function lauf() {
window.scrollBy(0, 10);
window.setTimeout("lauf()", 1000);
}
</script>

</head>
<body onLoad="lauf();">
Das habe ich beim Suchen im Internet gefunden. Funktioniert an sich ganz gut, nur fehlt eben, dass die Seite wieder zum Anfang springt.
Kenne mich mit Javascript so gut wie nicht aus, also brauche ich hier dringend eure Hilfe :)

Im Voraus vielen Dank

Woyzeck

MaToBe 13. Sep 2009 18:42

Re: Html-Seite automatisch scrollen (JavaScript)
 
Ich bin mir nicht sicher, aber ich glaube das muss man mit "Ankern" lösen ?!?

;)

Lannes 13. Sep 2009 23:16

Re: Html-Seite automatisch scrollen (JavaScript)
 
Hallo,

mit window.pageYOffset kannst Du den Stand der Dinge/die aktuelle Position ermitteln.
Ist der untere Rand erreicht ändert sich window.pageYOffset nicht mehr, dann wird es Zeit mit einem negativen Wert noch oben zu scrollen:
Code:
<script language="JavaScript" type="text/javascript">
var Step = 500;
function lauf() { 
  var y = window.pageYOffset;
  window.scrollBy(0, Step);
  if (y == window.pageYOffset) {
    Step = (Step * -1);
    }
  window.setTimeout("lauf()", 1000);
  }
</script>
//Edit: mit window.scrollTo(0, 0); kannst Du direkt zum Anfang springen

Woyzeck 14. Sep 2009 18:12

Re: Html-Seite automatisch scrollen (JavaScript)
 
Cool, das funktioniert ja blendend.

Zitat:

<script language="JavaScript" type="text/javascript">
var Step = 50;
function lauf() {
var y = window.pageYOffset;
window.scrollBy(0, Step);
if (y == window.pageYOffset) {
window.scrollTo(0,0);
}
window.setTimeout("lauf()", 5000);
}
</script>
Nur eins störte an dem code:
Und zwar startet die Seite jetzt immer schon 50 Px unterhalb des oberen Randes. Dabei soll der Anfang beim Aufruf der Seite komplett gesehen werden.

Das habe ich folgendermaßen gelöst (bestimmt nicht der optimale Programmierstil, aber es funktioniert :-) ):

Zitat:

<head>

<script language="JavaScript" type="text/javascript">
var Step = 50;
function lauf() {
var y = window.pageYOffset;
window.scrollBy(0, Step);
if (y == window.pageYOffset) {
window.scrollTo(0,0);
}
window.setTimeout("lauf()", 5000);
}
function start() {
window.setTimeout("lauf()", 5000);
}
</script>
</head>

<body onLoad="start()">
Also, danke für die Hilfe :-)

Gruß

Woyzeck

Woyzeck 5. Okt 2009 18:13

Re: Html-Seite automatisch scrollen (JavaScript)
 
Hallo zusammen,

gibt wieder ein neues Problem. Und zwar hab ich das ganze jetzt so eingestellt, dass es mir optimal gefällt.
Jetzt habe ich aber leider feststellen müssen, dass das ganze nur im firefox funktioniert und im Internet-Explorer nichts scrollt.
Ich hoffe ihr könnt mir da weiterhelfen, denn es ist unbedingt nötig, dass der Internet-Explorer das macht.

Zitat:

<script language='JavaScript' type='text/javascript'>
var Step = 1;
function lauf() {
var y = window.pageYOffset;
window.scrollBy(0, Step);
if (y == window.pageYOffset) {
window.setTimeout('window.scrollTo(0,0);lauf();',2 000);
}
else{
window.setTimeout('lauf()', 50);
}
}
function start() {
window.setTimeout('lauf()', 50);
}
</script>
Zur Erklärung:
Er soll mit der angegebenen Geschwindigkeit bis unten scrollen, dort ca. 2 Sekunden verweilen, dann wieder nach oben springen und erneut anfangen zu scrollen.

Im Voraus vielen Dank,

Woyzeck

Lannes 6. Okt 2009 15:15

Re: Html-Seite automatisch scrollen (JavaScript)
 
Hallo,

der IE hat wohl Probleme mit window.pageYOffset
SELFHML

Woyzeck 6. Okt 2009 16:16

Re: Html-Seite automatisch scrollen (JavaScript)
 
Vielen Dank schon einmal für deine Antwort. So ganz ist mir das aber noch nicht klar geworden.

Kann mir einmal jemand erklären, was mit folgender Bedingung abgefragt wird:
Zitat:

else if (document.body && document.body.scrollTop)
Und wieso funktioniert eigentlich folgender Teil (zumindest im Firefox):
Zitat:

var y = window.pageYOffset;
window.scrollBy(0, Step);
if (y == window.pageYOffset)
Ist pageYOffset in einem Fall die aktuelle Position und in einem anderen das Ende der Seite?

Im Voraus vielen Dank

Woyzeck

Lannes 6. Okt 2009 23:33

Re: Html-Seite automatisch scrollen (JavaScript)
 
Hallo,


if (document.body && document.body.scrollTop) ergibt True wenn der aktuelle Browser der IE ist. Also der IE kann mit document.body und document.body.scrollTop etwas anfangen, mit window.pageYOffset eben nicht.

Code:
  if (window.pageYOffset) {
    y = window.pageYOffset;
  } else if (document.body && document.body.scrollTop) {
    y = document.body.scrollTop;
In Pseudocode übersetzt:
wenn der Browser window.pageYOffset kennt
--> nutze window.pageYOffset
sonst wenn der Browser document.body und document.body.scrollTop kennt
--> nutze document.body.scrollTop


Zitat:

Zitat von SELFHTML
Diese Funktion ermittelt mit pageYOffset bzw. im Internet Explorer mit document.body.scrollTop zunächst die vertikale Position innerhalb der Seite.


Woyzeck 7. Okt 2009 14:51

Re: Html-Seite automatisch scrollen (JavaScript)
 
ok, ich glaube jetzt habe ich das zumindest verstanden.

und es funktioniert jetzt auch... :)

vielen Dank, ihr seid die Besten :bounce1:

Lannes 7. Okt 2009 15:31

Re: Html-Seite automatisch scrollen (JavaScript)
 
Hallo,
Zitat:

Zitat von Woyzeck
...und es funktioniert jetzt auch... :)

dann wäre es doch prima wenn im letzten Beitrag dieses Topics der funktionierende Codezu finden wäre :roll:


Alle Zeitangaben in WEZ +1. Es ist jetzt 05:37 Uhr.
Seite 1 von 3  1 23      

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz