Ab einer bestimmten Breite ein anderes Element laden

[x4all]

Hi zusammen,

wenn man das Browserfenster zusammenschiebt, kann man ja testen wie sich die Inhaltselemente verhalten - Stichwort responsive. Aber ist es auch möglich, ab einer bestimmten Seitenbreite bei der Desktop Version z.B. das eine Menü durch ein anderes zu tauschen? Also im Grunde ein Austausch des Inhaltselements ab einer bestimmten Browser-Fenster-Breite.

Geht das?

LG
X4all

[fivebytes]

Hallo X4all,

ich würde das mittels CSS lösen:

#navi-main {
	display:block;
}
#navi-mobile {
	display:none;
}

@media only screen and (max-width: 650px) {
#navi-main {
	display:none;
}
#navi-mobile {
	display:block;
}
}

Wobei hier eben der Container "navi-main" die normale Desktop Navigation enthält und im Container "navi-mobile" liegt die Navigation für die mobilen Ausgabegeräte(hier ab einer Fenstergrößer von 650px und kleiner).

Wenn es Dir darum geht "unnötigen" doppelten Quellcode zu vermeiden und wirklich nur eine Navigation im Quelltext erscheinen soll, fallen mir evtl. zwei Ansätze ein. Entweder könnte man das über zusätzliche Layouts für die mobilen Seiten direkt im Contao-Backend regeln und dann eben nur die jeweils entsprechenden Navigationsmodule/Scripte usw. dort einbinden oder man müsste das Ganze z.B. in ein Script auslagern, welches dann je nach Auflösung den Code auswirft. D.h. hier wären dann entsprechende Änderungen im Navigations-Template vorzunehmen, aus dem "normalen" HTML müsste ein Script werden.

Ich habe allerdings bisher eigentlich, gerade was unterschiedliche Navigationsformen angeht, immer auf CSS zurückgegriffen.

[tab]

Das Problem hatte ich kürzlich auch. Etwas wirklich elegantes und befriedigendes habe ich nicht gefunden. Ich habe es dann so gelöst, dass ich per CSS mit media query die eine Navigation ausgeblendet und die andere dafür eingeblendet habe (display:none; display:block; )

[x4all]

Das ist eine gute Idee mit dem Media Query :-) Zwar wäre mir eine Variante mit einem Inserttag am liebsten, aber gut, dann geht man diesen Weg :-)

[dackelchen]

Ws gibt eine Erweiterung, komme jetzt nicht auf den Namen, die Inhaltslement in Abhängigkeit, davon lädt, ob Du das Desktop oder mobiole Layout lädst, ist zqar nicht genau das, was Du beschreibst, aber vl. kannst Du mit dem Tipp trotzdem was anfangen.

Wenn es Dir um das Menü geht kannst Du auch einfach zwei Menüs machen, wobei jeweils nur das eine im Layout ist und geladen wird.

[kos]

Ws gibt eine Erweiterung, ... die Inhaltslement in Abhängigkeit, davon lädt, ob Du das Desktop oder mobiole Layout lädst...

Hallo Edgar,

könnte es sich dabei um die Erweiterung contentSelection handeln?

[dackelchen]

So, fix mal naxhgeschaut. mobilecontent, scheint aber nicht mehr weiternetwickelt zu werden.

[zinky]

Diese Frage habe ich mir auch schon des Öfteren gestellt. Ich habe aber bisher keine zufriedenstellende Antwort gefunden. Tröstlicherweise ist das Problem auch ohne CMS schon nicht so einfach zu lösen. Die Integration in ein CMS ist da nur eine weitere Hürde

Ich habe gute Erfahrungen mit https://github.com/Paratron/contao-m...ile-visibility gemacht, was natürlich ebenso wie die von dackelchen genannte Extension mobilecontent nur einen Teil des Problems löst, weil zwischen i) serverseitig und ii) nur zwischen mobile und desktop unterschieden wird, aber nicht clientseitig zwischen genügend und unzureichend viel Platz für ein Element.

Eine Überlegung wäre vielleicht, einem Element in einem data-Attribut sowohl Breakpoints als auch Inhaltselement-IDs mitzugeben. Ein Javascript könnte dann bei Resize schauen, welches CE geladen werden sollte und das z.B. über die Ajax-Extension von andreas.schempp mit der übergebenen ID nachladen und ersetzen. Alternativ vielleicht eine Liste mit Templates übergeben und das Element/Modul in diesem Template gerendert per Ajax anfordern und ersetzen.

Das sind meine Überlegungen und ich grübel nachwievor drüber, ob ich nicht doch noch eine Erweiterung dafür entwickle

[stefan-at-work]

für Menuepunkte, Artikel und Inhaltselemente gibt es noch mobile_extended

[zinky]

Super guter Tipp, die schaue ich mir später mal an. Danke dir!