Delphi-PRAXiS

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:

Woyzeck 7. Okt 2009 19:26
Re: Html-Seite automatisch scrollen (JavaScript)
 
Zitat:
Zitat von Lannes
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:
gute Idee...

Zitat:
<script language='JavaScript' type='text/javascript'>
var Step = 1;
function lauf() {
var y = 0;
if (window.pageYOffset){
y=window.pageYOffset;
} else if (document.body && document.body.scrollTop){
y=document.body.scrollTop;
}
window.scrollBy(0, Step);
if (y == window.pageYOffset) {
window.setTimeout('window.scrollTo(0,0);lauf();',2 000);
}
else if (y==document.body.scrollTop) {
window.setTimeout('window.scrollTo(0,0);lauf();',2 000);
}
else{
window.setTimeout('lauf()', 50);
}
}
function start() {
window.setTimeout('lauf()', 50);
}
</script>
Nochmal vielen Dank an alle Helfer :thumb:

SilverXX 30. Mär 2011 14:42
AW: Html-Seite automatisch scrollen (JavaScript)
 
Hey... bin neu hier und auf der Suche nach einem ähnlichen Code...

Kann es sein das der letzte Stand von diesem Code nicht mehr funktioniert ? Hab es mal getestet, in meinem Firefox Version 3.6 bewegt sich allerdings nichts... :cyclops:


Und wie muss der Code aussehen, wenn ich eine HTML Seite von oben nach unten scrollen lassen will, dann wieder nach oben, von links nacht rechts und von rechts nach links ?


Danke im Vorraus für jede Hilfe...:thumb:

rollstuhlfahrer 30. Mär 2011 14:47
AW: Html-Seite automatisch scrollen (JavaScript)
 
Den benutze ich für Hoch/Runter für Anker:
Code:
//var scrollSteps = 200
var scrollSteps = 50;
var timer="";

function scrollWin(anchorID) {
   if (navigator.userAgent.indexOf("Opera") == -1){ // not Opera
      var s,d;
      var test1 = document.body.scrollHeight;
      var test2 = document.body.offsetHeight
      if (test1 > test2) // all but Explorer Mac
      {
         s = document.body.scrollWidth;
         d = document.body.scrollHeight;
      }
      else // Explorer Mac;
      {    //would also work in Explorer 6 Strict, Mozilla and Safari
         s = document.body.offsetWidth;
         d = document.body.offsetHeight;
      }

      var a,b;
      if (self.innerHeight) // all except Explorer
      {
         a = self.innerWidth;
         b = self.innerHeight;
      }
      else if (document.documentElement && document.documentElement.clientHeight)
         // Explorer 6 Strict Mode
      {
         a = document.documentElement.clientWidth;
         b = document.documentElement.clientHeight;
      }
      else if (document.body) // other Explorers
      {
         a = document.body.clientWidth;
         b = document.body.clientHeight;
      }


      var y;
      if (self.pageYOffset) // all except Explorer
      {
         y = self.pageYOffset;
      }
      else if (document.documentElement && document.documentElement.scrollTop)
         {   // Explorer 6 Strict
            y = document.documentElement.scrollTop;
         }
         else if (document.body) // all other Explorers
         {
            y = document.body.scrollTop;
         }

      var id = anchorID.substring(anchorID.indexOf("#")+1,anchorID.length)
      clearTimeout(timer)

      if (y <= document.getElementById(id).offsetTop-scrollSteps)
      {   // scroll down
         window.scrollBy(0,scrollSteps);
         timer=setTimeout("scrollWin('"+id+"')",10);

         if(y > (d-b)-scrollSteps){
            clearTimeout(timer);
            y = d-b;
         }

      }
      else
      {
         if(y >= document.getElementById(id).offsetTop+scrollSteps)
         {   // scroll up
            window.scrollBy(0,-scrollSteps)
            timer=setTimeout("scrollWin('"+id+"')",10)
         }
         else
         {   // scroll the last bit (smaller than scrollSteps)
            window.scrollBy(0, document.getElementById(id).offsetTop- y);
            clearTimeout(timer)
            y = document.getElementById(id).offsetTop
         }
      }
   return false;
   }
return true;
}
Das kann man jetzt noch für Rechts/Links erweitern. Aber wie man hier sieht: Opera ist außen vor.

Bernhard

ADD:

a) Herzlich willkommen in der DP

b) Auch wenn ich jetzt schon geantwortet habe: Lieber nen neuen Thread aufmachen.

Phoenix 30. Mär 2011 14:48
AW: Html-Seite automatisch scrollen (JavaScript)
 
Gibt da ein cooles jQuery Plugin für: http://plugins.jquery.com/project/ScrollTo

SilverXX 30. Mär 2011 14:59
AW: Html-Seite automatisch scrollen (JavaScript)
 
