Fetch Problem mit Sidebar Toggle (DOM, template) - Druckversion +- Javascript-forum (https://javascript-forum.de) +-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4) +--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6) +--- Thema: Fetch Problem mit Sidebar Toggle (DOM, template) (/showthread.php?tid=2779) |
Fetch Problem mit Sidebar Toggle (DOM, template) - tiger5nrg - 03.03.2024 Hallo zusammen, ich arbeite derzeit an einer Hobby-Website und versuche, eine Sidebar mit einem Toggle-Button zu implementieren. Leider habe ich Schwierigkeiten mit der Funktionalität des Toggles und hoffe, dass mir hier jemand weiterhelfen kann. Das Problem besteht darin, dass die Sidebar nicht wie erwartet sichtbar wird, wenn der Toggle-Button geklickt wird. Die Sidebar sollte erscheinen, wenn der Button geklickt wird, und verschwinden, wenn er erneut geklickt, bzw. die Seite gescrollt wird. Zusätzlich sollte die Sidebar automatisch erscheinen, wenn die Bildschirmbreite größer als 590 Pixel ist, und verschwinden, wenn sie kleiner als 590 Pixel ist. Eigentlich funktioniert alles - bis auf die Klick-Aktivierung auf den kleineren Viewports. Es ist zu Haare ausreißen - Ich habe schon alles mögliche ausprobiert. 1. Ich habe sicherzustellen versucht, dass das JavaScript erst ausgeführt wird, nachdem der Inhalt der Sidebar geladen wurde. Dafür habe ich die Funktion initializeSidebarToggle() in das then-Block der Fetch-Anfrage platziert, um sicherzustellen, dass sie erst ausgeführt wird, wenn der Sidebar-Inhalt geladen ist. 2. Ich habe auch überprüft, ob die Event-Listener ordnungsgemäß hinzugefügt werden, und ob die Bedingungen in den Funktionen handleResize() und handleScroll() korrekt sind, um die Sidebar je nach Bildschirmbreite ein- und auszublenden. Leider konnte ich das Problem trotz dieser Versuche nicht lösen. Es scheint, als ob der Toggle-Button nicht richtig mit der Sidebar verknüpft ist oder dass es ein Problem mit der Sichtbarkeit der Sidebar gibt. Die Konsole im Browser zeigt "active" richtig an bei einem Klick - nur ändert sich optisch an der Seite nichts, also die Sidebar wird nicht sichtbar. Auch logs werden richtig angezeigt, wenn Ich einen einfüge. Könnte es da ein Clash mit CSS: Code: .sidebar { oder den breakpoints geben? Code: @media screen and (min-width: 590px){ Die sidebar wird jeweils auf den html Seiten als template geladen: <div id="sidebar"></div> Die Reihenfolge der geladenen JS Dateien: <!--================ MAIN JS ================--> <script src="assets/js/main.js"></script> <script src="assets/js/template.js"></script> <script src="assets/js/sidebar.js"></script> Hier ist der relevante JavaScript-Code (sidebar.js), den ich derzeit verwende: Code: function initializeSidebarToggle() { Ich würde mich sehr über Unterstützung bei der Lösung dieses Problems freuen. Vielen Dank im Voraus für eure Hilfe! RE: Fetch Problem mit Sidebar Toggle (DOM, template) - Sempervivum - 03.03.2024 Guten Abend, leider postest Du nur eine Zeile des HTML. Wichtig für das Problem ist jedoch auch, wo der Button für das Toggeln der Sidebar angeordnet ist. Dies: "Das Problem besteht darin, dass die Sidebar nicht wie erwartet sichtbar wird, wenn der Toggle-Button geklickt wird." deutet darauf hin, dass er außerhalb der Sidebar liegt? RE: Fetch Problem mit Sidebar Toggle (DOM, template) - tiger5nrg - 03.03.2024 Achso klar ohne sidebar.html wird es nicht gehen . Wurde wie gesagt als template angelegt. Code: <!DOCTYPE html> RE: Fetch Problem mit Sidebar Toggle (DOM, template) - Sempervivum - 03.03.2024 Da sehe ich jetzt drei Probleme: 1. Den Button für das Toggeln bekomme ich nicht zu Gesicht weil er sich innerhalb der Sidebar befindet und die ist bei schmalem Viewport zunächst unsichtbar. 2. Zu dem nav.sidebar#sidebar muss es einen Container geben, in den das HTML hinein geladen wird. Dieser muss eine andere ID haben, z. B. sidebar-cont. 3. Wenn Du die Sidebar so lädst und das geladene HTML in den Container einträgst, darf dieses HTML kein Grundgerüst enthalten, denn dieses wird ja auch in den Container eingetragen, so dass es am Ende doppelt ist. Wenn ich den Button aus dem sidebar-HTML heraus ziehe und auch die beiden anderen Maßnahmen umsetze, funktioniert zumindest das Ein- und Ausgleiten. Mein HTML zum Testen: Code: <body> RE: Fetch Problem mit Sidebar Toggle (DOM, template) - Sempervivum - 05.03.2024 Gelöscht, da im falschen Thread gepostet. RE: Fetch Problem mit Sidebar Toggle (DOM, template) - tiger5nrg - 18.03.2024 Ich verstehe nicht warum das ein Problem darstellt. In meiner bisherigen Aufstellung funktioniert das Ein- u. Ausgleiten bei Änderung des viewports perfekt und auch wird der Toggle korrekt dargestellt, wenn Ich mich dann im "mobile-viewport" befinde. Das Problem ist dass Ich das Ein- u. Ausgleiten nicht im "mobile-viewport" mit einem Klick durchführen kann. Beim untersuchen im Browser sehe Ich das die Sidebar auf #active geschaltet wird sobald Ich den Toggle klicke, aber optisch passiert einfach nichts. Nichts desto trotz habe Ich dein Vorschlag einmal ausprobiert - mit der Folge, dass das gleiche Problem vorherrscht (mit verschobenem Toggle). In meiner ersten Version hatte Ich keinen Fetch und da hat die Sidebar sahnemäßig funktioniert: Code: document.addEventListener('DOMContentLoaded', function () { Es ist zum durchdrehen, da Ich schon seit Wochen nicht weiter komme RE: Fetch Problem mit Sidebar Toggle (DOM, template) - Sempervivum - 18.03.2024 Poste am besten mal die URL der fraglichen Seite. Möglicher Weise verhält sich mein Testaufbau anders als diese. RE: Fetch Problem mit Sidebar Toggle (DOM, template) - tiger5nrg - 19.03.2024 jetzt endlich funktioniert. Es haben einfach nur ein paar styles in CSS gefehlt. .sidebar-toggle { display: none; } @media (min-width: 590px) { .sidebar { transform: translateX(0); } .sidebar-toggle { display: none; } } @media (max-width: 590px) { .sidebar { transform: translateX(-100%); } .sidebar.active { transform: translateX(0) ; } .sidebar-toggle { display: block; } } |