Suche Idee / Vorschlag - Homepage Besucher. Zeilenposition Speichern

Hallo,

ich bin mal wieder auf der Suche nach einer/m Idee / Vorschlag wie man es umsetzen könnte.

Es geht darum das es einen sehr Langen Fließtext gibt ( min. 20 Seiten ). Ich möchte gerne wenn jemand die Seite Besucht und er den Text ließt (Zeilen) man über ein Cookie oder JavaScript man die Position für die Person beim nächsten öffnen der Seite gespeichert ist, wie ein Marker. Man möchte es der Person ja so einfach wie möglich machen.

Inhaltsverzeichnis welches z.B. die Farbe ändert wenn man an einem bestimmten Kapitel ist. ( hier wäre das Problem nur falls die Person z.B. ein Bild auf der Seite sucht und dann zurück zu einer Position geht um den Text von oben weiter zu lesen dann wäre das Kapitel ja schon eingefärbt als gelesen.)

Ich hoffe ich konnte einmal beschreiben um was es geht. Ob es sowas überhaupt gibt habe ich keine Ahnung. Aber das hier ist ja eine Große Community die schon viel umgesetzt hat.

Ich wünsche allen ein schönes Wochenende, und bedanke mich schon einmal für die Ideen/Vorschläge.

Zitat:

---

Zitat von Speedygonzalez

A: Es geht darum das es einen sehr Langen Fließtext gibt ( min. 20 Seiten ). Ich möchte gerne wenn jemand die Seite Besucht und er den Text ließt (Zeilen) man über ein Cookie oder JavaScript man die Position für die Person beim nächsten öffnen der Seite gespeichert ist, wie ein Marker. Man möchte es der Person ja so einfach wie möglich machen.

B: Inhaltsverzeichnis welches z.B. die Farbe ändert wenn man an einem bestimmten Kapitel ist. ( hier wäre das Problem nur falls die Person z.B. ein Bild auf der Seite sucht und dann zurück zu einer Position geht um den Text von oben weiter zu lesen dann wäre das Kapitel ja schon eingefärbt als gelesen.)

---

zu A: per JavaScript kann die Position im Speicher des Users abgelegt werden und bei einem Reload der Seite geht man per JS wieder da hin - die Sache hat nix mit Contao zu tun

zu B: das Gleiche wie bei A ... man kann den Status "gelesen" z. B. erst setzen, wenn eine bestimmte Scrolltiefe erreicht ist oder man macht einen separaten Button "gelesen"

Es gibt vielfältige Möglichkeiten, Daten per Javascript im Browser abzulegen.
https://www.mediaevent.de/javascript/web-storage.html

Das funktioniert ohne Cookies (bei denen man ja auch zustimmen muss). Die Daten werden lokal abgelegt und sind grundsätzlich ersteinmal nicht vom Server erreichbar.

Passend für dich wäre hier ggf. der localstorage:
https://www.mediaevent.de/javascript/local-storage.html
Heir können recht umfangreich Daten abgelegt werden. Diese sind solange gespeichert, wie der der Nutzer die Daten über die Einstellungen im Browser nicht löscht.

Ist nicht wesentlich komplizierter als mit Cookies zu arbeiten und spart die Cookiezustimmung.

Sowas als PlugIn Erweiterung für Contao gibt es nicht oder ?

Ich schau mir das mal an. Vielen dank euch beiden.

Zitat:

---

Zitat von Speedygonzalez

Sowas als PlugIn Erweiterung für Contao gibt es nicht oder ?

---

mir nicht bekannt... ist auch recht speziell :cool:

aber wie geschrieben: das hat primär nichts mit Contao zu tun und somit kannst Du die allgemeinen JS-Snippets abgrasen

So vielleicht möchte jemand ja auch sowas haben:



javacript Datei ablegen: files/xxxx/script_leser.js
Backend/Einstellungen/Sicherheit und Script erlauben Wert SRC auch Freigeben.
z.B. HTML Modul Anlegen.


Javascript:

HTML-Code:

---

document.addEventListener("DOMContentLoaded", function () {
    // Elemente aus dem HTML holen
    const textContainer = document.getElementById("text-container");
    const saveButton = document.getElementById("save-button");
    const saveStatus = document.getElementById("save-status");

    // Text, den der Benutzer lesen kann (Hier als Beispieltext)
    const textToRead = `
        Dies ist ein Beispieltext.
        Er kann beliebig lang sein, und der Benutzer soll die Möglichkeit haben,
        die Position im Text zu speichern und später von dort aus weiterzulesen.`;

            // Die gespeicherte Position im Local Storage abrufen (falls vorhanden)
            const savedPosition = localStorage.getItem("textPosition");

            // Funktion, um den Text an einer bestimmten Position anzuzeigen
            function displayText(position) {
                textContainer.innerHTML = textToRead.slice(position);
            }

            // Wenn eine gespeicherte Position vorhanden ist, Text von dieser Position anzeigen
            if (savedPosition) {
                // Text von der gespeicherten Position anzeigen
                displayText(savedPosition);
                // Scroll-Position setzen
                textContainer.scrollTop = savedPosition;
            } else {
                // Andernfalls den gesamten Text anzeigen
                textContainer.innerHTML = textToRead;
            }

            // Event-Handler für das Speichern der Position
            saveButton.addEventListener("click", function () {
            // Aktuelle Scroll-Position im Text speichern
                localStorage.setItem("textPosition", textContainer.scrollTop);
            // Feedback-Meldung anzeigen
            saveStatus.textContent = "Position gespeichert!";
            saveStatus.style.display = "block";
            // Meldung nach ein paar Sekunden ausblenden
                setTimeout(function () {
                    saveStatus.style.display = "none";
                }, 3000); // Hier die Anzeigedauer in Millisekunden anpassen
            });
        });