Wow... hier bekommst man ja richtig schnell geantwortet...
Also habe mir jetzt diese HTML Datei angelegt, aber wenn ich diese aufrufe, bewegt sich nichts :(

Code:
<html>
<body>
<head>
<script type="text/javascript">

//var scrollSteps = 200
var scrollSteps = 50;
var timer="";

function scrollWin(anchorID) {
   if (navigator.userAgent.indexOf("Opera") == -1){ // not Opera
      var s,d;
      var test1 = document.body.scrollHeight;
      var test2 = document.body.offsetHeight
      if (test1 > test2) // all but Explorer Mac
      {
         s = document.body.scrollWidth;
         d = document.body.scrollHeight;
      }
      else // Explorer Mac;
      {    //would also work in Explorer 6 Strict, Mozilla and Safari
         s = document.body.offsetWidth;
         d = document.body.offsetHeight;
      }

      var a,b;
      if (self.innerHeight) // all except Explorer
      {
         a = self.innerWidth;
         b = self.innerHeight;
      }
      else if (document.documentElement && document.documentElement.clientHeight)
         // Explorer 6 Strict Mode
      {
         a = document.documentElement.clientWidth;
         b = document.documentElement.clientHeight;
      }
      else if (document.body) // other Explorers
      {
         a = document.body.clientWidth;
         b = document.body.clientHeight;
      }


      var y;
      if (self.pageYOffset) // all except Explorer
      {
         y = self.pageYOffset;
      }
      else if (document.documentElement && document.documentElement.scrollTop)
         {   // Explorer 6 Strict
            y = document.documentElement.scrollTop;
         }
         else if (document.body) // all other Explorers
         {
            y = document.body.scrollTop;
         }

      var id = anchorID.substring(anchorID.indexOf("#")+1,anchorID.length)
      clearTimeout(timer)

      if (y <= document.getElementById(id).offsetTop-scrollSteps)
      {   // scroll down
         window.scrollBy(0,scrollSteps);
         timer=setTimeout("scrollWin('"+id+"')",10);

         if(y > (d-b)-scrollSteps){
            clearTimeout(timer);
            y = d-b;
         }

      }
      else
      {
         if(y >= document.getElementById(id).offsetTop+scrollSteps)
         {   // scroll up
            window.scrollBy(0,-scrollSteps)
            timer=setTimeout("scrollWin('"+id+"')",10)
         }
         else
         {   // scroll the last bit (smaller than scrollSteps)
            window.scrollBy(0, document.getElementById(id).offsetTop- y);
            clearTimeout(timer)
            y = document.getElementById(id).offsetTop
         }
      }
   return false;
   }
return true;
} 
</script>
</head>

<div id="datacontainer" style="position:absolute;left:1px;top:10px;width:100%" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache">

<!-- SCROLLER CONTENT -->

<td><iframe name="teset" id="test" scrolling="no" src="text.html" width="720" height="240" frameborder="0">Sorry, your browser doesn't support iframes.</iframe></td>

<!-- SCROLLER CONTENT ENDE -->

</div>
</body>
</html>

rollstuhlfahrer 30. Mär 2011 16:36
AW: Html-Seite automatisch scrollen (JavaScript)
 
Da ich jetzt gerade ein Beispiel parat habe, verweise ich ganz einfach auf dieses. Und zwar gibts das hier.

Bernhard

SilverXX 30. Mär 2011 17:51
AW: Html-Seite automatisch scrollen (JavaScript)
 
Hm, mit dem beispiel kann ich leider nicht so viel anfangen.

Also ich hätte gerne das die Seite automatisch in dem Frame scrollt/rotiert...
Am besten zuerst von oben nach unten und zurück und danach von Links nach rechts und wieder zurück.

(das ganze kann auch zufällig sein)

Danke im voraus! :roll:

Phoenix 31. Mär 2011 09:44
AW: Html-Seite automatisch scrollen (JavaScript)
 
Meinst Du sowas?

SilverXX 31. Mär 2011 13:39
AW: Html-Seite automatisch scrollen (JavaScript)
 
Jaa kann man so sagen, allerdings sollte das ganze automatisch verlaufen so wie dieses Beispiel hier: http://www.losegauner.de/inad.html

Ob man eine HTML Datei vom Server oder eine komplette Webseite rotieren lassen kann ist egal, kann man ja einstellen wie man will.

SilverXX 3. Apr 2011 12:30
AW: Html-Seite automatisch scrollen (JavaScript)
 
Hat keiner mehr eine Idee ???:pale:

Phoenix 3. Apr 2011 12:32
AW: Html-Seite automatisch scrollen (JavaScript)
 
Wieso noch eine Idee? Das Script was ich verlinkt habe kann doch offensichtlich alles was Du brauchst.

SilverXX 4. Apr 2011 22:02
AW: Html-Seite automatisch scrollen (JavaScript)
 
Hm... wie lautet denn der genaue Code den ich in eine HTML Seite einfügen kann, damit der Frame zuerst von oben nach unten und zurück und danach von Links nach rechts und wieder zurück scrollt ?

Sorry... ich kann leider kein Java Script :(

Phoenix 5. Apr 2011 06:41
AW: Html-Seite automatisch scrollen (JavaScript)
 
Zitat:
Zitat von SilverXX (Beitrag 1093019)
Hm... wie lautet denn der genaue Code den ich in eine HTML Seite einfügen kann, damit der Frame zuerst von oben nach unten und zurück und danach von Links nach rechts und wieder zurück scrollt ?
Kommt auf die Seite drauf an. Und darauf wieviel Du bereit bist für fertigen Code zu zahlen. Wir leisten hier Hilfe zur Selbsthilfe, aber keine fertigen Codeblöcke für Leute die keine Eigeninitiative zeigen.

Zitat:
Zitat von SilverXX (Beitrag 1093019)
Sorry... ich kann leider kein Java Script :(
Dann wäre es an der Zeit, sich ein wenig damit zu beschäftigen. So schwierig ist das nicht. Kostet nicht länger als 2 Stunden wenn man wirklich keine Ahnung hat und ein klein bisschen Ehrgeiz hat.


Alle Zeitangaben in WEZ +1. Es ist jetzt 19:31 Uhr.

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