• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

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

wenn die datei valdies html ist, geht auch immernoch über ein include.
Code: 
<?php include('loader.php'); ?>
Code: 
<?php
  // loader.php
  $dom = new DomDocument();
  $dom->loadHTMLFile('vertretungsplan.html');
  echo $dom->getElementsByTagName('body')->item(0)->nodeValue;
?>
Dann ist es auch valide.

Lg Kasalop

PS: Nur was ich mich noch Frage: wir waren doch schon bei einer Lösung ohne Framework. War es dir zu viel Arbeit das dir noch anzupassen? Wartest du auf einen vollständigen code, wie er dir jetzt quasi schon gegeben wurde? Kann ich iwie nicht nachvollziehen.
 
Das mit dem iFrame habe ich mal ausprobiert und festgestellt, dass man dann das div nicht mehr braucht, sondern den iFrame direkt animieren kann:
Code: 
        $(document).ready(function(){
            $('#iframe').load(function() {
              $(this).height(this.contentWindow.document.body.scrollHeight);
              var scrollamount = $(document).height() - $(window).height();
              var scrollduration = scrollamount * 10;
              var pauseduration = 3000;
              var docheight = $(this).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);
                  };
              $(this).height($(window).height()).doScroll();
          });
      });
HTML: 
   <body>
        <iframe name="content" src="deine_html_datei.html" style="position:absolute" width="1500px" height="200px" frameborder="0" scrolling="no" id="iframe" >
  </body>
 
seit wann empfehlten wir denn hier wiedre iframes. ich verstehs nicht. ich halt mich besser mal hier raus ^^

Viel Erfolg noch an den TE ;)
 
So, ich habe mal was zusammen gebastelt mit Hilfe des Codes von Sempervivum.
Ich habe anfangs allerdings etwas weggelassen um die Problematik möglichst einfach zu halten.
und zwar will ich nicht nur einen plan. sondern 2 (heute, morgen), nebeneinander haben.
so etwa wie hier (2 divs nebeneinander):

2 Divs

Hier ist aber das Problem, dass der 2. div auch weiterscrollt, wenn er eigentlich schon am ende ist, weil der andere länger ist.

ich vermute, dass es an dem code im header liegt, den ich lediglich 2 mal reinkopiert habe und nur den div, auf den es sich bezieht, geändert habe:
PHP: 
<script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script type="text/javascript">
        $(document).ready(function(){
            $('#iframe').load(function() {
              $(this).height(this.contentWindow.document.body.scrollHeight);
              var scrollamount = $(document).height() - $(window).height();
              var scrollduration = scrollamount * 10;
              var pauseduration = 3000;
              var docheight = $(this).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);
                  };
              $(this).height($(window).height()).doScroll();
          });
      });
</script>
<script type="text/javascript">
        $(document).ready(function(){
            $('#iframe2').load(function() {
              $(this).height(this.contentWindow.document.body.scrollHeight);
              var scrollamount = $(document).height() - $(window).height();
              var scrollduration = scrollamount * 10;
              var pauseduration = 3000;
              var docheight = $(this).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);
                  };
              $(this).height($(window).height()).doScroll();
          });
      });
</script>

Ich habe dann versucht, die variablen, die ich erkannt habe (scrollamount, scrollduration, pauseduration, docheight) jeweils mit einer 2 am ende zu versehen (scrollamount2 etc.), damit neue variablen entstehen. daraufhin funtkionierte das scrollen für das 2. div nicht mehr. ich nehme an, ich muss noch den Namen der Funktion ändern, kann das sein?

Vielen Dank nochmal!!
 
Wenn ich dich richtig verstehe, möchtest Du, dass sich die beiden divs unabhängig voneinander bewegen. Leider reichen meine Kenntnisse nicht aus, um das sauber zu realisieren. Ich habe es so probiert:
Code: 
    jQuery.fn.scroller = function() {
          var scrollamount = $(this).height() - $(window).height();
          var scrollduration = scrollamount * 10;
          var pauseduration = 3000;
          var docheight = $(this).height();
          doScroll = function () {
              $(this).delay(pauseduration)
                  .animate({top: -scrollamount, height: docheight}, scrollduration, 'linear')
                  .delay(pauseduration)
                  .animate({top: 0, height: $(window).height()}, scrollduration, 'linear', $(this).doScroll);

              };
          $(this).height($(window).height()).doScroll();
          };
    $(document).ready(function(){
        $('#globdiv').scroller();
        $('#globdiv2').scroller();
        });
