Unterschiedlicher HTML Code Mobil/Desktop

  • Betroffene Version
    WoltLab Suite 3.1

    Sehr geehrte Woltlab Community,

    ich möchte in den Templates meines Stils manche Boxen (z.B das Logo) Mobil anders anordnen als auf Desktopgeräten.

    Bisher war alles kein Problem... Ich habe beim Logo beispielweise einfach mit media querys und "display: none;" gearbeitet. Beim userPanel bin ich jetzt allerdings auf ein Problem gestoßen und habe leider noch keinen Weg gefunden dieses zu beheben.

    Das userPanel ist zweimal eingebunden, einmal im pageHeader (mobil) und einmal in der pageHeaderfacade (Desktop). Der Hintergrund dabei ist, dass der Header (Menü und Logo) sticky sein sollen, das userPanel aber nicht. Das habe ich wie oben erwähnt mit mediaquerys umgesetzt, jedoch funktioniert nur das userPanel, welches im Template weiter oben included ist. Das untere wird zwar korrekt angezeigt, kann aber bei Mobilgeräten nicht geklickt werden und bei Desktopgeräten wird man falsch weitergeleitet. Es geht also beispielsweise kein Kontrollzentrum auf sondern man wird direkt zum Profil weitergeleitet usw.

    Meine Vermutung ist, dass das irgendwie mit dem JS Code des userPanels zutun haben muss aber ich weiß leider nicht wie ich es anders einbinden kann außer das pageHeaderUser Template zweimal zu includen.... dadruch wird halt leider auch der JS Code zweimal eingebunden wodurch möglicherweise dieser Fehler hervorgerufen wird....

    Hat jemand eine Idee wie ich das umsetzen könnte? Bin für jede Hilfe sehr dankbar.

    Mein pageHeader Template sieht so aus:

    Also das Logo und das userPanel sind je nach Auflösung verschieden angeordnet.... Dargestellt wird auch alles richtig nur funktioniert das userPanel eben nicht mehr ordentlich.... in diesem Beispiel funktioniert es auf Desktopgeräten aber auf mobilen Geräten nicht (weil desktopOnly über mobileOnly steht)

    Ich hoffe es kann mir jemand helfen, vielleicht gibt es ja auch eine bessere Methode meine Vorstellung umzusetzen als mit display:none zu arbeiten...


    Danke im Vorraus.

    Mit freundlichen Grüßen,

    Max

  • Das Problem ist, dass du durch das doppelte Einbinden auch alle IDs doppelt hast. IDs dürfen aber maximal einmal auf einer Seite vorkommen. JavaScript geht davon aus, dass eine ID nur einmal vorkommt – so wie es auch der Standard vorgibt. Das kann so demnach nicht funktionieren.

    Man bekommt übrigens Menü und Logo problemlos auch so fixiert, ohne das Benutzermenü zu fixieren. Die drei Elemente lassen sich ja unabhängig voneinander ansprechen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!