---

2 x Modul HTML ( Einmal Button Einmal Leser )

HTML-Code:

---

<div id="text-container" class="text-container1">
    <!-- Hier wird der Fließtext angezeigt -->
</div>

---

HTML-Code:

---

<button id="save-button">Position speichern</button>
<div id="save-status" style="display: none;"></div>
<script src="files/xxx/script_leser.js"></script>

---

CSS

HTML-Code:

---

.text-container1 {
    width: 600px; /* Breite des Containers, nach Bedarf ändern */
    height: 800px; /* Feste Höhe der Scrollleiste */
    overflow-y: scroll; /* Vertikale Scrollleiste aktivieren */
    border: 1px solid #000; /* Optional: Rand für den Container hinzufügen */
    margin-top: 40px; /* Platz oben hinzufügen */
}

.text-container1 p {
    padding: 10px; /* Optional: Innenabstand für den Text festlegen */
}

---

So vielleicht konnte ich ja auch mal jemanden helfen. :)

Und nochmals dank an die beiden für die Super Unterstützung.



FRAGE: wenn ich es im Modul Speichere brauch ich dann die Sicherheitseinstellung auch ?

Leider Funktioniert es noch nicht so wie es soll. Sobald ich den Fehler gefunden habe werde ich es hier ändern. Er will einfach nicht die Position schreiben. Als ob er die Zeile nicht lesen kann.

Wenn ich per Hand das Value schreibe klappt alles.


mhhhh

wenn es einen Link zu der Seite gäbe, könnte man mal gucken... aber so...:rolleyes:

Ich bin schon etwas weiter. Hier erstmal die Demo Seite. https://dh.netspeedy.de/leser.html


Wenn ich ScrollTOP nutze schreibt er einfach nicht den Wert. Bei ScrollY hat er es mal gemacht aber dann wurde beim nächsten Seitenaufruf nicht an die Stelle gesprungen trotz des Wertes. Ist wohl doch nicht so einfach wenn man Null Plan von Java hat :)

HAHAHAHAAHAHA

unglaublich jetzt habe ich es nochmals mit ScrollTOP gemacht und es klappt.
Ich verstehe also nicht warum es gestern 2 Std. nicht geklappt hat. Und jetzt genau nach meinem Beitrag als mir eingefallen ist stell mal wieder auf TOP um geht es. :eek::eek:

Code ändere ich oben um damit er passt.

Das habe ich erst heute gemacht.
Vielleicht ist es auch wichtig ein CSS für die Objekte zu setzen.

prima! ... Du arbeitest übrigens mit JavaScript :cool:

Kleine Anmerkung: schön wäre ein deutlicheres Feedback bei dem Button - z. B. Icon oder anderer Text

Du meinst das die Person weis das es gespeichert ist ?

1. Schritt war, es überhaupt hinzubekommen. Der Feinschliff kommt ja noch.

Und ja stimmt Java ist nochmal was anderes ^^



ERLEDIGT! Nun mit Text ( Packe ich auch oben in den Code )

Falls noch mehr Ideen dazu kommen nehme ich die gerne an. Denn so einen integrierten eReader kann man doch sicher noch das ein oder andere mal wo anders gebrauchen.

Eine frage habe ich jetzt aber doch noch.

Das alles Automatisch hinzubekommen wäre auch möglich ? Ohne das man den Button klicken muss.

Frage selber beantwortet ja es muss gehen. Wie werde ich auch noch herausfinden und es dann oben ergänzen.

Zitat:

---

Zitat von Speedygonzalez

Du meinst das die Person weis das es gespeichert ist?

---

JA!

PS: vor Satzzeichenende kommt kein Leerzeichen - auch nicht bei "?"

Zitat:

---

Zitat von Speedygonzalez

Eine frage habe ich jetzt aber doch noch.

Das alles Automatisch hinzubekommen wäre auch möglich ? Ohne das man den Button klicken muss.

Frage selber beantwortet[:] ja es muss gehen. Wie[,] werde ich auch noch herausfinden und es dann oben ergänzen.

---

siehe https://developer.mozilla.org/en-US/...t/scroll_event