aber dabei bekomme ich leider die Fehlermeldung, dass die Funktion doScroll undefiniert ist. Vielleicht findet jemand anders dazu eine Lösung.
 
So, ich habe es jetzt doch hinbekommen:
Code: 
    $.fn.doScroll = function(pauseduration, scrollamount, scrollduration, docheight) {
              $(this).delay(pauseduration)
                  .animate({top: -scrollamount, height: docheight}, scrollduration, 'linear')
                  .delay(pauseduration)
                  .animate({top: 0, height: $(window).height()}, scrollduration, 'linear', function(){
                      $(this).doScroll(pauseduration, scrollamount, scrollduration, docheight);
                  });
         };
    $.fn.scroller = function(){
          var scrollamount = $(this).height() - $(window).height();
          var scrollduration = scrollamount * 10;
          var pauseduration = 3000;
          var docheight = $(this).height();
          $(this).height($(window).height()).doScroll(pauseduration, scrollamount, scrollduration, docheight);
          };
    $(document).ready(function(){
        $('#globdiv').scroller();
        $('#globdiv2').scroller();
        });
Würde mich aber trotzdem interessieren, warum die erste Lösung mit der lokalen Funktion nicht funktioniert.
 
So, ich habe jetzt auch den ersten Ansatz mit der lokalen Funktion zum Laufen gebracht:
Code: 
    jQuery.fn.scroller = function() {
          var scrollamount = $(this).height() - $(window).height();
          var scrollduration = scrollamount * 10;
          var pauseduration = 3000;
          var docheight = $(this).height();
          function doScroll(obj) {
              obj.delay(pauseduration)
                  .animate({top: -scrollamount, height: docheight}, scrollduration, 'linear')
                  .delay(pauseduration)
                  .animate({top: 0, height: $(window).height()}, scrollduration, 'linear', function() {
                       doScroll(obj);
                  });

              };
          $(this).height($(window).height());
          doScroll($(this));
          };
    $(document).ready(function(){
        $('#globdiv').scroller();
        $('#globdiv2').scroller();
        });
 
Bei mir läuft jetzt alles. Ich habe noch versucht, statt des scrollens zum Ende zu springen bzw um x Pixel zu springen, wenn die Datei kürzer ist als zB 400 Pixel nach unten, dann einfach nach unten. Scrollby und scrolltobottom habe ich aber nicht richtig einbinden können. Sind das die richtigen begriffe? Wie müsste ich das denn anstellen?
 
Dein Code ist nicht empfohlener Pluginstil! Dann könnte er auch eine css klasse zur identifizieurng nutzen.

Lg Kasalop
 
Ich muss gestehen, dass ich das nicht verstehe. Die html speist sich aus einer css. Wenn ich die entsprechend einstellen kann, wäre das prima. Aber wie denn?
 
Ich verstehe nicht genau, was Du meinst, aber ich würde das Scrollen unterbinden, wenn das Dokument kleiner als die Fensterhöhe ist:
Code: 
if (docheight  > $(window).height()) doScroll($(this));
 
Ok, danke. Das hilft für den fall, dass wenig Vertretung anliegt. Wenn viel anliegt, dann scrollt sich zur zeit der plan nen Wolf. Entweder dauert es zu lange, oder man kann nichts mehr richtig lesen. Daher die frage, wie man nicht Pixel für Pixel nach unten scrollt, sondern zum Beispiel große Sprünge von 400px macht mit einer Pause von 5 Sekunden vor dem nächsten Sprung!
 
