Ergänzung und Endlosschleife [2]

11 Jörg Kruse

Der Text-Effekt von dem odoo Script läuft in diesem Container ab:

<div class="js-odoo"></div>

Den kannst du auch als Container für die anderen Scripte verwenden. Der Klassenname "js-odoo" muss dann als Selektor beim Aufruf der Airport-Funktion angegeben werden:

$(".js-odoo").airport(["NOVEMBER", "DEZEMBER", "JANUAR"]);

also alles in einem:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> Text Effekt </title>
    <link rel="stylesheet" href="css/style.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="assets/js/jquery.airport.min.js"></script>
</head>
<body>
    <div class="box">
        <div class="js-odoo"></div>
    </div>
    <script>
    $(function() {
        $(".js-odoo").airport(["NOVEMBER", "DEZEMBER", "JANUAR"]);
    });
    </script>
</body>
</html>

Du kannst "js-odoo" auch umbenennen, musst dann aber an beiden Stellen machen, damit die Bezeichnungen übereinstimmen.

12 Sabine1 (Gast)

Hallo Jörg, danke für deine Bemühungen! Habe deinen Code verwendet und so sieht das Ganze aus:
http://nirvana.bplaced.net/index9.html
mein Ziel ist es jedoch, als Texteffekt diesen zu verwenden:
http://nirvana.bplaced.net/index8.html

13 Jörg Kruse

Dass der Effekt exakt genauso verläuft, geben die Optionen des Airport-Plugins wohl nicht her:

https://github.com/okcoker/jquery-airport#options

14 Sabine1 (Gast)

Guten Morgen Jörg, dann ist es also nicht möglich, das Beispiel http://nirvana.bplaced.net/index8.html Bzw. das Skript dazu so abzuändern, dass man beliebig viele Wörter verwenden kann und dass diese in eine Endlosschleife abgespielt werden?

15 Jörg Kruse

Das odoo.js bietet diese Optionen (wie bereits am Anfang des Threads geschrieben) von sich aus nicht an.

Ich habe mal probiert, das odoo.js mit der rekursiven Funktion aus dem anderen Thread laufen zu lassen. Dazu muss diese an einigen Stellen angepasst werden, u.a. die Textavariabel auf zwei erweitert (text_from und text_to) und das odoo Objekt nach jedem Durchlauf entfernt werden

Die index.js schaut dann so aus:

$(function() {
  var container = ".js-odoo";
  var arrTexts = [ 'NOVEMBER', 'DEZEMBER', 'JANUAR__', 'FEBRUAR_' ];
  (function recurse(counter) {
    var text_from = arrTexts[counter];
    var text_to = arrTexts[counter + 1];
    odooShuffle = odoo.default({
      el: container,
      from: text_from,
      to: text_to,
      animationDelay: 1000
    });
    delete odooShuffle;
    delete arrTexts[counter];
    arrTexts.push(text_from);
    setTimeout(function() {
      recurse(counter + 1);
    }, 4000);
  })(0);
});

In die HTML-Datei muss noch die jquery-Bibliothek eingebunden werden:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

16 Sabine1 (Gast)

Jörg, Du bist fantastisch!
Habe das Ganze nun eingebaut und so schaut's aus
http://nirvana.bplaced.net/index7.html

Vielen vielen Dank!

17 Sabine1 (Gast)

Hallo Jörg, ich habe versucht, dein Skript nachzuvollziehen und zu verstehen. Als ich meine dieses hier:

 
$(function() {
  var container = ".js-odoo";
  var arrTexts = [ 'NOVEMBER', 'DEZEMBER', 'JANUAR__', 'FEBRUAR_' ];
  (function recurse(counter) {
    var text_from = arrTexts[counter];
    var text_to = arrTexts[counter + 1];
    odooShuffle = odoo.default({
      el: container,
      from: text_from,
      to: text_to,
      animationDelay: 2000
    });
    delete odooShuffle;
    delete arrTexts[counter];
    arrTexts.push(text_from);
    setTimeout(function() {
      recurse(counter + 1);
    }, 6000);
  })(0);
});

Das Ausgangs-Skript war dieses hier:

 
odoo.default({ el:'.js-odoo', from: 'NOVEMBER', to: 'DEZEMBER', animationDelay: 1000 });

Das erste Wort odooShuffle hast du selbst definiert oder wie?

 
    odooShuffle = odoo.default({
      el: container,
      from: text_from,
      to: text_to,
      animationDelay: 2000
    });

Auf die dritte und vierte Zeile wäre ich selbst nicht gekommen. Als ich meine, dass das so möglich ist.
Nochmals vielen Dank für deine Hilfe!

18 Jörg Kruse

Das erste Wort odooShuffle hast du selbst definiert oder wie?

Ja. Die Benennung des odoo Objekts war notwendig, um es gleich anschließend unter diesem Namen wieder entfernen zu können:

    delete odooShuffle;

Ein odoo Objekt kann wohl nur einmal ablaufen, deswegen muss es bei jedem Durchlauf neu erstellt werden.

Auf die dritte und vierte Zeile wäre ich selbst nicht gekommen. Als ich meine, dass das so möglich ist.

Man muss hier Variabeln einsetzen, da sich die Wörter ja bei jedem Durchlauf ändern sollen :). Definiert sind die Variablen ja weiter oben:

    var text_from = arrTexts[counter];
    var text_to = arrTexts[counter + 1];

Also das erste und zweite Element des Textarrays

Am Ende eines Durchlaufs wird das erste Element gelöscht und hinten wieder drangehängt:

    delete arrTexts[counter];
    arrTexts.push(text_from);

19 Sabine1 (Gast)

Guten Morgen Jörg
vielen Dank für deine ausführliche Erläuterung!
Habe das nun auch verstanden. Denke ich zumindest.
Ein schönes Wochenende wünsche ich dir schon mal

... 8 Monate später ...

20 Sabine1 (Gast)

Hallo Jörg,
vor einiger Zeit hast Du mir den folgenden Texteffekte realisiert http://nirvana.bplaced.net/index7.html.
Nun habe ich geschehen, dass es für dieses Skript eine neue Version gibt (hier https://github.com/coderitual/bounty) und diese habe ich herunter geladen und versucht einzubauen. Dazu habe ich überall das Wort odoo durch bounty ersetzt, aber das ganze funktioniert leider nicht. Siehe hier: http://nirvana.bplaced.net/Texteffekt/2018/.
Dann habe ich ein paar vorherige Versionen dieses Skripts (von hier https://github.com/coderitual/bounty/releases) ausprobiert, wobei ich nur das Skript ausgetauscht habe, weil odoo wie in meinem oben genannten ersten unaufhaltsam in den Beispielen noch immer enthalten ist, aber auch hier funktioniert es nicht.
http://nirvana.bplaced.net/Texteffekt/110/
und auch diese Version funktioniert nicht.
http://nirvana.bplaced.net/Texteffekt/102/
könntest Du mir bei Gelegenheit bitte noch einmal helfen und das ganze zum laufen zu bringen?

Seite 123

nach oben weiter >