Hast Du es dir so vorgestellt?:
Code: 
    jQuery.fn.scroller = function() {
          var scrollamount = $(this).height() - $(window).height();
          var pauseduration = 3000;
          var pausescroll = 5000;
          var stepsize = 400;
          var factorduration = 10;
          var docheight = $(this).height();
          var position = 0;
          function scrollDown (obj) {
              if (position == 0) currentdelay = pauseduration; else currentdelay = pausescroll;
              if (position + stepsize  < scrollamount) {
                  position += stepsize;
                  duration = stepsize * factorduration;
                  obj.delay(currentdelay).animate({top: - position}, duration, function (){
                      scrollDown(obj);
                      })
                  } else {
                  duration = (scrollamount - position) * factorduration;
                  position = scrollamount;
                  obj.delay(currentdelay).animate({top: -position}, duration, function (){
                      scrollUp(obj);
                      });
                  }
              };
          function scrollUp (obj) {
              if (position == scrollamount) currentdelay = pauseduration; else currentdelay = pausescroll;
              if (position - stepsize  > 0) {
                  position -= stepsize;
                  duration = stepsize * factorduration;
                  obj.delay(currentdelay).animate({top: - position}, duration, function (){
                      scrollUp(obj);
                      })
                  } else {
                  duration = position * factorduration;
                  position = 0;
                  obj.delay(currentdelay).animate({top: -position}, duration, function () {
                      scrollDown(obj);
                      });
                  }
              };
          if (docheight  > $(window).height()) scrollDown($(this));
//          $(this).height($(window).height());
          };
    $(document).ready(function(){
        $('#globdiv').scroller();
        $('#globdiv2').scroller();
        });
 
Ich habe jetzt auch noch die Höhe animiert, damit die Scrollbar ruhig bleibt:
Code: 
    jQuery.fn.scroller = function() {
          var scrollamount = $(this).height() - $(window).height();
          var pauseduration = 3000;
          var pausescroll = 5000;
          var stepsize = 400;
          var factorduration = 5;
          var docheight = $(this).height();
          var position = 0;
          function scrollDown (obj) {
              if (position == 0) currentdelay = pauseduration; else currentdelay = pausescroll;
              if (position + stepsize  < scrollamount) {
                  position += stepsize;
                  duration = stepsize * factorduration;
                  obj.delay(currentdelay).animate({top: - position, height: position + $(window).height()},
                                                  duration, function (){scrollDown(obj);});
                  } else {
                  duration = (scrollamount - position) * factorduration;
                  position = scrollamount;
                  obj.delay(currentdelay).animate({top: -position, height: position + $(window).height()},
                                                   duration, function (){scrollUp(obj);});
                  }
              };
          function scrollUp (obj) {
              if (position == scrollamount) currentdelay = pauseduration; else currentdelay = pausescroll;
              if (position - stepsize  > 0) {
                  position -= stepsize;
                  duration = stepsize * factorduration;
                  obj.delay(currentdelay).animate({top: - position, height: position + $(window).height()},
                                                  duration, function (){scrollUp(obj);});
                  } else {
                  duration = position * factorduration;
                  position = 0;
                  obj.delay(currentdelay).animate({top: -position, height: position + $(window).height()},
                                                  duration, function () {scrollDown(obj);});
                  }
              };
          if (docheight  > $(window).height()) {
              $(this).height($(window).height());
              scrollDown($(this));
              };
          };
    $(document).ready(function(){
        $('#globdiv').scroller();
        $('#globdiv2').scroller();
        });
 
kkapsner schrieb:
Man könnte sogar auch Interfaces machen, aber das ist eigentlich sinnfrei, da diese ja nur Hilfskrücken für fehlende multiple Vererbung sind und man in JS wunderbar MixIns machen kann.
Zum Vergrößern anklicken....
Das stimmt so nicht. Interfaces sind nicht nur für mehrfachvererbung da. In anderen Sprachen kann man die deutlich besser nutzen.

@semper: wenns doch schon immer ein plugin sein muss... schreib doch mal vernünftigen plugincode oder pack es in eine normale funktion. momentan hast du keinen mehrwert dadurch und so schwer isses ja wohl auch nicht :roll:

Lg Kasalop
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben